Visual Basic/יסודות השימוש בשפה/תכונות המשנות עיצוב של פקד

בפרק זה, ניצור תוכנה המכילה תווית עם טקסט. נוסיף לטופס מספר כפתורים ופקדים שבאמצעותם יכול המשתמש לשנות תכונות שונות של עיצוב התווית. תוך-כדי-כך, נכיר תכונות חדשות של פקדים, נגלה פקדים חדשים ונלמד כיצד ניתן להשתמש בהם, ונצבור ניסיון נוסף בתכנות.

עיצוב הטופס[עריכה]

כתמיד, נפתח תוכנה חדשה ב-Visual Basic. פתחו את תוכנת Visual Studio ובחרו בסוג-טופס Standard Exe; אם התוכנה כבר פתוחה, לחצו על התפריט File > New Project. יופיע כעת על המסך טופס נקי בו ניצור את התוכנה החדשה שלנו.

ראשית, נמקם תווית על הטופס. נלחץ על הפקד תווית (Label), מתוך רשימת הפקדים מימין (זהו כפתור עליו מופיע האות A). נצייר תווית לכל אורכו של הגבול התחתון של הטופס. את שמה של התווית נשנה ל-lblText. בתוכנה שניצור, המשתמש יפעיל פקדים שונים כדי לשנות את העיצוב של התווית - צבעה, גודל הכתב, וכדומה.

נוסיף כעת לטופס את הפקדים הנוספים בהם נשתמש. בהמשך העמוד מופיעה תמונה המתארת את מצבו הסופי של הטופס, בסיום העיצוב.

תיבות סימון[עריכה]

תיבת סימון (Check-box) הינה תיבה אליה מצורף תיאור טקסט קצר. כאשר המשתמש לוחץ על התיבה, מסומן בתוכה V. לחיצה נוספת תמחק את הסימון. צירוף שלוש האותיות chk הוא המקובל לתיאור תיבות-סימון.

לטופס שלנו נוסיף שלוש תיבות-סימון, בעזרתן יוכל המשתמש לשנות את הגדרות הגופן של התווית - הדגשה, קו-תחתון, וכתב-נטוי. אלו הן השמות והכיתוביות (Caption) של שלושת התיבות שנוסיף: (שימו לב לסימן האמפרסנד & שמשמעותו תוסבר בהמשך)

chkUnderline: Caption = "&Underline"
chkItalics: Caption = "&Italics"
chkBold: Caption = "&Bold"

שים לב שהאות הראשונה בכל אחד מתיבות-הסימון מסומנת בקו תחתון. סימון זה מופיע כיוון שכתבנו את סימן האמפרסנד & לפני אות זו. משמעות הסימון הוא שכאשר נריץ את התוכנה, Visual Basic יקצה באופן אוטומטי מקש-קיצור לתיבת-הסימון הזו; מקש קיצור זה מופעל על-ידי לחיצה על מקש ה-Alt ועל האות המסומנת בסימן &. לדוגמא, אם המשתמש ילחץ על Alt + U, הדבר יגרום לסימון התיבה chkUnderline.

אחת התכונות (Properties) החשובות של תיבת הסימון היא תכונת הערך (Value). תכונה זו מציינת האם ישנו סימן V בתיבה או לא. אם נקבע את הערך ל-1, בתיבה יסומן V; אם נקבע אותו ל-2, בתיבה יסומן V אפור. בינתיים, השאר את ערכן של כל שלושת התיבות 0, כלומר - ללא V.

תיבות בחירה[עריכה]

תיבת-הבחירה (Option-box) דומה לתיבת-הסימון בכך שכאשר המשתמש לוחץ על תיבה זו, מופיע בתוכה סימון. ההבדל המרכזי בין שני סוגי פקדים אלו הוא, שתיבות-סימון שונות אינן תלויות זו בזו (כלומר, יתכן כי מספר תיבות שונות יהיו מסומנות בו זמנית), בעוד שבכל קבוצה נתונה של תיבות-בחירה, רק תיבה אחת יכולה להיות מסומנת בכל רגע נתון. סימונה של תיבת-בחירה חדשה תבטל את הסימון בתיבה הקודמת שהייתה מסומנת.

לטופס שלנו נוסיף סדרה של שלוש תיבות-בחירה, באמצעותן יוכל המשתמש לקבוע את היישור (Alignment) של התווית שמיקמנו - כלומר, האם הטקסט יוצמד לצד שמאל של התווית, לצד ימין, או למרכז התווית. הוסף כעת תווית חדשה לטופס שלך וכתוב בה "Alignment", ומתחתיה הוסף שלוש תיבות-בחירה: (שים לב שגם כאן ישנו שימוש בסימן &)

optLeft: Caption = "&Left"
optCenter: Caption = "&Center"
optRight: Caption = "&Right"

