Title: Crear una UI amb Onsen
Course: CFGS - Desenvolupament d'aplicacions web > Section: Desenvolupament d'aplicacions mòbils

Preparació projecte OnsenUI

Preparació del projecte

1- Descarregar onsen versio 1.3: https://onsen.io/getting-started.html

- Download everything
- OnsenUI Distribution releases (https://github.com/OnsenUI/OnsenUI-dist/releases)
- Assegurar descarregar 1.3

2- Dins la carpeta www del projecte crearem una carpeta anomenada lib i en el seu interior una subcarpeta anomenada onsen per emmagatzemar-hi totes les llibreries que es puguin emprar en un futur.

3- Descomprimir tots els arxius descarregats en el primer pas, dins la carpeta onsen creada en el pas anterior.

4- OnsenUI utilitza les característiques de AngularJS, per tant caldrà descarregar-nos la versio 1.5.x d'aquesta llibreria des del web http://angularjs.org de totes les possibles l'arxiu UNCOMPRESSED

5- Caldrà crear una carpeta anomenada angular dins la subcarpeta lib/onsen/js

Aquestes primeres passes ens hauran dut a generar els arxius necessaris per emprar OnsenUI en la nostra APP.

OBSERVACIONS

El juliol de 2016 s'allibera Onsen UI versió 2. Aquesta darrera versió s'independitza del llenguatge de programació AngularJS1.x i passa a poder treballar amb altres frameworks de Javascript, com ReactJS, JQuery o fins i tot AngularJS2.

El treball amb aquesta nova versió de Onsen implicaria alguns canvis en les funcions i la forma de treballar, encara que a grans trets es mantenen les característiques generals i les seves capacitats.

Configuració interficie

Un cop creats els arxius necessaris, inclourem les llibreries d'estil de onsen, tal i com es mostra a continuació:

Dins la capçalera del projecte inclourem la llibreria onsenui.css i la llibreria de components

    <link rel="stylesheet" href="lib/onsen/css/onsenui.css"/>
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"/>

La segona llibreria d'estils podem triar segons el tema escollit o el tema de colors generat a traves del theme roller. (http://components.onsen.io)

onsen-css-components-blue-basic-theme.css
onsen-css-components-blue-theme.css
onsen-css-components-dark-theme.css
onsen-css-components-default.css
onsen-css-components-purple-theme.css
onsen-css-components-sunshine-theme.css

Les animacions i transicions es realitzen emprant JavaScript, per aquest motiu cal carregar les llibreries de angular i de onsenui per un correcte funcionament, per tant seguidament carregarem les llibreries.

    <script src="lib/onsen/js/angular/angular.js"></script>
    <script src="lib/onsen/js/onsenui.js"></script>

Un cop carregats tots els arxius CSS i Javascript del Framework Onsen, estem en condicions d'inicialitzar-lo i emprar-lo correctament.

<script>
   ons.bootstrap()
</script>

o també podem fer-ho dins l'arxiu index.js que haviem emprat en els anteriors projectes cordova, en aquest cas sense la etiqueta script.

I ja només ens quedarà afegir-hi contingut.

   <body>

      <ons-navigator title="Navigator" var="myNavigator">
         <ons-page>
            <ons-toolbar>
               <div class="center">Simple Navigation</div>
            </ons-toolbar>
            <div style="text-align: center">
               <h3>El meu primer OnsenUI</h3>
            </div>
         </ons-page>
      </ons-navigator>

   </body>

Test de la interficie

Per tal d'agilitzar la generació de contingut, tot el procés de generació de la interficie podrem visualitzar-lo emprant un navegador web (Firefox, Chrome, IE, Safari...)

En el curs emprarem Chrome i les seves eines de desenvolupament, encara que sigui possible fer-ho amb qualsevol altre navegador.

Per visualtizar-ho, carregarem l'arxiu index.html que hi ha dins la carpeta www, per simular que es tracta d'un dispositiu mòbil i comprovar la seva correcta visualització activarem dins el menú Mes eines>Eines per desenvolupadors

Recursos

Manual OnsenUI. https://onsen.io/v1/guide.html

Components OnsenUI i Theme Roller. http://components.onsen.io/

Plantilles OnsenUI. http://components.onsen.io/patterns

Icones

- ionicons. http://ionicons.com/
- font-awesome http://fontawesome.io/