Ok

En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies. Ces derniers assurent le bon fonctionnement de nos services. En savoir plus.

« Mobile avec Webapp-net | Page d'accueil | Mobile avec jQuery mobile »

20 septembre 2011

Mobile avec iUI

Dans l'article précédent, je présente le cadre d'évaluation de plusieurs frameworks pour le développement d'application mobile. Cet article présente le détail pour iUI.

Le framework iUI est plus restreint que jQuery Mobile en terme de composant et il est particulièrement bien adapté aux interfaces utilisant les listes hiérarchiques (drilldown) typiques des applications pour téléphone intelligent (iPhone en particulier). La base, la liste, est bien faite et fonctionne rapidement. Cependant, on atteint rapidement les limites, comme l'utilisation d'un unique toolbar (en haut) et l'absence de tabBar (en bas).

Comme il s'agit d'un petit framework, les performances sont excellentes.

La documentation est faible. Néanmoins, j'ai aimé utiliser ce framework, mais j'ai dû adapter la conception de l'interface en fonction de ce qu'il supportait.

Pour qui cible de petits appareils, notamment les iPhones, il est possible d'obtenir une grande productivité rapidement.

 

arbrIuiHome.png

arbrIuiListe.png

 

 

arbrIuiDetail.png


<!DOCTYPE html>
<%-- indique au fureteur de traiter la page en HTML5--%>
<html>
<head>
<title>Arbres HQ</title>
<METAHTTP-EQUIV="EXPIRES"CONTENT="Mon, 22 Jul 200211:12:01 GMT">
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<metacharset="utf-8"/>
<linkrel="icon"type="image/ico"href="../images/logo.png">
<%-- les applications natives ne zoom pas, en general --%>
<%-- ces tags, propre a iOS permettent un look and feel plus natif--%>
<metaname="apple-touch-fullscreen"content="yes">
<metaname="apple-mobile-web-app-capable"content="yes">
<metaname="apple-mobile-web-app-status-bar-style"content="black">
<linkrel="apple-touch-startup-image"href="../images/splash.png"/>
<linkrel="apple-touch-icon"href="../images/logo.png">
<%-- iui specifics --%>
<metaname="viewport"
    content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;"/>
<linkrel="stylesheet"href="../iui.css"type="text/css"/>
<linkrel="stylesheet"href="../t/default/default-theme.css"
    type="text/css"/>
<script type="application/x-javascript" src="../iui.js"></script>
 
<script  type="text/javascript">
    function Filtrer(idOfSearchField){
        var arr =new Array();
        var countTreesShowingUp =0;
        arr = document.getElementsByClassName('list');
        for(var i =0; i < arr.length; i++){
            var obj = document.getElementsByClassName('list').item(i);
            if(obj.textContent
                    .indexOf(document.getElementById(idOfSearchField).value)==-1){
                obj.style.display ="none";
            }else{
                countTreesShowingUp++;
                obj.style.display ="block";
                document.getElementById('listCount').textContent = countTreesShowingUp +' arbre(s)';
            }
        }
    }// filtrer()
 
</script>
<style type="text/css">
body>.toolbar {
    top:0%;
    width:100%;
    position:fixed;
    z-index:99;
}
 
.inList {
    height:40px;
    margin-right:0.5em;
    float:left;
}
 
a.nomLatin {
    font-size:70%;
    /** mettre le code suivant si iPhone width = 360
    text-overflow: ellipsis ;
    overflow:hidden;
    white-space: nowrap;
    width:195px;
    margin-left:63px;
    **/
}
 
p.nomFr {
    font-size:60%;
    font-weight:normal;
    -webkit-margin-before:0em;
    color:#444;
    margin-left:72px;
}
 
.zone {
    position:relative;
    top:-10em;
    left:23px;
    width:2em;
    background:#42E01B;
    padding:0.2em;
    text-align:center;
    border:1pxsolid black;
    border-radius:5px;
}
 
.z5b {
    background:#cc7526;
}
 
.z5a {
    background:#fa9418;
}
 
.z4b {
    background:#adad2b;
}
 
.z4a {
    background:#e7d529;
}
 
.z3b {
    background:#9bc6cd;
}
 
.z3a {
    background:#84afb6;
}
 
.z2b {
    background:#b5dae2;
}
 
.z2a {
    background:#4ab4cc;
}
 
.z1b {
    background:#0095d7;
}
 
.z1a {
    background:#60c2ef;
}
 
.z0 {
    background:#c7e7f6;
}
 
.Coni,.Feui {
    position:relative;
    top:-10em;
    left:270px;
    width:2em;
    padding:0.2em;
    text-align:center;
    width:3em;
    height:3em;
}
 
.Coni span,.Feui span{
    display:none;
}
 
/** images de http://www.jenndickie.com/ctc/trees/index.html **/
.Coni {
    background-image:url(../images/conifere.png);
}
 
.Feui {
    background-image:url(../images/feuillu.png);
}
 
.fr,.lt,.en {
    margin-left:1em;
    margin-top:0px;
    margin-bottom:0.5em;
    position:relative;
    top:-55px;
}
 
.fr {
    font-weight:bold;
}
 
.lt {
    font-style:italic;
}
 
.en {
    font-size:80%;
    color:#444;
}
 
.distance {
position:relative;
top:-33px;
margin-left:1em;
font-weight:normal;
font-size:100;
-webkit-transform: scale(1) rotate(-24deg) translate(93px,4px) skew(47deg,0deg);
}
 
.distance:before{
    content:""
}
 
.carteLink {
    top:0.7em;
    position:relative;
    left:-1em;
}
 
.map {
    width:100%;
    }
