الوسم: jQuery

التصنيفات
BlackBerry

كيفية تطوير تطبيقات موبيل لاجهزة BlackBerry 10 (ج٢)

هذه المقالة مكونة من جزئين، يفضل الاطلاع علي الجزء الاول للحصول على المعلومة كاملة.

تطوير تطبيقات موبيل بإستخدام HTML5 و CSS3 و JavaScript وبإستخدام Webworks
تعتبر Webworks في الاساس مثلها كمثل PhoneGap فهي تقوم بعمل Packaging لمجوعة ملفات HTML وصور واي ملفات اخرى في تطبيق مضغوط يمكنك رفعه علي متجر التطبيقات فوراً، كما يوفر واجهة برمجية API للوصول للعتاد كالبلوتوث والكاميرا واشياء اخرى كملفات النظام و BBM وغيره.

WebWorks-6k5

كيف سيكون شكل تطبيقي؟
من ناحية الشكل سيكون نسخة طبق الاصل من اي تطبيق مبني باستخدام Cascades، فقط كل ما عليك استخدام مكتبة bbUI.js وستقوم هي بتنظم كل ما له علاقة بالواجهة، من اول الانتقال بين الصفحات، وال Tabs وال Switch buttons وما إلى ذلك.

وماذا عن jQuery Touch ؟
هل تحب استخدام jQuery ؟ لا عليك استخدم ما تحب وادمج معه فقط هذا الثيم المقدم من BlackBerry كي يجعل تطبيقك يشبه اي تطبيق BlackBerry آخر، رابط الثيم من GitHub.

Screen Shot 2013-07-27 at 4.23.24 AM

استخدم Ripple
Ripple هو اضافة لمتصفح Chrome يمكنك من خلالها تحويل المتصفح بحجم هاتف محمول من نوع BlackBerry Z10 او Q10 او حتى iPhone او اي موبيل آخر، كما ستتمكن من تغير قيم ال GPS او ارسال SMS او تغيير قيمة شحن البطارية لهذا الموبيل الوهمي الذي يعمل بداخل متصفح ال Chrome، كما سيوفر لك ايضاً امكانية عمل Packaging و Singing لتطبيقك حتى تتمكن من تجربتة علي جهاز حقيقي او رفعه علي متجر التطبيقات.

كيف ابدأ؟

  1. حمل من هنا Ripple وقم بتركيبه على Google Chrome
  2. من نفس الرابط قم بتحميل Webworks SDK
  3. (اختياري) من نفس الرابط حمل BlackBerry 10 Simulator لكي تختبر ما قمت ببرمجته (ستحتاج لبرنامج VMWare Player لتشغيل ال Simulator)
  4. استخدم اي IDE تفضله، انصحك بإستخدام Aptana
  5. من هذا الرابط اتبع الخطوات لبناء اول تطبيق لك علي BlackBerry 10
  6. لا تنسى دائماً ان تتصفح ال Sample Apps وال Documentation ولا تغلق صفحة الـ API Reference طالما انك تكتب كود.

لعلي مستقبلاً انشر المزيد من الفيديوهات العملية عن كيفية بناء تطبيقات لـ BlackBerry 10، فضلاً اضف تعليق ان كنت مهتم.

التصنيفات
JavaScript

jQuery 1.3

فرق سرعة كبير بينها وبين 1.2.6، ويمكنك ملاحظته في بمجرد أستخدام بعض الأكواد التي تثقل المتصفح وستلاحظ سرعتها بأستخدامك 1.3

هناك حدثين رائعين جدد تم أضافتهم وهما live و die

live
عادتاً تقوم بوضع أكوادك حدث ready للـ document وبالتالي يتم تنفيز الأكواد للكائنات المتوادة بصفحتك الأن، وبالتالي إذا قمت بتكوين كائن جديد بالصفحة فهو لا يأخذ أي صفة من التي اعطتها له في السطر السابق، لأن لسطر السابق تم تنفيزه وبعدها تكون هذا العنصر، ولكن مع live فيمكنك أن عطي حدث لكل عنصر يتكون حتى بعد طلب اعطاء هذ الحدث.

