Jqm1000.js

Le plugin jqm1000.js est un plugin JQuery Mobile permettant de simplifier le développement d'Application Mobile JQuery Mobile.

Il prend principalement en charge :

• La gestion des listes maîtres / détails
• La gestion de Google Map
• La gestion de Google Chart

Tip : L'utilisation de ce plugin n'est pas obligatoire.

Mise en oeuvre d'une liste maître / détails

Requête maître

Le JSON doit retourner un tableau de structure

 {"result":[{"id":"E16F5913EED000310032000000A30000","name":"BARRES SA"},{....}]}

Chaque structure sera affichée comme une entrée de la liste.

Exemple :

<source lang="delphi"> //Procedure search(req:TJson; var res:TObject); Type

 CustomerAddressView = ViewOf(TClient)
   company: string = tiers.raisonSociale;
   street: string = sitePrivilegie.adresse.nomRueVoie;
   zipCode: string = sitePrivilegie.adresse.codePostal;
   country: string = sitePrivilegie.adresse.pays.code;
   town: string = sitePrivilegie.adresse.ville;
 end;

var ls:TSelector; inst:CustomerAddressView; json:TJson; indx:Integer;

   AWhere,stag:string; Args:Array[0..1] of variant;

begin

 json := TJson.Create();

 // Search criteria
 //////////////////
 AWhere := ; stag := ;
 if req.Exists('zipCode') then
  begin
    AWhere := AWhere+stag+'(zipCode like %1)';
    Args[0] := req.zipCode+'%';
    stag := 'and';
  end;
 if req.Exists('town') then
  begin
    AWhere := AWhere+stag+'(town like %2)';
    Args[1] := req.town+'%';
    stag := 'and';
  end;

 // Create the cursor
 ls := CustomerAddressView.CreateSelector(AWhere,,true,Args);
 foreachP inst in ls.AsCursor index indx do
  begin
    // where we build the response
    //////////////////////////////
    json.result[indx].id := inst.OID;
    json.result[indx].name := inst.company;
  end;

 // manage empty result
 if json.isEmpty then
  begin
    json.result[0].id := ;
    json.result[0].name := 'No result';
  end;

 res := json;

end; </source>

Requête détail

Le JSON doit retourner un tableau de structures :

{
    "result": [
        {
            "t": "customer",
            "v": "BARRES SA"
        },
        {
            "t": "address",
            "v": "221, avenue Charles de Gaulle"
        },
        {
            "t": "zip",
            "v": "92200"
        },
        {
            "t": "town",
            "v": "NEUILLY SUR SEINE"
        },
        {
            "t": "tel",
            "v": "01 41 66 24 10",
            "l": "l",
            "h": "tel:01 41 66 24 10"
        },
        {
            "t": "locate",
            "v": "Google map",
            "l": "m",
            "h": "221, avenue Charles de Gaulle,92200,FRANCE"
        },
        {
            "t": "orders",
            "v": "view last orders",
            "l": "d",
            "h": "/orders",
            "id": "E16F5913EED000310032000000A30000"
        },
        {
            "t": "products",
            "v": "view product charts",
            "l": "c",
            "h": "/products",
            "id": "E16F5913EED000310032000000A30000"
        }
    ]
}

Les entrées simples sont affichées en grille, les entrées avec lien sont affichés en bouton.

Membre	Usage
t	Titre d'une entrée détail, affichée dans la première colonne
v	Valeur de l'entrée, affichée dans la seconde colonne
l	L'entrée est de type lien, la valeur de l détermine le type de lien
h	href du lien
id	id (oid) de l'objet associé au lien

Type de lien :

Membre	Usage	h	id
l	Lien html	href du lien
d	Lien sous détails	Méthode retournant le sous détail	Identifiant de sous requête.
m	Lien de type map	Adresse au format Google
c	Lien de type chart	Méthode retournant les données du Chart	Identifiant de sous requête.

Exemple :

<source lang="delphi"> //Procedure details(req:TJson; var res:TJSon); Type

 CustomerAddressView = ViewOf(TClient)
   company: string = tiers.raisonSociale;
   street: string = sitePrivilegie.adresse.nomRueVoie;
   town: string = sitePrivilegie.adresse.ville;
   zipCode: string = sitePrivilegie.adresse.codePostal;
   phone: string = sitePrivilegie.adresse.telephone1;
   country: string = sitePrivilegie.adresse.pays.Caption;
 end;

var inst:CustomerAddressView; json:TJson; begin

 json := TJson.Create();
 inst := CustomerAddressView.Find('oid=%1',,true,[req.id]);
 if Assigned(inst) then
  begin
    json.result[0].t := 'customer';
    json.result[0].v := inst.company;
    //
    json.result[1].t := 'address';
    json.result[1].v := inst.street;
    //
    json.result[2].t := 'zip';
    json.result[2].v := inst.zipCode;
    //
    json.result[3].t := 'town';
    json.result[3].v := inst.town;
    //
    json.result[4].t := 'tel';
    json.result[4].v := inst.phone;
    json.result[4].l := 'l';
    json.result[4].h := 'tel:'+inst.phone;
    //
    json.result[5].t := 'locate';
    json.result[5].v := 'Google map';
    json.result[5].l := 'm';
    json.result[5].h := inst.street+','+inst.zipCode+','+inst.country;
    //
    json.result[6].t := 'orders';
    json.result[6].v := 'view last orders';
    json.result[6].l := 'd';
    json.result[6].h := '/orders';
    json.result[6].id:= inst.OID;
    //
    json.result[7].t := 'products';
    json.result[7].v := 'view product charts';
    json.result[7].l := 'c';
    json.result[7].h := '/products';
    json.result[7].id:= inst.OID;
  end;

 if json.isEmpty then
  begin
    json.result[0].t := 'Customer not found';
    json.result[0].v := req.id;
  end;

 res := json;

end; </source>

Voir aussi:

Tip : Consultez le source de jqm1000.js pour plus de détails

• jq1000.js