</style>
 
</head>
 
<body>
<%-- T O O L B A R   there is only one toolbar in the app, this is a iUI limitation --%>
<divclass="toolbar">
    <h1id="pageTitle"></h1>
    <aid="backButton"class="button"href="#"></a>
    
</div>
 
<%-- M E N U   page d'accueil --%>
<ulid="home"title="Arbr"selected="true">
      <li><ahref="#list">Liste des arbres</a></li>
      <li><ahref="#favoris">Favoris</a></li>
      <li><ahref="#zone">Zone de rusticité</a></li>
      <li><ahref="#distance">Mesurer la distance minimale</a></li>
</ul>
 
<%-- L I S T E   de tous les arbres sur la page d'accueil --%>
<ulid="list"title="Liste">
    <li>
        
    <fieldset>
      <div>
         <labelfor="keyword">Filtrer :</label>
      <inputtype="text"name="q"id="keyword" placeholder="Nom"onkeyup="Filtrer(this.id);">
      </div>
   </fieldset></li>
    <liclass="group"id=listCount>Tous les arbres</li>
    <li><ahref="#search">Rechercher</a></li>
    <%-- on cré un li pour chacun des arbres --%>
    <g:each in="${arbreInstanceList}" status="i" var="arbreInstance">
        <liclass=list>
            <imgclass=inList src="${fieldValue(bean: arbreInstance, field: "vignetteURL")}"/>
            <aclass=nomLatin href="#${fieldValue(bean: arbreInstance, field: "id")}">${fieldValue(bean: arbreInstance, field: "nomLatin")}
                </a>
            <pclass=nomFr>${fieldValue(bean: arbreInstance, field: "nomFrancais")}</p>
        </li>
    </g:each>
</ul>
 
<%-- D E T A I L   de chacun des arbres, chacun sur sa page --%>
<g:each in="${arbreInstanceList}" status="i" var="arbreInstance">
<divid="${fieldValue(bean: arbreInstance, field: "id")}"
        title="${fieldValue(bean: arbreInstance, field: "nomLatin")}">
    <imgsrc="${fieldValue(bean: arbreInstance, field: "imageURL")}"/>
    <aclass="zone z${fieldValue(bean: arbreInstance, field: "zone")}"href="#zone">${fieldValue(bean: arbreInstance, field: "zone")}
        </a>
    <pclass="${fieldValue(bean: arbreInstance, field: "type")[0..3]}"><span>${fieldValue(bean: arbreInstance, field: "type")}
        </span></p>
    <pclass="fr">${fieldValue(bean: arbreInstance, field: "nomFrancais")}</p>
    <pclass="lt">${fieldValue(bean: arbreInstance, field: "nomLatin")}</p>
    <pclass="en">${fieldValue(bean: arbreInstance, field: "nomAnglais")}</p>
    <pclass="distance">${fieldValue(bean: arbreInstance, field: "distanceMinimale")}</p>
    <imgsrc="../images/distance.png"/>
    <aclass="favoris">Ajouter aux Favoris</a>
</div>
</g:each>
 
<%-- R E C H E R C H E R   écran de recherche --%>
<divid="search"title="Rechercher"class="panel">
   <fieldset>
      <divclass="row">
         <labelfor="select">Zone de rusticité</label>
         <ahref="#zone"class=carteLink>Carte</a>
         <selectid="select"name="selectname"size="1">
            <optionvalue="zone5b">5b</option>
            <optionvalue="zone5a">5a</option>
            <optionvalue="zone4b">4b</option>
            <optionvalue="zone4a">4a</option>
            <optionvalue="zone3b">3b</option>
            <optionvalue="zone3a">3a</option>
            <optionvalue="zone2b">2b</option>
            <optionvalue="zone2a">2a</option>
            <optionvalue="zone1b">1b</option>
            <optionvalue="zone1a">1a</option>
            <optionvalue="zone0">0</option>
         </select>
        
      </div>
      
      <divclass="row">
         <label>Conifères</label>
         <divclass="toggle"onclick="" toggled="true"><spanclass="thumb"></span><spanclass="toggleOn">1</span><spanclass="toggleOff">0</span></div>
      </div>
      <divclass="row">
         <label>Feuillus</label>
         <divclass="toggle"onclick="" toggled="true"><spanclass="thumb"></span><spanclass="toggleOn">1</span><spanclass="toggleOff">0</span></div>
      </div>
      <divclass="row">
         <labelfor="select">Distance minimale (mètres)</label>
         <selectid="select"name="selectname"size="1">
            <optionvalue="item15">15</option>
            <optionvalue="item14">14</option>
            <optionvalue="item13">13</option>
            <optionvalue="item12">12</option>
            <optionvalue="item11">11</option>
            <optionvalue="item10">10</option>
            <optionvalue="item9">9</option>
            <optionvalue="item8">8</option>
            <optionvalue="item7">7</option>
            <optionvalue="item6">6</option>
            <optionvalue="item5">5</option>
            <optionvalue="item4">4</option>
            <optionvalue="item3">3</option>
            <optionvalue="item3">2</option>
            <optionvalue="item0">0</option>
         </select>
      </div>
   </fieldset>
</div>
 
<divid="zone"title="Zone">
    <imgclass="map"src="http://www.hydroquebec.com/arbres/images/img_zones_rusticite.gif"/>
    <divclass="row">
        <p>Ma zone : 5b</p>
    </div>
</div>
 
<divid="distance"title="Mesurer distance minimale">
    <imgsrc="../images/distance.png"/>
</div>
 
</body>
</html>

14:33 Publié dans Mobile | Lien permanent | Commentaires (0)