يعني أيه !!
يعني أنت عادتاً بتكتب كودك هنا

$(document).ready(function ($) {
  // هنا الكود
});
Code language: JavaScript (javascript)

وبالتالي أنت بتقولو لما تنتهي من تحميل عرض كل عناصر الصفحة أبدأ بتنفيز الكود هذا، فإذا كان هناك كود يقوم بتوليد عناصر جديدة بالصفحة مثل هذا

$(document).ready(function ($) {
  $("label:last input").keypress(function () {
    // لو أخر عنصر في هذه الحقول مكتوب فيه
    if ($("label:last input").val().length > 0) {
      // يقوم بتكوين حقل جديد فاضي بعدهم
      $("label:last input").after("<input />");
    }
  });
});
Code language: JavaScript (javascript)

وهو لو في مجموعة حقول وتريد إذا قام الزائر بالكتابة بهم ووصل لأخرهم وكتب به أن يقوم المتصفح بتكوين حقل جديد ليكتب به وكذلك كلما قام بملئ أخر حقل فيقوم بتكوين حقل جديد

المشكلة الان أن الحقل الجديد لن يأخذ الصفات المسجلة لغيره بأنه عند الكتابة به يقوم بمراجعة أخر حقل ولو مش خالي يتم تكوين حقل جديد، لان هذا الكود تم تنفيذه في $(document).ready وهو تكون بعدها !!، وهذا هو الكود الجديد بواسطة live

$(document).ready(function ($) {
  $("label:last input").live("keypress", function () {
    // لو أخر عنصر في هذه الحقول متوب فيه
    if ($("label:last input").val().length > 0) {
      // يقوم بتكوين حقل جديد فاضي بعدهم
      $("label:last input").after("<input />");
    }
  });
});
Code language: JavaScript (javascript)

وهذه خاصية رائعة، كذلك هناك die وهي تقوم بالغاء حدث من كائن “removes a bound live event”

راجع live وأيضاً die

التصنيفات
JavaScript

دورة جافا سكريبت

بسم الله في أنشغالي وضغطتي قبل السفر أعطيت دورة جافا سكريبت أتكونت من حوالي 8 ساعات أو أكثر على يومين (يفضل أن لا تقل عن 15 ساعة).

الدورة لبعض موظفي مكتب شركة web.com.sa بالقاهرة،كانو 3 موظفين أحدهم مصمم (عند دراية كافية ببعض المفاهيم البرمجية وقدر ليس بالقليل من الكود) و 2 مبرمجين PHP.

وكان الهدف من الدورة هو الأطلاع على كيفية أستخدام jQuery للتعامل مع الـ Ajax والتأثيرات.

طبعاً كان من الطبيعي بعد المقدمة بالحديث عن ال Browser Engines الموجودة مثل Gecko, WebKit أن نتحدث عن عدم قياسية الجافا سكريبت و سعي مؤسسة ecma للأنتهاء من تطوير معايرها -التي من الواضح انها لن تنتهي منها- وكانت البداية من أول أساسيات الـ JavaScript ومن أول المتغيرات مروراً بالمصفوفات والدوال إلى أن أطلعنا على يعض ملامج الكائنات وبالأطلاع على بعض الكائنات مثل screen, document, window ….. etc وطبعاً بالتطبيق على بعض العمليات والأحداث Events .

أما بالنسبة للـ jQuery فكان من الطبيعي الحديث عن فائدة أستخدام مكتبة مساعدة في الأصل أشارة إلى أهم المكتبات الموجودة بداية YUI و Prototype إلى MooTools ثم البدئ في jQuery حيث أنها الأذكى والأقل كود بين هؤلاء.

يمكنك الأطلاع على فهرس الدورة هذه لعلها تفيدك لتكوين دورة مختصرة فيما بعد.