التطوير على iPhone (4): تطبيقنا الأول (II)

أشرنا في منشورنا السابق إلى الشكل الذي سيكون عليه تطبيق HelloWorld والخطوات التي سنتخذها لبناء تطبيقنا ، بالإضافة إلى توفير روابط للوثائق المطلوبة. في هذه المقالة نبدأ بفتح XCode ونبدأ في التطوير.

الخطوة 1. إنشاء المشروع.

لهذا السبب ، نفتح XCode ونغلق (إذا خرج) ، نافذة الترحيب الخاصة بالتطبيق. قبل إنشاء مشروعنا ، يمكننا إدخال تفضيلات XCode. بشكل عام -> تخطيط اختر "الكل في واحد" ، على الأقل إذا كنت تريد أن تكون قادرًا على مقارنة ما تراه على شاشاتك بالصور التي تراها.

في هذه اللحظة نقوم بإنشاء المشروع: File -> New Project ، ونختار View-Based:

كما أشرنا في المقالة السابقة ، بالنسبة لمشروع XCode المستند إلى العرض ، فإنه ينشئ طريقة عرض مرتبطة بفئة تحكم (تذكر أننا كنا نتحدث عن نمط MVC). اتصل بالمشروع HelloWorld واحفظه في المجلد الذي تريده. سترى شيئًا مشابهًا لهذا:

نرى أن لدينا عدة ملفات:

• HelloWorldViewController.h و HelloWorldViewController.m. كلاهما يتوافق مع وحدة التحكم في شاشتنا. هنا سيكون المنطق المتعلق برأينا. في حالتنا ، يجب أن يكون هنا الرمز الذي يجعل قيمة التسمية تتغير مع ما يتم إدخاله في مربع النص. نرى أن هناك ملف .h وآخر .m. الأول هو العنوان ، في Java ستكون الواجهة. فيما يلي إعلانات المتغيرات والأساليب وما إلى ذلك. الملف .m هو الملف الذي يحتوي بالفعل على التطبيق.
• HelloWorldViewController.xib. ib = منشئ الواجهة. هذا الملف هو وجهة نظرنا ، الشاشة. يتم استدعاؤه بواسطة MainWindow.xib ، الواجهة الرئيسية لوجهات النظر التي لن نلمسها.
• HelloWorldAppDelegate (.h و .m). لن نقوم بتعديلها ، فهي تحتوي على مؤشر إلى ViewController الخاص بنا.
• Info.plist. إنه XML يحتوي على معلومات حول تطبيقنا. يمكننا هنا على سبيل المثال تحديد رمز تطبيقنا.

الخطوة 2. تصميم الواجهة.

سنبدأ "رسم" شاشة تطبيقنا. للقيام بذلك ، في XCode نضغط مرتين على HelloWorldViewController.xib ، وسنرى أن تطبيق Interface Builder يفتح. بادئ ذي بدء ، كنصيحة عملية ، أوصي بأن تتحقق دائمًا من فتح لوحة المفتش والمكتبة. يمكنك فتحها في قائمة الأدوات في Interface Builder. تتيح لك لوحة المكتبة إضافة عناصر تحكم مختلفة إلى طريقة العرض الخاصة بك ، وتتيح لك لوحة المفتش رؤية خصائص كل كائن وتعديلها.

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

في طريقة العرض ، اسحب حقل نص أعلاه من لوحة المكتبة ، وتسمية أدناه ، وأخيراً زر مستدير مستدير. ننظر إليه ، إذا كان لدينا عنصر تحكم مثل TextField المحدد ، فيمكننا نقل حجم عنصر التحكم هذا ، ونقله على الشاشة ... وفي لوحة المفتش يمكننا الحصول على خصائصه. بتحديد الزر يمكننا وضع عنوان بقيمة «تغيير!». في النهاية سيكون لدينا شيء مثل هذا:

بهذا حددنا واجهة تطبيقنا. إنه يتوافق مع ما خططنا له: مربع نص (من الآن فصاعدًا ، TextField) حيث سنقوم بإدخال المعلومات. تسمية (نص ثابت) وزر. عندما نضغط على الزر ، ستظهر التسمية ما كتبناه في TextField. للقيام بذلك ، سيتعين علينا إنشاء المتغيرات التي تشير إلى Label و TextField في ViewController الخاص بنا وسيتعين علينا الإشارة إلى Interface Builder العلاقة بين Label و TextField بهذه المتغيرات. سيتعين علينا أيضًا إنشاء طريقة في ViewController تكون مسؤولة عن تحديث قيمة Label بما أدخلناه في TextField ، وربط الزر بهذه الطريقة في Interface Builder. كل ذلك سيكون الخطوات 3 و 4 و 5 من نصنا الأولي ، وسيتم شرحه في المنشور التالي.

بالطبع ، قبل الانتهاء ، أوصي بأن تنظر إلى ما يظهر في لوحة المكتبة عندما تحدد ، على سبيل المثال ، حقل نص لإضافته إلى العرض:

يمكنك أن ترى أنه يشرح ما يفعله عنصر تحكم TextField ، ولكنه يقول أيضًا "UITextField" تحته. هذا مهم ، لأنه يخبرنا بأي فئة في إطار عمل Cocoa UIKit تتوافق مع هذا التحكم. هذا يعطينا تلميحًا: لإنشاء المتغير الذي يتعامل مع عنصر التحكم هذا في ViewController ، يجب أن يكون من النوع UITextField.