routing.ar.md

WebPlatform

[English]

[رجوع]

التوجيه في تطبيقات العميل الغني (Rich Client)

تدعم هذه المكتبة التوجيه بدون إعادة التحميل عن طريق العناصر التالية من صنف نـافذة (Window):

المسار (location) للحصول على مسار المتصفح الحالي.

ادفع_مسارا (pushLocation) عن طريق هذه الدالة يمكننا إضافة مسار إلى مجموعة المسارات و هذا يؤدي إلى إرسال إشارة عند_تغير_المسار.

عند_تغير_المسار (onLocationChanged) يمكننا الاستماع لهذه الإشارة لتفقد المسارات و القيام بما يلزم.

العناصر المذكورة أعلاه تمكن المستخدم من توفير التوجيه دون إعادة التحميل. لكن بالإضافة لهذه العناصر توفر مـنصة_ويب العناصر المساعدة التالية لتسهيل العملية:

مـوجه (Router) يمكننا من تعريف دالات عكسية لكل مسار تستدعى تلقائيًا عن الانتقال لذلك المسار.

مـبدال_توجيه (RoutingSwitcher) يقوم بالتبديل بين العناصر بناء على المسار.

مـكداس_توجيه (RoutingStack) يقوم بتكديس العناصر بناء على المسار.

يمكن معرفة المزيد عن هذه العناصر في الشرح المفصل لها.

مـوجه (Router)

صنف مـوجه {
    عرف مسار(مسار: نـص): سند[مغلف[نـص]]؛
    عرف عند_المسار_المجهول: مغلف[حـمولة_مسار]؛
    عرف أطلق_التوجيه()؛
}

class Router {
    handler this.route(r: String): ref[closure(String)];
    def onUnknownRoute: closure(RoutePayload);
    handler this.triggerRoute();
}

يسمح هذا الصنف بتحديد مجموعة من المسارات مع دالة عكسية لكل منها تُستدعى عند الانتقال إلى ذلك المسار.

مسار (route): تسمح بتحديد تعبير نمطي لمسار وتحديد الدالة العكسية المطلوب تنفيذها عند تطابق المسار الحالي مع التعبير النمطي. تعيد الدالة سندًا للدالة العكسية كي يتمكن المستخدم من تحديد قيمة تلك الدالة العكسية.

عند_المسار_المجهول (onUnknownRoute): تحديد دالة عكسية تُستدعى عند الوصول إلى مسار مجهول.

أطلق_التوجيه (triggerRoute): تُستدعى تلقائيًا عند تغير المسار لتنفيذ الدالات العكسية المطابقة للمسار الجديد، ويمكن استدعاؤها يدويًا أيضًا كما الحال عند تحميل الموقع.

حـمولة_مسار (RoutePayload)

صنف حـمولة_مسار {
    عرف المسار_الكامل: نـص؛
    عرف المسار: نـص؛
    عرف المعطيات: مـصفوفة[نـص]؛
}

class RoutePayload {
    def fullPath: String;
    def route: String;
    def params: Array[String];
}

صنف يحمل المعلومات الضرورية لحمولة المسار.

المسار_الكامل (fullPath) المسار الكامل متضمناً مسار المضيف.

المسار (route) المسار النسبي، أي المسار ضمن الموقع بدون مسار المضيف.

المعطيات (params) المعطيات الموجودة في هذه الحمولة.

مثال

مثال على استخدام مـكداس_توجيه:

صنف مـشهد_نصي {
    @حقنة عرف مركب: مـركب؛
    عرف صفحة_نصية: سـندنا[صـفحة_نصية]؛

    عملية هذا~هيئ() {
        عرف الكائن: سند[هذا_الصنف](هذا)؛
        // نقوم بتعريف المشهد على أنه مكداس توجيه
        هذا.المشهد = مـكداس_توجيه().{
            الطراز.{
                العرض = مـسافة.مئوي(100)؛
                الطول = مـسافة.مئوي(100)؛
            }؛
            حدد_الانتقال(
                أنشئ_انتقال_انزلاق_مكداس(0.5, 1, 0)،
                أنشئ_انتقال_انزلاق_مكداس(0.5, 1, 1)
            )؛
            // المسار الأول يمثل مقال
            مسار(نـص("^/three")) = مغلفة(حـمولة_مسار): سـندنا[ودجـة] {
                الكائن.صفحة_نصية = صـفحة_نصية()؛
                أرجع الكائن.صفحة_نصية؛
            }؛
            // المسار الثاني و هو لتعديل المقال
            مسار(نـص("^/three/edit")) = مغلفة(حـمولة_مسار): سـندنا[ودجـة] {
                // هذا عنصر لتعديل المقال (لا يهمنا طريقة كتابته حاليا)
                أرجع مـحرر_نصي(النص).{
                    // عندما يتم تحديث المقال يجب أن نحدث المتغيرات التي تخزن المعلومات
                    هذا.عند_التحديث = مغلفة(ن: نـص) {
                        // تحديث المتغير الذي يخزن محتوى المقال 
                        النص = ن؛
                        // نحدث محتوى المقال بشكل مباشر دون الحاجة لإعادة تحميل الصفحة
                        الكائن.صفحة_نصية.مشهد_وثيقة.حدد_ماركداون(النص)؛
                        // نقوم بدفع المسار الخاص بعرض المقال حتى ننتقل إليه، هذا هو المسار الأول لدينا
                        نـافذة.النموذج.ادفع_مسارا("/three")؛
                    }
                }؛
            }؛
        }؛
    }

    عملية هذا_الصنف(): سـندنا[مـشهد_نصي] {
        أرجع سـندنا[مـشهد_نصي].أنشئ()؛
    }
}

class ArticleView {
    @injection def component: Component;
    def articleView: SrdRef[Article];

    handler this~init() {
        def self: ref[this_type](this);
        // نقوم بتعريف المشهد على أنه مكداس توجيه
        this.view = RoutingStack().{
            style.{
                width = Length.percent(100);
                height = Length.percent(100);
            };
            setTransition(
                createSlideStackTransition(0.5, true, false),
                createSlideStackTransition(0.5, true, true)
            );
            // المسار الأول يمثل مقال
            route(String("^/three")) = closure(RoutePayload): SrdRef[Widget] {
                // نلاحظ كيف أننا في كل مرة ننشئ المقال
                // هذا سيؤدي إلى أن يأخذ المقال قيمة نكون قد عدلنا عليها
                // مما يؤدي إلى تحديث المقال بدون تحديث الصفحة
                self.articleView = Article();
                return self.articleView;
            };
            // المسار الثاني و هو لتعديل المقال
            route(String("^/three/edit")) = closure(RoutePayload): SrdRef[Widget] {
                return ArticleEditor(article).{  // هذا عنصر لتعديل المقال (لا يهمنا طريقة كتابته حاليا)
                    // عندما يتم تحديث المقال يجب أن نحدث المتغيرات التي تخزن المعلومات
                    this.onUpdated = closure(t: String) {
                        // تحديث المتغير الذي يخزن محتوى المقال 
                        article = t;
                        // نحدث محتوى المقال بشكل مباشر دون الحاجة لإعادة تحميل الصفحة
                        self.articleView.docView.setMarkdown(article);
                        // نقوم بدفع المسار الخاص بعرض المقال حتى ننتقل إليه، هذا هو المسار الأول لدينا
                        Window.instance.pushLocation("/three");
                    }
                };
            };
        };
    }

    handler this_type(): SrdRef[ArticleView] {
        return SrdRef[ArticleView].construct();
    }
}