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.

« Tous les frameworks mobiles ne sont pas identiques | Page d'accueil | Mobile avec Webapp-net »

20 septembre 2011

Mobile avec code maison

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 le code maison.

Si l'application est simple et la cible technologique restreinte, on peut s'en tirer avec du code maison simple. Premier avantage, on a le contrôle total et on peu garder la solution au plus simple. Deuxièmement, on réutilise nos compétences web de base. Principale faiblesse du modèle : la difficulté d'obtenir un look et un comportement "natif".

La mise en œuvre requiert un apprentissage des particularités du HTML5 et des CSS3 en plus des particularités de la plateforme cible, mais je crois que c'est une bonne façon de comprendre la valeur qu'apportent les frameworks.

En terme de performance, comme il y a peu de javascript et que le HTML est au minimum, elle est excellente.

C'est cette approche que nous avons utilisée dans notre première application en production, mais je ne pense pas que nous puissions prendre ce modèle si on espère être très productif à long terme.

Pour notre exemple de code maison, vous pouvez aussi consulter l'article que j'ai produit plus tôt et regarder le vidéo qui l'accompagne. Pour cet exemple, je ne me suis pas particulièrement forcé sur le look ni sur les fonctionnalités, car je voulais pouvoir faire une démonstration de moins d'une heure.

arbrCustom.png

Voici le code:

<!DOCTYPE html>
 
<html manifest="../arbre/manifest/">
<head>
    <title>Arbres HQ</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"><!--is this  buggy ??!!-->
    <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">    
<style type="text/css">
/*                                  G E N E R I Q U E   */
body{
    font-family: helvetica, trebuchet MS, arial, sans serif;
    margin:4px;
}
header {
    border-bottom:1pxsolid#999;
    margin-bottom:2px;
    background-color:silver;
}
 
#content {
    padding-top:10px;
}
 
#searchInput {
    font-size:1.3em;
}
 
.list {
    padding:2px;
    margin-bottom:12px;
        border:1pxsolid black;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    background:#b4e391;/* Old browsers */
    background: -moz-linear-gradient(top,#b4e3910%,#61c41950%,#b4e391100%);/* FF3.6+ */
    background: -webkit-gradient(linear,lefttop,leftbottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391));/* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,#b4e3910%,#61c41950%,#b4e391100%);/* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,#b4e3910%,#61c41950%,#b4e391100%);/* Opera11.10+ */
    background: -ms-linear-gradient(top,#b4e3910%,#61c41950%,#b4e391100%);/* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391',GradientType=0 );/* IE6-9 */
    background: linear-gradient(top,#b4e3910%,#61c41950%,#b4e391100%);/* W3C */
    }
    
#zone {padding:10px;}
p{margin:0;}
 
/* fin des styles communs  */
@mediaall and (orientation:landscape) {
    #content {
        -webkit-column-count:3;}
}/* landscape */
 
@media(orientation:portrait) {
    #content {
        -webkit-column-count:2;}
}/*portrait */
</style>
 
<script  type="text/javascript">
    function Filtrer(idOfSearchField){
        var arr =new Array();
        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{
                obj.style.display ="block";
            }
        }
    }// filtrer()
</script>
 
<script  type="text/javascript">
    function UpdateZone(){
        if(window.navigator.geolocation){
        window.navigator.geolocation.getCurrentPosition(successCallback);
 
        function successCallback(position){
            alert("Position : "+position.coords.longitude +", "+ position.coords.latitude );
            }
        }
    }// UpdateZone()
</script>
</head>
 
<body>
<header>
     <inputid=searchInput type="search" placeholder="Rechercher..."onkeyup="Filtrer(this.id);"  />
        <spanid=zone onClick="UpdateZone();">Ma Zone</span>
</header>
<sectionid=content>
    <g:each in="${arbreInstanceList}" status="i" var="arbreInstance">
        <divid=${fieldValue(bean: arbreInstance, field: "id")} class="list"tabindex="1">
            <imgsrc="${fieldValue(bean: arbreInstance, field: "vignetteURL")}"/>
            <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="zone">${fieldValue(bean: arbreInstance, field: "zone")}</p>
            <pclass="distance">${fieldValue(bean: arbreInstance, field: "distanceMinimale")}</p>
        </div>
    </g:each>
</section>
</body>
</html>

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