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 code maison | Page d'accueil | Mobile avec iUI »

20 septembre 2011

Mobile avec Webapp-net

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 webapp-net.com.

Ce framework s'occupe principalement de l'interface et est axé sur les petits appareils, le look est celui de l’iPhone classique. Il supporte bien les listes simples et offre plusieurs composants d'interface intéressants, mais le manque de documentation et d'exemples le rende difficile à utiliser. La communauté autour de ce cadre logiciel semble inactive.

Au final, ce framework n'est pas très intéressant actuellement.

 

arbrWebappList.png

arbrWebappDetail.png

Voici le code avec webapp :

<!DOCTYPE html>
<!-- Webapp-net.com    est un framework sommaire peu documenté donc difficilement utilisable
    très simple a utilisée pour affichage de liste simple style iPhone -->
<html>
<head>
    <title>Demo Webapp.net</title>
    <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
    <metacharset="utf-8"/>
    <metaname="viewport"
        content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <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">
    <linkrel="icon"type="image/ico"href="../images/logo.png">
    <linkrel="stylesheet"href="${resource(dir:'Design',file:'Render.css')}"/>
    <script type="text/javascript"    src="${resource(dir:'Action',file:'Logic.js')}">
    </script>
<style>
.XXXinList {
    width:8em;}
.nomLatin {font-style:italic;}
</style>
</head>
 
<body>
<divid="WebApp">
    <divid="iHeader"><ahref="#"id="waBackButton">Retour</a><span
        id="waHeadTitle">Arbres HQ</span><ahref="#"id="waHomeButton">Home</a>
    <ahref="#"onclick="return WA.HideBar()"></a>
    <!-- Add an hidden form in the header. Will be shown pressing search button -->
    
    <formclass="iForm"id="headForm"action=""onsubmit="searchLoader()">
        <ahref="#"rel="action"id="gogo"class="iButton iBAction">Rechercher</a>
        <ahref="#"rel="back"class="iButton iBClassic">Annuler</a>
        <fieldset>
            <legend>Recherche</legend>
            <inputtype="search"name="search" placeholder="Chercher..."/>
        </fieldset>
    </form>
</div>
    
<divid="iGroup">
    <divclass="iLayer"id="waHome"title="Liste des arbres">
    <ahref="#"rel="action"onclick="return WA.Form('headForm')"id="oki"
        class="iButton iBClassic"><span>Rechercher</span></a>
    <divclass="iMenu">
        <ulclass="iArrow">
         <g:each in="${arbreInstanceList}" status="i" var="arbreInstance">
            <li><ahref="#_Arbre${fieldValue(bean: arbreInstance, field: "id")}"><imgclass=inList src="${fieldValue(bean: arbreInstance, field: "vignetteURL")}"/>
            <emclass="nomLatin">${fieldValue(bean: arbreInstance, field: "nomLatin")}</em>
            <small>${fieldValue(bean: arbreInstance, field: "nomFrancais")}</small></a></li>
        </g:each>    
        </ul>
    </div>
</div>
        
<g:each in="${arbreInstanceList}" status="i" var="arbreInstance">    
    <divclass="iLayer"id="waArbre${fieldValue(bean: arbreInstance, field: "id")}"title="Détail">
        <divclass="iBlock">
        <h1class="nomLatin">${fieldValue(bean: arbreInstance, field: "nomLatin")}</h1>
        <imgclass=inList src="${fieldValue(bean: arbreInstance, field: "imageURL")}"/>
        <p>${fieldValue(bean: arbreInstance, field: "type")}</p>
        <p>${fieldValue(bean: arbreInstance, field: "nomFrancais")}</p>
        <p>${fieldValue(bean: arbreInstance, field: "nomAnglais")}</p>
        <p>Zone : ${fieldValue(bean: arbreInstance, field: "zone")}</p>
        <p>Distance minimale : ${fieldValue(bean: arbreInstance, field: "distanceMinimale")}</p>
        </div>
    </div>
</g:each>
    
</div>
</div>
</body>
</html>

13:56 Publié dans Mobile | Lien permanent | Commentaires (0)