Applicazioni Yahoo Blueprint

Yahoo Blueprint (da non confondere con il framework CSS Blueprint) nasce per facilitare lo sviluppo di applicazioni per telefoni cellulari e smartphone. Può essere utilizzato per sviluppare applicazioni stand-alone ma in questo articolo esploreremo le possibilità relative alla creazione di una pagina web che sia ben visualizzabile dal maggior numero di cellulari possibili.

Come prima prova vogliamo creare una pagina che permetta di visualizzare I dati metereologici di una spot molto frequentato dagli amanti del kitesurf. In parole povere una versione mobile della pagina del sito ramblamaccarese.com. Per ora non ci addentreremo nella grafica e quindi non avremo bisogno di prodotti specifici per questo compito come Flowella di Nokia.

Qui di sopra un semplice sketch di quello che vogliamo ottenere (per comporre questa semplice figura abbiamo utilizzato le risorse che Nokia mette a disposizione per il "Paper Prototyping"). Non sappiamo se Blueprint permette di darci qualche indicazione sull’orientamento e quindi questo è solo quello che ci piacerebbe ottenere.

Come funziona

Blueprint è un servizio di rendering on-line per la pagina che state sviluppando. Infatti dovendo sviluppare un sito web per device mobile si è costretti ad un difficile lavoro di rendering per tutti i diversi modelli diversi sul mercato con caratteristiche (grandezza dello schermo, presenza del touch screen, "look and feal") completamente diversi.

Grazie a Blueprint il rendering dell'applicazione verrà modificato a run-time in base alla device, sgravando di questo compito gli sviluppatori. In altre parole invece di accedere al vostro sito (linea tratteggiata), il vostro visitatore sarà dirottato sul web server di Yahoo che chiederà informazioni al vostro sito per restituire le informazioni.

Sviluppo

Prima di tutto è necessario iscriversi al "Yahoo Developer Network" utilizzando un proprio account Yahoo. Poi partiamo utilizzando la documentazione del portale Yahoo mobile. Prima di tutto sviluppiamo la nostra prima schermata in maniera statica e visto che il framework è basato su XML, la nostra prima applicazione sarà composta da un unico file. Come primo passo proviamo a pubblicare il nostro primo “Hello world!” per verificare il percorso di sviluppo e aggiornamento.

<page>
  <content>
    <module>
      <header layout="simple">
        <layout-items>
          <block
           class="title">Hello from Softgens</block>
        </layout-items>
      </header>
      <block>Hello World!</block>
    </module>
  </content>
</page>

Questo esempio (hello.xml) è quello presente nella documentazione di base ed anche nel kit di sviluppo. E’ ovviamente molto semplice ma prima di tutto vogliamo testare l’intero processo di pubblicazione. Purtroppo ci sembra di capire che non abbiamo alcun strumento per il debugging e questo è sicuramente una lacuna che Yahoo dovrà trovare il sistema di risolvere. Comunque per pubblicare è necessario seguire un ordine ben preciso. Vediamolo.

Pubblicazione

Creiamo innanzitutto una directory sul nostro sito che chiameremo YahooBlueprint.
Ci rendiamo conto che per evitare errori durante la stesura dei file XML è meglio copiare i file .XSD con i vari schemi in una directory apposita che chiameremo _XSD. Poi aggiungiamo una directory con il nome del progetto (HELLO)
Copiamo il file hello.xml nella directory base e quindi dovremmo trovarlo all’indirizzo http://www.softgens.com/yahooblueprint/hello.xml (non all’interno della sub directory “hello”)
La pubblicazione avverrà attraverso un file .ZIP che deve avere una precisa struttura che decidiamo di ricreare all’interno della directory hello
Aggiungiamo per provare anche il logo Softgens nei formati che vengono richiesti da Yahoo
Prepariamo poi il file config.xml

<?xml version="1.0" encoding="UTF-8"?>
<config xmlns="http://mobile.yahoo.com/widgets/schema/1.0/config/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://mobile.yahoo.com/widgets/schema/1.0/config/ ../_xsd/config.xsd">
  <title>First Test App</title>
  <version>0.1</version>
  <identifier>hello-softgens-000</identifier>
  <description>Mobile application for internal testing</description>
  <icon>softgenslogo</icon>
  <author href="http://www.softgens.com" organization="Softgens" email="info@softgens.com">Softgens</author>
  <license>Public Domain</license>
  <requirements>
    <engine-version>1.0</engine-version>
  </requirements>
  <widget base="http://www.softgens.com/yahooblueprint">
    <preview>
      <icon>softgenslogo</icon>
      <label>Softgens</label> 
    </preview>
    <shortcuts>
      <item default="true">
        <label>Apri</label>
        <href>hello.xml</href> 
      </item> 
    </shortcuts> 
  </widget> 
