פרוייקט חדש - WinForm Project
lblFirstName, txtFirstName, btnOk ו-btnCancel. השם הזה הוא שם השדה במחלקה, ולכן משתמשים בו בקוד. הדובר ציין שהמוסכמות הללו נהוגות בכל העולם.פרקי ההרצאה: פרוייקט חדש - WinForm Project
תמלול ההרצאה: פרוייקט חדש - WinForm Project
הטקסט המלא של הדקות הראשונות בהרצאה «פרוייקט חדש - WinForm Project» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שבנינו טופס בעזרת פרויקט קונסול אפליקיישן אנחנו הולכים לראות איזה פרויקט באמת נכון לעבוד איתו כאשר אנחנו רוצים לבנות טפסים. הפרויקט שנכון לעבוד איתו, אני הולך לפייל ניו פרויקט, זה פרויקט מסוג Windows Forms אפליקיישן.
פרויקט Windows Forms אפליקיישן מכין לנו כבר תשתית מוכנה בכדי שנוכל לעצב ויזואלית את הטופס שלנו ואוטומטית כל כל הדיאללים שהיינו צריכים להוסיף מקודם בפרויקט קונסול כבר קיימים לנו כאן.
אז בואו קודם כל ניתן לו שם. נניח שאנחנו רוצים לבנות את אותו הטופס שהיה לנו לפני זה, כלומר תוכנית שמציגה פרטים של המשתמש, אז נקרא לפרויקט שלנו Details Application.
אוקיי, אז בואו נבצע. ומה שאנחנו הולכים לראות זה מעבר למחלקה פרוגרם שתמיד הייתה קיימת לנו בפרויקט קונסול אפליקיישן, קיים לנו פה איזשהו תופס שנקרא form1.cs ופתאום אנחנו רואים פה ציור של תופס.
עכשיו, זה לא באמת תופס אמיתי שאנחנו יכולים ללחוץ על הכפתור ולסגור אותו, בסדר? אני לוחץ כרגע על הלחצן X ובעצם לא קורה שום דבר כי זה לא באמת תופס שרץ.
מה שאנחנו רואים כרגע זה תמונה של תופס בכדי שאנחנו נוכל לעצב אותה. אנחנו יכולים להחזיק פה בנקודות האחיזה ולדוגמה לשנות את גודל של הטופס, בואו נגדיר לו גודל כזה ואנחנו יכולים להכניס רכיבים בזמן עיצוב על הטופס ולתת להם תכונות.
חשבונו להכיר שני מונחים בעולם פיתוח האפליקציות החלוניות. מונח ראשון נקרא design time. design time זה הזמן שבו אתם בתור מתכנתים מעצבים את הטופס שלכם.
ב-design time אנחנו עובדים עם תמונה של טופס ולא עם טופס אמיתי. run time זה המונח השני, זה הזמן שבו האפליקציה רצה ואז אנחנו רואים טופס אמיתי.
אם אני לוחץ כרגע על הלחצן של הסטארט או F5 או קונטרול F5 לפעמים עדיף, אז האפליקציה רצה ואנחנו רואים את אותו הטופס שמקודם הצבנו אבל עכשיו הוא רץ.
כעת אנחנו באמת רואים את הטופס האמיתי, אם אנחנו לוחצים לדוגמה על ה-X הוא נסגר. אז יש הבדל בין design time שבו אנחנו יכולים לעצב את הטופס שלנו לבין run time שבו הטופס באמת רץ, זה כאילו שהיוזר מריץ את התופס ועובד איתו.
יש שני חלונות מרכזיים שאנחנו הולכים לעבוד איתם. החלון הראשון זה חלון הטולבוקס, אנחנו יכולים לראות את הלינק שלו פה, והוא מאפשר לנו כל מיני סרגלים שכל אחד מכיל כל מיני רכיבים שאנחנו יכולים לזרוק על הטופס, כמובן בזמן ה-Design Time.
אז אנחנו יכולים לדוגמה לגרור לחצן, לגרור לייבל, לגרור טקסט בוקס ועוד כל מיני רכיבים שאנחנו בהמשך נעבוד עם כל מיני רכיבים שקיימים פה.
אחרי שגררנו את הרכיבים אנחנו רוצים לתת להם תכונות. אנחנו יכולים לבחור את הרכיב הרצוי ואז בעזרת החלונית פרופרטיז לתת תכונות באותו רכיב.
לדוגמה אם אני בחרתי כרגע את הבטן אני יכול לגשת לדוגמה לפונט ולבחור איזשהו פונט אחר עבור הלחצן. בואו נבחר צבע רקע וכמובן טקסט. אז אחרי שאנחנו גוררים איזשהו רכיב על הטופס אנחנו אנחנו יכולים בעזרת חלון הפרופרטיז לתת תכונות לרכיב הזה.
אם אני בוחר את הטופס, אז כמובן התכונות שאני רואה הן של הטופס, ואנחנו יכולים לתת גם לטופס כל מיני תכונות. צבענו אותו כרגע באפור בהיר. בסדר.
אז יש לנו כרגע את היכולת לעצב בצורה ממש נוחה את הטופס שאנחנו רוצים לעצב. חלונית הפרופרטיז, בעצם כל חלונית פה בוויז'ל סטודיו, אנחנו יכולים לתפוס אותה ולהתחיל לגרור אותה ואז אנחנו רואים שאנחנו יכולים לשים אותה בכל מיני מקומות אחרים בוויז'ואל סטודיו.
אני פשוט גורר אותה על הסימנים שיש פה. אז מה שאני תמיד נוהג לעשות זה להראות את חלונית הפרופרטיז ביחד עם חלונית הסלושן אקספלורר על ידי טאבים וזה נותן לנו אפשרות לראות כמה שיותר בבת אחת.
הדבר הבא זה בפרופרטיז עצמן אנחנו יכולים להגדיר משהו שנקרא Description. אנחנו רואים את ה-Description פה למטה. אם אנחנו נתפוס את זה ונגרור אנחנו רואים את ה-Description.
מה זה ה-Description? אם אנחנו בוחרים איזושהי תכונה אנחנו יכולים לראות פה תיאור לגבי מה זאת התכונה הזאת. טקסט. The text associated with the control.
כלומר מה שכתוב עליו. אוקיי, אז אחרי שראינו בדיוק את העיצוב עצמו של הטופס, אז בואו כרגע נעצב את אותו הטופס בדיוק שהיה לנו בסרטון הקודם, שבנינו בעצמנו בתוכנת Console Application.
אנחנו יכולים לבחור מספר פריטים ופשוט לעשות delete ולמחוק אותם. הדבר הראשון שאנחנו תמיד רוצים לעצב בכל טופס יהיה הטופס עצמו.
אנחנו מגדירים בעצם את המימדים שלו. דבר ראשון, בואו נגדיר לטופס גופן. אם אנחנו מגדירים גופן עבור הטופס, הגופן הזה תופס לכל הרכיבים שעל הטופס. יש כל מיני תכונות שהטופס אוטומטית מעביר לכל מי שעליו.
הגופן שהשתמשנו איתו בסרטון הקודם היה דיוויד. בואו נחפש פה את דיוויד. אנחנו רוצים לעשות תוכנית דומה לתוכנית הקודמת.
אין דיוויד, 10. בואו נעשה אותו אפילו בולד. הדבר הבא שאנחנו רוצים זה הטקסט שעל הטופס. בואו נגדיר שהטקסט הזה יהיה Detail. לאחר מכן אנחנו רוצים לבטל את לחצן המקסימייז בדומה למה שהסירנו מקודם.
נאתר את התכונה מקסימייז ונגדיר שהתכונה הזאת תהיה פולס. אנחנו רואים שלחצן המקסימייז התבטל. צבע הרקע שנתנו בפרטון הקודם לטופס היה, בואו נלך לבאק קולור, נלך לווב ונבחר, הוא היה אליס בלו אם אני לא טועה.
נחפש אותו פה והנה הצבע הזה. מעולה. אחרי שהגדרנו את כל ההגדרות של הטופס האמת ישנה הגדרה אחת שגם נתנו אותה וזה Start Position זה היה Center Screen וכעת אם אנחנו נריץ הטופס יעלה במרכז המסך בואו נריץ והנה הטופס עולה במרכז המסך מה שנשאר לנו לעשות זה להגדיר את הרכבים
שעליו דבר ראשון נשים Label בואו ניתן טקסט Enter First Name ונגדיר תיבה טקסט שימו לב שמעבר לזה שזה מאוד מאוד קל להגדיר את המיקומים של הרכיבים השונים.
יש לנו כל מיני קווים שאנחנו יכולים לעבוד איתם. יש לנו כאן אפשרות לראות קו כחול שבו אנחנו מגדירים את הערכים שהם יהיו זהים מבחינת הגובה.
יש לנו קו כחול למטה ואז החלקים התחתונים של הרכיבים הם באותו הגובה. ויש לנו קו בעצם צבע אדום סגול כזה שאומר שהטקסטים שיהיו כתובים עליהם הם יהיו באותו הקו, באותו הגובה.
אז בואו נגדיר בדיוק את הערכים האלה, נבחר את שניהם, נשים אותם פה, נמקם אותם באיזשהו מקום ואחרי שהגדרנו מספר רכיבים אנחנו יכולים פשוט לסמן, לבצע קופי ופייסט וכל מה שסימנו אוטומטית משתכפל.
אנחנו יכולים להזיז את זה ולהתאים את זה לאן שאנחנו רוצים. לאחר מכן אנחנו יכולים לבחור רכיבים נוספים ולתת להם את התכונות הדרושות. זה יהיה Enter Last Name.
יש לנו עוד שני לחצנים, בואו נגרור לחצנים. הנה לחצן ראשון, נסדר את זה אפילו בצורה קצת יותר אסתטית מהתוכנית שעברה. הלחצן הזה יהיה K, ויש לנו לחצן נוסף, וזה יהיה Cancel.
מה שנהוג למעשה זה שה-OK יסתדר לפני ה-Cancel מבחינת המיקומים שלהם. אז בואו נשים פה את ה-OK, נסמן את שניהם בצורה כזאת.
וכעת יש לנו את הטופס שלנו. הרכיבים שעליו. אם אנחנו רוצים להמשיך ולתת מימדים אחרים לטופס אנחנו כמובן יכולים להמשיך ולשחק איתו.
בואו לדוגמה נגדיל טיפה את התיבות טקסט ואז הלחצנים ייכנסו בצורה יותר אסתטית. אוקיי אם אנחנו רוצים לסדר יותר דברים מבחינה ויזואלית יש לנו את התפריט פורמט.
כאשר אנחנו בוחרים רכיבים אנחנו רואים שרכיב אחד מהרכיבים שבחרנו הוא לבן, הנקודות האחיזה הלבנות, ורכיב אחר הוא שחור. למעשה, אם אנחנו בוחרים מספר רכיבים, בואו נבחר את כל אלה, אחד מהם יהיה לבן וכל היתר יהיו שחורים.
אני מדבר על נקודות האחיזה שמסביב. יש לזה משמעות, וזה אומר שאנחנו יכולים עכשיו דרך תפריט הפורמט לתת תכונות שיושפעו מהרכיב שצבוע בלבן.
מה הכוונה? אם יש לי מספר, בואו נניח לחצנים, ואני רוצה שכולם יהיו באותו הגודל של לחצן מסוים.
אז אני בוחר את כולם, אני יכול לראות שאני יכול להחליף ולקבוע שמישהו אחר מקבל נקודות אחיזה לבנות, ולאחר מכן אנחנו לפורמט, make same size, or width, or height, or both.
בואו ניתן both, ונראה שכל הרכיבים שנצבעו בשחור הולכים להיות באותם הממדים כמו הרכיב שהיה צבוע בלבן. בעזרת רכיב פורמט אנחנו יכולים להגדיר גם לדוגמה מיקומים.
אם אני רוצה ששניהם יהיו באותו מיקום, אני יכול לקחת את אלה, לראות שהרחיב עם נקודות האחיזה הלבנות זה תיבת הטקסט התחתונה, ולהגדיר Align to the right, ואוטומטית מוצמד לימין.
ככה אני יכול ללכת ולראות שיש לי פה כל מיני אפשרויות שקשורות לדיזיין בתפריט פורמט. לדוגמה, Horizontal Spacing, אני יכול להגדיר שיהיו מרווחים שווים בצורה אוריזונטלית, או בצורה ורטיקלית, להגדיר שמשהו יהיה במרכז הטופס, לבצע אורדירינג של מישהו מעל או מתחת למישהו אחר,
ולבסוף אני יכול to lock controls במידה ואני נועל את הפקדים, זה אומר שאני לא יכול יותר להזיז את הפקדים בדיזיינר, ועושים את זה כאשר סיימנו לעצב את הטופס.
אוקיי, בואו נראה דוגמה נופפת, לצורך כך נוריד את הנעילה. נניח שאנחנו רוצים איזושהי כותרת, שתהיה קצת יותר למעלה ואנחנו רוצים שהכותרת הזאת תהיה במרכז הטופס.
ניקח איזשהי לייבל, נזרוק אותה כאן נניח, נגדיר enter your details, אבל אני רוצה שהכותרת הזאת תהיה בדיוק במרכז הטופס אז אני בוחר אותה, הולך לפורמט center inform horizontal ואוטומטית הדיזיינר יגיד לי בול איפה זה מרכז הטופס.
בסדר, אחרי שהצבנו את כל הטופס אנחנו יכולים לנעול את הפקדים שעליו, אנחנו נעצב את הטופס בצורה כזאת, נלך לפורמט לוק קונטרולס ובטעות לא נזיז איזשהו רכיב שעל הטופס.
אז הגדרנו את התכונות הדרושות אבל ישנה תכונה אחת שהיא התכונה הכי חשובה שאנחנו צריכים לתת גם לטופס וגם לרכיבים שעליו. אז בואו דבר ראשון נלך לסלושן אקספלורר ונראה מה זאת התכונה הזאת.
כאשר אני מסתכל על הטופס אני רואה שיש לי בסלושן אקספלורר איפה שכל הקבצים מוצגים לי אני רואה שיש לי את הקובץ form1.cs. אם נזכר בפרויקט ה-Consol Application שעבדנו איתו, אז נראה שהוספנו איזושהי מחלקה חיצונית שהכילה לנו את מחלקת הטופס שאנחנו בונים.
והמחלקה הזאת הייתה בקובץ נפרד, ופה גם כן אנחנו רואים את השם של הקובץ הזה. לכן מאוד חשוב שאנחנו ניתן שם משמעותי לקובץ הזה. בואו ניתן את אותו השם שהיה בפרויקט הקודם, details form במקום השם הדיפולטי, פורום אחד.
נלחץ על enter ואוטומטית אנחנו רואים שיש לנו איזושהי שאלה. והשאלה היא האם אנחנו רוצים שהשם הזה יהיה גם השם של המחלקה שאנחנו בונים. במובן שאנחנו רוצים שזה יהיה השם, מפני שהפיתוח הנכון אומר שמחלקה צריכה להיות בקובץ נפרד והשם של הקובץ צריך להיות באותו השם של המחלקה.
בואו נרשום yes. אם אנחנו עכשיו לוחצים מקש ימני ובוחרים ב-view code, אנחנו הולכים לראות שבעצם נוצרנו איזושהי מחלקה שנקראת Details Form והיא יורשת במחלקה פורם בדומה למה שאנחנו בנינו בפרויקט ה-Consol Application.
זאת אומרת שעד כאן אנחנו בכיוון הנכון. הדבר הבא שאנחנו רוצים לעשות זה לתפוס את כל אחד מרכיבי הטופס וללכת ולתת תכונה שהיא בעצם התכונה החשובה ביותר שקיימת לכל אחד מהרכיבים וזה ה-Name.
אם נזכר בפרויקט ה-Consol Application שבנינו בסרטון הקודם, אז ראינו שיש בעצם Data Members למחלקת הטופס, והרכיבים שאנחנו בונים על הטופס הם Data Members של מחלקת הטופס.
וכאשר אנחנו בנינו אותם, כל רכיב בנינו כ-Data Member, ונתנו לו כמובן איזשהו שם של האובייקט. זה בדיוק המאפיין name. ה-name של כל אחד מהאובייקטים והשם של ה-data member שהולך להיווצר לנו.
ולכן חשוב שאנחנו א', ניתן name לכל אחד מה-data members האלה, לא נשאיר שמות דיפולטיים, גם אם אנחנו סתם משתמשים עם הרכיב באופן תצוגתי ולא באמת הולכים להשתמש איתו אחר כך בקוד.
ויותר מזה, דרך ה-name הזה אנחנו הולכים אחר כך לגעת ברכיבים, חלק מהם לפחות, בקוד בכדי להמשיך לתת להם תכונות או לקרוא מהם מידע או לכתוב אליהם נתונים.
אז פה אנחנו צריכים להיזכר בתכלית שנתנו לכל אחד מרכיבי הטופס. Label זה היה lbl. בואו נניח שיש לנו פה lbl-header. יש לנו פה Label נוספת של ה-first name, נבחר אותה וניתן לה את השם lbl-first name.
יש לנו את ה-Label הזאת, ניתן לה את השם lbl-last name. יש לנו את תיבת הטקסט הזאת שמיועדת בשביל השם הפרטי וניתן לה את השם txt first name. יש לנו את תיבת הטקסט הזאת וניתן לה את השם txt last name.
שימו לב שכל אחד מרכיבי הטופס שמוצגים עליו הולך להיות data member בתוך הטופס, תכף