חלק ב' - בניית אפליקציות לאנדרואיד ב-Kodular - מאפיינים, משתנים, רשימות ולולאות.

[א.מ.ד.]

קישור לחלק א' של המדריך

כפתור - מאפיינים ואירועים

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

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

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

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

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

נבחן את רשימת המאפיינים בצד ימין:

נסביר אחד אחד וננסה לשנות אותם ולראות מה קורה בתצוגת האפליקציה באפליקציית המלווה:
Background Color - צבע הרקע של הכפתור. נלחץ ונשנה את צבע הכפתור מתוך פלטת הצבעים, ונבחר "OK".
Enabled - האם הכפתור מופעל או מושבת. נשאיר פועל.
Font Bold - האם הטקסט מודגש. תנסו.
Font Italic - האם הטקסט נטוי. תנסו.
Font Size - גודל גופן הטקסט. נשנה ל-18.
Font Typeface - סוג הגופן. עדיף להשאיר על ברירת המחדל.
Height - גובה הכפתור. בהזנת מספר, גובה הכפתור יוגדר למספר פיקסלים כמספר שהוזן, ובהזנת מספר ואז "%", גובה הכפתור יוגדר למספר האחוזים שהוזן מתוך רכיב האב. בלחיצה על -

גובה הכפתר יוגדר למלוא גובה רכיב האב, ובלחיצה על -

גובה הכפתור יחזור לברירת המחדל -גובה אוטומטי. ננסה לשחק עם האפשרויות ונראה את התוצאות במכשיר המחובר.
Width - רוחב הכפתור. נגדיר אותו באותו אופן של הגדרת גובה הכפתור.
Image - תמונת רקע של הכפתור. משמש לדוגמא אם אתם רוצים להעלות אייקון מותאם אישית שיצרתם שישמש ככפתור.
Shape - צורת הכפתור - מרובע, פינות מעוגלות או אליפטי. מומלץ לשנות לפינות מעוגלות (האפשרות הראשונה).
Text - תוכן הטקסט המופיע על הכפתור.
Text Alignment - יישור הטקסט - למרכז, ימין או שמאל הכפתור.
Text Color - צבע הטקסט.
Visible - האם הכפתור גלוי או מוסתר.

המאפיינים הבאים נמצאים תחת הקטגוריה "מאפיינים מתקדמים" בסוף הרשימה:
Border Shadow - האם לכפתור יש צל בגבול החיצוני בעת לחיצה. נשאיר כברירת המחדל.
Font Typeface Import - יבוא גופן לטקסט.
HTML Format - האם הטקסט מוצג בפורמט HTML - לעיצוב מתקדם של הטקסט באמצעות תגיות HTML נפוצות (לא כולן).
Rotation Angle - זווית סיבוב הכפתור.
Show Feedback - האם יש להציג משוב חזותי בכפתור המשתמש בתמונה כרקע.
Touch Color - צבע הכפתור בלחיצה עליו.

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

ונחבר אותו לבלוק אירוע הלחיצה שיצרנו בחלק א' של המדריך:

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

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

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

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

משתנים

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

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

נגדיר אותו לטקסט ריק באמצעות חיבור בלוק טקסט ריק:

בלוק בצבע כתום כהה = בלוק משתנה.
עכשיו כדי להגדיר את תוכן המשתנה, נרחף עם העכבר מעל הכיתוב "name" שהוא בעצם שם המשתנה אותו ניתן לשנות בלחיצה עליו, ונגרור את בלוק הגדרת המשתנה:

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

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

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

עכשיו בלחיצה על הכפתור, הטקסט שעליו ישתנה לתוכן המשתנה, שבמקרה הזה הוא מחרוזת הטקסט "משתנה"!

רשימות

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

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

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

נחבר את הבלוק לבלוק הגדרת המשתנה שגררנו קודם, ונמלא את הרשימה בפריטים שונים:

עכשיו המשתנה "name" הוא בעצם רשימה של פירות!
הבלוק שחיברנו עכשיו הוא בלוק שיוצר רשימה מוכנה של פריטים. מה קורה כשנרצה להוסיף פריט מסויים לרשימה בהמשך? לצורך כך קיים הבלוק הבא:

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

עכשיו נוסף למשתנה הרשימה "name" גם הפריט "תמר"!

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

נמחק את טקסט ברירת המחדל במאפייני הרכיב:

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

נחבר אליו את משתנה הרשימה שלנו:

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

לולאות

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

נמקם אותו במקום הבלוק שמגדיר את טקסט התווית, ונחבר בקלט הרשימה את משתנה הרשימה שלנו:

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

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

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

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

אז בחלק ב':

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

אחרי שלמדנו את רוב הבסיס של Kodular, בחלק הבא נתחיל ליצור בעז"ה אפליקציה אמיתית ושימושית תוך כדי המדריך!

בהצלחה! אשמח לתגובות והערות על המדריך.