Zhvillimi në iPhone (4): aplikacioni ynë i parë (II)

Në postimin tonë të mëparshëm ne treguam se si do të ishte aplikacioni ynë HelloWorld dhe hapat që do të ndërmerrnim për të ndërtuar aplikacionin tonë, si dhe dhënien e lidhjeve me dokumentacionin e kërkuar. Në këtë artikull ne fillojmë duke hapur XCode dhe ne fillojmë të zhvillohemi.

Hapi 1. Krijoni projektin.

Kjo është arsyeja pse ne hapim XCode dhe mbyllim (nëse del), dritarja e mirëseardhjes së aplikacionit. Para se të krijojmë projektin tonë, ne mund të hyjmë në preferencat XCode. Në përgjithësi -> Paraqitja zgjidhni 'Të Gjithë Në Një', të paktën nëse doni të jeni në gjendje të krahasoni atë që shihni në ekranet tuaja me imazhet që do të shihni.

Në këtë moment ne krijojmë projektin: Skedar -> Projekt i Ri, dhe zgjedhim të bazuar në pamje:

Siç kemi treguar në artikullin e mëparshëm, për një projekt XCode të bazuar në pamje krijon një pamje të lidhur me një klasë Kontrolluesi (mos harroni se po flisnim për modelin MVC). Thirrni projektin HelloWorld dhe ruajeni atë në dosjen që dëshironi. Do të shihni diçka të ngjashme me këtë:

Ne shohim se kemi disa skedarë:

• HelloWorldViewController.h dhe HelloWorldViewController.m. Të dy korrespondojnë me kontrolluesin e ekranit tonë. Këtu do të jetë logjika që lidhet me pikëpamjen tonë; Në rastin tonë, këtu duhet të jetë kodi që bën që vlera e etiketës të ndryshojë me atë që futet në kutinë e tekstit. Ne shohim se ekziston një skedar .h dhe një tjetër .m. E para është titulli, në Java do të ishte Ndërfaqja. Këtu janë deklarimet e ndryshoreve, metodave, etj. Skedari .m është ai që tashmë përmban implementimin.
• HelloWorldViewController.xib. ib = Ndërtuesi i Ndërfaqes. Kjo skedar është pamja jonë, ekrani. Ajo thirret nga MainWindow.xib, fasada kryesore e pamjeve që ne nuk do të prekim.
• HelloWorldAppDelegate (.h dhe .m). Ne nuk do t'i modifikojmë ato, ai ka një tregues për ViewController-in tonë.
• Info.plist. Isshtë një XML me informacion në lidhje me aplikacionin tonë. Këtu mund të tregojmë për shembull se cila është ikona e aplikacionit tonë.

Hapi 2. Dizajnoni ndërfaqen.

Ne do të fillojmë të "vizatojmë" ekranin e aplikacionit tonë. Për ta bërë këtë, në XCode klikojmë dy herë në HelloWorldViewController.xib, dhe do të shohim që hapet aplikacioni Ndërtuesi i Ndërfaqes. Së pari, si një këshillë praktike ju rekomandoj që gjithmonë të kontrolloni që të keni të hapura paletat e Inspektorit dhe Bibliotekës. Mund t'i hapni në menunë Tools të Ndërtuesit të Ndërfaqeve. Paleta e Bibliotekës do t'ju lejojë të shtoni kontrolle të ndryshme në pamjen tuaj dhe paleta Inspektor ju lejon të shihni vetitë e secilit objekt dhe t'i modifikoni ato.

Ne nuk do të përpiqemi të bëjmë një aplikim të bukur, por ta bëjmë atë të funksionojë. Filloni duke lokalizuar ekranin, të etiketuar View. Nëse nuk është e hapur, ajo hapet duke klikuar dy herë në View në ekranin vijues:

Në pamje, tërhiqni nga paleta e Bibliotekës një TextField sipër, një Etiketë poshtë dhe në fund një Buton Round Rect. Ne e shikojmë atë, nëse kemi një kontroll të tillë si TextField të zgjedhur, mund të zhvendosim madhësinë e këtij kontrolli, ta zhvendosim atë në ekran ... dhe në paleta Inspektor mund të kemi vetitë e tij. Përzgjedhja e butonit mund të vendosim një Titull me vlerë «Ndrysho!». Në fund do të kemi diçka si kjo:

Me këtë ne kemi përcaktuar ndërfaqen e aplikacionit tonë. Ajo përputhet me atë që kishim planifikuar: një kuti teksti (këtu e tutje, TextField) ku do të fusim informacionin. Një Etiketë (teksti fiks) dhe një buton. Kur shtypim butonin, Etiketa do të tregojë atë që kemi shkruar në TextField. Për ta bërë këtë do të duhet të krijojmë variablat që i referohen Label dhe TextField në ViewController tonë dhe do të duhet t'i tregojmë Ndërtuesit të Ndërfaqes marrëdhëniet midis Label dhe TextField me këto variabla. Ne gjithashtu do të duhet të krijojmë një metodë në ViewController që është përgjegjëse për azhurnimin e vlerës së Etiketës me atë që kemi futur në TextField dhe ta lidhim butonin me atë metodë në Ndërtuesin e Ndërfaqeve. Të gjitha këto do të jenë hapat 3, 4 dhe 5 të shkrimit tonë fillestar dhe do të shpjegohen në postimin tjetër.

Sigurisht, para se të përfundoj unë ju rekomandoj që të shikoni se çfarë shfaqet në paletën e Bibliotekës kur keni zgjedhur, për shembull, një TextField për ta shtuar në pamje:

Ju mund të shihni se shpjegon atë që bën kontrolli TextField, por gjithashtu thotë "UITextField" poshtë. Kjo është e rëndësishme, sepse po na tregon se cila klasë në kornizën Cocoa UIKit korrespondon me këtë kontroll. Kjo na jep një sugjerim: në mënyrë që të krijojmë ndryshoren që merret me këtë kontroll në ViewController, duhet të jetë e tipit UITextField.