لوحة المتصدرين

سنشرح اليوم أداة من الأدوات المفيدة التي يوفرها مايكروسوفت اكسل؛ والمُتعلّقة بتجميد/تثبيت الأجزاء عند العمل على جداول بيانات كبيرة لتسهيل رؤية أجزاء مختلفة من المصنف في نفس الوقت. يقصد بـ "تجميد الأجزاء" تثبيت جزء معين من ورقة العمل وإبقائه مرئيًا حتى بعد التمرير بأشرطة التمرير الجانبية أو السفلية. وهذا الخاصية مفيدة في أوراق العمل التي تحتوي على جداول بيانات كبيرة. يمكنك مثلا تجميد صف أو عمود العناوين لجدول معين والاحتفاظ بها ثابتة عند التمرير: لتجميد صف (كصف العناوين مثلا)، اذهب إلى تبويب عرض View، واختر تجميد الصف العلوي Freeze Top Row من زر تجميد الأجزاء Freeze Panes: ولتجميد عمود (كعمود العناوين مثلا)، اذهب إلى تبويب عرض، واختر تجميد العمود الأول Freeze First Column من زر تجميد الأجزاء Freeze Panes: لاحظ أنّك عندما تقوم بتجميد العمود الأول يتم إلغاء تجميد الصف العلوي تلقائيا. مع ذلك يمكنك تجميد الصفوف والأعمدة معا في نفس الوقت. لإلغاء تجميد الصف/العمود اختر إلغاء تجميد الأجزاء Unfreeze Panes من زر تجميد الأجزاء Freeze Panes: خيارات التجميديمكنك تجميد الصفوف والأعمدة معا وتجميد عدد من الصفوف وعدد من الأعمدة، وليس صف أو عمود واحد فحسب. لتجميد الصف والعمود في نفس الوقت، حدد الخلية التي تقع أسفل الصف الذي تريد تجميده مباشرة، وبجانب العمود الذي تريد تجميده مباشرة ثم اختر تجميد الأجزاء Freeze Panes من زر تجميد الأجزاء Freeze Panes. في هذا المثال سنحدد الخلية B2، لأنها الخلية التي تجاور الصف 1 مباشرة وتجاور العمود A مباشرة: وبهذه الطريقة سيتم تثبيت كل من الصف والعمود عند التمرير إلى الأسفل أو إلى الجانب. إذا كنت ترغب بتجميد عدد من الصفوف، وعدد من الأعمدة بشرط أن تكون متجاورة، حدد الخلية التي تقع تحت مجموعة الصفوف مباشرة وبجانب مجموعة الأعمدة مباشرة، ثم اختر تجميد الأجزاء Freeze Panes من زر تجميد الأجزاء Freeze Panes. في هذا المثال سنقوم بتجميد الصفين 1 و2، والعمودين A وB، ولذلك سنحدد الخلية C3: ولتجميد عدد من الصفوف دون تجميد الأعمدة حدد أول خلية في العمود A تحت مجموعة الصفوف مباشرة، (وهي الخلية A3 في هذا المثال) ثم اختر تجميد الأجزاء Freeze Panes من زر تجميد الأجزاء: استخدم نفس الطريقة إذا كنت ترغب بتجميد مجموعة من الأعمدة دون تجميد الصفوف. حدد خلية في الصف 1 والتي تجاور مجموعة الأعمدة مباشرة (وهي الخلية D1 في هذا المثال لأننا سنقوم بتجميد الأعمدة الثلاثة الأولى) ثم اختر تجميد الأجزاء Freeze Panes من زر تجميد الأجزاء: وبذلك سيتم تجميد جميع الأعمدة إلى يسار العمود C دون تجميد الصفوف، لأنه لا يوجد صف فوق الصف الأول. يجب أن تأخذ في الاعتبار أنّ زر تجميد الأجزاء يصبح غير مفعلا أثناء تحرير الخلايا، أو عند استخدام طريقة العرض تخطيط الصفحة Page Layout. وكذلك، يمكنك طباعة صفوف أو أعمدة بشكل متكرر في جميع الصفحات وبطريقة مشابهة لطريقة تجميد الأجزاء. على سبيل المثال؛ إذا كنت ترغب بتكرار الصفين العلويين لورقة العمل في جميع الصفحات عند طباعتها، اذهب إلى تبويب تخطيط الصفحة Page Layout وانقر طباعة العناوين Print Titles. في مربع الحوار إعداد الصفحة Page Setup ضع المؤشر في حقل Rows to repeat at top، ومن ورقة العمل حدد الصفوف التي تريد تكرارها، ثم انقر معاينة الطباعة Print Preview وستشاهد أن الصفوف التي قمت بتحديدها ستظهر في الجزء العلوي لجميع الصفحات:

تقدّمت منذ فترة بطلب إلى مطوّري إطار عمل Laravel لإضافة مكتبة JavaScript مشابهة لتلك الموجودة في إطار العمل Ruby on Rails. إذ تقدّم المكتبة المتوفرة في إطار Rails مجموعة من الخصائص المفيدة التي يمكن إضافتها إلى شيفرة HTML للحصول على المزيد من الوظائف التي تسهّل على المطوّر أداء الكثير من المهامّ الشائعة. أجري نقاش حول هذا الموضوع وتمخّض النقاش عن الاقتراح التالي: إما أن يصار إلى إنشاء حزمة Composer من طرف ثالث، أو أن المكتبة التابعة لإطار العمل Rails صالحة للاستخدام في Laravel. وفقًا للمقترح السابق قرّرت استخدام مكتبة UJS التابعة لـ Rails في أحد مشاريعي ورحت أتفحّص الطرق التي يمكن من خلالها استخدام نفس الخصائص في الإصدار الرابع من Laravel. ولسوء الحظ لا يمتلك Laravel نفس التوابع المساعدة الموجودة في Rails والمسؤولة عن أداء وظائف معيّنة، ولكن لا زال بالإمكان تفعيل هذه الوظائف في المكان الذي ترغب فيه باستخدام الخواص الملائمة، ومن المؤكّد أن هذه الوظائف ستعمل حسب المطلوب في أي إطار عمل آخر. البداية بعد أن تربط مكتبتي jQuery و Rails UJS مع ملف HTML ستحتاج إلى إجراء بعض التعديلات السريعة. سنحتاج أوّلًا إلى إعداد مكتبة UJS للعمل مع رمز CSRF على فرض أنّك تستخدم هذه الرموز في تطبيقاتك (أنصحك باستخدامها)، لذا سنضع وسمي <meta> في بداية المستند: <meta name="csrf-param" content="_token"> <meta name="csrf-token" content="{{ csrf_token() }}"> يخبر الوسم الأول مكتبة UJS بالاسم الذي يجب استخدامه لرمز CSRF عند إنشاء الطلب، أما الوسم الثاني فيخبر المكتبة بوسم CSRF الذي يجب استخدامه. يستخدم Laravel افتراضيًا token_ كاسم للمعامل (ألق نظرة على ملف filters.php للمزيد من المعلومات)، أما التابع ()csrf_token فيضيف رمز الحماية إلى الطلب. خاصية data-method هذه الخاصية مفيدة جدًّا عند استخدام للروابط، إذ تخطف مكتبة UJS النقرة على الرابط وتنشئ طلبًا باستخدام فعل Http الذي نقدّمه إلى الخاصية. مثال: <a href="posts/1" data-method="delete" rel="nofollow">Delete this post</a> عند النقر على الرابط، يتم إنشاء طلب من نوع DELETE بدلًا من الطلب الاعتيادي GET والذي ينشأ من مثل هذه الروابط، وبهذا يمكنك إجراء أحداث بنمط RESTful في تطبيقك دون الحاجة إلى الاستمارات. إن كنت ترغب في إنشاء روابط مشابهة لهذا الرابط في Laravel فإليك المثال التالي والذي نستخدم فيه دالة link المساعدة: {{ link_to_route('posts.destroy', 'Delete this post', $post->id, ['data-method' => 'delete', 'rel' => 'nofollow']) }} جدير بالذكر أنّه يجب إضافة الخاصية rel="nofollow" عند استخدام هذه الدالة المساعدة لضمان عدم فهرسة محركات البحث لهذا الرابط. خاصية data-confirm هذه الخاصية مفيدة للتحقّق من الموافقة على إجراء الحدث قبل الاستمرار، وتتم عملية التحقّق هذه بواسطة مربع التنبيه الذي يظهر بواسطة الدالة confirm() في JavaScript، ويمكن استبدال مربّع التنبيه هذا بآخر ذي شكل أجمل حسب الرغبة. تعمل هذه الخاصية بصورة جيّدة مع المثال السابق، فإن كان الرابط أو الزرّ يؤدّي إلى حذف شيء ما فيستحسن حينئذٍ التحقّق من الرغبة في القيام بذلك قبل إجراء عملية الحذف. <a href="posts/1" data-method="delete" data-confirm="Are you sure you want to delete this post?" rel="nofollow">Delete this post</a> إن ألغى المستخدم صندوق التأكيد هذا لن يتم تنفيذ الحدث، والعكس بالعكس. جدير بالذكر أنّك لست ملزمًا باستخدام هذه الطريقة مع خاصية data-method بل يمكن استخدامها مع أي حدث ترغب في التحقق منه قبل إجراءه. خاصية data-disable قد ترغب أحيانًا في تعطيل زرّ معين بعد النقر عليه مباشرة لإتاحة الفرصة لاكتمال الطلب وفي حال فشل الطلب تعيد تفعيل الزرّ مرة أخرى. تتيح لك مكتبة UJS القيام بهذا الأمر بواسطة خاصّية data-disable. <input type="submit" value="Save post" data-disable> هكذا سيتم تعطيل الزر بعد النقر عليه وستمنع المستخدم من النقر المستمر على الزر وإنشاء 10 سجلات جديدة في قاعدة البيانات. بالنسبة لمستخدمي Laravel يمكن الاستفادة من هذه الخاصّية باستخدام منشئ الاستمارات form builder. {{ Form::submit('Save post', ['data-disable']) }} خاصّية data-disable-with يمكن التوسع في المثال السابق وذلك بتقديم بعض المعلومات المفيدة للمستخدم، فعند تعطيل الزرّ يظهر نصّ يخبر المستخدم بأنّ الطلب في طور الإنشاء في الخلفية. <input type="submit" value="Save post" data-disable-with="Saving this post..."> والآن عندما يكون الزرّ معطلًا، يتم استبدال النص بعبارة تدلّ على أن النقر على الزرّ قد أدى إلى حدوث شيء ما في الخلفية. خاصّية data-remote عند إضافة الخاصّية data-remote إلى الاستمارة، تقوم مكتبة UJS بإرسال الاستمارة كطلب Ajax. وستأخذ المكتبة كل شيء بالحسبان (طريقة الإرسال، التحقق من الموافقة على الإجراء… الخ) قبل إرسال الاستمارة. <form action="posts" method="post" data-remote> <!-- Form goes here. --> </form> ويمكن التعامل مع الاستجابة الواردة بعد نجاح الطلب بكل سهولة، فإن استجاب المتصفّح بواسطة JavaScript فستنفّذ الاستجابة فور اكتمال الطلب. على سبيل المثال، قد تختار إعادة توجيه المستخدم بعد تنفيذ طلب للحذف: window.location.href = '{{ route('posts.index') }}'; أو لنقل مثلًا أنّك تستخدم رابطًا لحذف مقالة من صفحة تتضمن قائمة بالمقالات المتوفّرة في المدونة، وترغب في إخفاء المقالة بعد حذفها مباشرة. <a href="{{ route('posts.destroy', $post->id) }}" data-method="destroy" data-confirm="Delete this post?" rel="nofollow" data-remote>Delete this post</a> يمكن استخدام الشيفرة التالية لإخفاء المقالة: $('#post-{{ $post->id }}').fadeOut(); وهكذا، تُحذف المقالة من قاعدة البيانات والعرض في آن معًا. خاصّية data-type: إن استخدمت الخاصّية السابقة data-remote يمكنك كذلك استخدام خاصية data-type لتحديد هيئة البيانات التي يتم إرسالها إلى الخادوم. فعلى سبيل المثال يمكن إرسال الاستمارة على هيئة Json: <form data-type="json"> الأحداث البعيدة عند استخدام خاصّية data-remote يمكن الوصول إلى الأحداث المختلفة في طلب Ajax لتأدية بعض المهامّ الإضافية. إذ تطلق مكتبة UJS عددًا من الأحداث المساعدة خلال دورة حياة الطلب والتي من شأنها أن تساعد في بناء تطبيقات أكثر تعقيدًا. ajax:before ينطلق هذا الحدث قبل حدوث أي شيء، وإيقاف هذا الحدث يؤدي إلى إلغاء الطلب. ajax:beforeSend: ينطلق هذا الحدث قبل إرسال طلب Ajax مباشرة، وإيقاف الحدث يؤدي إلى إلغاء الطلب. ajax:send: ينطلق عند إرسال طلب Ajax. ajax:success: ينطلق بعد اكتمال الطلب بنجاح. ajax:error: ينطلق بعد فشل إرسال الطلب. ajax:aborted:required: ينطلق في حال وجود حقول إلزامية فارغة في الاستمارة، وفي حال إيقاف الحدث يتم إرسال الاستمارة. ajax:aborted:file: ينطلق في حال وجود حقول ملفات غير فارغة في الاستمارة، ويتم تجاهل الطلب في حال توقّف الحدث. آمل أن يكون هذا الموضوع مفيدًا لكل من يرغب في استخدام مكتبة UJS التابعة لإطار العمل Ruby on Rails مع إطارات العمل الأخرى مثل Laravel، إذ أرى أن هذه المكتبة مفيدة ولا يجوز أن تكون حكرًا على مستخدمي إطار Rails. ترجمة - وبتصرّف - للمقال Using Rails UJS in Laravel 4 (or any other framework) لصاحبه Dwight Conrad Watson.