|
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. WebCream 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.
When WebCream 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 WebCream 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. WebCream 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 WebCream 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.creamtec.com/webcream/Windows_docs/css/webcream/styles_common.css">
The specific directory and the file name is determined by HTML theme specified in the application properties file.
All standard WebCream 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.
WebCream 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 WebCream web application's scripts directory.