תנאי IF בלייבקוד והמשתנה הזמני it

היום נכיר את הדרך שבה נציג תנאים בשפת LiveCode.

ראשית, צריך לומר של-Hypertalk (השפה המקורית שעליה מבוססת LiveCode) הציעה לעולם התכנות כבר בשנות ה-80 משהו מגניב באמת שקוראים לו it.

מה זה it?
נניח שנעלה תיבת דו-שיח עם השאלה הבאה:

answer "Do you want to play a game?" with "Yes" or "Maybe" or "No"

שימו לב שהשאלה באה עם שני כפתורים. אם עניתם Yes (כלומר לחצתם על הכפתור Yes) הרי שהמשתנה הזמני הזה it יקבל את הערך Yes. אם לחצתם על No - זה הערך שייכנס ל-it. אם עניתם אחרת - הוא יקבל את הערך האחר - Maybe.

עכשיו בואו נציג את התנאי בקוד:

if it is "Maybe" then answer "You have to decide!" with "Yes" or "No"

  if it is "No" then quit

if it is "Yes" then go to card "TheGame"


מה קרה כאן?
לייבקוד שואלת מה הערך של it, כלומר מה נבחר מבין הכפתורים בתיבת הדו-שיח. אח"כ היא אומרת מה לעשות עם כל ערך של it כמו:

אם זה No אז היא מפסיקה את התכנית.
אם זה Maybe אז היא מציינת שעליך לבחור ומציגה שוב את האפשרויות לחיוב ולשלילה.
אם זה Yes אז היא עוברת למסך (card) בשם TheGame.





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


תהנו!

אפקט של rollover עם תמונה - שיעור 5

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

בואו נתחיל...

נשים כפתור על המסך
נגרור מלוח הכלים Push Button אל "סטקיה חדשה" שפתחנו (לא עברתי לענייני בישול.. זה השם העברי שהחלטתי לתת בקריצה ל-New Mainstack).

נייבא תמונה או כמה תמונות שהכנו
נבחר מתפריט "File" את "Import as control" ובתפריט המשנה שלו את "Image file..."

הערה: שימו לב שאפשר לבחור כמה קבצי תמונה בו זמנית כדי לייבא ללייבקוד

יבאו שתי תמונות - רצוי שתיים שנראות כמו שני מצבים שונים של אותה תמונה (רגיל ומואר למשל).

נפתח את ה-property inspector של הכפתור שיצרנו
דאבל קליק על הכפתור וייפתח ה-property inspector שלו.

נבחר במקום שבו מגדירים את האייקון של הכפתור
נבחר 'Icons & border' ב-property inspector.

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

נלחץ על הכפתורים שמימין לשדות 'icon' ו-'hovericon' ונבחר ב-'Image Library' את 'This Stack'.
יופיעו לפנינו התמונות שצירפנו לסטקיה ואנו נבחר כל תמונה למצב שבו נרצה אותה.

נוסיף שקיפות לכפתור
נגדיר את הכפתור כשקוף, כלומר שלא יראו כפתור אלא רק תמונה:

