6.6 إنشاء صفحات الحوار

6.6 إنشاء صفحات الحوار Creating Dialog Pages #

يتضمن Oracle APEX دعمًا لصفحات الحوار Dialog Pages المنبثقة Modal وغير المنبثقة Non-Modal. لا تُدعم صفحات الحوار المنبثقة وغير المنبثقة إلا إذا كان قالب التطبيق الحالي يحتوي على قالب صفحة واحد على الأقل من نوع “صفحة الحوار” Dialog Page.

6.6.1 حول مربعات الحوار المدعومة #

عند إنشاء صفحة جديدة، يطلب منك المعالج تحديد وضع الصفحة Page Mode. يحدد هذا الوضع ما إذا كانت الصفحة صفحة تطبيق عادية أم صفحة مربع حوار.

يدعم Oracle APEX نوعين من صفحات الحوار:

• نافذة الحوار المنبثقة Modal Dialog – نافذة الحوار المنبثقة Modal Dialog هي نافذة متراكبة ضمن نافذة المتصفح نفسها. تظل نافذة الحوار المنبثقة نشطة ومركزة حتى ينتهي المستخدم من استخدامها ويغلقها. أثناء نشاطها، لا يتمكن المستخدم من التفاعل مع بقية الصفحة حتى يُغلقها.
• نافذة حوار غير منبثقة Non-modal Dialog – يعرض نافذة الحوار غير المنبثق نافذة منبثقة منفصلة للمتصفح. يمكن للمستخدم التفاعل مع نافذة الحوار غير المنبثقة ومحتوى الصفحة. استخدم مربع حوار غير منبثق عندما لا تكون المعلومات المطلوبة ضرورية للمتابعة. يمكن ترك هذا النوع من النوافذ مفتوحًا أثناء استمرار العمل في مكان آخر.

يتضمن Oracle APEX قوالب صفحات حوار ضمن القالب العالمي – Universal Theme – 42. عند ضبط وضع الصفحة إلى ” منبثق” Modal أو “غير منبثق” Non-Modal، يستخدم APEX قالب صفحة الحوار الافتراضي تلقائيًا.

بإمكانك تحديد مظهر وتخطيط الحوار بشكل أكبر عن طريق تحديد قالب الحوار.

6.6.2 إنشاء قالب صفحة الحوار #

إنشاء قالب نافذة حوار إذا كان القالب الخاص بك لا يتضمن واحدًا وكيفية تحرير سمات قالب نافذة الحوار لتغيير العرض.

يحتوي قالب صفحة الحوار على استدعاءات دوال JavaScript التي تُعنى بتهيئة صفحة الحوار وإغلاقها وإلغائها. عند إنشاء قالب صفحة حوار، يجب عليك تعريف هذه السمات وسمات قوالب صفحات الحوار الأخرى.

إذا كنت تستخدم تطبيقًا موجودًا ولا يحتوي القالب على قالب صفحة حوار، فيجب عليك إنشاء واحد. مع أنه يمكنك إنشاء واحد من الصفر، إلا أن الخيار الأسهل هو نسخ قالب صفحة حوار موجود.

لإنشاء قالب صفحة الحوار:

• انتقل إلى صفحة المكونات المشتركة Shared Components وثم إلى صفحة القوالب Templates:
  • في الصفحة الرئيسية لمساحة العمل، انقر فوق أيقونة “منشئ التطبيقات” App Builder.
  • حدد التطبيق.
  • انقر فوق المكونات المشتركة Shared Components.
  • تحت واجهة المستخدم، حدد القوالب Templates.
