פיתוח ב- iPhone (4): היישום הראשון שלנו (II)

בפוסט הקודם שלנו ציינו איך היישום שלנו ב- HelloWorld ייראה והצעדים שננקוט כדי לבנות את היישום שלנו, בנוסף לספק קישורים לתיעוד הנדרש. במאמר זה אנו מתחילים בפתיחת ה- XCode ומתחילים להתפתח.

שלב 1. צור את הפרויקט.

מסיבה זו, אנו פותחים את XCode וסוגרים (אם הוא יוצא), חלון הפתיחה של היישום. לפני יצירת הפרויקט שלנו, אנו יכולים להזין את העדפות ה- XCode. באופן כללי -> פריסה בחר 'All-In-One', לפחות אם אתה רוצה להיות מסוגל להשוות בין מה שאתה רואה על המסכים שלך לתמונות שתראה.

ברגע זה אנו יוצרים את הפרויקט: File -> Project New, ואנחנו בוחרים View-Based:

כפי שציינו במאמר הקודם, עבור פרוייקט XCode מבוסס תצוגה אנו יוצרים תצוגה המקושרת למחלקת בקר (זכרו שדיברנו על דפוס ה- MVC). התקשרו לפרויקט HelloWorld ושמרו אותו בתיקיה הרצויה. תראה משהו דומה לזה:

אנו רואים שיש לנו מספר קבצים:

• HelloWorldViewController.h ו- HelloWorldViewController.m. שניהם תואמים את הבקר של המסך שלנו. כאן יהיה ההיגיון הקשור להשקפתנו; במקרה שלנו, כאן חייב להיות הקוד שהופך את ערך התווית לשינוי עם מה שהוזן בתיבת הטקסט. אנו רואים שיש קובץ .h ועוד .m. הראשון הוא הכותרת, בג'אווה זה יהיה הממשק. להלן הצהרות על משתנים, שיטות וכו '. קובץ ה- m הוא זה שכבר מכיל את היישום.
• HelloWorldViewController.xib. ib = בונה ממשקים. קובץ זה הוא התצוגה שלנו, המסך. הוא מופעל על ידי MainWindow.xib, החזית העיקרית של השקפות שלא ניגע בהם.
• HelloWorldAppDelegate (.h ו- .m). אנחנו לא מתכוונים לשנות אותם, יש לה מצביע ל- ViewController שלנו.
• Info.plist. זהו XML עם מידע על היישום שלנו. כאן נוכל למשל לציין איזה סמל האפליקציה שלנו.

שלב 2. תכנן את הממשק.

אנו נתחיל "לצייר" את מסך היישום שלנו. לשם כך, ב- XCode אנו לוחצים פעמיים על HelloWorldViewController.xib, ונראה כי יישום Interface Builder נפתח. קודם כל, כעצה מעשית אני ממליץ שתמיד תבדוק שפתוחות הפקח והספרייה פתוחות. אתה יכול לפתוח אותם בתפריט כלים של ממשק בונה. לוח הספרייה יאפשר לך להוסיף פקדים שונים לתצוגה שלך, וחלונית Inspector מאפשרת לך לראות את המאפיינים של כל אובייקט ולשנות אותם.

אנחנו לא ננסה ליצור יישום יפה, אלא לגרום לזה לעבוד. התחל באיתור המסך שכותרתו View. אם הוא לא פתוח, הוא נפתח על ידי לחיצה כפולה על View במסך הבא:

בתצוגה, גרור מלוח הספרייה TextField מעל, תווית למטה ולבסוף לחצן Rect Round. אנו מסתכלים על זה, אם יש לנו שליטה כמו TextField שנבחר, נוכל להזיז את גודל הפקד הזה, להעביר אותו על המסך ... ובחלונית Inspector נוכל לקבל את המאפיינים שלו. בבחירת הכפתור נוכל לשים כותרת עם הערך «שנה!». בסופו של דבר יהיה לנו משהו כזה:

בעזרת זה הגדרנו את ממשק היישום שלנו. זה תואם את מה שתכננו: תיבת טקסט (להלן TextField) שבה נכניס מידע. תווית (טקסט קבוע) וכפתור. כשאנחנו לוחצים על הכפתור, התווית תציג את מה שכתבנו ב- TextField. לשם כך נצטרך ליצור את המשתנים המתייחסים לתווית ול- TextField ב- ViewController שלנו ונצטרך לציין בפני בונה הממשקים את הקשר בין התווית ל- TextField עם משתנים אלה. נצטרך גם ליצור שיטה ב- ViewController האחראית על עדכון ערך התווית במה שהזנו ב- TextField, ולקשר את הכפתור לשיטה זו ב- Interface Builder. כל אלה יהיו השלבים 3, 4 ו- 5 בתסריט הראשוני שלנו, ויוסברו בפוסט הבא.

כמובן שלפני הסיום אני ממליץ לך לבחון מה מופיע בחלונית הספרייה כאשר בחרת, למשל, TextField כדי להוסיף אותו לתצוגה:

אתה יכול לראות שזה מסביר מה הפקד של TextField עושה, אבל כתוב גם "UITextField" מתחת. זה חשוב מכיוון שהוא אומר לנו איזה מעמד במסגרת UIKit של קקאו תואם לשליטה זו. זה נותן לנו רמז: כדי ליצור את המשתנה המטפל בשליטה זו ב- ViewController, הוא יצטרך להיות מסוג UITextField.