{"id":3376,"date":"2010-06-01T09:30:56","date_gmt":"2010-06-01T07:30:56","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=3376"},"modified":"2010-06-01T09:06:56","modified_gmt":"2010-06-01T07:06:56","slug":"ipad002-setup-di-una-universal-app-view-based","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/ipad002-setup-di-una-universal-app-view-based\/","title":{"rendered":"IPAD#002 – Setup di una “Universal App” view-based"},"content":{"rendered":"

Con questo tutorial vedremo come creare delle App universali<\/strong> (compatibili quindi sia con iPhone che con iPad) facendo uso di Interface Builder. Non nego che \u00e8 possibile fare il tutto anche via codice, ma per adesso eviteremo di utilizzare questo metodo per un semplice motivo: le funzioni che permettono di capire se stiamo lavorando su iPad o iPhone, per il momento, sono utilizzabili solo su iPad (sono state introdotte nel 3.2). Quindi rimanderemo questa trattazione a dopo l’uscita dell’OS 4 quando tutti potranno testare il tutorial senza avere un account da developer pagante.<\/p>\n

Creiamo il progetto e modifichiamone le propriet\u00e0<\/h4>\n

Come prima cosa creiamo un progetto direttamente dai uno dei template forniti da XCode. Io, per questo tutorial, ho utilizzato una “view-based application” per iPhone. Aprendo le risorse possiamo notare che ci sono stati creati tutti i file necessari per avere un’applicazione gi\u00e0 funzionante che, come gi\u00e0 saprete non fa altro che visualizzare una view vuota.<\/p>\n

In questo momento la nostra applicazione \u00e8 \u00a0progettata solo per iPhone, se vogliamo renderla universale dobbiamo specificarlo nelle Info del progetto. Facciamo quindi doppio click sull’icona nel progetto in Groups & Files<\/em> (l’icona che cerchiamo \u00e8 la prima).<\/p>\n

Ora nella tab Build<\/em> cerchiamo una propriet\u00e0 chiamata Targeted Device Family<\/em> e cambiamone il valore in IPhone\/iPad<\/em>. Ricordiamoci di effettuare la modifica per tutte le configurazioni.<\/p>\n


\n\"Settaggio
\n<\/center><\/p>\n

Creiamo i file Nib necessari<\/h4>\n

Per ora nelle risorse sono presenti solamente due file Nib che rappresentano la window e la view che dobbiamo visualizzare sui dispositivi iPhone. Prima di andare a creare i due file relativi alla window e alla view da visualizzare su iPad modifichiamo i nomi in modo da poterle successivamente distinguere. Io per esempio aggiungo il suffissi ~iPhone<\/em> e ~iPad<\/em> alla fine del nome del file.<\/p>\n


\n\"Modifichiamo
\n<\/center><\/p>\n

Apriamo ora il file MainWindow~iPhone.xib <\/em>e creiamone la versione per iPad.
\nPer prima cosa modifichiamo il nome del file .nib<\/em> caricato dal view controller andando ad aggiungere il suffisso ~iPhone<\/em> alla propriet\u00e0 NIB Name <\/em>del view controller.<\/p>\n


\n\"Modifichiamo
\n<\/center><\/p>\n

Selezioniamo ora File -> Create iPad Version<\/em> per creare la versione iPad della nostra window.<\/p>\n


\n\"Creazione
\n<\/center><\/p>\n

Ci apparir\u00e0 ora la window versione iPad. Non dobbiamo far altro che modificare anche qui il file Nib caricato dal controller (aggiungendo questa volta il suffisso ~iPad<\/em>). Salviamo il file come MainWindow~iPad.xib<\/em> e importiamolo nel progetto.
\nApriamo ora il file relativo alla view da visualizzare sull’iPhone e modifichiamo il colore di background rendendo la view, per esempio, arancione. Salviamo e con lo stesso procedimento spiegato prima creiamo la versione per iPad di questa view e diamo un colore di background differente, per esempio verde, e salviamo il file importandolo all’interno del nostro progetto.
\nA questo punto ci ritroviamo nel progetto sia i due file Nib versione iPhone che quelli della versione iPad.<\/p>\n


\n\"Situzione
\n<\/center><\/p>\n

Abbiamo quasi finito. Prima di vedere il tutto funzionare nel simulatore, ci manca per\u00f2 un ultimo passaggio.<\/p>\n

Modifica del file Info.plist<\/em><\/h4>\n

Nulla di complicato. Dobbiamo solamente aprire il file plist<\/em>, modificare una propriet\u00e0 e aggiungerne un’altra.
\nLa propriet\u00e0 che dobbiamo modificare \u00e8 quella relativa al file Nib caricato all’avvio dell’applicazione come potete notare voi stessi dobbiamo anche in questo caso limitarci ad aggiungere il suffisso ~iPhone<\/em>. La voce “Main nib file base name”<\/em>, anche se non \u00e8 specificato, si riferisce a quando l’applicativo viene lanciato su iPhone.
\nCome avrete probabilmente intuito la propriet\u00e0 da aggiungere \u00e8 quella che indica il file Nib da utilizzare quando l’applicazione viene lanciata su iPad. Aggiungiamo una nuova voce al file plist mettendo come chiave “Main nib file base name (iPad)” <\/em>mentre come valore “MainWindow~iPad”<\/em>.
\nSe avete fatto tutto correttamente il file plist dovrebbe apparire esattamente come segue:<\/p>\n


\n\"plist\"
\n<\/center><\/p>\n

Ora, lanciando l’applicazione su iPhone noterete che lo schermo \u00e8 arancione, mentre se la lanciate su iPad \u00e8 verde.<\/p>\n


\n\"iPhone\"
\n<\/center><\/p>\n


\n\"iPad\"
\n<\/center><\/p>\n

A questo punto potete sbizzarrirvi come volete e creare le vostre applicazioni universali. Buon divertimento \ud83d\ude42<\/p>\n

Se avete bisogno di tutti i file del progetto li potete scaricare come sempre da Google Code<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Con questo tutorial vedremo come creare delle App universali (compatibili quindi sia con iPhone che con iPad)…<\/p>\n","protected":false},"author":181,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[98],"tags":[24,98,247,246,4,245,244],"class_list":["post-3376","post","type-post","status-publish","format-standard","hentry","category-ipad","tag-interface-builder","tag-ipad","tag-luca-di-franco","tag-programmare-ipad","tag-programmazione","tag-programmazione-ipad","tag-universal-app"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/181"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=3376"}],"version-history":[{"count":20,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3376\/revisions"}],"predecessor-version":[{"id":3577,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/3376\/revisions\/3577"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=3376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=3376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=3376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}