Lists (jqm1000)

De Wiki1000
(Différences entre les versions)
(Page créée avec « La gestion d'une liste maître détail met en oeuvre deux étapes : * Dans une première étape une liste d'élément est recherché et affichée * Dans une seconde étape... »)
 
(→Liste maître)
 
(6 révisions intermédiaires par un utilisateur sont masquées)
Ligne 11 : Ligne 11 :
  
 
Chaque structure sera affichée comme une entrée de la liste.
 
Chaque structure sera affichée comme une entrée de la liste.
 +
 +
'''Membre de la structure:'''
 +
{|class="wikitable"
 +
|-
 +
!Membre
 +
!Usage
 +
|-
 +
|divider (bool)
 +
|Cette entrée est un diviseur de la liste
 +
|-
 +
|classDetails
 +
|Classe de l'élément détail
 +
|-
 +
|id
 +
|Identifiant passé en paramètre à ope()
 +
|-
 +
|img
 +
|Image associé à l'entrée
 +
|-
 +
|header
 +
|Libellé principal de l'entrée
 +
|-
 +
|headerclass
 +
|Classe du libellé principal de l'entrée
 +
|-
 +
|name
 +
|Nom de l'entrée (affiché avant le libellé principal)
 +
|-
 +
|nameclass
 +
|Class du nom de l'entrée
 +
|-
 +
|sub
 +
|Sous libellé de l'entrée
 +
|-
 +
|subclass
 +
|Classe du sous libellé de l'entrée
 +
|-
 +
|bubble
 +
|Nombre d'entrée dans le détail
 +
|-
 +
|ope
 +
|Méthode pour obtenir le détail
 +
|}
 +
 +
*classDetails
 +
:Défaut: details
 +
:Valeurs possibles: details, subdetailslink
 +
  
 
Exemple :  
 
Exemple :  
Ligne 67 : Ligne 115 :
 
</source>
 
</source>
  
−
===Grille de détail===
+
===Grille de détails===
 +
Un détail est constitué d'une liste d'éléments retournés dans un tableau.
 +
 
 +
La liste peut  contenir deux types d'entrée :
 +
* Les entrées simple, sans action associée (pas de membre "l").
 +
* Les entrées avec une action associe (avec membre "l")
 +
 
 +
Les entrées simples sont affichées dans une grille à deux colonnes, la première affiche le titre (t) et la seconde la valeur (v).
 +
 
 +
Les entrées avec action associée sont affichées ensuite en liste verticale.
 +
 
 
Le JSON doit retourner un tableau de structures :
 
Le JSON doit retourner un tableau de structures :
 
<pre>
 
<pre>
Ligne 76 : Ligne 134 :
 
             "v": "BARRES SA"
 
             "v": "BARRES SA"
 
         },
 
         },
 +
    ....
 
         {
 
         {
−
             "t": "address",
+
             "l": "l",
−
            "v": "221, avenue Charles de Gaulle"
+
−
        },
+
−
        {
+
−
            "t": "zip",
+
−
            "v": "92200"
+
−
        },
+
−
        {
+
−
            "t": "town",
+
−
            "v": "NEUILLY SUR SEINE"
+
−
        },
+
−
        {
+
−
            "t": "tel",
+
 
             "v": "01 41 66 24 10",
 
             "v": "01 41 66 24 10",
−
            "l": "l",
 
 
             "h": "tel:01 41 66 24 10"
 
             "h": "tel:01 41 66 24 10"
 
         },
 
         },
 
         {
 
         {
−
            "t": "locate",
 
−
            "v": "Google map",
 
 
             "l": "m",
 
             "l": "m",
 +
            "v": "Google map",
 
             "h": "221, avenue Charles de Gaulle,92200,FRANCE"
 
             "h": "221, avenue Charles de Gaulle,92200,FRANCE"
 
         },
 
         },
 
         {
 
         {
−
            "t": "orders",
 
−
            "v": "view last orders",
 
 
             "l": "d",
 
             "l": "d",
 +
            "v": "view last orders",
 
             "h": "/orders",
 
             "h": "/orders",
 
             "id": "E16F5913EED000310032000000A30000"
 
             "id": "E16F5913EED000310032000000A30000"
 
         },
 
         },
 
         {
 
         {
−
            "t": "products",
 
−
            "v": "view product charts",
 
 
             "l": "c",
 
             "l": "c",
 +
            "v": "view product charts",
 
             "h": "/products",
 
             "h": "/products",
 
             "id": "E16F5913EED000310032000000A30000"
 
             "id": "E16F5913EED000310032000000A30000"
Ligne 117 : Ligne 160 :
 
}
 
}
 
</pre>
 
</pre>
−
 
−
Les entrées simples sont affichées en grille, les entrées avec lien sont affichés en bouton.
 
  
 
{|class="wikitable"
 
{|class="wikitable"
Ligne 136 : Ligne 177 :
 
|h
 
|h
 
|href du lien
 
|href du lien
 +
|-
 +
|p
 +
|Nom de page
 
|-
 
|-
 
|id
 
|id
 
|id (oid) de l'objet associé au lien
 
|id (oid) de l'objet associé au lien
 +
|-
 +
|idf
 +
|id du conteneur de la valeur (span)
 +
|-
 +
|afs
 +
|Liste d'actions exécutées après le succès de l'action
 +
|-
 +
|afe
 +
|liste d'action exécutées après l'échec de l'action
 +
|-
 +
|bfa
 +
|liste d'action exécutées avant l'action
 +
|-
 +
|ico
 +
|Nom de l'image associé au bouton.
 +
|-
 +
|style
 +
|Attribut "style" placé sur le diviseur.
 
|}
 
|}
  
−
Type de lien :
+
Type de lien (valeur du membre "l") :
  
 
{|class="wikitable"
 
{|class="wikitable"
 
|-
 
|-
−
!Membre
+
!Type
 
!Usage
 
!Usage
 +
!Membres
 
!h
 
!h
 
!id
 
!id
 +
|-
 +
|a
 +
|Exécuter une action
 +
|v,h,id,afs,afe,bfa,style
 +
|Nom de la méthode à exécuter
 +
|Valeur de l'identifiant à passer dans la structure req (id)
 
|-
 
|-
 
|l
 
|l
 
|Lien html
 
|Lien html
 +
|v,h,ico
 
|href du lien
 
|href du lien
 
|
 
|
Ligne 157 : Ligne 227 :
 
|d
 
|d
 
|Lien sous détails
 
|Lien sous détails
 +
|v,h,id
 +
|Méthode retournant le sous détail
 +
|Identifiant de sous requête.
 +
|-
 +
|g
 +
|Sous détails
 +
|v,h,id
 
|Méthode retournant le sous détail
 
|Méthode retournant le sous détail
 
|Identifiant de sous requête.
 
|Identifiant de sous requête.
Ligne 162 : Ligne 239 :
 
|m
 
|m
 
|Lien de type map
 
|Lien de type map
 +
|v,h
 
|Adresse au format Google  
 
|Adresse au format Google  
 
|
 
|
Ligne 167 : Ligne 245 :
 
|c
 
|c
 
|Lien de type chart
 
|Lien de type chart
 +
|v,h,id
 
|Méthode retournant les données du Chart
 
|Méthode retournant les données du Chart
 
|Identifiant de sous requête.
 
|Identifiant de sous requête.
 +
|-
 +
|p
 +
|Naviguer sur une page
 +
|v,h,id,p
 +
|
 +
|
 +
|-
 +
|di
 +
|Afficher un document ou une image
 +
|v,h,id
 +
|Méthode retournant le document ou l'image
 +
|Identifiant du document ou de l'image
 +
|-
 +
|i
 +
|Information ou alerte
 +
|v,ico
 +
|
 +
|
 
|}
 
|}
  
Ligne 194 : Ligne 291 :
 
     json.result[0].v := inst.company;
 
     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].t := 'tel';
Ligne 235 : Ligne 325 :
 
end;
 
end;
 
</source>
 
</source>
 +
 +
