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

 

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

 

רכיב מארח – כל רכיב UI ב CSA מוצב ברכיב מארח שיכול להקצות לרכיב גובה ורוחב, המארח של הרכיב הראשון הוא המסך וגובה ורוחב המסך הם המימדים המוקצים לרכיב הראשון.

 

רקע ותוכן – לכל רכיב CSA יש רקע שהמימדים שלו יכולים להיקבע ע"י הגובה ו/או הרוחב שהוקצע לו ע"י הרכיב המארח. לרכיב יש גם תוכן שהוא צריך להציג (לכל סוג רכיב יש תכנים מסוגים שונים).

במקרים שבהם לא הוקצע גובה ו/או רוחב לרכיב אז המימדים שדרושים להצגת התוכן יהיו גם המימדים של הרקע.

כאשר אנו מביטים ברכיב שמארח בעצמו רכיבים (כמו טבלה) אז כל הרכיבים הבנים נחשבים תוכן באותו רכיב.

 

 

 

הרכיב Table – הטבלה (Table) היא הרכיב המארח השימושי ביותר, לטבלה יש שורות (Rows) ועמודות (Columns), הטבלה מארחת רכיבים בנים בתאים (Cell).

 

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

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

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

 

Fix – רוחב העמודה או גובה השורה יוגדר כמספר קבוע.

 

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

 

 

בטבלה אפשר גם להציב רכיבים בנים בתאים מאוחדים (ColumnSpan ו RowSpan).

 

להלן טבלת תכונות שאפשר להגדיר בכל רכיב UI ב CSA

 

תכונה

הסבר

WidthWhole

קביעת רוחב קבוע לרקע של הרכיב (בניגוד לרוחב שנקבע ע"י הרכיב המארח)

HeightWhole

קביעת גובה קבוע לרקע של הרכיב (בניגוד לגובה שנקבע ע"י הרכיב המארח)

MaxWidthWhole

הצבת מקסימות לרוחב הרקע של הרכיב

MaxHeightWhole

הצבת מקסימום לגובה הרקע של הרכיב

MinWidthWhole

הצבת מינימום לרוחב הרקע של הרכיב

MinHeightWhole

הצבת מינימום לגובה הרקע של הרכיב

Background

קביעת צבע לרקע של הרכיב

MouseOverBackground

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

תכונה זו שימושית כאשר רוצים להציג שניתן להקליק על הרכיב

BackgroundImagePath

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

הערה – גודל התמונה לא משפיע על המימדים של הרכיב

BorderThickness

קביעת עובי הגבולות שיעטפו את הרקע בתכונה זו ניתן לציב מספר כמו "3" או ארבעה מספרים כמו "3,4,5,6", ארבעת המספרים מבטאים עובי גבול שונה ל שמאל, מעלה, ימין ומטה

BorderColor

צבע הגבול

CornerRadius

הגדרת פינות עגולות לרקע של הרכיב,

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

Padding

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

ניתן להגדיר מספר אחד או ארבעה מספרים.

Visibility

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

Visible – (ברירת מחדל) הרכיב יוצג

Hidden – הרכיב לא יוצג אבל מימדיו יחושבו

Collapse – הרכיב לא יוצג ומימדיו לא יחושבו

VerticalInnerAlignment

קביעת מיקום התוכן של הרכיב לעומת הרקע שלו

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

HorizontalInnerAlignment

קביעת מיקום התוכן של הרכיב לעומת הרקע שלו

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

HorizontalAlignmentToParent

הצמדת הרקע של הרכיב לעומת המקום המוקצה לרכיב ע"י הרכיב המארח.

תכונה זו כן משפיעה על רוחב הרקע של הרכיב.

האפשרויות הן:

Stretch – (ברירת מחדל) רוחב הרקע של הרכיב יקבע לפי הרוחב שמוקצה לו ע"י הרכיב המארח.

Left,Right,Center – רוחב הרקע יקבע לפי התוכן ויוצמד התוך המקום שהוקצע ע"י הרכיב המארח.

VerticalAlignmentToParent

הצמדת הרקע של הרכיב לעומת המקום המוקצה לרכיב ע"י הרכיב המארח.

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

האפשרויות הן:

Stretch – (ברירת מחדל) גובה הרקע של הרכיב יקבע לפי הגובה שמוקצה לו ע"י הרכיב המארח.

Top,Bottom,Center – גובה הרקע יקבע לפי התוכן ויוצמד התוך המקום שהוקצע ע"י הרכיב המארח.

 

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