Dans notre article précédent, nous avons défini les principes de la base de données NoSql. Nous allons maintenant présenter les Vues utilisées pour la création des pages de l’interface utilisateur UX.
Nous avons 4 types de Vues :
- la page Create, pour créer une fiche
- la page Search, pour rechercher des fiches dans la base,
- la page List pour afficher les fiches identifier par la recherche
- la page Detail pour visualiser une fiche de la base.
Les Interfaces UX pour la base de données NoSql Questionnaire seront définis dans cet article.
Le Questionnaire Contact utilisé à titre d’exemple pour définir les vues UX de la base de données NoSql
Nous allons dans cet article présenter les 4 vues Create, Search, List et Detail sur un exemple de Questionnaire.
Pour cela nous allons partir d’un Questionnaire simplifier avec un seul thème. Puisque ce questionnaire simplifié a un seul thème, on peut l’assimiler à une table de base de données.
Prenons le Questionnaire Contact :
public class Contact extends QuestionnaireModel{
public Contact(Context context) {
super(context);
}
public PlugsetMessage build(PlugsetMessage message) {
QuestionnaireLibrary q = new QuestionnaireLibrary(this);
q.newPage("Contact");
q.design("standardBox",QuestionnaireWord.ALPHANUM,30);
q.defineItem("FirstName","Prénom","standardBox");
q.defineItem("LastName","Nom","standardBox");
q.defineItem("Company","Société","standardBox");
q.defineItem("Function","Poste","standardBox");
q.defineItem("PhoneNumber","Téléphone","standardBox");
q.defineItem("EmailAdress","Courriel","standardBox");
q.theme("Identifiant");
q.askQuestion("Prénom","FirstName");
q.askQuestion("Nom","LastName");
q.askQuestion("Fonction","Function");
q.askQuestion("Entreprise","Company");
q.askQuestion("Téléphone","PhoneNumber");
q.askQuestion("Courriel","EmailAdress");
q.endTheme();
q.endPage();
Repository questionnaireRepository=q.get();
System.out.println("AppLog.Contact.build : questionnaireRepository="+questionnaireRepository.getXmlString());
//on doit construire la réponse et la mettre dans message
message.put("page","xml",getRepository());
return message;
}
}Si on compare avec la description de notre Questionnaire Annuaire, on voit que la présence d’un seul thème ne permet pas d’ajouter plusieurs téléphone ou courriel. Nous avons de même supprimé l’adresse qui nécessite plusieurs champs pour être défini.
Interfaces UX pour la base de données NoSql : la vue Create
La vue Create a besoin de fournir tous les champs du thème à l’utilisateur. La fiche est créé lorsque l’utilisateur valide l’enregistrement.
public class ContactCreate extends ScreenModel {
Context context;
public ContactCreate(Context context) {
super(context);
}
public PlugsetMessage build(PlugsetMessage message) {
ScreenLibrary s = new ScreenLibrary(this);
s.newPage("contactCreate", "A1", "B12");
s.label("titre", null,"Nouveau contact", "A1", "B1");
s.labelText("firstName", "Prénom", null, 1, 25, "A3", "B3", false);
s.labelText("lastName", "Nom", null, 1,25,"A4", "B4", false);
s.labelText("function", "Fonction", null, 1, 25, "A5", "B5", false);
s.labelText("company", "Entreprise", null, 1, 25, "A6", "B6", false);
s.labelText("phone", "Telephone", null, 1, 25, "A7", "B7", false);
s.labelText("email", "Adresse courriel", null, 1, 25, "A8", "B8", false);
s.button("btnMenu", "Annuler", "A10", "B10", "callScreen", "menu.asp", true);
s.button("btnSave", "Enregistrer", "A11", "B11", "callScript", "doModify", true);
s.endPage();
Repository screenRepository=s.get();
System.out.println("AppLog.ContactCreate.build : screenRepository="+screenRepository.getXmlString());
//on doit construire la réponse et la mettre dans message
message.put("page","xml",getRepository());
return message;
}
}Afin de simplifier les écrans, nous ajoutons le tag LabelText qui est une zone Input avec le Caption visible dans la zone d’input grâce au PlaceHolder.
Ajout du tag LabelText permettant d’afficher le caption dans la zone d’input
Ajout de LabelText dans HtmlEngine :
public boolean labelText_start(RepositoryItem tag) {
try {
System.out.println("AppLog "+this.getClass().getName()+".labelText_start"+" tag=" + tag);
String name = tag.getName();//le nom du label
String labelCaption = (String) tag.getProperty(KeyWord.CAPTION);
String value = (String) tag.getProperty(KeyWord.VALUE);
int minLength = (Integer) tag.getProperty(KeyWord.LENGTH_MIN);
int maxLength = (Integer) tag.getProperty(KeyWord.LENGTH_MAX);
boolean editable = (Boolean) tag.getProperty(KeyWord.EDITABLE);
String areaStart = (String) tag.getProperty(KeyWord.AREA_START);
String areaEnd = (String) tag.getProperty(KeyWord.AREA_END);
String readOnly = (editable) ? "" : "readonly";
System.out.println("AppLog "+this.getClass().getName()+".labelText_start"+" name=" + name+" value=" + value+" minLength=" + minLength+" maxLength=" + maxLength+" editable=" + editable+" readOnly=" + readOnly+" areaStart=" + areaStart+" areaEnd=" + areaEnd);
String areaClass= areaGrid.addArea(areaStart,areaEnd);
StringBuilder labelTextHtml=new StringBuilder();
labelTextHtml.append("<input type=");
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append("text");
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(" id=");
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(name);
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(" value=");
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(value);
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(" placeholder=");
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(labelCaption);
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(" minlength=");
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(minLength);
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(" maxlength=");
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(maxLength);
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(" ");
labelTextHtml.append(readOnly);
labelTextHtml.append(" class=");
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(areaClass);
labelTextHtml.append(Ascii.QUOTE);
labelTextHtml.append(">");
htmlBody.append(labelTextHtml).append(Ascii.CRLF);
} catch (Exception e) {
System.out.println("AppLog "+this.getClass().getName()+".labelText_start"+" ERROR :" + e);
}
return false;
}Modification de ScreenLibrary pour ajouter LabelText :
public final void labelText(String name, String caption, String value, int minLength, int maxLength, String areaStart, String areaEnd,boolean editable) {
XmlTagItem<ScreenWord> tag = new XmlTagItem<ScreenWord>();
tag.setTagSingle();
tag.setModel(ScreenWord.LABEL_TEXT);
tag.addProperty(KeyWord.NAME, name);
tag.addProperty(KeyWord.CAPTION, caption);
tag.addProperty(KeyWord.VALUE, value);
tag.addProperty(KeyWord.LENGTH_MIN, minLength);
tag.addProperty(KeyWord.LENGTH_MAX, maxLength);
tag.addProperty(KeyWord.EDITABLE, editable);
tag.addProperty(KeyWord.AREA_START,areaStart);
tag.addProperty(KeyWord.AREA_END, areaEnd);
get().addTag(tag);
}Et nous complétons ScreenWord avec LabelText :
public enum ScreenWord implements ModelWord {
BUTTON("Button"),
LABEL("Label"),
LABEL_TEXT("LabelText"),
PASSWORD("Password"),
SCREEN("Screen"),
TEXT("Text");
private final String value;
private ScreenWord(String value) {
this.value = value;
}
@Override
public String getValue() {
return value;
}
@Override
public String toString() {
return value;
}
public static ScreenWord parse(String value){
return ModelWord.parse(ScreenWord.class, value);
}
}On complète HtmlRepositoryEngine avec la déclaration de LabelText :
private void loadTagMethodMatch() {
addWordMethodMatch( ScreenWord.SCREEN, "screen");
addWordMethodMatch( ScreenWord.LABEL, "label");
addWordMethodMatch( ScreenWord.LABEL_TEXT, "labelText");
addWordMethodMatch( ScreenWord.BUTTON, "button");
addWordMethodMatch( ScreenWord.TEXT, "text");
addWordMethodMatch( ScreenWord.PASSWORD, "password");
}Interfaces UX pour une base de données NoSql : Visualisation de la page Create
Dans le simulateur, nous avons la page qui s’affiche :
Nous voyons le libellé qui s’affiche dans la zone de saisie.
Lorsque la saisie est réalisée, le libellé s’efface. Il réaparait lorsque la zone est vide.