===Référence===
 +
{|class="wikitable"
 +
|-
 +
!Fonction
 +
!Usage
 +
|-
 +
|[[search (jqm1000)|$.mobApp.search()]]
 +
|Exécute une requête de sélection et alimente une liste
 +
|-
 +
|[[details (jqm1000)|$.mobApp.details()]]
 +
|Exécute une requête de détail et alimente une grille
 +
|}
  
  
 
[[category:Mobiles]]
 
[[category:Mobiles]]
 
[[category:jqm1000.js]]
 
[[category:jqm1000.js]]

Version actuelle en date du 24 juin 2014 à 08:58

La gestion d'une liste maître détail met en oeuvre deux étapes :

  • Dans une première étape une liste d'élément est recherché et affichée
  • Dans une seconde étape le détail d'un élément de la liste est affiché.

Liste 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.

Membre de la structure:

Membre Usage
divider (bool) Cette entrée est un diviseur de la liste
classDetails Classe de l'élément détail
id Identifiant passé en paramètre à ope()
img Image associé à l'entrée
header Libellé principal de l'entrée
headerclass Classe du libellé principal de l'entrée
name Nom de l'entrée (affiché avant le libellé principal)
nameclass Class du nom de l'entrée
sub Sous libellé de l'entrée
subclass Classe du sous libellé de l'entrée
bubble Nombre d'entrée dans le détail
ope Méthode pour obtenir le détail
  • classDetails
Défaut: details
Valeurs possibles: details, subdetailslink


Exemple : 

//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;

Grille de détails

Un détail est constitué d'une liste d'éléments retournés dans un tableau.

La liste peut contenir deux types d'entrée :

  • Les entrées simple, sans action associée (pas de membre "l").
  • Les entrées avec une action associe (avec membre "l")

Les entrées simples sont affichées dans une grille à deux colonnes, la première affiche le titre (t) et la seconde la valeur (v).

Les entrées avec action associée sont affichées ensuite en liste verticale.

Le JSON doit retourner un tableau de structures : 

{
    "result": [
        {
            "t": "customer",
            "v": "BARRES SA"
        },
     ....
        {
            "l": "l",
            "v": "01 41 66 24 10",
            "h": "tel:01 41 66 24 10"
        },
        {
            "l": "m",
            "v": "Google map",
            "h": "221, avenue Charles de Gaulle,92200,FRANCE"
        },
        {
            "l": "d",
            "v": "view last orders",
            "h": "/orders",
            "id": "E16F5913EED000310032000000A30000"
        },
        {
            "l": "c",
            "v": "view product charts",
            "h": "/products",
            "id": "E16F5913EED000310032000000A30000"
        }
    ]
}
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
p Nom de page
id id (oid) de l'objet associé au lien
idf id du conteneur de la valeur (span)
afs Liste d'actions exécutées après le succès de l'action
afe liste d'action exécutées après l'échec de l'action
bfa liste d'action exécutées avant l'action
ico Nom de l'image associé au bouton.
style Attribut "style" placé sur le diviseur.

Type de lien (valeur du membre "l") :

Type Usage Membres h id
a Exécuter une action v,h,id,afs,afe,bfa,style Nom de la méthode à exécuter Valeur de l'identifiant à passer dans la structure req (id)
l Lien html v,h,ico href du lien
d Lien sous détails v,h,id Méthode retournant le sous détail Identifiant de sous requête.
g Sous détails v,h,id Méthode retournant le sous détail Identifiant de sous requête.
m Lien de type map v,h Adresse au format Google
c Lien de type chart v,h,id Méthode retournant les données du Chart Identifiant de sous requête.
p Naviguer sur une page v,h,id,p
di Afficher un document ou une image v,h,id Méthode retournant le document ou l'image Identifiant du document ou de l'image
i Information ou alerte v,ico

Exemple : 

//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[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;

Référence

Fonction Usage
$.mobApp.search() Exécute une requête de sélection et alimente une liste
$.mobApp.details() Exécute une requête de détail et alimente une grille
Récupérée de « https://frp.sage.fr/wiki1000/index.php?title=Lists_(jqm1000)&oldid=9665 »
Outils personnels