jQueryMobile şi localStorage (II)


Mergem înainte cu dorinţa de a avea o mică webaplicaţie care să salveze date cu localStorage (vezi aici) şi care să poată fi “împachetată” ca aplicaţie pentru mobile. În articolul anterior am văzut structura cu jQuery Mobile dar nu dezvoltasem partea funcţională cu JavaScript. Faţă de sursa HTML de atunci sunt unele mici-mici schimbări, dar privind sursa se poate vedea. Drept urmare mă voi concentra pe partea JavaScript, pusă integral mai jos.

imagine

Funcţia compune() nu cere explicaţii, ea pur şi simplu construind textul de afişat. Se apelează de două ori: la iniţializarea paginii #afisare (adică prima pagină), dacă sunt date memorate local, respectiv de fiecare dată când se salvează datele din formular, pentru ca atunci când se dă click pe butonul Start, noua informaţie să fie gata de afişat (în prima pagină). O altă funcţie mică şi clară e iavalori(), care preia din memoria locală valorile care ne interesează. Acum vine partea mai interesantă.

  • $("#afisare").live(‘pageshow’,function()…
    Când se afişează prima pagină, #afisare, ne asigurăm că avem informaţiile actualizate. Dacă nu e nimic salvat local afişăm mesajul cu “eşti secretos”, altfel construim mesajul de afişat din valorile locale. Şi îl punem în div-ul cestiu.
  • $("#formular").live(‘pageshow’,function()…
    Când se afişează a doua pagină, "#formular, ne asigurăm că dacă sunt valori salvate local ele se reflectă în formular. Vedeţi două linii cu refresh – ele sunt necesare pentru ca jQuery Mobile să actualizeze vizual ceea ce la nivelul DOM-ului se întâmplă.
  • $(document).on(‘pageinit’,function()…
    Aici avem primele trei linii care pur şi simplu scot tranziţiile – am făcut-o pentru că sub Android merg groaznic şi mai bine fără ele. Apoi avem intervenţia pe submit, deja iniţiată în codul trecut: luăm valorile şi le salvăm local, normal, după care schimbăm textul pentru prima pagină.

Găsiţi codul online aici. O arhivă gata de testat cu Adobe PhoneGap Build se găseşte aici. Vă rog testaţi. În câteva secunde veţi obţine APK-ul (prea leneşi? îl pun aici) şi îl veţi putea testa pe propriul dispozitiv cu Android. Veţi vedea că salvează datele! Închideţi aplicaţia, redeschideţi-o: datele vor fi acolo. Obiectivul a fost deci atins. Cu jQueryMobile şi localStorage putem avea o aplicaţie pentru Android care nu doar să afişeze texte şi imagini (HTML5) ci şi să salveze local date şi să le utilizeze! Acum vă las cu codul JavaScript – esenţa webaplicaţiei noastre.

function compune(nume,sex,oras){
    text="<p>Bună, <strong>"+nume+"</strong>!";
    if(sex=="masculin")
        text+="<p>Eşti născut în oraşul "+oras+".</p>";
    else
        text+="<p>Eşti născută în oraşul "+oras+".</p>";
    return text;
}
function iavalorile(){
    nume=window.localStorage.getItem("formapp_nume");
    sex=window.localStorage.getItem("formapp_sex");
    oras=window.localStorage.getItem("formapp_oras");
}
$("#afisare").live('pageshow',function(){
    if(window.localStorage.getItem("formapp_nume")==null)
        html="<p>Eşti foarte secretos pe moment! "+
            "Dă click pe butonul Configurare ca să îmi spui ceva despre tine.";
    else {
        iavalorile()
        html=compune(nume,sex,oras);
    }
    $("#cestiu").html(html);
});
$("#formular").live('pageshow',function(){
    if(window.localStorage.getItem("formapp_nume")!=null){
        iavalorile();
        $("#nume").val(nume);
        $("#formular input:radio[name='sex'][value='"+sex+"']").attr("checked",true);
        $("#formular input:radio[name='sex']").checkboxradio('refresh');
        $("#oras option1").attr("selected","selected");
        $("#oras").selectmenu('refresh');
    }
});
$(document).on('pageinit',function(){
    $.extend($.mobile,{
        defaultPageTransition: "none"
    });
    $("#formular").submit(function(){
        window.localStorage.setItem("formapp_nume",$("#nume").val());
        window.localStorage.setItem("formapp_sex",$("#formular input[name='sex']:checked").val());
        window.localStorage.setItem("formapp_oras",$("#oras").val());
        html=compune($("#nume").val(),$("#formular input[name='sex']:checked").val(),
        $("#oras").val());
        $("#cestiu").html(html);
        return false;
    });
});


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (1 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *