מדריך | בניית אפליקציה של פתקים
-
הקדמה: במדריך הבא נראה איך לשמור רשימות באחסון בנתוני האפליקציה וכיצד ניצור דינמיקה לפי הרשימות האלה
מומלץ מאד להבין מה עושים מכיוון שאפשר ללמוד מפה להרבה דברים . האפליקציה של פתקים זה רק דוגמא במדריך הזה אין שום הדרכה לגבי עיצוב ככה שאם אתם רוצים שזה יראה טוב תיקחו את זה למקום שלכםשלב א - רכיבים
גררו למסך את הרכיבים הבאים
- Vertical_Scroll_Arrangement
- Button פעמיים
- Vertical_Arrangement
- Text_Box
- Dynamic_Card_View
- Dynamic_Label
- Tiny_DB
שלב ב - עיצוב בסיסי
לתוך Vertical_Arrangement גררו את ה Text box ואת אחד מהכפתורים שנו את טקסט הכפתור לשמור פתק
לחצו על הטקסט בוקס הגדירו בצד ימין שהגובה והרוחב יהיה על מקסימום
והגדירו שזה יהיה תיבה של שורות מרובות
ב Hnit תרשמו רשום הערה או פתק כרצונכם
הHint זה הטקס שיהיה רשום בתיבת הטקסט עד שהמשתמש מתחיל את פעולת ההקלדה
בVertical_Scroll_Arrangement
תשימו כפתור נוסף ותרשמו עליו הוסף פתק חדש
כעת תגדירו את ה Vertical_Arrangement
לבלתי נראה
להוריד את ה Vשלב ג- בלוקים
שלב -א
נגדיר שבלחיצת הכפתור של הוסף פתק חדש נסתיר את Vertical_Scroll_Arrangement
ונגלה את Vertical_Arrangement
שלב - ב
מה יקרה בעת פעולת שמירת הפתק
דבר ראשון ניצור משתנה של רשימה ככה-
ואז נגדיר שבלחיצת כפתור שמור פתק יקרא התהליך הבא לפי סדר הבלוקים מלמעלה למטה
1-הוספת אייטם למשתנה של הרשימה (האייטם הוא הטקסט שהמשתמש רשם ב text box)
2- (לא חובה) שינוי הטקסט של טקסבוקס לריק
3-שמירת הרשימה ב tiny DB
4- נגלה את Vertical_Scroll_Arrangement
ונסתיר את Vertical_Arrangement
5-יציאה מהמסך ופתיחתו מחדש
// את יצירת הפתקים נגיד שיקרא בעת פתיחת המסך בשביל שלא יווצר כפילות ברכיבים הדינמיים
שלב -ג
מה יקרא בעת פתיחת המסך
א-קביעת המשתנה לערך שנמצא בTinyDB
ב- יצירת כרטיסים דינמיים שבתוכם יוצג טקסט דינמי לפי אורך הרשימה
הסבר על הבלוק האחרון
בבלוק הצהוב הנלקח מ Control
בכניסה האמצעית -to אנחנו מגדירים כמה פעמים נעשה את הפעולות . מספר הפעמים שאנחנו נגיד הוא אורך רשימת הפתקים
הפעולות שלנו זה יצירת כרטיסים דינמיים וטקסט דינמי ולכן אנחנו צריכים שעל כל פריט שיש ברשימה של הפתקים יצור כרטיס דינמי ובתוכו הטקסטבבלוק הסגול הראשון אנחנו מגדירים
1- את ה ID של הכרטיס ל-NUMBER שזה אומר שכל כרטיס יקבל מספר לפי הסדר הראשון יהיה 1 והשני 2 וכן עלאה ..
2-ליצור כרטיסים בתוך ה Vertical_Scroll_Arrangement
3-רוחב
4-גובה
בבלוק הסגול השני אנחנו מגדירים
1- ID ע"ע הבלוק בראשון
2- מגדירם שזה יצור בתוך הכרטיסים הדינמיים לפי ID
בבלוק הסגול השלישי אנחנו מגדירים את הטקסט שיוצג בטקסט הדינמי שיצרנו
1- ID
2-בחר מתוך הרשימה את הטקסט האינדקס הוא נמבר
3- הוא נותן אופציה לתוגת HTML נגיד שלא FALSEאת כל שלב ג אנחנו נגדיר שיקרא בעת פתיחת המסך בבלוק הזה
כרגע עד כאן המדריך מקווה בהמשך להוסיף הסבר על מחיקת פתק מהרשימה אני מאמין שתסתדרו בחלק הזה גם
בלי מדריך
בהצלחה לכולם !
אם יש שאלות אפשר לשאול בתגובות לא הביישן למד..
לתגובות כנסו לכאן
האפליקציה:
פתקים דוגמא.apk
הפרויקט:
NOTE.aia -
ז זונדל התייחס לנושא זה ב
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}