1. ב-property inspector נבחר את הגדרות ה-Basic Properties.
2. נשנה את מידות הכפתור למידה הרצויה לנו.
3. בתפריט Style נגדיר שהכפתור יהיה Transparent.
4. נגדיר ששם הכפתור לא יופיע (פשוט מבטלים את האופציה 'showName').
5. נגדיר שהכפתור לא יואר בלחיצה  (ביטול האופציה ''autoHilite').
6. נבטל גם את האופציה 'sharedHilite'.

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

בהצלחה!



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

שימוש בלשוניות כדי ליצור מחברת דיגיטלית - שיעור 4

נציב כפתור לשוניות על הכרטיס

נוסיף לשונית (tabbed button) וניתן שם לכל לשונית ולרכיב עצמו (עושים זאת בחלון ה-Properties שאפשר לפתוח מתפריט Object).

נכנת את כפתור הלשוניות להוביל מכל לשונית לכרטיס שלה

הנה נכניס את הקוד הבא ללשונית:

on mouseUp            

 get the selectedText of me -- מזהה את בחירת המשתמש--  

go card it  -- הולך לכרטיס ששמו זהה ללשונית שנבחרה --     

end mouseUp

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

יש עוד אפשרות לקוד יותר קצר:

on mouseUp

    go cd value(the selectedline of btn "Tab Menu")  -- הולך לכרטיס ששמו זהה ללשונית שנבחרה --     

end mouseUp

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

בואו נגדיר את כפתור הלשוניות (tab button) כקבוצה, כך שכל לשונית תקבל את התיכנות הזה ולא נצטרך לעשות זאת בנפרד. עושים זאת באמצעות Object -> Group Selected

נשים את הלשוניות ברקע

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

עושים זאת באמצעות פתיחת ההגדרות שלו (Object -> Object Properties)

בחלון ה-Properties ניתן שם עם משמעות לרכיב (בשדה Name) ונסמן את האופציה "Behave like a background" שכמעט בתחתית החלון.

ניצור את הכרטיסים נוספים

עכשיו יוצרים כרטיסים נוספים, שמספרם יהיה כמו הלשוניות שיצרנו. עושים זאת בפקודה Object -> New Card

ניתן להם שמות כמו הלשוניות שמביאות אליהם.

זהו. יצרנו תוכנה קטנה (Stack, זוכרים?) שמאפשרת דפדוף והזנה של טקסט לדפים שונים, כמו פנקס נושאים.
חביב, לא?





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

ההבדלים בין פקודות, פונקציות ופרטיים בלייבקוד

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


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


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

Private - פקודה או פונקציה שפעילה רק בתוך הסקריפט שכולל אותן. טוב לכתיבה בסקריפטים שייכנסו בתור ספריות (libraries) לתכניות אחרות.

תיכנות כפתורים בסביבת LiveCode - שיעור 3

בואו נתחיל לתכנת בסביבת LiveCode



צרו Stack חדש (זה פרויקט חדש, זוכרים?) ולחצו על Ctrl+N כדי ליצור עוד מסך, בנוסף למסך הראשון שנוצר אוטומטית. מסך נקרא ב-LiveCode "כרטיס", או Card באנגלית.

רגע של היסטוריה למעוניינים:
ה-Cards היו המסכים שנוצרו בתוכנת HyperCard כיוון שהיא היתה סביבה תיכנותית שאיפשרה בניית מסדי נתונים בקלות. כל רשומה בבסיס הנתונים הזה נקראה Card והתיכנות של השדות והכפתורים היה ברקע (קראו לו BackGround). כיום, נפטרו ב-LiveCode מהרקע, אבל הכרטיסים נשארו..

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

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


עכשיו הוסיפו שדה ותנו לו שם פיקטיבי (משהו כמו "My 1st Software").

מתחת שימו Push button והגדילו אותו (באמצעות נקודות שינוי הגודל שבפינות).

לחצו על הכפתור וב-Inspector שנו את שמו ל-Enter.

בראש ה-Inspector שנו ל-Text Formatting והגדילו את הגופן ל-24, שחקו עם שם הגופן לאחד שיפה לכם.

תוכלו גם לבחור את Icons & Border ולהוסיף אייקון לכפתור.

הוסיפו למטה עוד שדה Label: והכניסו אליו (באמצעות Contents ב-Inspector) את הקרדיט שלכם "Made by Nadav Dafni".



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

הקליקו בכפתור הימני של העכבר על הכפתור ובחרו את "Edit Script". תוכלו לראות שבחלון התיכנות כבר מופיע הקוד:

on mouseUp

end mouseUp

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

הכניסו בין פתיחת הקוד לסיומו את השורה Go Next:

on mouseUp

   Go Next

end mouseUp

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



בואו ננסה את זה.. לחצו בלוח הכלים (Tools) על חץ ה-Run (זה החץ הלבן, השמאלי, שבראש לוח הכלים)

עכשיו, כשתלחצו על הכפתור, הוא יעביר אתכם למסך השני. עברו חזרה למצב תכנות (החץ עם + שקוראים לו Edit) ובמסך השני הזה הוסיפו שדה Label: וכתבו בו Here you are.

תוכלו גם להוסיף תמונה (יש אייקון ל-Image Area בלוח הכלים - גררו אותו ונסו להבין ב-Inspector איך להוסיף תמונה מהמחשב שלכם).

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

בהצלחה!

יסודות LiveCode - שיעור 2

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

1. מתפריט Object פתחו מסך חדש באמצעות הפקודה New Card (קיצור מקשים Ctrl+N).
2. לניווט בין המסכים אפשר לבחור מתפריט View או Ctrl+1 עד 4 (1 ראשון, 4 אחרון, 2 ו-3 לקודם והבא)
3. במצב Edit (מהפלטה של ה-Tools לבחור את החץ עם הצלב) גררו שדה Label:
4. תנו שם לאובייקט Title (ב-Inspector במצב של Basic Properties רשמו Title בשדה Name)
5. בחרו למעלה את Contents ורשמו בשדה התחתון, במקום Label: את הכותרת של היישום שאתם רוצים לתכנת.
6. לשיפור הגופן של הכותרת וכדי למרכז אותה, בחרו למעלה את לשונית Text Formatting ושנו.

Application Browser - חלון החומרים בלייבקוד

ה- בלייבקוד מציג את כל מרכיבי הפרויקט (ה-Stack) שפתוח. פותחים אותו מתפריט Tools.

רואים בו את כל המרכיבים שיש ב-Stack שעליו עובדים.

דאבל קליק על כל אובייקט ב-Application Browser תפתח אותו ותציג אותו.

Ctrl+דאבל קליק יפתח ישר את הקוד של האובייקט.