</config>

Da notare che :
- Nello xsi:schemaLocation abbiamo aggiunto il riferimento ai nostri file .XSD (../_xsd/config.xsd)
- Abbiamo aggiunto i dati relativi a Softgens oltre al riferimento per una icona (softgenslogo)
- Abbiamo specificato la base per il nostro primo esempio nella riga widget (base=”http://www.softgens.com/yahooblueprint”)
A questo punto abbiamo preparato uno ZIP file con le directory che costituiscono il nostro progetto “hello”. Da notare che il file HELLO.ZIP deve contenere a sua volta una directory main (che nel nostro caso abbiamo chiamato hello).

HELLO.ZIP

HELLO.ZIP
   HELLO
      RESOURCES
         IMAGES

Se il config.xml si dovesse trovare nella directory principale ottereste un errore di file non trovato.
A questo punto non rimane che creare il primo progetto Blueprint ed effettuare l’upload e ricevere il messaggio di operazione conclusa con successo
Per i test troverete il link nella apposita pagina dei progetti in fase di sviluppo (segui “Test Site”)

Purtroppo, contrariamente a quanto indicato nella documentazione, si riceve un errore, ma del resto gli “Hello world” servono proprio a questo.

Leggendo questo post sul forum del Yahoo Developer Network sembra proprio che ci sia un problema di header. Per risolvere il problema creiamo un nuovo file hello.aspx

<%@ Page Language="VB" ContentType="application/x-blueprint+xml" %>
<page>
  <content>
    <module>
      <header layout="simple">
        <layout-items>
          <block class="title">Hello from Softgens</block>
        </layout-items>
      </header>
      <block>Hello World!</block>
    </module>
  </content>
</page>

Il contenuto è lo stesso del file hello.xml ma il fatto di essere un .aspx ci consente di inserire il content type. Dopo aver creato e caricato un nuovo file .ZIP la nostra applicazione funziona correttamente. Per accedere http://devtest-softgens-hello-softgens-000.bpapps.com/

Applicazione finale

Capito il meccanismo ci siamo messi nella condizione di lavorare al meglio. Visto la scarsa documentazione abbiamo preferito lavorare su file XML che grazie allo schema danno la possibilità di avere un po’ di aiuto in fase di scrittura del codice. Per questo motivo abbiamo creato un file .ASPX e uno XML: il primo legge il secondo (vedi codice sottostante).

<%@ Page Language="VB" ContentType="application/x-blueprint+xml" %>
<script runat="server">
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Dim sr As System.IO.StreamReader
        sr = System.IO.File.OpenText(Server.MapPath("~\yahooblueprint\rambla.xml"))
        Me.LiteralContent.Text = sr.ReadToEnd()
        sr.Close()
    End Sub
</script>
<asp:literal runat="server" id="LiteralContent" />

Nel secondo è necessario aggiungere il riferimento ai file di schema per XML, molto utili se utilizzate un editor sufficientemente potente da riconoscerli (nel nostro caso VisualStudio).

<pagexmlns=http://mobile.yahoo.com/widgets/schema/1.5/blueprint/ xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://mobile.yahoo.com/widgets/schema/1.5/blueprint/ _xsd/blueprint_1.1.xsd" style="collection" theme="lip-gloss" >

<page-header>
………………..

Per vedere il risultato finale (meglio con un cellulare) navigate fino a questo indirizzo: http://rambla-000.bpapps.com/

Qualche considerazione

La documentazione è sicuramente incompleta; qualche esempio:

L’applicazione sviluppata utilizza il tag TABS che risulta essere presente nella documentazione ma non ancora nei file di schema XSD. Per questo abbiamo convissuto con la segnalazione di un errore per XML non conforme.
La colorazione del widget è stata aggiunta attraverso una feature non documentata ma di cui si parla nel forum di Yahoo. (style=”collection” theme=”lip-gloss”)

Non si dispone di un vero debugger e quindi è meglio sviluppare il sito staticamente via XML prima di passare alla versione definitiva.