• انقر فوق إنشاء Create.
• في معالج إنشاء القالب Create Template Wizard:.
  • نوع القالب Template Type – حدد الصفحة Page ثم انقر فوق التالي Next.
  • طريقة الإنشاء Creation Method – حدد كنسخة من قالب موجود As a Copy of an Existing Template ثم انقر فوق التالي Next.
  • نسخ من Copy From – حدد التطبيق الذي تريد النسخ منه وانقر فوق التالي Next.
  • تحديد القالب Identify Theme – حدد القالب التي تريد النسخ منه والقالب التي تريد النسخ إليه ثم انقر فوق التالي Next.
  • قوالب جديدة New Templates – حدد قوالب مربع الحوار المنبثق Modal Dialog التي تريد نسخها (على سبيل المثال، الدرج Drawer، أو مربع الحوار المنبثق Modal Dialog، أو مربع الحوار المنبثق للمعالج Wizard Modal Dialog) ثم حدد نعم Yes.
  • حدد نسخ قوالب الصفحة Copy Page Templates.
• قم بالتحقق من أن قالب صفحة الحوار نشط في السمة الحالية

6.6.3 تحرير صفحة الحوار في مصمم الصفحات Page Designer #

يمكنك تغيير طريقة عرض صفحة الحوار عن طريق تحرير السمات في مصمم الصفحات Page Designer.

لتحرير صفحة الحوار في مصمم الصفحات:

• عرض الصفحة في مصمم الصفحات Page Designer:
  • في الصفحة الرئيسية لمساحة العمل، انقر فوق أيقونة “منشئ التطبيقات” App Builder.
  • حدد التطبيق.
  • حدد صفحة. يظهر مُصمم الصفحة. يتم تنظيم السمات في مجموعات.
