jeudi 3 mai 2012

BreadCrumbs / Fil d'ariane

 Exemple de rendu:
Tous mes panels de contenu étant chargé dans un Layout du panel principal HomePanel celui ci offre la possibilité d'afficher une sorte de fil d'ariane.
La classe abstraite dont hérite tous ces panels de contenus implémente les deux méthode addAriane et clearAriane et déclare la méthode abstraite majAriane qu'implémente  les panels de contenu.
La méthode addAriane a pour paramètre le libelle de ce qui va apparaitre dans la section du fil d'ariane et  une référence vers le panel à charger si l'utilisateur clique sur cette section. Si le deuxième paramètre est null la section exposera juste le texte qui correspond en fait au panel ou on est rendu dans la navigation.
Le fil d'ariane est rendu à l'aide d'un ToolStrip composé de bouton (un par section).
La méthode addAriane implémentée dans HomePanel permet d'ajouter des boutons séparé par un ToolStripSeparator.

public void addAriane(String lien,final ContentPanel p){
 Canvas[] lesBoutons =  this.ariane.getMembers();
 int nbrButtons = lesBoutons.length;
 if(nbrButtons >0){
  this.ariane.addSeparator();
 }
 if(p!=null){
   ToolStripButton btnLien = new ToolStripButton(lien);
   btnLien.setTitleStyle("plUnderline");
   btnLien.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {
 @Override
 public void onClick(ClickEvent event) {
       chargePanel(p); //charge le panel dans HomePanel              
}
});
this.ariane.addButton(btnLien);
}else{
  ToolStripButton btnLien = new ToolStripButton(lien);
  btnLien.setDisabled(true);
  btnLien.setShowDisabled(false);
  this.ariane.addButton(btnLien);
}
}
   
/**
 * Nettoie le fil d'ariane.
*/
public void clearAriane(){
   Canvas[] lesBoutons =  this.ariane.getMembers();
   int nbrButtonss = lesBoutons.length;
   if(nbrButtonss != 0){
   this.ariane.removeMembers(lesBoutons);   
   if(nbrButtonss !=0){
    for (int i =0 ;i < nbrButtonss;i++){
    lesBoutons[i].destroy();
    }
   }   
}
}

@Override
public void majAriane() {
   clearAriane();
   addAriane("Home", MyAppContext.getHomePanel());       addAriane("The panel where I come from",
MyAppContext.getThePanelWhereIComeFrom());
addAriane("The panel where I am", null);
}


All my content panels are loaded in a Layout of the main panel HomePanel and this one offer a some sort of breadcrumbs.
The abstract class from which are derived all the content panels implement the two methods  addAriane and clearAriane and declare the abstract method majAriane implémented by the content panels.
The addAriane method get some parameters: the label of the section , a reference to the panel which be loaded if the user click on the section, if this parameter is null only text will be displayed as it is the last eleemnt of the breadcrumb, where we are.
The breadcrumb is rendered usin a Toolstrip composed of a buttons set (one per section).
 addAriane method  implemented in HomePanel allow to add buttons separated by a ToolStripSeparator.

mardi 27 mars 2012

ListGrid Cell click handler and column number (numéro de colonne d'un champ)

Très simple, mais il y a tellement de propriétés et de méthodes que quelquefois je suis tenté d'écrire du code pas très propre pour éviter de chercher.
J'ai un ListGrid avec un champ de type icone, lorsque je click sur un champ si il s'agit de cette icone j'effectue une action.
ListGridField oeilField = new ListGridField("oeil");
        oeilField.setWidth(40);
        oeilField.setTitle("Voir");
        oeilField.setType(ListGridFieldType.ICON);
        oeilField.setCellIcon("16/oeil.png");
Jusqu'à présent je comparait le numéro de la colonne de la source de l'événement avec celui de l’icône:
 if(event.getColNum()== 3)
Aujourdh'ui j'ai rajouté un champ donc j'ai cherché un peu plus et il suffit de faire:

demandesGrid.addCellClickHandler(new CellClickHandler() {
 @Override
 public void onCellClick(CellClickEvent event) {
   if(event.getColNum()== demandesGrid.getFieldNum("oeil")){
       traiteDemandeClick();
     }

   }
});

Really easy, but there are so many properties and methods that I'm often tempted to write dirty code.
I got a listgrid with an icon ListGridField. When I click on this icon I want to take some action.
Since the beginning I compare the event source column number to the hard coded index of the field, but as today I added some fields  I went a little bit further in the javadoc and found that I just need to use the getFieldNum method which use the ListGridField name to give the index of the column.....

samedi 4 février 2012

TreeGrid without DataSource with Hilites

J’utilise un TreeGrid pour afficher un catalogue de données. Les TreeNode appartiennent à plusieurs types ; Catégorie, Variables et Marqueurs. Ce type est indiqué à l'aide d'un attribut.
J’ai dans mon panel de consultation de catalogue une boite de recherche qui permet d’indiquer par des cases à cocher le type de node recherché et une liste de mots à rechercher dans leur libellé.
Pour afficher le résultat j’utilise, d’une part les Hilites et d’autre part l’ouvertures des nodes parents qui permettent d’accéder aux éléments trouvés.
Afin de remettre à blanc le résultat de la recherche j’ai un bouton de reset que je désire utiliser également pour retirer les hilites. J’ai essayé disableHilite() mais cela n'a pas marché. Après de nombreux autres essais j'ai fini par modifier le tableau de Hilites et fournir un nouveau tableau vierge au TreGrid.

Note du 09/03/2012: 
J'ai du  mettre à jour les Hilites avant les données car j'avais des problèmes de non affichage des hilites dans certains cas.
    leTreeGrid.setHilites(HILITES);
    leTreeGrid.setData(leTree);

Reset:
TreeGrid leTreeGrid = Session.getTreeGridFromSession();           
final Hilite[] HILITES = new Hilite[]{
};               
leTreeGrid.setHilites(HILITES);
Search:
final Hilite[] HILITES = new Hilite[]{
new Hilite() {{ 
   setCriteria(new Criterion("hilite", OperatorId.EQUALS, "oui"));
   setCssText("color:#202020;background-color:#EDF0A5;"); 
   setId("0");
   }},
};               
leTreeGrid.setHilites(HILITES);



I use a TreeGrid to show a catalog data. Some nodes are Category, other are Variable (they are leaves) and some are marker which are internally related to variables set.
I have in my CatalogConsultPanel a search box where I can select on which type of node I Search and which word set I’m looking for.
To display the result I use the hilite property of the TreeGrid.
So I need to Hilite every node which “hilite” attribute is set to yes.

As I have a clear button to reset the search result I wanted to remove the hilites.
I tried to disable the hilites but with no success, so eventually I set the TreeGrid with a new blank Hilite array.

03/09/2012 Note:
I had to re- order the hilite and data set operations because I had some hilite display trouble.
    leTreeGrid.setHilites(HILITES);
    leTreeGrid.setData(leTree);