GWT Widget Custom Look&Feel

In GWT kun je snel dingen maken die leuk ogen, maar al snel komt het Ikea gevoel om de hoek kijken. Iemand komt je huiskamer binnen, ziet een Ikea-meubel staan, en moet even opmerken dat hij het meubel uit de catalogus herkent. Er is niks mis met het meubel, maar mensen weten meteen hoeveel je betaald hebt en waar ze er ook zo een kunnen halen. Zo gaat het ook een beetje met GWT. Neem bijvoorbeeld een DialogBox die mooi geanimeerd verschijnt. De mooie lichtblauw randjes en geronde hoekjes verraden het al snel: "Ah, je hebt GWT gebruikt." Wat kunnen we hieraan doen?

Google heeft dit helaas niet heel makkelijk gemaakt, maar er zijn twee dingen die je kunt doen. De randjes worden gemaakt door een drietal plaatjes. Zo zitten alle hoekjes in hetzelfde plaatje. Wanneer je je project compileert staan deze p[laatjes in /gwt/standard/images. Je kunt van deze plaatjes de kleur, hoek of schaduw aanpassen en opnieuw opslaan. De randen van een DialogBox zullen er dan iets anders uitzien, maar je bent in ieder geval van die blauwe kleur af.


Download ze hier.

De andere manier is wat ingrijpender. Hiervoor moet je de CSS-style voor de DialogBox overriden. Als je alle classes die de DialogBox nodig heeft opnieuw definieert, en vervolgens de StylePrimaryName van het dialogBox object aanpast, zal je DialogBox er ook anders uitzien. Hieronder staan de classen die gedefinieerd moeten worden. Voor het gemak heb ik er de uitleg uit de documentatie bijgezet en de oorspronkelijke waarde laten staan. De primaire naam is al wel aangepast.

.gwt-CustomDialogBox { 
  /*the outside of the dialog */ 
}

.gwt-CustomDialogBox .Caption { 
  /*the caption */
  background: #e3e8f3 url(images/hborder.png) repeat-x 0px -2003px;
  padding: 4px 4px 4px 8px;
  cursor: default;
  border-bottom: 1px solid #bbbbbb;
  border-top: 5px solid #89130e;
}

.gwt-CustomDialogBox .dialogContent { 
  /*the wrapepr around the content */
}

.gwt-CustomDialogBox .dialogTopLeft { 
  /*the top left cell */
  background: url(images/corner.png) no-repeat -13px 0px;
  -background: url(images/corner_ie6.png) no-repeat -13px 0px;
}

.gwt-CustomDialogBox .dialogTopLeftInner { 
  /*the inner element of the cell  */
  width: 5px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogTopCenter { 
  /*the top center cell, where the caption is located  */
}

.gwt-CustomDialogBox .dialogTopCenterInner { 
  /*the inner element of the cell */
}

.gwt-CustomDialogBox .dialogTopRight { 
  /*the top right cell  */
  background: url(images/corner.png) no-repeat -18px 0px;
  -background: url(images/corner_ie6.png) no-repeat -18px 0px;
}

.gwt-CustomDialogBox .dialogTopRightInner { 
  /*the inner element of the cell */
  width: 8px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogMiddleLeft { 
  /*the middle left cell */
  background: url(images/vborder.png) repeat-y;
}

.gwt-CustomDialogBox .dialogMiddleLeftInner { 
  /*the inner element of the cell */
}

.gwt-CustomDialogBox .dialogMiddleCenter { 
  /*the middle center cell, where the content is located  */
  padding: 3px;
  background: white;
}

.gwt-CustomDialogBox .dialogMiddleCenterInner { 
  /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogMiddleRight { 
  /*the middle right cell  */
  background: url(images/vborder.png) repeat-y -4px 0px;
  -background: url(images/vborder_ie6.png) repeat-y -4px 0px;
}

.gwt-CustomDialogBox .dialogMiddleRightInner { 
  /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogBottomLeft { 
  /*the bottom left cell */
  background: url(images/corner.png) no-repeat 0px -15px;
  -background: url(images/corner_ie6.png) no-repeat 0px -15px;
}

.gwt-CustomDialogBox .dialogBottomLeftInner { 
  /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogBottomCenter { 
  /*the bottom center cell */
  background: url(images/hborder.png) repeat-x 0px -4px;
  -background: url(images/hborder_ie6.png) repeat-x 0px -4px;
}

.gwt-CustomDialogBox .dialogBottomCenterInner { 
  /*the inner element of the cell  */
  width: 5px;
  height: 8px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogBottomRight { 
  /*the bottom right cell */
  background: url(images/corner.png) no-repeat -5px -15px;
  -background: url(images/corner_ie6.png) no-repeat -5px -15px;
}

.gwt-CustomDialogBox .dialogBottomRightInner { 
  /*the inner element of the cell  */
  width: 5px;
  height: 8px;
  zoom: 1;
}

In de CSS kun je de achtergronden van de hoekjes en randen van de DialogBox aanpassen. Het is het makkelijkst om per hoekje een apart plaatje te maken, maar je kunt ook zoveel mogelijk in één plaatje stoppen om het aantal downloads te beperken. Ik ben niet bepaald een Photoshop koning maar heb toch geprobeerd om een ander randje te maken. Zie hier het resultaat.


Hiervoor is de volgende CSS gebruikt:

.gwt-CustomDialogBox { 
 /*the outside of the dialog */ 
}

.gwt-CustomDialogBox .Caption { 
 /*the caption */
 background: url(img/t.png) repeat-x;
  padding: 4px 4px 4px 8px;
  cursor: default;
  
}

.gwt-CustomDialogBox .dialogContent { 
 /*the wrapepr around the content */
}

.gwt-CustomDialogBox .dialogTopLeft { 
 /*the top left cell */
 background: url(img/tl.png) no-repeat;
}

.gwt-CustomDialogBox .dialogTopLeftInner { 
 /*the inner element of the cell  */
 width: 12px;
 height: 12px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogTopCenter { 
 /*the top center cell, where the caption is located  */
}

.gwt-CustomDialogBox .dialogTopCenterInner { 
 /*the inner element of the cell */
 height: 12px;
}

.gwt-CustomDialogBox .dialogTopRight { 
 /*the top right cell  */
 background: url(img/tr.png) no-repeat;
}

.gwt-CustomDialogBox .dialogTopRightInner { 
 /*the inner element of the cell */
 width: 12px;
 height: 12px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogMiddleLeft { 
 /*the middle left cell */
 background: url(img/l.png) repeat-y;
}

.gwt-CustomDialogBox .dialogMiddleLeftInner { 
 /*the inner element of the cell */
}

.gwt-CustomDialogBox .dialogMiddleCenter { 
 /*the middle center cell, where the content is located  */
 padding: 1px;
  background: white;
}

.gwt-CustomDialogBox .dialogMiddleCenterInner { 
 /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogMiddleRight { 
 /*the middle right cell  */
 background: url(img/r.png) repeat-y;
}

.gwt-CustomDialogBox .dialogMiddleRightInner { 
 /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogBottomLeft { 
 /*the bottom left cell */
 background: url(img/bl.png) no-repeat;
}

.gwt-CustomDialogBox .dialogBottomLeftInner { 
 /*the inner element of the cell  */
}

.gwt-CustomDialogBox .dialogBottomCenter { 
 /*the bottom center cell */
 background: url(img/b.png) repeat-x;
}

.gwt-CustomDialogBox .dialogBottomCenterInner { 
 /*the inner element of the cell  */
 height: 12px;
  zoom: 1;
}

.gwt-CustomDialogBox .dialogBottomRight { 
 /*the bottom right cell */
 background: url(img/br.png) no-repeat;
}

.gwt-CustomDialogBox .dialogBottomRightInner { 
 /*the inner element of the cell  */
 width: 12px;
  height: 12px;
  zoom: 1;
}

Hier kun je de plaatjes downloaden.