מצגת 03
שכבת הממשק
UI + App/ButtonClicked
המנוע שהופך ישות למסך ניהול שלם — ומתודה אחת בצד השרת לכל דף.
TableMakerEx<T> — מסך ניהול גנרי
// 1. מחלקת טבלה (DemoApp/Tables)
public class CarsTable : TableMakerEx<Car>
{
public CarsTable()
{
this["Color"].HeaderText = "צבע";
this["Color"].Filterable = true;
}
}
// 2. שורה אחת ב-HTML של הדף
<div id="CarsTable" class="table"></div>
- העמודות נגזרות אוטומטית מ-
[Column]של הישות. - מקבלים חינם: טבלה, מיון בלחיצת כותרת, עימוד, טופס הוספה/עריכה/מחיקה, ייצוא ויבוא.
- שם ה-div = שם המחלקה;
ClassManagerמאתר אותה לפי השם.
איך זה זורם?
- JS שולח את שם המחלקה + מיון/סינון/עמוד; השרת מחזיר HTML מוכן או שורות לעדכון.
- שמירת טופס:
SaveForm→ SaveFormAsync→ SaveAsyncשל הישות. הכול אסינכרוני.
סרגל סינון גנרי
this["IsAutomatic"].Filterable = true; // צ'קבוקס → כן/לא/הכל
this["Grade"].Filterable = true;
this["Grade"].DataSource = new[] {1,2,3,4,5,6,7,8}; // → רשימה נפתחת
this["Color"].Filterable = true; // טקסט → שוויון מדויק
- תיבת חיפוש חופשי מחפשת בכל עמודות הטקסט (LIKE עם פרמטרים).
- כל שינוי בסינון מעדכן את הטבלה בלי לרענן את הדף.
- המימוש ב-
BuildFilterאחד גנרי — אין קוד סינון פר-מסך.
שדות מיוחדים — UIField
ImageField— העלאת תמונה בגרירה, נשמרת כ-JPG לפי מזהה הרשומה.ColorField— בוחר צבע עם תצוגת דוגמית בטבלה.ButtonUiField / LinkUiField / IconUiField— פעולה בכל שורה.ListField<P>— בחירה מרובה של ישויות קשורות (צ'קבוקסים).- ולידציה מוצהרת:
IsMandatory, RegExp, הודעות מותאמות — נאכפת בצד הלקוח.
תבנית App + ButtonClicked
// כל דף = מתודה שמחזירה ReturnDetails
public ReturnDetails Cars() => AdminPage("Cars");
// כפתור ב-HTML — בלי onclick:
<button id="Cars">מכוניות</button>
// id הכפתור = שם המתודה שתרוץ בשרת
- נקודת קצה אחת:
api/app/ButtonClicked. -
ReturnDetailsאומר ללקוח מה לעשות: html להזרקה, popUp, script, מילוי רשימה… - מצב האפליקציה חוזר ללקוח מוצפן ודחוס (
ProtectAppState) — שינוי בו מתגלה מיד. - היסטוריית דפדפן מלאה: לכל דף URL משלו, כולל כניסה ישירה (deep-link).
מסך חדש — צ'ק ליסט
- ישות ב-BLL:
class Invoice : Recordעם[Column]. - טבלה:
class InvoicesTable : TableMakerEx<Invoice>— כותרות בעברית + Filterable. - דף:
Pages/Invoices.htmlעם<div id="InvoicesTable" class="table">. - מתודה:
public ReturnDetails Invoices() => AdminPage("Invoices"); - כפתור בתפריט:
<input type="button" id="Invoices" value="חשבוניות">
חמישה צעדים, אפס SQL, אפס JavaScript — וזה כל הסיפור.