Managing generated HTML using CSS styles and JavaScript
This section assumes familiarity with such web technologies as HTML and Cascading Style Sheets (CSS). If you are not familiar with it, please visit http://www.w3c.org to get more information. AjaxSwing automatically generates HTML code for the top level window of the web-enabled application. While you can not change the structure of generated HTML without custom renderers, you have a lot of flexibility to change how the page looks. You can even add your own JavaScript to make pages smarter or to implement some client-side logic.
The HTML page structure is determined by the page template specified by html.template.page application property. The default page template is AjaxSwing/conf/templates/default-page/page.html. If you want to customize the page template, it is highly recommended to copy all files from default-page directory to custom-page directory to simplify future upgrades. It is important to keep all elemenents in the page template and their order. Most of the times you would probably want to add your custom HTML code to body-header.html and body-footer.html. Those fragments are included into the page template before and after the Swing screen container with id=AjaxSwingScreen. Note that you would probably change the style attributes such as left, top, width and height of the AjaxSwingScreen DIV element to accomodate the HTML elements you are adding. The location and size of AjaxSwingScreen DIV element is used as the screen size for virtual Swing graphics environment.
When AjaxSwing renders a Swing component, it uses renderers to generate a corresponding HTML elements. For example, a JTextField is represented by <INPUT type="text"> HTML element, and each container is represented with a <DIV> element. For all logical components AjaxSwing defines corresponding CSS class. Thus, the job of customization becomes finding the right stylesheet and redefining the styles to make the page look the way you want it. AjaxSwing themes are implemented with CSS styles and images. Customizing the stylesheet is the easiest and the best way to achieve "company look and feel" where you will make AjaxSwing application follow the guidelines for colors and fonts established by your company.
The best way to familiarize yourself with the generated HTML is to run SwingSet2 and look at the source
page using browser's View Source option. You will see in the page header that each page includes a link similar to the one below
<link rel=stylesheet href="http://creamtec.com/ajaxswing/Light_docs/css/ajaxswing/styles_common.css">
The specific directory and the file name is determined by HTML theme specified in the application properties file.
All standard AjaxSwing styles are defined in styles_common.css, and if you open it you would see styles such as window, label,
button, errorMessage and others. styles_common.css is included in all pages.
The cleanest place for custom style definitions and overrides is css/custom.css. This file is included after all default stylesheets allowing you to isolate your changes and making future upgrades easier.
AjaxSwing includes several JavaScript files to the generated pages, one of which is called "custom.js". This file was intentionally created for you to add your JavaScript scripts that can be invoked by custom renderers or in response to page effects such as page loading. This file is common to all themes and can be found in AjaxSwing web application's scripts directory.