גם אצל תיבות-הבחירה, בדומה לתיבות-הסימון, התכונה ערך (Value) קובעת האם התיבה מסומנת או לא. שים לב שאצל תיבות-הבחירה ישנן רק שתי אפשרויות - True או False - בניגוד לתיבות-הסימון בהן יש שלוש אפשרויות. בתור ברירת-מחדל, הטקסט בתווית מיושר לצד שמאל, לכן בחר את תיבת-הבחירה optLeft וקבע את ערכה ל-True. כעת תיבה זו תסומן.

כפתורים מעוצבים[עריכה]

בפקד כפתור פקודה (Command Button) השתמשנו כבר בתוכנות קודמות. כעת, נלמד איך לבצע עיצוב נוסף לפקד זה. בתוכנה שלנו, נרצה להשתמש בכפתורי-פקודה כדי לקבוע את צבעו של הטקסט בתווית. נמקם שלושה כפתורים שיקבעו את הצבע לאדום, כחול או ירוק, וכפתור נוסף שיבחר צבע באקראי.

מקם שלושה כפתורי פקודה ריבועיים זה לצד זה. תן להם את השמות (Names) הבאים:

cmdColorRed
cmdColorBlue
cmdColorGreen
cmdColorRnd

בתוך הכפתור האחרון, כתוב (בעזרת התכונה Caption) את הטקסט "RND". זהו הכפתור בו נשתמש כדי להגריל צבע אקראי.

בשלושת הכפתורים האחרים לא נכתוב כלום, אלא פשוט נשנה את צבעו של הכפתור. את צבע הכפתור נשנה באמצעות התכונה צבע רקע (BackColor). שנה את צבעם של שלושת הכפתורים הנוספים לאדום, כחול וירוק, בהתאמה. כדי לעשות זאת, בחר את התכונה BackColor, ואז לחץ על הטאב טבלאת-צבעים (Palette). לפניך תופיע טבלה של צבעים. בחר את הצבע הרצוי.

כפי שתיווכח מיד, צבעם של הכפתורים לא ישתנה לצבע שבחרת. הסיבה לכך היא שלכפתורי-פקודה ישנם שני סגנונות שונים - כפתור רגיל (Standard) או כפתור גרפי (Graphical). כאשר הסגנון של כפתור מוגדר לרגיל, הכפתור יציג טקסט פשוט ללא עיצוב מיוחד. על מנת להציג עיצוב גרפי כלשהו - כגון תמונה או צבע-רקע מיוחד - עלינו לשנות את הסגנון של הכפתור. לכן, בחר את כל שלושת הכפתורים, מצא את התכונה סגנון (Style) ושנה אותה לאפשרות השנייה - Graphical. כעת צבעם של כל שלושת הכפתורים ישתנה לצבע שבחרת.

בהזדמנות זו רצוי לתת הסבר קצר נוסף על התכונה צבע רקע (BackColor), כמו גם על כל התכונות הקובעות צבעים. כפי ששמת-לב, כאשר ניסית לשנות תכונה זו בכפתורי-הפקודה, נפתח תפריט עם שתי מחיצות - מערכת (System) וטבלאת-צבעים (Palette). אנו השתמשנו בטבלאת-הצבעים, אשר אפשרה לנו לבחור ידנית את הצבע הרצוי. לעומתה, המחיצה System מאפשרת לנו לבחור את אחת מצבעי-המערכת - צבעים המוגדרים במערכת-ההפעלה של המחשב. היתרון בשימוש בצבעים המוגדרים-מראש במערכת ההפעלה הוא שכך נוכל ליצור תוכנות בעלות עיצוב אחיד - למשל, כל הכפתורים בכל התוכנות שניצור יהיו בעלי אותו צבע.

משתמשים יכולים לשנות את הגדרות צבעי המערכת שלהם. במערכת ההפעלה חלונות, ניתן לרוב לעשות זאת על-ידי לחיצה עם כפתור העכבר הימני על שולחן-העבודה של המחשב ועל האפשרות "מאפיינים" (Properties), ולפתוח את המחיצה "תצוגה" (Appearance).

פס הגלילה[עריכה]

היכולת הנוספת והאחרונה אותה נוסיף לתוכנה שלנו, היא היכולת לשנות את גודל הגופן של התווית lblText. אנו נאפשר למשתמש להגדיל ולהקטין את הגופן באמצעות פס גלילה אנכי (Vertical Scroll Bar, או בשמו המקוצר VScroll), אותו יניע המשתמש למעלה או למטה.

