تطبيقات البناء
يرشدك بشكل كامل خلال عملية إنشاء صفحات تطبيق الويب وتخصيصها وإدارتها باستخدام مصمم واجهة المستخدم.
لإنشاء تطبيق، يجب عليك إنشاء تخطيطات وصفحات وملئها بالمحتوى وإعداد تفاعل تطبيق الويب.
التخطيطات
لقد قدمنا في وقت سابق مفهوم التخطيطات . لبدء إنشاء التخطيط، يجب عليك أولاً تحديد هيكل التطبيق الخاص بك وتحديد قوالب الصفحة التي سيتم استخدامها.
إذا فاتك شيء ما، فلا تقلق. يمكنك زيادة قائمة التخطيط عند الحاجة.
قائمة التخطيط
توفر قائمة التخطيط جميع تخطيطات تطبيق الويب الخاص بك. هنا، يمكنك تنفيذ مجموعة متنوعة من العمليات وإدارة التخطيطات.
للوصول إلى "قائمة التخطيط" ، حدد علامة التبويب الرابعة على شريط الأدوات الأيسر في علامة التبويب "مصمم واجهة المستخدم" أو استخدم مفتاح الاختصار 4 . سيتم عرض كافة تخطيطات التطبيق الخاص بك هنا.
يجب أن يحتوي كل تطبيق على تخطيط واحد على الأقل. عندما تقوم بإنشاء تطبيق جديد، سيتم إنشاء تخطيط واحد أو عدة تخطيطات تلقائيًا وفقًا لقالب التطبيق المحدد. تم وضع علامة على أحدهما على أنه **افتراضي**.
في قائمة التخطيط، يمكنك تنفيذ الإجراءات التالية على التخطيطات:
- يختار،
- اضف جديد،
- إعادة تسمية,
- ينسخ،
- يمسح.
التخطيط الافتراضي
يتم تحديد التخطيط الافتراضي تلقائيًا من قائمة التخطيط عند إنشاء صفحة جديدة. ومع ذلك، يمكن استبدال هذا بتصميم مختلف إذا لزم الأمر.
يزيد استخدام التخطيط الافتراضي من سرعة التطوير، لذا نوصي باستخدام التخطيط الأكثر استخدامًا كإعداد افتراضي. لاحظ أنه يمكن تعيين تخطيط واحد فقط كتخطيط افتراضي في كل مرة. لا يؤثر تجاوز التخطيط الافتراضي على الصفحات الموجودة إلا إذا تم حذف التخطيط الأولي.
يتم تمييز التخطيط الافتراضي برمز نجمة زرقاء في قائمة التخطيط.
إنشاء تخطيط جديد
يمكنك تصميم تخطيطات مختلفة لأنواع الصفحات المختلفة. اتبع هذه الخطوات لإنشاء تخطيط جديد:
- اضغط على
CTRL/⌘+Lأو افتح قائمة التخطيط (الاختصار4) من شريط الأدوات الأيسر لمصمم واجهة المستخدم وانقر فوق زر علامة الزائد الموجود في رأس اللوحة. - قم بتوفير اسم التخطيط في النموذج الذي يظهر. نوصي باستخدام عنوان قابل للقراءة يعكس بنية التخطيط للتعرف عليه بسرعة عند تعيين تخطيطات للصفحات.
- حدد قالب التخطيط:
- القاعدة: قالب فارغ بدون عناصر إضافية، مناسب للصفحات التي لا تحتوي على التنقل، مثل صفحات المصادقة أو الخطأ.
- الشريط الجانبي الأيسر: قالب بقائمة الشريط الجانبي، مناسب للوحات الإدارة، وCMS، وERP، وما إلى ذلك.
- القائمة العلوية: قالب ذو قائمة علوية، مناسب لمواقع الويب أو الصفحات المقصودة.
- قم بتمكين إعداد التخطيط الافتراضي في حالة جعل هذا التخطيط افتراضيًا.
- انقر فوق الزر "إنشاء" .
ليس هناك حد لعدد التخطيطات التي يمكنك إنشاؤها.
إعادة تسمية التخطيط
لإعادة تسمية تخطيط، انقر نقرًا مزدوجًا فوق اسم التخطيط، وقم بإجراء التغييرات اللازمة، ثم اضغط على Enter للحفظ أو Esc للعودة إلى التغييرات.
تكرار التخطيط
لتكرار تخطيط مع محتواه وإعداداته:
- قم بالتمرير فوق التخطيط الذي تريد تكراره.
- انقر على أيقونة مكررة.
تظهر التخطيطات المكررة تلقائيًا في القائمة مع إضافة فهرس إلى أسمائها. إذا قمت بتكرار مجموعة التخطيط كإعداد افتراضي، فلن يتم تجاوز التخطيط المصدر بواسطة التخطيط الذي تم إنشاؤه حديثًا.
حذف التخطيط
لإزالة التخطيط:
- قم بالتمرير فوق التخطيط الذي تريد حذفه.
- انقر على أيقونة سلة المهملات.
- تأكيد الحذف.
لحذف التخطيط المرتبط بأي صفحات، يجب عليك إعادة تعيين التخطيط لأي صفحات مرتبطة قبل حذفه. يمكن القيام بذلك من خلال نموذج التأكيد أو يدويًا لكل صفحة.
لحذف التخطيط الافتراضي، يجب عليك إعداد تخطيط آخر كتخطيط افتراضي.
❗️ هام: لا يمكنك التراجع عن عملية حذف التخطيط.
إعدادات الشكل الظاهري
انقر فوق التخطيط المستهدف في قائمة التخطيط للوصول إلى إعداداته من شريط الإعداد الجانبي الأيسر.
من رأس الشريط الجانبي للإعدادات، يمكنك إعادة تسمية التخطيط المحدد بالنقر فوق الاسم أو حذفه.
يمكنك تعيين التخطيط المحدد كتخطيط افتراضي وعرض جميع الصفحات المرتبطة هنا. لتحرير صفحة مرتبطة، انقر عليها في القائمة.
علاوة على ذلك، يمكنك بناء بعض منطق الأعمال للتخطيط.
تخطيط منطق الأعمال
في علامة تبويب منطق الأعمال، حدد مشغلًا لتعيين إجراء. سيؤدي هذا إلى فتح محرر عمليات الأعمال، مع التركيز على المشغل المحدد.
هنا، يمكنك إنشاء تدفق إجراء لمشغل واحد أو أكثر، مثل تنفيذ التنقل، وتغيير الخصائص بشكل مشروط، وتبديل الرؤية، وإرسال البيانات، والمزيد. راجع دليلنا حول بناء عملية تجارية لمزيد من المعلومات.
🔔 للحصول على الأداء الأمثل للتطبيق، قم ببناء عمليات تجارية معقدة على الجانب الخلفي.
تحرير التخطيط
تقوم التخطيطات، باعتبارها مكونات عامة وقوالب صفحات، بتطبيق جميع التعديلات تلقائيًا على جميع الصفحات المرتبطة.
لتحرير تخطيط، حدد العنصر المستهدف في قائمة التخطيط وأضف أي مكونات ضرورية من لوحة عناصر واجهة المستخدم عن طريق سحبها وإسقاطها في منطقة اللوحة القماشية.
أثناء تحرير التخطيط، تذكر أن القالب يتضمن مكون حاوية الصفحة غير القابل للتغيير. يحدد هذا موضع محتوى صفحتك داخل القالب. يتم تمييز "حاوية الصفحة" باللون الأخضر ولا يمكن أن تحتوي على مكونات داخلية أثناء وجودها في وضع تحرير التخطيط. يتم تعريف المحتوى مباشرة على الصفحة، ويتم تحديد حجم حاوية الصفحة بواسطة المكون الأصلي الخاص بها.
الصفحات
بعد إنشاء التخطيطات اللازمة، أفضل وقت لبدء إنشاء صفحات تطبيق الويب. بعد إنشاء التخطيطات اللازمة، أفضل وقت لبدء إنشاء صفحات تطبيق الويب. توفر كل صفحة من صفحات تطبيق الويب محتوى معروضًا على متصفح الويب الخاص بالمستخدم من خلال عنوان URL المستهدف.
شجرة الصفحات
تُظهر لك "شجرة الصفحات" بنية موقع الويب الخاص بك - صفحات موقعك والمجلدات التي تحتوي على تلك الصفحات. هنا، يمكنك إجراء عمليات مختلفة وتنظيم الصفحات والمجلدات.
لفتح شجرة الصفحات، حدد علامة التبويب الثالثة من شريط الأدوات الأيسر لمصمم واجهة المستخدم أو اضغط على 3. هنا سيتم عرض جميع صفحات التطبيق الخاصة بك.
يجب أن يحتوي كل تطبيق على صفحة واحدة على الأقل. عندما تقوم بإنشاء تطبيق جديد، يتم بالفعل إنشاء صفحة واحدة أو عدة صفحات وفقًا لقالب التطبيق المحدد.
يمكنك تنفيذ الإجراءات التالية على الصفحات والمجلدات:
- يختار،
- إضافة صفحة أو مجلد جديد،
- إعادة تسمية,
- نقل الصفحة والمجلدات إلى/خارج المجلد،
- ينسخ،
- يمسح.
صفحة فهرس
صفحة الفهرس هي الصفحة الأولية لتطبيقك. عند تشغيل تطبيقك، سيتم عرض هذه الصفحة أولاً إذا لم تقم بإنشاء أي عمليات إعادة توجيه.
قامت صفحة الفهرس بوضع علامة على رمز المنزل في شجرة الصفحات ولا يمكن تحويلها إلى صفحة أخرى. افتراضيًا، ترتبط هذه الصفحة بالتخطيط الافتراضي الذي تم إنشاؤه تلقائيًا، ولكن يمكنك تغييره في إعدادات الصفحة.
إنشاء صفحة جديدة
لإضافة صفحة إلى تطبيق الويب الخاص بك:
- اضغط على
CTRL/⌘+Pأو افتح شجرة الصفحات (الاختصار3) من شريط الأدوات الأيسر لمصمم واجهة المستخدم وانقر فوق زر الزائد الموجود في رأس اللوحة. - قم بتوفير عنوان URL للصفحة في النموذج الذي يظهر.
- حدد المجلد الأصلي للصفحة أو اترك الحقل فارغًا لوضع الصفحة في الجذر.
- حدد تخطيط الصفحة .
- انقر فوق زر إنشاء .
💡 لإنشاء مسار متداخل دون إنشاء مجلدات، قم بتوفير مسار كامل للصفحة المستهدفة في حقل عنوان URL للصفحة، على سبيل المثال، الإعدادات/الملف الشخصي. سيتم إنشاء ملف تعريف الصفحة متداخلاً مع إعدادات المجلد في هذه الحالة.
يمكنك إنشاء عدد غير محدود من الصفحات والمجلدات لتطبيق الويب الخاص بك.
🔔 تعمل تطبيقات الويب التي تم إنشاؤها باستخدام AppMaster Studio على إنشاء توجيه التطبيق حسب عنوان URL للصفحة، لذلك في نموذج إنشاء الصفحة، استخدم عنوان URL للصفحة بالتنسيق الصحيح، وللحصول على أفضل فهم، استخدم عنوان URL سهل الاستخدام.
إنشاء مجلد جديد
يمكنك إنشاء مجلدات لتنظيم التنقل وإنشاء جهاز التوجيه المناسب للصفحات. لإنشاء مجلد جديد:
- اضغط على
CTRL/⌘+SHIFT+Pأو افتح شجرة الصفحات (الاختصار 3) من شريط الأدوات الأيسر لمصمم واجهة المستخدم وانقر فوق زر المجلد الموجود في رأس اللوحة. - قم بتوفير اسم المجلد في النموذج الذي يظهر.
- حدد المجلد الأصل إذا لزم الأمر لإنشاء جهاز توجيه متداخل
- انقر فوق زر إنشاء .
عناصر واجهة المستخدم
تتكون واجهة مستخدم تطبيقك من عناصر: حقول الإدخال، والأزرار، والصور، ومربعات الاختيار، والتقويمات، والصور، والأيقونات التي يخدم كل منها غرضًا محددًا.
يقدم AppMaster محررًا مرئيًا بالسحب والإفلات يتيح لك اختيار العناصر ووضعها مباشرة على الصفحة بدلاً من كتابة التعليمات البرمجية ومعاينتها على الفور.
إضافة عناصر
لإضافة عنصر إلى اللوحة القماشية:
- افتح لوحة عناصر واجهة المستخدم بقائمة عناصر واجهة المستخدم (الاختصار
1). - حدد العنصر الضروري أو استخدم شريط البحث.
- اسحب العنصر المحدد إلى الصفحة أو لوحة التخطيط.
لوضع عنصر السحب داخل الهدف، قم بإسقاط العنصر فوق العناصر المستهدفة.
لإضافة عنصر قبل العنصر أو بعده، اسحب العنصر أعلى حد الهدف حتى يظهر فاصل.
يعتمد المقسم على اتجاه الحاوية الأصلية:
- إذا كان اتجاه الحاوية الأصلية عموديًا ، فستتم إضافة العناصر من الأعلى أو الأسفل.
- إذا كان اتجاه الحاوية الأصلية أفقيًا ، فستتم إضافة العناصر من اليسار أو اليمين.
تخصيص العناصر
يتم تزويد كل مكون تضيفه إلى اللوحة القماشية بمجموعة شاملة من الإعدادات القابلة للتخصيص. باستخدام خصائص العنصر، يمكنك إدارة مظهر العنصر والبيانات التي سيتم عرضها.
لتكوين عنصر:
- حدد المكون المستهدف على اللوحة القماشية.
- انتقل إلى لوحة المظهر، علامة التبويب الأولى على الشريط الجانبي الأيمن.
- داخل اللوحة، اختر عنصر الإعداد المحدد الذي ترغب في تعديله.
- أدخل القيم المفضلة لديك في الحقول المخصصة.
تستجيب اللوحة القماشية في الوقت الفعلي، وتعرض تعديلاتك على الفور.
للحصول على إرشادات إضافية، قم بتمرير مؤشر الماوس فوق أحد الإعدادات لفترة وجيزة ليظهر تلميح أداة يوفر وصفًا موجزًا لوظيفة هذا الإعداد.
بالإضافة إلى هذه الميزات التفاعلية، يعمل AppMaster على تحسين إمكانيات التخصيص من خلال كتل عمليات الأعمال الخاصة به، مثل Set Properties و Set Data . توفر هذه الكتل مستوى متقدمًا من الوصول، مما يسمح لك بتغيير إعدادات كل مكون برمجيًا في تطبيق الويب الخاص بك.