• في مصمم الصفحة، حدد مجموعة المظهر Appearance group.
• في المظهر Appearance ووضع الصفحة Page Mode – حدد أحد الخيارات التالية:
• مربع حوار منبثق Modal Dialog – تُعرض الصفحة كنافذة حوار منبثقة. مربع الحوار المنبثق هو نافذة متراكبة ضمن نافذة العرض، تبقى نشطة ومركزة حتى يُغلقها المستخدم. تُظلل الصفحة الأساسية باللون الرمادي، ويُمنع المستخدم من التفاعل مع بقية الصفحة حتى يُغلق مربع الحوار.
• مربع حوار غير منبثق Non-Modal Dialog – تُعرض الصفحة كمربع حوار غير نمطي. وهو عبارة عن نافذة متراكبة ضمن نافذة العرض، حيث يمكن للمستخدم التفاعل مع مربع الحوار ومحتوى الصفحة التي شغّلت مربع الحوار. يمكن استخدام مربع الحوار غير النمطي عندما لا تكون المعلومات المطلوبة ضرورية للمتابعة؛ ويمكن متابعة العمل في مكان آخر بينما لا تزال النافذة مفتوحة. لاحظ أن خيارات الحوار المنبثق وغير المنبثق ستكون متاحة للاختيار فقط عندما يحتوي قالب التطبيق الحالي على قالب صفحة حوار افتراضي.
• المظهر Appearance، قالب نافذة الحوار Dialog Template – حدد قالب الحوار لتحديد مظهر وتخطيط هذه الصفحة.
• يتم تعريف قوالب الحوار في قالب التطبيق. عند إنشاء صفحة نافذة حوار، يُضبط القالب تلقائيًا على “القالب الافتراضي” Theme Default، مما يُظهر الصفحة باستخدام قالب الصفحة الافتراضي المُعرّف في القالب الحالي. يؤدي تحديد أي خيار هنا إلى إلغاء قالب الحوار الافتراضي. يوفر القالب العالمي Universal Theme قوالب الحوار التالية:
• نافذة الحوار المنبثقة Modal Dialog – مفيد لمعظم حالات استخدام نوافذ الحوار.
• مربع حوار المعالج Wizard Modal Dialog – يوفر واجهة مستخدم مبسطة وهو مناسب لمعالجات الحوار المنبثقة أو التنبيهات أو الإشعارات أو النماذج الصغيرة. يتم تعريف قوالب نوافذ الحوار في قالب التطبيق. عند إنشاء صفحة نافذة حوار، يتم ضبط القالب تلقائيًا على “القالب الافتراضي” Theme Default، مما يعرض الصفحة باستخدام قالب الصفحة الافتراضي المحدد في القالب الحالي.
• قم بتعديل السمات المتبقية في مجموعة المظهر Appearance group حسب الحاجة. لمعرفة المزيد عن السمة، راجع “التعليمات” على مستوى الحقل.
• تحت الحوار Dialog:
  1. مربع الحوار Dialog، العرض Width – أدخل عرض مربع الحوار، بالبكسل أو بالنسبة المئوية. يُستبدل نص الاستبدال #DIALOG_WIDTH# في كود تهيئة مربع الحوار لقالب الصفحة بالقيمة المُدخلة في هذا العنصر.
  2. مربع الحوار Dialog، الارتفاع Height – أدخل ارتفاع مربع الحوار، بالبكسل، على سبيل المثال، 500. يُستبدل نص الاستبدال #DIALOG_HEIGHT#ف ي كود تهيئة مربع الحوار لقالب الصفحة بالقيمة المُدخلة.
  3. مربع حوار Dialog، أقصى عرض Maximum Width – أدخل أقصى عرض لمربع الحوار بالبكسل. يُستبدل نص الاستبدال #DIALOG_MAX_WIDTH# في كود تهيئة مربع الحوار لقالب الصفحة بالقيمة المُدخلة في هذا العنصر.
  4. مربع الحوار Dialog، السمات Attributes – يختلف دعم الحوار باختلاف واجهة المستخدم للصفحة. مجموعة فرعية من سمات مربع الحوار مدعومة بشكل معلن: الارتفاع، العرض، والعرض الأقصى .لتحديد أي سمات إضافية لمربع الحوار، أدخل أزواج الاسم/القيمة في قائمة مفصولة بفواصل. تُستبدل سلسلة الاستبدال  #DIALOG_ATTRIBUTES# في كود تهيئة مربع الحوار، المُعرّف على مستوى قالب الصفحة، بأي قيمة (قيم) مُدخلة في هذا العنصر.
  5. مربع حوار Dialog، فئات CSS Classes – أدخل الفئات المراد إضافتها إلى هذا المكوّن. يمكنك إضافة فئات متعددة بفصلها بمسافات.
  6. مربع الحوار Dialog، متسلسل Chained – تمكين متسلسل Chained إذا تم فتح مربع الحوار بواسطة مربع حوار آخر ويجب إعادة استخدام نفس نافذة الحوار (على سبيل المثال، إذا كان هذا الحوار جزءًا من معالج حوار متعدد الصفحات وترغب في إعادة استخدام نافذة الحوار لكل خطوة من خطوات المعالج).قم بتعطيل متسلسل Chained إذا تم فتح هذا الحوار بواسطة حوار آخر ويجب فتحه في نافذة حوار جديدة (على سبيل المثال، عندما يكون هذا الحوار منبثقًا وترغب في فتحه داخل نافذة حوار منبثق رئيسي).
  7. مربع الحوار Dialog، قابل للتغيير في الحجم Resizable – تمكين قابل للتغيير في الحجم Resizable لتمكين المستخدمين النهائيين من تغيير حجم مربع الحوار هذا.
• قم بتعديل السمات الإضافية حسب الحاجة. لمعرفة المزيد عن السمة، راجع “التعليمات” على مستوى الحقل.
• لحفظ التغييرات، انقر فوق حفظ Save.

6.6.4 إنشاء إجراء ديناميكي لإلغاء مربع الحوار على صفحة الحوار #

بالنسبة لصفحات الحوار التي تحتوي على زر إلغاء Cancel button، قم بإنشاء إجراء ديناميكي يتحكم في ما يحدث عند النقر فوق الزر.

يجب أن يحتوي الإجراء الديناميكي على حدث إجراء صحيح مضبوط على “إلغاء مربع الحوار” Cancel Dialog. سيستخدم هذا الإجراء الديناميكي استدعاء JavaScript للإلغاء الموجود في قالب الصفحة (apex.navigation.dialog.cancel) لمعالجة إلغاء مربع الحوار.

6.6.5 إنشاء عملية إغلاق صفحة الحوار على صفحة الحوار #