בחר כעת את פקד פס הגלילה האנכי מתוך סרגל הכלים (האייקון שלו הוא תמונה של, באופן טבעי, פס גלילה אנכי). מקם את פס הגלילה על הטופס שלך, וקרא לו vsbSize. פס-גלילה יכול לנוע בטווח מסויים של ערכים, כאשר אנו קובעים מהם הגבולות העליונים והתחתונים של טווח זה. כיוון שגודל-הגופן הקטן ביותר ברוב הגופנים ב-Visual Basic הוא 8, קבע את הערך המינימלי (Min) של הפס ל-8; את הערך המקסימלי (Max) נקבע ל-26, כיוון שאם נגדיל את הכתב יותר מזה, קצוות האותיות יחתכו (אם בתוכנה שלך התווית lblText גדולה יותר, יתכן ותרצה לקבוע ערך מקסימלי גבוה יותר.

גודל הגופן בתור ברירת-מחדל הוא 8, לכן קבע את הערך הנוכחי של פס הגלילה ל-8 באמצעות התכונה ערך (Value).

אנו נרצה שליד פס הגלילה תהיה תיבת-טקסט, ובה יופיע מספר המציין את גודל הגופן הנוכחי. מקם כעת תיבת טקסט ליד פס הגלילה, וקרא לה txtSize. בתוכה, כתוב את המספר 8 (באמצעות התכונה Text).

איננו רוצים שהמשתמש יוכל להזין ערכים לתוך התיבה - הערך שבה ישתנה אוטומטית, ורק כאשר פס הגלילה מוזז. לכן, נרצה לנעול את התיבה. קבע את התכונה נעול (Locked) ל-True. כדי להבהיר למשתמש שתיבה זו נעולה, נרצה לשנות את צבעה מהצבע הלבן הרגיל, לצבע הזהה לצבע הרקע של הטופס (לרוב אפור-בהיר). בחר את התכונה צבע רקע (BackColor) של התיבה, ובחר מתוך מחיצת צבעי המערכת (System) את האפשרות Button Face. צבע התיבה ישתנה כעת.

לסיום, מקם ליד פס-הגלילה ותיבת-הטקסט תווית (Label), וכתוב בה Size. כך נסביר למשתמש מהו תפקידם של פס הגלילה ותיבת-הטקסט.

סיום עיצוב הטופס[עריכה]

כעת, כל הפקדים שעל הטופס שלנו ממוקמים. לסיום, לפני שנתחיל בכתיבת הקוד, נבצע עוד שני שינויים קטנים בשניים מהפקדים שלנו.

ראשית, התווית lblText: ברצוננו להעניק לתווית זו מסגרת ברורה, כדי שהמשתמש יוכל לראות את גבולותיה. לשם כך, נסמן את התווית, ונסתכל על התכונה סגנון מסגרת (BorderStyle). כרגע, תכונה זו מוגדרת לללא מסגרת (None). נשנה את התכונה ל-Fixed Single. כעת תופיע מסגרת תלת-מימדית סביב התווית.

שנית, הטופס עצמו. כפי שאולי שמת לב, בראש הטופס - כמו בכמעט כל חלון במערכת-ההפעלה - מופיעים שלושה כפתורים המאפשרים לנו למזער את החלון, להגדיל אותו כך שימלא את כל המסך, או לסגור אותו. בתוכנה שלנו, אם המשתמש ינסה להגדיל את החלון, יווצר סתם שטח ריק ללא פקדים נוספים; לכן, אין כל סיבה שנאפשר למשתמש להגדיל את החלון. בנוסף, אין לנו כל צורך למזער את התוכנה. לכן, נמחק את שני הכפתורים האלו (כפתור המזעור וכפתור ההגדלה) מהטופס, ונגדיר את הטופס כך שלא ניתן יהיה לשנות את גודלו. לשם כך, נלחץ על הטופס כדי לצפות ברשימת התכונות שלו, נבחר את התכונה סגנון מסגרת (BorderStyle), ונשנה אותו גם כאן ל-Fixed Single. כעת, יעלמו שני הכפתורים שבראש הטופס, וישאר רק כפתור הסגירה.

רשימת כל הפקדים שבטופס[עריכה]

להלן מוצגת רשימה מלאה של כל הפקדים שמיקמנו, וכל התכונות שלהם ששינינו:

שם הפקד	סוג	תכונות
Form1	Form	BorderStyle = Fixed Single
lblText	Label	BorderStyle = FixedSingle Width = כרוחב הטופס
chkUnderline	CheckBox	Caption = "&Underline"
chkItalics	CheckBox	Caption = "&Italics"
chkBold	CheckBox	Caption = "&Bold"
optLeft	OptionBox	Caption = "&Left" Value = True
optCenter	OptionBox	Caption = "&Center"
optRight	OptionBox	Caption = "&Right"
cmdColorRed	CommandButton	Style = Graphical Color = אדום
cmdColorBlue	CommandButton	Style = Graphical Color = כחול
cmdColorGreen	CommandButton	Style = Graphical Color = ירוק
cmdColorRnd	CommandButton	Caption = "RND"
txtSize	TextBox	Text = "8" Locked = True BackColor = ButtonFace
vsbSize	VScroll	Min = 8 Max = 26 Value = 8

כעת, נחל בכתיבת הקוד של התוכנה.

כתיבת הקוד[עריכה]

הקוד של התוכנה שלנו יהיה פשוט למדי - בעת לחיצה על כל אחד מהפקדים, התוכנה תשנה את התכונה הרלוונטית של התווית lblText. נפתח בכתיבת הקוד של תיבות הסימון.

שינוי עיצוב הגופן באמצעות תיבות הסימון[עריכה]

לחץ לחיצה כפולה על תיבת-הסימון chkUnderline. יפתח חלון הקוד של התוכנה, ויופיעו בו השורות:

Private Sub chkUnderline_Click()

End Sub

בדיוק כמו בתוכנות המוקדמות יותר שכתבנו, לחיצה כפולה על פקד פותחת חטיבת-קוד הרלוונטית למאורע ברירת-המחדל (Default Event) של הפקד; כלומר, חטיבת קוד אשר מתבצעת ברגע שמתרחש מאורע מסויים, שמוגדר כמאורע הבסיסי ביותר של הפקד. עד עכשיו, כאשר השתמשנו בכפתורי-פקודה (Command Buttons), מאורע זה היה המאורע לחיצה (Click), המתרחש כאשר הכפתור נלחץ. גם כאן, בתיבות-סימון, מאורע ברירת-המחדל הוא Click; במקרה של תיבות-סימון, מאורע זה מתרחש כאשר הסימון שבתוך התיבה משתנה (מה שקורה לרוב בעקבות לחיצה על התיבה).

ובכן, כמו מקודם, עלינו להוסיף בין השורה Private Sub‎... לבין End Sub את הקוד שאנו רוצים שיתרחש כאשר מתבצעת לחיצה על תיבת-הסימון. במקרה זה, אנו רוצים לשנות את סגנון הגופן של התווית שבתחתית הטופס, כך שיופיע מתחת לכתב קו תחתון (Underline). דבר זה אנו קובעים באמצעות התכונה FontUnderline; הוסף את שורת הקוד הבאה לתוכנה שלך:

Private Sub chkUnderline_Click()
    lblText.FontUnderline = True
End Sub

הרץ כעת את התוכנה שלך, ולחץ על תיבת הסימון בה כתוב Underline. הכתב שבתוך התווית שלמטה יסומן מיד בקו תחתון, בדיוק כפי שתכננו! נסה כעת ללחוץ שנית על תיבת הסימון Underline - דבר אינו קורה. הסיבה לכך פשוטה - בקוד של התוכנה כתבנו שכאשר המשתמש לוחץ על תיבת הסימון, יופיע קו תחתון, בין אם התיבה מסומנת כעת ובין אם לא. כדי לפתור את הבעיה, בכל פעם שאנו לוחצים על תיבת הסימון, עלינו לגרום לתוכנה לבדוק האם התיבה מסומנת, ולפעול בהתאם.

נוכל לעשות זאת כך: נורה לתוכנה לשאול "האם התיבה מסומנת?"; ניקח את התשובה שנקבל, ונצמיד אותה לשאלה "האם לסמן קו תחתון מתחת לטקסט?". כך, אם נגלה כי כן יש סימון בתיבה, נורה לתוכנה כן לסמן קו תחתון; אם נגלה כי התיבה לא מסומנת, נדאג לכך שלא יהיה קו תחתון.

איך אנו בודקים האם התיבה מסומנת? באמצעות התכונה ערך (Value). אם התיבה אינה מסומנת, ערכה יהיה 0. Visual Basic אוטומטית מתרגם את המספר 0 לביטוי False; ביטוי זה אנו יכולים לקחת ולשים בתוך התכונה FontUnderline, וכך למחוק את הקו התחתון.

מצד שני, אם התיבה כן מסומנת, ערכה יהיה 1. כל ערך השונה מ-0 מתורגם ב-Visual Basic לביטוי True - אנו נשים ביטוי זה בתכונה FontUnderline, וכך נגרום להופעתו של קו תחתון.

נכתוב זאת כעת בתוכנה:

Private Sub chkUnderline_Click()
    lblText.FontUnderline = chkUnderline.Value 
End Sub

הפעל כעת את התוכנה ונסה ללחוץ על תיבת הסימון. קו תחתון יופיע מתחת לטקסט. לחץ שנית על התיבה ובטל את סימון ה-V - הקו התחתון יעלם! כל הכבוד!

ננתח בקצרה תוכנה זו, באמצעות הביטויים ערך שמאל וערך ימין, שלמדנו בעבר. הביטוי chkUnderline.Value נמצא מימין לסימן = , ולפיכך הוא ערך ימין (RValue). כיוון שכך, התוכנה בודקת את ערכו של ביטוי זה. אם, לדוגמא, ערכו של הביטוי הוא 1 (כלומר, התיבה מסומנת), התוכנה מקבלת את הערך 1.

משמאל לסימן שווה = נמצא הביטוי lblText.FontUnderline. זהו ביטוי בוליאני, כלומר - הוא יכול לקבל רק את אחד משני הערכים True או False. לפי העקרון שלמדנו על ערכי ימין וערכי שמאל, התוכנה אמורה לקחת את הערך שמימין (במקרה זה - 1) ולשים אותו בביטוי שמשמאל, אך במקרה שלנו, הביטוי שמשמאל לשווה אינו ביטוי מספרי. לכן, התוכנה ממירה את הערך 1 באופן אוטומטי, והתוצאה המתקבלת - כפי שהוסבר לעיל - היא True.

יכולת זו, להמיר סוגי משתנים, תבועה ב-Visual Basic ונעשה בה שימוש רחב. חשוב לרגע על תוכנת המחשבון שבנינו בעבר. לקחנו שם את תוכנה של תיבת הטקסט txt_number - שהוא ביטוי טקסטואלי - ושמנו אותו בתוך המשתנה X, שהוא משתנה מספרי. Visual Basic ביצע המרה פשוטה של טקסט למספר כדי לאפשר למשתנה X לקלוט את תוכנה של התיבה. אך כפי שהוסבר שם, אם היית מנסה לכתוב אותיות בתוך תיבת הטקסט, הייתה מופיעה מיד הודעת שגיאה והתוכנה הייתה נתקעת; הסיבה לכך פשוטה - לא ניתן לבצע המרה של ביטוי כגון "abc" לערך מספרי.

תכנות תיבות-הסימון הנותרות[עריכה]

באותה הדרך בה כתבנו את הקוד לתיבת-הסימון הראשונה, נוכל גם לתכנת את שאר תיבות הסימון. אך לפני כן, נשתמש בתיבת הסימון עם המילה Italics כדי להדגים דבר נוסף. לחץ לחיצה כפולה על התיבה chkItalics וכתוב את שורת הקוד הבאה (שים לב לנקודה שבין המילה Font לבין Italic):

Private Sub chkItalics_Click()
    lblText.Font.Italic = chkItalics.Value
End Sub

שים לב, שכאשר כתבת lblText.Font.‎ נפתחה רשימה, הדומה בצורתה לרשימת-התכונות של אחד הפקדים שמיקמנו (כגון lblText). הסיבה לכך פשוטה - גם המילה Font היא למעשה שם של אובייקט. אמנם זהו לא אובייקט הנראה לעין על המסך, כמו התווית עצמה, אך הוא עדיין מתפקד כמו אובייקט בעל מספר תכונות.

למעשה, בשורת הקוד שכתבנו כרגע, התייחסנו לתכונה (Property) בשם Italic, השייכת לאובייקט (Object) בשם Font, הנמצא בתוך פקד (Control) שקראנו לו lblText. למעשה, האובייקט Font הוא בעצמו תכונה של הפקד lblText (וכל פקד אחר מסוג תווית - Label), בדיוק כשם ש-Caption היא תכונה של פקד זה.

נזכיר כי פקדים ואובייקטים הינם מושגים דומים, אך המושג "פקד" מתייחס לאובייקט נראה לעין, בעוד המונח "אובייקט" כולל גם עצמים נראים לעין וגם נסתרים.

הפעל כעת את התוכנה, ובדוק את תיבת הסימון עליה כתוב Italics. כאשר התיבה מסומנת, תוכנה של תיבת הטקסט מופיע בכתב נטוי, וכאשר הסימון מבוטל - הכתב חוזר להיות כתב רגיל.

למעשה, אין כל הבדל מעשי בין צורת הכתיבה שהשתמשנו בה עבור תיבת הסימון הקודמת (שם השתמשנו בתכונה FontUnderline) לבין צורת הכתיבה בה השתמשנו כאן (שימוש בתכונה Italic של התכונה Font). שתי הצורות פועלות, ושתיהן מקובלות. מה שכן, מומלץ בתכנות לשמור על עקביות, לכן אם השתמשנו בסגנון כתיבה מסויים בחלק מהתוכנה, עלינו להקפיד להשתמש באותו סגנון בכל שאר התוכנה שלנו. עלינו להחליט כעת האם אנו הולכים לכתוב בסגנון lblText.FontUnderline, או לחלופין בסגנון lblText.Font.Underline. בדוגמא שלנו, נבחר באפשרות השנייה, אך ניתן גם לבחור בראשונה.

נכתוב כעת את הקוד עבור כל שלושת תיבות הסימון, בסגנון זה:

Private Sub chkUnderline_Click()
    lblText.Font.Underline = chkUnderline.Value
End Sub

Private Sub chkItalics_Click()
    lblText.Font.Italic = chkItalics.Value
End Sub

Private Sub chkBold_Click()
    lblText.Font.Bold = chkBold.Value
End Sub

הפעל כעת את התוכנה ובדוק את כל שלושת תיבות הסימון. סגנון הגופן של הטקסט ישתנה בהתאם למצבן של התיבות. כל הכבוד!

שינוי היישור באמצעות תיבות הבחירה[עריכה]

נתכנת כעת את תיבות הבחירה Left, Right, Center כך שישנו את הישור (Alignment) של התווית. ראשית, הבה נבחן תכונה זו. בחר את התווית שלנו, lblText, ובחר את התכונה Alignment. נראה כי לתכונה זו שלושה מצבים אפשריים - שמאל, ימין, ומרכז. לכל אחד מהמצבים האלו ישנו מספר-קוד. בעזרת מספר זה, נוכל להתייחס למצבים השונים בתוכנה שלנו.

לחץ לחיצה כפולה על התיבה optLeft כדי לפתוח חטיבת קוד עבור פקד זה (שים לב - גם עבור תיבות בחירה, המאורע המוגדר כברירת-מחדל הוא המאורע Click, בדיוק כמו בתיבות סימון, בכפתורי-פקודה, ובפקדים רבים אחרים ב-Visual Basic). אנו רוצים שכאשר נלחץ על תיבה זו, הטקסט ייושר לצד שמאל. כפי שראינו קודם, מספר-הקוד עבור יישור-לשמאל הינו 0. לכן, כתוב את השורה הבאה בתוך חטיבת הקוד:

lblText.Alignment = 0

כמובן, אם נפעיל כעת את התוכנה לא נוכל להבחין בשום השפעה. הטקסט שבתווית lblText מיושר לצד שמאל, ואם נלחץ על התיבה Left, הטקסט יהיה מיושר לצד ... שמאל. לכן, הבה נתכנת גם את שאר תיבות הבחירה, ואז נבדוק את התוצאה. אנו רוצים שכאשר נלחץ על התיבה Center, הטקסט יישור למרכז (קוד 2), וכאשר נלחץ על Right, הטקסט ייושר לימין (קוד 1):

Private Sub optLeft_Click()
    lblText.Alignment = 0
End Sub

Private Sub optCenter_Click()
    lblText.Alignment = 2
End Sub

Private Sub optRight_Click()
    lblText.Alignment = 1
End Sub

הפעל כעת את התוכנה ונסה ללחוץ על שלושת התיבות. הטקסט שבתוך התווית ינוע שמאלה, ימינה ולמרכז, בהתאם לתיבה אותה תבחר.

שינוי הצבע באמצעות כפתורי הפקודה[עריכה]

נתכנת כעת את כפתורי הפקודה שמיקמנו על הטופס. להזכירכם, תפקידם של הכפתורים בתוכנה שלנו יהיה לשנות את צבע הטקסט בתווית; שלושה מבין הכפתורים קובעים את צבע הטקסט לצבעים אדום, ירוק או כחול - בהתאמה לצבע הכפתור - והכפתור הנותר מגריל צבע באקראי.

לחץ לחיצה כפולה על כפתור הפקודה האדום, cmdColorRed; תיפתח חטיבת הקוד של מאורע הלחיצה על כפתור זה. בתוך חטיבת קוד זו, עלינו לפנות לתכונה של התווית lblText אשר קובעת את צבע הטקסט בתווית. התכונה האחראית על צבע הטקסט נקראת צבע קדמי (ForeColor) (וזאת בניגוד לתכונה צבע אחורי BackColor, אשר קובעת את צבע הרקע של התווית). לפיכך, עלינו לשנות את מצבה של תכונה זו. אך איך נורה לתכונה זו לבחור בצבע אדום?

למעשה, ב-Visual Basic, בדומה ל-html, צבע מוגדר על-ידי מספר הקסאדצימלי (Hexa-decimal) - כלומר, מספר בשיטת-ספירה על בסיס 16. בשיטת ספירה זו, קיימות 16 ספרות - הרגילות 0-9 ובנוסף אליהן A-F. בספירה על-בסיס 16, מספר דו-ספרתי (כלומר, בטווח 0 עד FF) הוא שווה-ערך למספר בטווח 0-255 בבסיס ספירה עשרוני (רגיל). לכן, מספיקים לנו שלושה מספרים דו-ספרתיים בבסיס 16 כדי לייצג צבע בשיטת RGB.

לפיכך, כדי לייצג צבע, עלינו לתת למחשב מספר על-בסיס 16 בעל 6 ספרות, כאשר שתי הספרות הראשונות מייצגות את רמת האדום בצבע, השתיים האמצעיות - את רמת הירוק, והשתיים האחרונות - את רמת הכחול. הפונקציה RGB ב-Viusal Basic פשוט מקבלת שלושה מספרים עשרוניים ו"בונה" על-פיהם מספר הקסאדצימלי שש-ספרתי אחד, ואותו היא שולחת למחשב כדי לייצג צבע.

מסך המחשב יוצר צבעים שונים על ידי שילוב של שלושת צבעי היסוד אדום, ירוק וכחול (RGB - Red, Green, Blue). כל נקודה במסך מקבלת את צבעה על ידי שימוש ברמות שונות של שלושת הצבעים הללו. ברוב המסכים המודרניים, רמתם של כל אחד מצבעי היסוד בכל נקודה במסך נע בטווח 0-255, כאשר 0 פירושו שאין כל שימוש בצבע-יסוד זה בנקודה הזו, ו-255 פירושו שיש כאן שימוש בצבע זה בעוצמתו המירבית; כך, למשל, בנקודה בה רמת צבעי-היסוד היא "אדום = 176 / ירוק = 38 / כחול = 217" יתקבל גוון מסויים של סגול רך. כיוון שבצורה זו פועלים המסכים, בתוכנות מחשב רבות - כמו-גם שפת התכנות Visual Basic - ניתן להתייחס ולהגדיר צבע על-פי רמות האדום-ירוק-כחול המשמשות להגדרת אותו צבע.

ב-Visual Basic, הדבר נעשה באמצעות פונקציה בשם RGB. פונקציה זו מקבלת 3 מספרים, אשר מייצגים את רמת האדום, הירוק והכחול בצבע המבוקש, בהתאמה. כיוון שהצבעים שאנו רוצים ליצור הינם הצבעים אדום, ירוק וכחול, נוכל לקבוע בפשטות את רמות צבעי-היסוד בכל אחד מהם - כדי ליצור את הצבע אדום, למשל, עלינו להשתמש פשוט ברמה מלאה (255) של אדום, ולא להשתמש כלל (0) בירוק וכחול.

לכן, הקוד של שלושת כפתורי הצבעים הרגילים יראה כך:

Private Sub cmdColorRed_Click()
    lblText.ForeColor = RGB(255, 0, 0)
End Sub

Private Sub cmdColorGreen_Click()
    lblText.ForeColor = RGB(0, 255, 0)
End Sub

Private Sub cmdColorBlue_Click()
    lblText.ForeColor = RGB(0, 0, 255)
End Sub

הפעל את התוכנה ובדוק את שלושת הכפתורים. כפי שתראה, ברגע שתלחץ על כל אחד מהם, התווית תשנה את צבעה לצבע התואם.

נעבור כעת לתכנות הכפתור שנותר, cmdColorRnd. ראשית, כיוון שאנו מגרילים כאן מספר אקראי, עלינו לכתוב את הפקודה Randomize בתוך חטיבת הקוד של כפתור-פקודה זה. לאחר מכן, נתכנת את הגרלת הצבע עצמה. דרך אחת לעשות זאת היא גם באמצעות הפונקציה RGB - במקום לתת לה שלושה מספרים שקבענו מראש, נוכל להורות למחשב להגריל 3 מספרים בטווח 0-255 כפי שלמדנו בפרק הקודם, ולהשתמש במספרים אלו בפונקציה:

lblText.ForeColor = RGB(Int(Rnd * 256), Int(Rnd * 256), Int(Rnd * 256))

דרך זו תפעל כמובן באופן מושלם, אך יתכן שאנו יכולים להסתפק במשהו פשוט יותר. בדרך זו, נוכל לקבל מבחר של 256³ צבעים שונים ומגוונים, אך חלקם מאוד דומים - לדוגמא, אין הבדל נראה לעין בין RGB(43,200,116)‎ לבין RGB(43,201,116)‎. לעומת זאת, קיימת ב-Visual Basic פונקציה אחרת המשמשת לקביעת צבעים, לה יש מבחר קטן בהרבה - רק 16 צבעים - אך אלו צבעים בולטים השונים באופן מובהק אחד מהשני. פונקציה זו נקראת QBColor, והיא מקבלת מספר אחד בטווח 0-15. עבור המספר 0, הפונקציה מחזירה את הצבע שחור. עבור 15, היא מחזירה לבן. עבור כל מספר אחר, היא מחזירה צבעים שונים כגון אדום, כחול, סגול, צהוב, אפור וכו'. נכתוב את הקוד כך:

Private Sub cmdColorRnd_Click()
    Randomize
    lblText.ForeColor = QBColor(Int(Rnd * 16))
End Sub

פתח כעת את התוכנה, ולחץ על כפתור זה מספר פעמים. בכל פעם, הטקסט שבתווית ישנה את צבעו לצבע אחר. כל הכבוד!

שינוי גודל הגופן באמצעות פס הגלילה[עריכה]

הגענו כעת לפקד האחרון בטופס אותו עלינו לתכנת - פס הגלילה. אנו נרצה שכאשר המשתמש יזיז את פס הגלילה, הטקסט יגדל או יקטן והמספר שבתיבת-הטקסט txtSize ישתנה בהתאם לגודל-הגופן החדש. לחץ לחיצה כפולה על פס הגלילה כדי ליצור עבורו חטיבת-קוד. שים לב ששמו של מאורע ברירת-המחדל הפעם הוא Change (ולא Click, כפי שהיה בכל הפקדים הקודמים). מאורע זה מתרחש ברגע שתוכנו של הפקד משתנה - במקרה של פסי-גלילה, הוא מתרחש כאשר הפס מוזז.

להזכירכם, קבענו שהערך (Value) המינימלי של הפקד יהיה 8, והמקסימלי - 26. לפיכך, כאשר המשתמש גולל את הפס, עלינו פשוט לקחת את ערכו החדש של הפקד ולהקצות אותו לגודל-הגופן (Font.Size) של התווית, ולטקסט שבתיבת-הטקסט:

Private Sub vsbSize_Change()
    txtSize.Text = vsbSize.Value
    lblText.Font.Size = vsbSize.Value
End Sub

הפעל כעת את התוכנה, ונסה להזיז את פס הגלילה בדרכים שונות. תראה כי הגופן גדל או קטן בהתאם, ותוכנה של תיבת הטקסט משתנה.

תכונות נוספות של פס הגלילה[עריכה]

נעיף עוד מבט קל בשתי תכונות של הפקד פס גלילה אנכי. בחר את הפקד של הטופס שלך, והסתכל בחלון התכונות שלו, מימין. שתי התכונות שינוי קטן (SmallChange) ושינוי גדול (LargeChange) קובעות את גודל התזוזה של הפס כאשר גוללים בו בדרכים שונות.

התכונה SmallChange קובעת את גודל התזוזה כאשר לוחצים על אחד החצים שנמצאים בראש הפס או בתחתיתו. כברירת-מחדל, ערכה של תכונה זו הוא 1. פס הגלילה שלנו נע בין הערכים 8 ל-26, מה שנותן לו טווח קטן יחסית (18). כיוון שכך, נרצה להשאיר את ערכה של תכונה זו קטן יחסית, כדי שלחיצה על הכפתורים לא תביא לשינויים גדולים מאוד.

התכונה LargeChange, מאידך, קובעת את גודל התזוזה המתרחשת כאשר המשתמש לוחץ בתוך פס הגלילה, מחוץ למחוון (Slider) המחליק עליו. מקובל שלחיצה כזו תביא לשינוי גדול יחסית, יותר מאשר לחיצה על אחד מהכפתורים שבקצוות פס-הגלילה. למרות זאת, כברירת מחדל, גם ערכה של תכונה זו הוא 1. הגדל כעת את ערכה ל-4.

הפעל כעת את התוכנה ונסה להזיז את המחוון שעל פס הגלילה. שים לב שכאשר המחוון מוזז על-ידי לחיצה על כפתורי למעלה/למטה, השינוי בגודל הגופן יהיה קטן יחסית - לפעמים אפילו קטן מדי בשביל להופיע. לעומת זאת, כאשר תלחץ בתוך פס הגלילה, השינוי יהיה משמעותי יותר, ותמיד ייראה באופן ברור.

סיכום[עריכה]

בפרק זה, למדנו על תכונות שונות של פקדים אשר מאפשרות לנו להשפיע על העיצוב והמראה של הפקד. למדנו גם כיצד ניתן לשנות תכונות אלו באמצעות הקוד של התוכנה, כך שאנו יכולים כעת לגרום לכך שלחיצה על כפתור תגרום לשינוי צבע הטקסט של פקד כלשהו. בנוסף, התנסנו בעיצוב טופס ובכתיבת תוכנה בה ישנו מספר גדול של פקדים, שכל אחד מבצע פעולה שונה. תוך כדי כך, הכרנו גם מספר פקדים נוספים ולמדנו כיצד להשתמש בהם.

להלן מוצג הקוד המלא של התוכנה, לעיונכם. תחתיו ישנו קישור לפרק הבא בספר, בו נלמד פקודה חדשה, החשובה מאוד בכתיבת תוכנות.

קוד התוכנה[עריכה]

Private Sub chkUnderline_Click()
    lblText.Font.Underline = chkUnderline.Value
End Sub

Private Sub chkItalics_Click()
    lblText.Font.Italic = chkItalics.Value
End Sub

Private Sub chkBold_Click()
    lblText.Font.Bold = chkBold.Value
End Sub


Private Sub cmdColorRed_Click()
    lblText.ForeColor = RGB(255, 0, 0)
End Sub

Private Sub cmdColorGreen_Click()
    lblText.ForeColor = RGB(0, 255, 0)
End Sub

Private Sub cmdColorBlue_Click()
    lblText.ForeColor = RGB(0, 0, 255)
End Sub

Private Sub cmdColorRnd_Click()
    Randomize
    lblText.ForeColor = QBColor(Int(Rnd * 16))
End Sub


Private Sub optLeft_Click()
    lblText.Alignment = 0
End Sub

Private Sub optCenter_Click()
    lblText.Alignment = 2
End Sub

Private Sub optRight_Click()
    lblText.Alignment = 1
End Sub


Private Sub vsbSize_Change()
    txtSize.Text = vsbSize.Value
    lblText.Font.Size = vsbSize.Value
End Sub

יסודות השימוש בשפה
הגרלת מספר אקראי	תכונות המשנות עיצוב של פקד	הצהרת תנאי