|
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.
Customizing HTML Page Look and Feel
When AjaxSwing renders a GUI window, it uses renderers to generate a portion of HTML that represents the Java component.
For example, a JButton is represented by <INPUT type="button"> HTML element, and each container is represented with a
<DIV> element. For all logical components AjaxSwing defines corresponding CSS styles. 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. Obviously, 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 WindowsThemeDemo 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://www.com.creamtec.com/ajaxswing/Windows_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,
followed by styles_ie.css for all browsers except for Firefox which uses
styles_ns. This allows you to achieve different look and feel for different
browsers.
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.
Adding Custom JavaScript
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.
|