|
|
| Ligne 1 : |
Ligne 1 : |
| Le plugin jqm1000.js est un plugin JQuery Mobile permettant de simplifier le développement d'Application Mobile JQuery Mobile. | | 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 :
| | * [[Lists (jqm1000)|Afficher une liste maitre / détails]] |
| * La gestion des listes maîtres / détails | | * [[Charts (jqm1000)|Afficher un graphique Google Chart]] |
| * La gestion de Google Map
| | * [[Maps (jqm1000)|Afficher une carte Google Map]] |
| * La gestion de Google Chart
| | * [[Styles (jqm1000)|Gérer les styles]] |
| | |
| {{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
| |
| | |
| <pre>
| |
| {"result":[{"id":"E16F5913EED000310032000000A30000","name":"BARRES SA"},{....}]}
| |
| </pre>
| |
| | |
| 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 :
| |
| <pre>
| |
| {
| |
| "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"
| |
| }
| |
| ]
| |
| }
| |
| </pre>
| |
| | |
| Les entrées simples sont affichées en grille, les entrées avec lien sont affichés en bouton.
| |
| | |
| {|class="wikitable"
| |
| |-
| |
| !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 :
| |
| | |
| {|class="wikitable"
| |
| |-
| |
| !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:''' | | '''Voir aussi:''' |
|
| |
| {{tip|Consultez le source de jqm1000.js pour plus de détails}}
| |
|
| |
|
| * [[jq1000.js|jq1000.js]] | | * [[jq1000.js|jq1000.js]] |
|
| |
|
| [[category:Mobiles]] | | [[category:Mobiles]] |
| | [[category:jqm1000.js]] |
