Les contraintes ergonomiques des IHM d’applications professionnelles sont bien plus souples que celles qui régissent la conception de portails de ventes en ligne.
L’offre Viaxeo proposant un moteur de génération de sites e-business intégrés in extenso dans son CRM multicanal, nous avons du développer les outils nous permettant de répondre efficacement aux canons graphiques actuels afin de nous conformer aux chartes graphiques de nos clients.
Le premier obstacle rencontré était inhérent à la physionomie rudimentaire de nos panels de bases. Point de formes géographiques fantaisistes ni d’habillage recherché sans passer par l’utilisation manuelle, au cas par cas, de groupes de widgets englobant et de feuilles de style.
GWT propose de palier à ces difficultés via le DecoratorPanel, un widget à 9 « conteneurs », 8 panels périphériques destinés à accueillir images et styles, et un SimplePanel central dévolu à l’ajout de contenu.
En voici un exemple d’utilisation. Le but initial étant de créer un Caption Panel à bords arrondis, dont le style du titre soit paramétrable.
[pastacode lang=”java” message=”” highlight=”” provider=”manual”]
public class CaptionPanel extends Composite {private VerticalPanel absolutePanel;
private DecoratorPanel titlePanel;
private DecoratorPanel bodyPanel;
private VerticalPanel verticalPanel;
private HorizontalPanel horizontalPanel;
public CaptionPanel(int width, int height, int titleWidth, int titleHeight, String title){
this(width, height, null, titleWidth, titleHeight, title, null);
}
public CaptionPanel(int width, int height, String style, int titleWidth, int titleHeight, String title, String titleStyle){
absolutePanel = new VerticalPanel();
titlePanel = new DecoratorPanel();
bodyPanel = new DecoratorPanel();
verticalPanel = new VerticalPanel();
horizontalPanel = new HorizontalPanel();
horizontalPanel.
setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
absolutePanel.
setSize(width+"px", (height + titleHeight)+"px");
if (titleStyle != null){
horizontalPanel.setStyleName(titleStyle);
titlePanel.setStyleName(titleStyle);
}
if (style != null){
bodyPanel.setStyleName(style);
}
titlePanel.setSize(titleWidth+"px", titleHeight+"px");
titlePanel.add(new Label(title));
bodyPanel.setSize(width+"px", (height-titleHeight/2)+"px");
bodyPanel.add(verticalPanel);
horizontalPanel.add(titlePanel);
absolutePanel.add(horizontalPanel);
absolutePanel.add(bodyPanel);
initWidget(absolutePanel);
}
public void addTitleStyle(String style){
horizontalPanel.setStyleName(style);
titlePanel.addStyleName(style);
}
public void addBodyStyle(String style){
bodyPanel.addStyleName(style);
}
public void addContent(Widget content){
verticalPanel.add(content);
}
public void clearContent(){
verticalPanel.clear();
}[/pastacode]
Voici quelques exemples de rendu :
