Udvikling på iPhone (4): vores første applikation (II)

I vores tidligere indlæg angav vi, hvordan vores HelloWorld-applikation skulle være, og de trin, vi skulle tage for at opbygge vores applikation, samt give links til den krævede dokumentation. I denne artikel starter vi med at åbne XCode, og vi begynder at udvikle os.

Trin 1. Opret projektet.

Derfor åbner vi XCode og lukker (hvis det kommer ud), applikations velkomstvinduet. Før vi opretter vores projekt, kan vi indtaste XCode-præferencer. Generelt -> Layout skal du vælge 'All-In-One', i det mindste hvis du vil være i stand til at sammenligne det, du ser på dine skærme, med de billeder, du vil se.

I øjeblikket opretter vi projektet: File -> New Project, og vi vælger View-Based:

Som vi antydede i den foregående artikel, opretter det for et visningsbaseret XCode-projekt en visning, der er knyttet til en controller-klasse (husk at vi talte om MVC-mønsteret). Ring til projektet HelloWorld, og gem det i den ønskede mappe. Du vil se noget der ligner dette:

Vi ser, at vi har flere filer:

• HelloWorldViewController.h og HelloWorldViewController.m. Begge svarer til controlleren på vores skærm. Her vil logikken være relateret til vores opfattelse; I vores tilfælde skal der være koden, der får værdien af ​​etiketten til at ændre sig med det, der er indtastet i tekstfeltet. Vi ser, at der er en .h-fil og en anden .m. Den første er overskriften, i Java ville det være grænsefladen. Her er deklarationer af variabler, metoder osv. .M-filen er den, der allerede indeholder implementeringen.
• HelloWorldViewController.xib. ib = Interface Builder. Denne fil er vores opfattelse, skærmen. Det påberåbes af MainWindow.xib, den vigtigste facade af synspunkter, som vi ikke vil røre ved.
• HelloWorldAppDelegate (.h og .m). Vi vil ikke ændre dem, det har en markør til vores ViewController.
• Info.plist. Det er en XML med oplysninger om vores ansøgning. Her kan vi f.eks. Angive, hvilket ikon der er vores applikation.

Trin 2. Design grænsefladen.

Vi begynder at "tegne" skærmen på vores applikation. For at gøre dette dobbeltklikker vi i XCode på HelloWorldViewController.xib, og vi ser, at Interface Builder-applikationen åbnes. Først og fremmest, som et praktisk råd, anbefaler jeg, at du altid kontrollerer, at du har paletten Inspektør og bibliotek åben. Du kan åbne dem i menuen Funktioner i Interface Builder. Bibliotekspaletten giver dig mulighed for at tilføje forskellige kontroller til din visning, og Inspektorpaletten giver dig mulighed for at se egenskaberne for hvert objekt og ændre dem.

Vi vil ikke prøve at lave en smuk applikation, men at få den til at fungere. Start med at finde skærmen, der er mærket Vis. Hvis den ikke er åben, åbnes den ved at dobbeltklikke på Vis i følgende skærmbillede:

Træk fra Bibliotekspaletten en TextField over, en etiket nedenfor og endelig en Round Rect-knap på visningen. Vi ser ud, hvis vi har valgt en kontrol som f.eks. TextField, kan vi flytte størrelsen på denne kontrol, flytte den på skærmen ... og i Inspektorpaletten kan vi have dens egenskaber. Ved at vælge knappen kan vi sætte en titel med værdien «Skift!». I sidste ende får vi noget som dette:

Med dette har vi defineret grænsefladen til vores applikation. Det overholder det, vi havde planlagt: et tekstfelt (i det følgende Tekstfelt), hvor vi vil indtaste oplysninger. Et mærke (fast tekst) og en knap. Når vi trykker på knappen, viser etiketten, hvad vi har skrevet i TextField. For at gøre dette bliver vi nødt til at oprette de variabler, der henviser til etiketten og TextField i vores ViewController, og vi bliver nødt til at angive til Interface Builder forholdet mellem etiketten og TextField med disse variabler. Vi bliver også nødt til at oprette en metode i ViewController, der er ansvarlig for at opdatere etiketværdien med det, vi har indtastet i TextField, og knytte knappen til denne metode i Interface Builder. Alt dette vil være trin 3, 4 og 5 i vores oprindelige script og vil blive forklaret i det næste indlæg.

Naturligvis anbefaler jeg, at du inden du er færdig med at se på, hvad der vises i paletten Bibliotek, når du f.eks. Har valgt et TextField for at føje det til visningen:

Du kan se, at det forklarer, hvad TextField-kontrollen gør, men der står også "UITextField" nedenunder. Dette er vigtigt, fordi det fortæller os, hvilken klasse i Cocoa UIKit-rammen svarer til denne kontrol. Dette giver os et tip: for at skabe den variabel, der håndterer denne kontrol i ViewController, skal den være af typen UITextField.