Themes and Snippet Sets

A WEB_APPLICATION_THEME_COMPONENT defines the theme used by the GWC when rendering an application that requests that theme.

A theme contains a BOOTSTRAP element, a TEMPLATE element, and multiple SNIPPET elements.

This excerpt from the Genero Application Server configuration file shows the WEB_APPLICATION_THEME_COMPONENT defined for the HTML5 theme. The TEMPLATE element specifies the main template file for this theme, which defines the overall presentation of the application on a page. A SNIPPET element exists for each user interface object that could be displayed by a form. As an application developer or designer, you can customize the XHTML snippet files to customize an AUI (Abstract User Interface) object.

...
<WEB_APPLICATION_THEME_COMPONENT Id="cpn.theme.html5.gwc">
  <BOOTSTRAP Id="_default">$(res.path.tpl.html5)/bootstrap.xhtml</BOOTSTRAP>
  <TEMPLATE Id="_default">$(res.path.tpl.html5)/main.xhtml</TEMPLATE>
  <SNIPPET Id="UIFrame">$(res.path.tpl.html5)/UIFrame.xhtml</SNIPPET>
  <SNIPPET Id="Window">$(res.path.tpl.html5)/Window.xhtml</SNIPPET>
  <SNIPPET Id="Menu">$(res.path.tpl.html5)/Menu.xhtml</SNIPPET>
  <SNIPPET Id="MenuAction">$(res.path.tpl.html5)/MenuAction.xhtml</SNIPPET>
  <SNIPPET Id="Dialog">$(res.path.tpl.html5)/Dialog.xhtml</SNIPPET>
  <SNIPPET Id="Action">$(res.path.tpl.html5)/Action.xhtml</SNIPPET>
  <SNIPPET Id="LocalAction">$(res.path.tpl.html5)/Action.xhtml</SNIPPET>
  <SNIPPET Id="Form">$(res.path.tpl.html5)/Form.xhtml</SNIPPET>
  <SNIPPET Id="VBox">$(res.path.tpl.html5)/VBox.xhtml</SNIPPET>
  <SNIPPET Id="HBox">$(res.path.tpl.html5)/HBox.xhtml</SNIPPET>
  <SNIPPET Id="Group">$(res.path.tpl.html5)/Group.xhtml</SNIPPET>
  <SNIPPET Id="Table">$(res.path.tpl.html5)/Table.xhtml</SNIPPET>
  <SNIPPET Id="TableImpl">$(res.path.tpl.html5)/TableImpl.xhtml</SNIPPET>
  <SNIPPET Id="PictureFlow">$(res.path.tpl.html5)/PictureFlow.xhtml</SNIPPET>
  <SNIPPET Id="TreeItem">$(res.path.tpl.html5)/TreeItem.xhtml</SNIPPET>
  <SNIPPET Id="Grid">$(res.path.tpl.html5)/Grid.xhtml</SNIPPET>
  <SNIPPET Id="ScrollGrid">$(res.path.tpl.html5)/ScrollGrid.xhtml</SNIPPET>
  <SNIPPET Id="GridLayout">$(res.path.tpl.html5)/GridLayout.xhtml</SNIPPET>
  <SNIPPET Id="GridLayoutSplitter">$(res.path.tpl.html5)/GridLayoutSplitter.xhtml
  </SNIPPET>
  <SNIPPET Id="FormField">$(res.path.tpl.html5)/FormField.xhtml</SNIPPET>
  <SNIPPET Id="Folder">$(res.path.tpl.html5)/Folder.xhtml</SNIPPET>
  <SNIPPET Id="Edit">$(res.path.tpl.html5)/Edit.xhtml</SNIPPET>
  <SNIPPET Id="Edit" Style="FileUpload">$(res.path.tpl.html5)/FileUpload.xhtml
  </SNIPPET>
  <SNIPPET Id="DateEdit">$(res.path.tpl.html5)/DateEdit.xhtml</SNIPPET>
  <SNIPPET Id="ButtonEdit">$(res.path.tpl.html5)/ButtonEdit.xhtml</SNIPPET>
  <SNIPPET Id="ButtonEditAction">$(res.path.tpl.html5)/Button.xhtml</SNIPPET>
  <SNIPPET Id="TextEdit">$(res.path.tpl.html5)/TextEdit.xhtml</SNIPPET>
  <SNIPPET Id="Label">$(res.path.tpl.html5)/Label.xhtml</SNIPPET>
  <SNIPPET Id="ComboBox">$(res.path.tpl.html5)/ComboBox.xhtml</SNIPPET>
  <SNIPPET Id="Button">$(res.path.tpl.html5)/Button.xhtml</SNIPPET>
  <SNIPPET Id="CheckBox">$(res.path.tpl.html5)/CheckBox.xhtml</SNIPPET>
  <SNIPPET Id="RadioGroup">$(res.path.tpl.html5)/RadioGroup.xhtml</SNIPPET>
  <SNIPPET Id="Image">$(res.path.tpl.html5)/Image.xhtml</SNIPPET>
  <SNIPPET Id="StaticLabel">$(res.path.tpl.html5)/StaticLabel.xhtml</SNIPPET>
  <SNIPPET Id="StaticImage">$(res.path.tpl.html5)/StaticImage.xhtml</SNIPPET>
  <SNIPPET Id="Slider">$(res.path.tpl.html5)/Slider.xhtml</SNIPPET>
  <SNIPPET Id="SpinEdit">$(res.path.tpl.html5)/SpinEdit.xhtml</SNIPPET>
  <SNIPPET Id="TimeEdit">$(res.path.tpl.html5)/TimeEdit.xhtml</SNIPPET>
  <SNIPPET Id="ProgressBar">$(res.path.tpl.html5)/ProgressBar.xhtml</SNIPPET>
  <SNIPPET Id="HLine">$(res.path.tpl.html5)/HLine.xhtml</SNIPPET>
  <SNIPPET Id="Canvas">$(res.path.tpl.html5)/Canvas.xhtml</SNIPPET>
  <SNIPPET Id="CanvasArc">$(res.path.tpl.html5)/CanvasArc.xhtml</SNIPPET>
  <SNIPPET Id="CanvasCircle">$(res.path.tpl.html5)/CanvasCircle.xhtml</SNIPPET>
  <SNIPPET Id="CanvasLine">$(res.path.tpl.html5)/CanvasLine.xhtml</SNIPPET>
  <SNIPPET Id="CanvasOval">$(res.path.tpl.html5)/CanvasOval.xhtml</SNIPPET>
  <SNIPPET Id="CanvasPolygon">$(res.path.tpl.html5)/CanvasPolygon.xhtml</SNIPPET>
  <SNIPPET Id="CanvasRectangle">$(res.path.tpl.html5)/CanvasRectangle.xhtml
  </SNIPPET>
  <SNIPPET Id="CanvasText">$(res.path.tpl.html5)/CanvasText.xhtml</SNIPPET>
  <SNIPPET Id="TopMenu">$(res.path.tpl.html5)/TopMenu.xhtml</SNIPPET>
  <SNIPPET Id="TopMenuGroup">$(res.path.tpl.html5)/TopMenuGroup.xhtml</SNIPPET>
  <SNIPPET Id="TopMenuCommand">$(res.path.tpl.html5)/TopMenuCommand.xhtml</SNIPPET>
  <SNIPPET Id="TopMenuSeparator">$(res.path.tpl.html5)/TopMenuSeparator.xhtml
  </SNIPPET>
  <SNIPPET Id="ToolBar">$(res.path.tpl.html5)/ToolBar.xhtml</SNIPPET>
  <SNIPPET Id="ToolBarItem">$(res.path.tpl.html5)/ToolBarItem.xhtml</SNIPPET>
  <SNIPPET Id="ToolBarSeparator">$(res.path.tpl.html5)/ToolBarSeparator.xhtml
  </SNIPPET>
  <SNIPPET Id="StartMenu">$(res.path.tpl.html5)/StartMenu.xhtml</SNIPPET>
  <SNIPPET Id="StartMenuGroup">$(res.path.tpl.html5)/StartMenuGroup.xhtml</SNIPPET>
  <SNIPPET Id="StartMenuCommand">$(res.path.tpl.html5)/StartMenuCommand.xhtml
  </SNIPPET>
  <SNIPPET Id="StartMenuSeparator">$(res.path.tpl.html5)/StartMenuSeparator.xhtml
  </SNIPPET>
  <SNIPPET Id="EndingPage">$(res.path.tpl.common)/EndingPage.xhtml</SNIPPET>
  <SNIPPET Id="FileTransfer">$(res.path.tpl.html5)/FileTransfer.xhtml</SNIPPET>
  <SNIPPET Id="StyleList">$(res.path.tpl.html5)/StyleList.xsl</SNIPPET>
  <SNIPPET Id="WebComponent">$(res.path.tpl.html5)/WebComponent.xhtml</SNIPPET>
  <SNIPPET Id="UIError">$(res.path.tpl.html5)/UIError.xhtml</SNIPPET>
  <SNIPPET Id="QA">$(res.path.tpl.html5)/QA.xhtml</SNIPPET>
  <SNIPPET Id="RipGraphic">$(res.path.tpl.html5)/RipGraphic.xhtml</SNIPPET>
  <SNIPPET Id="Rectangle">$(res.path.tpl.html5)/Rectangle.xhtml</SNIPPET>
  <SNIPPET Id="RipCHECK">$(res.path.tpl.html5)/RipCheck.xhtml</SNIPPET>
  <SNIPPET Id="RipCOMBO">$(res.path.tpl.html5)/RipCombo.xhtml</SNIPPET>
  <SNIPPET Id="RipFIELD_BMP">$(res.path.tpl.html5)/RipFieldBMP.xhtml</SNIPPET>
  <SNIPPET Id="RipRADIO">$(res.path.tpl.html5)/RipRadio.xhtml</SNIPPET>
  <SNIPPET Id="RipLABEL">$(res.path.tpl.html5)/RipLabel.xhtml</SNIPPET>
  <SNIPPET Id="RipBUTTON">$(res.path.tpl.html5)/RipButton.xhtml</SNIPPET>
  <SNIPPET Id="RipBMP">$(res.path.tpl.html5)/RipBMP.xhtml</SNIPPET>
  <SNIPPET Id="Header">$(res.path.tpl.html5)/Header.xhtml</SNIPPET>
  <SNIPPET Id="Footer">$(res.path.tpl.html5)/Footer.xhtml</SNIPPET>
  <SNIPPET Id="ScrollArea">$(res.path.tpl.html5)/ScrollArea.xhtml</SNIPPET>
</WEB_APPLICATION_THEME_COMPONENT>
...

Note: The component Id for this WEB_APPLICATION_THEME_COMPONENT is "cpn.theme.html5.gwc". An application can inherit the settings of this component by specifying this Id value in the Using attribute in its THEME element, or by setting the THEME component within the MAP component.