Benvenuti nel mondo di DashCode. Io sono Andrea Corsini, sviluppatore di Dames e Lottery, e ho deciso di scrivere una serie di guide per guidarvi (scusate il gioco di parole) alla conoscenza di DashCode. Partiremo dai fondamenti e dall’interfaccia grafica del programma per arrivare, in più puntate, a creare WebApp, Applicazioni Native e LockScreen animate.
Requisiti:
- Developer Tools 3.0 (Xcode, DashCode, iPhone Simulator)
Obiettivi:
- Conoscere i fondamenti di DashCode
- Sapere creare una semplice webapp
Procedimento:
1. Apriamo DashCode, creaiamo un nuovo progetto, scegliamo Web Application e poi Ad Hoc.
2. In alto vediamo la toolbar in cui sono presenti i pulsanti “Esegui” e “Metti in pausa”. Più a destra poi ci sono i pulsanti “Inspector” e “Libreria”.
3. Premiamo libreria e vedremo comparire una secoda finestra.
4. Proviamo ad inserire (con un Drag&Drop) l’elemento che si chiama Forma Rettangolare e vedremo che portandolo all’interno del documento compariranno delle linee guida blu, che indicheranno la posizione centrale.
5. Inseriamo poi un’immagine sopra questo e vediamo che di nuovo compaiono le linee blu. Inoltre DashCode vi impedirà di uscire al di fuori dell’area dal pulsante.
6. Adesso passiamo alla sezione testo. Quindi tornate alla libreria, cercate l’elemento Text, ed inseritelo nella “pagina”.
7. Modifichiamo il testo con una scritta a nostro piacere e poi modifichiamone le impostazioni, premendo il pulsante Inspector e muovendoci nella sezione Testo…
8. Da lì modifichiamo tutti i parametri che desideriamo e otterremo qualcosa di simile all’immagine sotto.
Poi aggiungiamo un Riquadro arrontondato dietro alla scritta per migliorarne l’effetto visivo.
9. Ora lasciamo l’area estetica e passiamo ad occuparci del Codice: Nella finestra della Libreria dai cui prendiamo i vari elementi, passiamo nel Tab “Codice”. Vedremo che qui sono riportati gli script più importanti e basilari che una webapp può contenere.
Ritorniamo nella sezione “Parti” e da lì inseriamo un Pulsante losanga, modifichiamone il testo e le dimensioni, poi premiamoci sopra con il tasto destro e clicchiamo su Eventi -> onclick.
Comparirà un messaggio PopUp che ci chiede come vogliamo chiamare questo evento, intitoliamolo “iSpazio_handler”.
10. Finalmente arriva il momento di inserire il codice; appena avremo premuto “Aggiungi”, si aprirà l’editor e ci chiederà di inserire il codice per questo evento. Facciamo sì che questo pulsante rimandi al sito di iSpazio, quindi inseriamo:
document.location = “http://www.ispazio.net”;
Salviamo il progetto con un nome qualunque, e vediamolo in azione, premendo il pulsante “Esegui” e l’iPhone Simulator
ll lavoro da noi fatto può essere facilmente trasformato in una App nativa o in una LockScreen animata, ma questo lo vedremo nello prossima puntata ed andremo avanti con un progetto un pò più complicato.
Scarica la guida in formato PDF
Andrea Corsini per iSpazio.net
Leggi o Aggiungi Commenti