قم بإغلاق صفحة الحوار عن طريق إنشاء عملية إغلاق صفحة الحوار Close Dialog Page.

في الإصدارات السابقة، كانت عمليات إغلاق صفحة مربع حوار تُسمى Close Popup Window. سيستخدم هذا المربع استدعاء JavaScript للإغلاق الموجود في قالب الصفحة apex.navigation.dialog.close، للتعامل مع إغلاق مربع الحوار. كما تدعم عملية الصفحة إرجاع عناصر صفحة مربع الحوار، والتي قد ترغب في الرجوع إليها في الصفحة الرئيسية.

نصيحة: يمكنك أيضًا إغلاق صفحة حوار باستخدام الإجراء الديناميكي “إغلاق الحوار” Close Dialog. يدعم كلٌّ من الإجراء الديناميكي والعملية إرجاع عناصر صفحة الحوار. استخدم عملية الصفحة عند الحاجة إلى إرسال الصفحة، واستخدم الإجراء الديناميكي عند عدم الحاجة إلى إرسال الصفحة. يؤدي كلا الإجراءين إلى استدعاء JavaScript للإغلاق. كبديل، يمكنك إنشاء فرع صفحة، والذي سيغلق صفحة الحوار ويعيد التوجيه إلى الصفحة المحددة في الفرع.

6.6.6 حول التفرع باستخدام صفحات الحوار #

فتح صفحات الحوار باستخدام الأزرار أو الروابط.

تدعم صفحات الحوار خيارات التفرع التالية:

• صفحة الحوار Dialog page إلى صفحة الحوار Dialog page. يمكنك التفرع من صفحة حوار إلى صفحة حوار أخرى إذا:
  • كلا الصفحتين لهما نفس وضع الصفحة Page Mode. على سبيل المثال، صفحة حوار منبثق وصفحة مُفعّلة فيها سمة الحوار “متسلسل” Chained. يُمكّنك ضبط السمة “متسلسل” على “مفعل” On من دعم مربعات الحوار المتسلسلة أو المتداخلة، مثل مربعات الحوار التي تظهر في العديد من معالجات APEX الداخلية . تُمكّنك مربعات الحوار المتسلسلة أو المتداخلة من إعادة استخدام نافذة الحوار لعرض كل صفحة.
• صفحة الحوار Dialog page إلى الصفحة العادية Normal page.
  • عند الانتقال من صفحة حوار إلى صفحة عادية، تُغلق صفحة الحوار وينتقل المستخدم إلى صفحة جديدة في المتصفح. يمكن أن تكون هذه الصفحة الجديدة صفحة رئيسية (أو صفحة بدء تشغيل) أو صفحة عادية أخرى في التطبيق.

6.6.7 التعامل مع إجراءات التحديث على الصفحة الرئيسية #

تعرف على كيفية التعامل مع إجراءات التحديث على الصفحات الأصلية.

إذا أنشأتَ عملية إغلاق مربع الحوار على صفحة الحوار، فيجب عليك تنفيذ إجراءات التحديث على الصفحة الأصلية باستخدام نوع حدث الإجراء الديناميكي الجديد Dialog Closed. يمكنك استخدام إجراء تعيين عنصر “إرجاع مربع الحوار” Dialog Return عند إنشاء إجراء “تعيين قيمة صحيح” Set Value True Action، لتعيين قيمة واحدة بناءً على عنصر الإرجاع في مربع الحوار.

نصيحة: لتحديث جزئي لصفحة رئيسية، طبّق مربع حوار الإغلاق بإجراء ديناميكي (على سبيل المثال، لصفحات التقارير والنماذج حيث تريد تعديل البيانات في نموذج حوار منبثق وتريد تحديث التقرير عند الإغلاق فقط). على العكس، يُعدّ التفرّع هو الأسلوب الأمثل إذا كان لديك معالج منبثق متعدد الخطوات أو إذا كان لديك عدة صفحات مستهدفة محتملة عند إغلاق مربع الحوار.