streamalism.org

1. סקירה כללית

במאמר הראשון בסדרה זו הצגנו את המושג סכמת JSON וכיצד להשתמש בו לאימות הפורמט והמבנה של a אובייקט JSON.

במאמר זה נראה כיצד לבנות ממשקי משתמש מבוססי-טופס מבוססי-טופס על ידי מינוף היכולות של ג'סון ו סכמת JSON.

כדי להשיג את מטרתנו נשתמש במסגרת שנקראת טפסים של JSON. זה מבטל את הצורך לכתוב תבניות HTML ו- Javascript לצורך קשירת נתונים ביד כדי ליצור טפסים הניתנים להתאמה אישית.

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

2. רכיבים של טופס JSON

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

המרכיב הראשון הוא סכמת נתונים מגדיר את הנתונים הבסיסיים שיוצגו בממשק המשתמש (סוגי אובייקטים ותכונותיהם).

במקרה זה אנו יכולים להשתמש ב- סכמת JSON שהשתמשנו במאמר הקודם לתיאור אובייקט נתונים "מוצר":

{"$ schema": "//json-schema.org/draft-04/schema#", "title": "Product", "description": "מוצר מהקטלוג", "type": "object" , "properties": {"id": {"description": "המזהה הייחודי למוצר", "type": "מספר שלם"}, "name": {"description": "שם המוצר", " type ":" string "}," price ": {" type ":" number "," minimum ": 0," exclusiveMinimum ": true}}," חובה ": [" id "," name "," price "]}

כפי שאנו רואים, אובייקט JSON מציג שלושה מאפיינים בשם תְעוּדַת זֶהוּת, שֵׁם ו מחיר. כל אחד מהם יהיה שדה טופס שכותרתו שמו.

כמו כן לכל נכס יש כמה מאפיינים. ה סוּג התכונה תורגם לפי המסגרת כ- סוּג של שדה הקלט.

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

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

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

{"type": "HorizontalLayout", "elements": [{"type": "Control", "scope": {"$ ref": "# / properties / id"}}, {"type": "Control "," scope ": {" $ ref ":" # / properties / name "}}, {" type ":" Control "," scope ": {" $ ref ":" # / properties / price "}} ,]} 

ה סוּג המאפיין מגדיר כשדות הטופס יוזמנו בטופס. במקרה זה בחרנו בצורה אופקית.

וגם ה סכימת ממשק המשתמש מגדיר איזו תכונה של סכימת הנתונים תוצג כשדה טופס. זה מתקבל על ידי הגדרת אלמנט לִשְׁלוֹט בתוך ה אלמנטים מַעֲרָך.

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

3. השתמש בטפסים של JSON ב- AngularJS

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

עכשיו, בואו נראה איך להטמיע טפסים של JSON בתוך יישום אינטרנט מבוסס AngularJS.

3.1. הגדר את הפרויקט

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

node.js גם לבוא עם npm, שהוא מנהל החבילות המשמש להתקנת ספריית הטפסים JSON ושאר התלות הדרושה.

לאחר ההתקנה node.js ולאחר שיבוט הדוגמה מ- GitHub, פתח מעטפת ו- CD לתוך ה- webapp תיקיה. תיקייה זו מכילה בין היתר את package.json קוֹבֶץ. זה מראה קצת מידע על הפרויקט ובעיקר מספר ל npm אילו תלות עליו להוריד. ה חבילה, json הקובץ ייראה כך:

{"name": "jsonforms-intro", "description": "מבוא ל- JSONForms", "version": "0.0.1", "license": "MIT", "dependencies": {"typings": "0.6 .5 "," jsonforms ":" 0.0.19 "," bootstrap ":" 3.3.6 "}}

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

לפרטים נוספים ניתן לעיין בדף ה- jsonforms npm.

4. הגדר את התצוגה

עכשיו שיש לנו את כל הספריות והתלות הנדרשות, בואו נגדיר דף HTML המציג את הטופס.

בדף שלנו עלינו לייבא את jsonforms.js הספרייה והטמע את הטופס באמצעות הנחיית AngularJS הייעודית jsonforms:

   מבוא ל- JSONForms 
מבוא ל- JSONForms
 נתונים כבולים: {{data}} 

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

5. בקר AngularJS

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

app.controller ('MyController', ['$ scope', 'Schema', 'UISchema', function ($ scope, Schema, UISchema) {$ scope.schema = Schema; $ scope.uiSchema = UISchema; $ scope.data = {"id": 1, "name": "אהיל", "מחיר": 1.85};}]);

6. מודול האפליקציה

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

var app = angular.module ('jsonforms-intro', ['jsonforms']);

7. הצגת הטופס

אם נפתח את דף ה- HTML שהוגדר לעיל באמצעות הדפדפן נוכל לראות את JSONForm הראשון שלנו:

8. מסקנה

במאמר זה ראינו כיצד להשתמש ב- JSONForms ספרייה לבניית טופס ממשק משתמש. צימוד א סכימת נתונים ו סכימת ממשק משתמש זה מבטל את הצורך לכתוב תבניות HTML ו- Javascript לצורך קשירת נתונים ביד.

את הדוגמה שלמעלה ניתן למצוא בפרויקט GitHub.