תל אביב | חיפה | אשקלון
משרד ראשי: רח' הברזל, תל אביב | 03-3741258 | info@iiit.co.il
    
עמוד הבית
מחקר ופיתוח
המכללה
מאגר יועצים
יישומים
מלאו את הפרטים הבאים ליצירת הקשר
שם:
אי-מייל:
הודעה:
בניית מסכים בסיסית ב CSA – לפי דוגמא

מאמר זה מכיל הסבר ודגמה לבניית לאבני הייסוד של בניית מסכים ב CSA.

בדרך כלל אנו משתמשים ברכיבים משוכללים לצורך בניית המסך כמו Ribbon, RecordPage, RetrievalGrid ואחרים, אולם גם רכיבים אילו מבוססים על אבני הייסוד של בניית מסכים כפי שיוסברו במאמר זה. במאמרים אחרים אני אסביר כיצד לבנות רכיבים משוכללים.

 

 

 

שלב ראשון - חלוקה הטבלאות

בשלב ראשון יש לדמיין כל מסך כמערך של טבלאות מקוננות (טבלאות בתוך טבלאות), לדוגמה אם ברצוני לבנות את המסך הבא:

 

 

אני אחלק את המסך לטבלאות, אתחיל בטבלה הראשית באופן הבא:

 

 

הטבלה שסימנתי באדום כוללת שלוש שורות ושני עמודות, בצד שמאל למעלה איחדתי שני תאים לתא אחד,

ובשורה השנייה איחדתי שני תאים לתא אחד.

 

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

 

להלן תהליך הבנייה בקוד:

הגדרתי מחלקה שיורשת Table שמייצגת את הטבלה הראשית (הטבלה שסימנתי באדום).

 

בעקרון מחלקה ב CSA יכולה לרשת כל רכיב UI, אבל בפועל רוב המחלקות יורשות Table או רכיב משוכלל יותר שבעצמו יורש Table.

 

אגדיר מימדים לשורות ולעמודות:

המשמעות של שורות הקוד הם:

השורה הראשונה תהיה בגובה של 45, השנייה 75 והשלישית בגובה של כל מה שנותר מהגובה שהוקצע לטבלה כולה.

העמודה השנייה תהיה ברוחב 150 והראשונה ברוחב של כל מה שנותר מהגובה שהוקצה לטבלה כולה.

 

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

 

שורות הקוד הבטות מגדירות את הגבול הכחול שמסביב למסך:

 

 

ב BorderThickness אפשר לרשום מספר שמבטא את עובי הגבול או צרוף של ארבע מספרים (לדוגמה "3,5,6,10") שמבטים עובי שונה לגבול שמאל, למעלה, ימין למאטה – לפי הסדר הזה.

 

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

 

 

כעת נתחיל להכניס תוכן לטבלה:

 

 

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

הפרמטרים ב AddChild: (1) האינדקס של השורה, (2) האינדקס של העמודה, (3) RowSpan, כלומר איחוד תאים לכיוון למאטה, (4) ColumnSpan כלומר איחוד תאים לכיוון שמאל.

 

רק בכדי לראות בעניים את התוצאה אני מגדיר באופן זמני רקע בצבע אחר לכל טבלה פנימית באופן הבא:

ואז בהרצת המסך מתקבלת התוצאה הבאה:

 

 

(יותר מאוחר אני אהפוך את הכיוון הכללי לימין לשמאל בפקודה אחת)

לאחר שבחנתי את התוצאה אני מוחק את פקודות ה Background.

 

 

וכעת אני צריך להתייחס לכ תא בנפרד, את התא של התפריט העליון אחלק לטבלה באופן הבא:

 

שורה אחת ו 12 תאים.

 

אני מגדיר את הגובה של השורה הראשונה.

 

 

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

לכל רכיב UI ב CSA יש מימדים שמוקצים לו ע"י הרכיב המארח. הטבלה UpperMenuTable מתארחת בתוך תא בטבלה שמימדיו הם הרוחב והגובה המוקצה לה.

 

 

שורות הבאות:

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

 

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

 

הפריט הראשון בתפריט יבנה ע"י השורות הבאות:

 

 

בניתי רכיב מסוג Label (שורה 1) והכנסתי אותו לתא המתאים בטבלה (שורה 2), הגדרתי את הטקסט וגודל הפונט הרצוי.

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

 

גובה – הגובה של ה Label היה קבוע מראש ע"י הרכיב המארח שלו כי הגדרתי Star לשורה שמארחת אותו שהיא עצמה מתארחת בשורה שהוגדרה כ Size=45, ולכן הגדרתי VerticalIbberAlignment=Center, המשתמעות היא שהתוכן ימקם את עצמו באמצע.

 

רוחב – לא הגדרתי רוחב לעמודה ברכיב המארח, ולכן הרוחב יחושב לפי הדרוש להצגת הטקסט שהוגדר. התכונה Padding מאפשרת להגדיר הגדלה המקום שיוקצה לתוכן הרכיב משמאל, מלמעלה, מימין ומלמטה (לפי הסדר הזה). המשמעות של השורה שהגדרתי היא שרוחב ה Label יהיה השטח שדרוש להצגת המילה "אירועים" ועוד 30 משמאל ועוד 30 מימין.

 

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

 

 

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

 

 

ברכיב המציג "טבלאות" השתמשתי בתכונת CornerRadius כדי להציג פינות מעוגלות.

 

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

 

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

 

 

קרא עוד

תוכנות יסוד של רכיבי CSA

 

המכון הישראלי לטכנולוגיות מידע © כל הזכויות שמורות 2012