הרבה פעמים אנחנו נדרשים לאפיין אלמנטים שחוזרים על עצמם עם תוכן שונה (כרטיסיות, רשימות, טבלאות וכו'), כחלק מתהליך האפיון אנחנו גם רוצים לבדוק מקרי קצה (לדוגמה: טקסט ממש ארוך באחד האלמנטים). הרבה פעמים אנחנו רואים את התוצאה ורוצים לשנות עיצוב של אלמנט אחד (מיקום, גודל פונט, ריווח וכו'). ואז צריך לשנות עיצוב של אלמנט אחד הרבה הרבה הרבה פעמים. Repeater הופך את התהליך הזה למהיר ונטול כאבים.
אם אתם לא חברים של הריפיטר, יכול להיות שיצרתם מאסטר, שיכפלתם אותו מספר פעמים ועשיתם ב- Break Away לעותק או שניים על מנת לשנות את התוכן שלו, הבעיה מתגלה כשחוזרים לערוך את המאסטר המקורי והעותקים שהיו בBreak away כבר לא בתוקף.
למרות שכל הנושאים האפשריים מכוסים היטב במדריכים, ובפורומים של אקשור וגם בספרי הדרכה, אין הרבה רפרנס בעברית. במילים אחרות, לא המצאתי כלום (יש לינקים בתחתית הפוסט) אבל אם הפוסט העברי שלי יפתח לכם את הסקרנות לחפור עוד בנושא – עשיתי את שלי.
אז מה זה ה- Repeater הזה בכלל?
Repeater ("חזרן" בעברית?) מאפשר לעצב מספר widgets לכדי תבנית (item בשפת אקשור) ואז הריפטר מאפשר לחזור על התבנית מספר רב של פעמים. בכל חזרה של התבנית ניתן לצקת תוכן אחר, כלומר:
- אם בתבנית שלי יש תמונה – בכל חזרה אפשר להציג תמונה אחרת.
- אם בתבנית שלי יש כותרת – בכל חזרה אפשר להציג כותרת שונה.
היתרון הגדול בשימוש בRepeater הוא ששינוי עיצובי של הכותרת (או כל אלמנט אחר) בתבנית ישנה את נראות הכותרת בכל החזרות. התוצאה דומה מאוד לReapet grid בAdobe XD אבל הדרך להגיע לשם קצת פחות אינטואיטיבית, החיסרון הגדול באקשור הוא שהעבודה על סידור האובייקטים שבתוך הריפיטר נעשית מחוץ לקונטקסט. בדומה לעריכה של תוכן ב-Dynamic Panel, צריך לעזוב לרגע את הקנבס, לערוך את האלמנטים ואז לחזור לדף בכדי לראות איך האלמנטים מסתדרים בתמונה הגדולה, כך שבניגוד למה שAdobe מציעים, שינוי התבנית לא נעשה בצורה חלקה.
מה נלמד היום?
נעבור על החלקים השונים של הריפיטר, נלמד איך מעצבים את תוכן התבנית ואיך מוסיפים עוד תבניות. נלמד איך מזינים תוכן שונה בכל חזרה (בעזרת מעט קוד) ובסוף המדריך נגיע לשלוש כרטיסיות שנראות בערך ככה:
מספיק דיבורים, קדימה לעבודה
מילת עידוד אישית: הדרך הכי טובה ללמוד תוכנה היא ללכלך את הידיים, אז בבקשה תפתחו אקשור ותעשו את השלבים השונים במקביל לקריאה.
צעד ראשון – גוררים:
1. כאשר גוררים Repeater לקנבס נוצרת ברירת המחדל שכוללת 3 חזרות של מלבן (עם טקסט משתנה בכל חזרה)
2. ב Inspector בפאנל הימני (מתחת לproperties) אפשר לראות שדות ייחודיים לRepeater שנקראים Data set, לחיצה על Add Row תייצר עוד חזרה בRepeater .תוסיפו שורות, זה לא מסובך.
* אם אתם על גרסה 7 של אקשור, תמצאו את ה Data set באותו מקום של ה-Page interactions (כלומר בתחתית העמוד) ברגע שתכנסו לתוך הRepeater (דאבל קליק על המלבנים הירוקים)
צעד שני – עיצוב התבנית:
1. לחיצה כפולה על הRepeater תפתח את התבנית, בדומה לdynamic panel אנחנו עוזבים לרגע את הקנבס וצוללים לעריכה של התוכן. התבנית שמכילה את אוסף הwidgets נקראת item.
2. בואו נשנה את התבנית: בדוגמה למטה הגדלתי את המלבן, הוספתי תמונה, שם, מספר חברים, וכפתור.
3. תתנו שם לכל widget, אל תתעצלו זה הכרחי לשלבים הבאים.
4. חזרה לדף הראשי, אפשר לראות איך ה Repeater שינה צורה וגודל. הגודל של כל item נקבע על ידי הנקודה הימנית התחתונה, בדוגמה למעלה, פינת המלבן מגיעה ל 100,400 ולכן הגודל של כל item יהיה 400X100.
5. אם נצלול חזרה לתבנית שלנו, ונשנה את העיצוב של אחד האלמנטים, כל החזרות ישתנו.
תנסו את זה.
צעד שלישי – מזינים תוכן
בכדי לשתול נתונים חדשים בכל חזרה של item, צריך להמשיך את ההכרות עם ה Data set. כאמור, ה Data set נמצא בפאנל הימני מתחת ל Properties (או בפאנל התחתון אם אתם בגרסה 7). הData set (טבלה) תכיל את כל הנתונים שיופיעו בכל חזרה של Widget. כבר גילינו שמספר החזרות של הRepeater שווה למספר השורות בטבלה.
אז מה עושים הטורים? ובכן, כל טור שנשייך לWidget ישנה את תוכנו בכל חזרה, לדוגמה: טור שמכיל שמות (תומר, באך, ביורק) שמשויך לכותרת, יחליף את תוכן הכותרת בשם אחר בכל חזרה.
בדוגמה למטה, הוספתי שני טורים, לראשון קראתי UserName ולשני קראתי Photo. דאבל קליק על תא, יאפשר להוסיף טקסט. על מנת להוסיף תמונה, צריך ללחוץ על הכפתור ימני ולבחור import image
צעד רביעי – מעט קוד (אין ברירה)
זוכרים שאי שם בצעד הראשון היו שלושה מלבנים ובתוך כל אחד היה מספר שונה? ובכן, כשגוררים Repeater לקנבס, הוא מופיע עם הפקודה הבאה, בתרגום חופשי:
OnItemLoad – כאשר הRepeater עולה
Case 1 – מצב ראשון
Set text on (Rectangle) – כתוב טקסט על (מלבן)
Equal to – שווה ל
"[[Item.Column0]]" – טקסט שיש בטור שקוראים לו "Column0"
בואו נשנה את הטקסט של שם המשתמש כך שבכל חזרה יופיע שם אחר:
1. דאבל קליק על הפקודה יפתח את ה Case editor.
2. אם לא נתתם לכל widget שם אז מתחת לRepeater יהיו שמות גנריים,
גרוע מכך, יכול להיות שלא תראו כלום אם hide unnamed יהיה מסומן.
3. מסמנים את הWidget- שאותו נרצה לשייך לטור בData set
4. מוחקים את הערך ולוחצים על FX כדי לפתוח את חלון הEdit text
5. מתוך תפריט Insert Variable or Function > Repeater/Data set בוחרים את הטור שנרצה לשייך לWidget.
בדוגמה שלי הטור נקרא UserName ולכן בחרתי את הפקודה Item.UserName
אם נתתם שם אחר לטור, יהיה כתוב" השם שנתתם. Item".
לאחר שבחרתם, תלחצו OK.
בסוף הcase editor- נראה ככה:
והאינטראקציה של הRepeater נראית ככה:
משימה 1:
אם עוד לא שינתם את שם הכותרת, זה הזמן.
אם עשיתם אז תעשו אותו דבר, אבל עם תמונה.
רמז, במקום set text צריך פקודה אחרת… (הפתרון השלם אי שם למטה)
התוצאה צריכה להראות ככה:
הבנתי, היה אחלה, מה עכשיו?
קודם כל, אשמח לשמוע תגובות ☺
עכשיו שיש לכם את הבסיס, אני מציע להמשיך ולחקור פונקציות נוספות של Repeater שמופיעות מתחת לstyle כמו:
Layout, Spacing, Pagination
ואחר כך, לחקור התנהגויות יותר מורכבות כמו: sort & filter, adding and removing items
לינקים לקריאה נוספת:
רפרנס לRepeater באתר של אקשור.
https://www.axure.com/support/reference/Repeater-widgets
פורום שמוקדש כולו לRepeater
http://www.axure.com/c/forum/Repeater-widget/
פוסט שמסכם את נושא המשתנים (Variables) שניתן לפנות אליהם
לדוגמה מה זה item.name ומה זה itemcount
קבוצת אקשור ישראל בפייסבוק
https://www.facebook.com/groups/axureisrael/