You probably have already heard about themes, but you might not know how to incorporate them into your own site.
Commonly, a theme refers to a set of graphics, color, and layout definitions that can be applied to a user interface to give it a specific look and feel. A "theme-able" application lets a user select between different looks of this application.
A well-known representative is Winamp or Netscape 6. The concept of themes is a relatively new and important development in the evolution of modern GUI applications. Themes give users the ability to choose or create individual interfaces easily for enabled applications without the need to recompile them. You might even consider this as an end-user related aspect of the growing open-source idea.
Basically, you only need a very basic set of technologies for the There are advantages and disadvantages to using some of the strategies to import and export XML. The complexity of your application data and available system resources are factors that would determine what strategy should be used.
The 2nd category of Java applications called Java Application Servers (or app servers) and they make good use of XML. Unlike client side graphical Java apps (from the previous section) which are very standalone in their operations, app servers tie many different networked software components together in order to provide information from multiple sources to a set of client side Java apps or web browsers (maybe even running on different devices). This is shown in Figure 2. An app server is actually a conglomeration of several distributed and client/server software systems. So when you write an app server, you are actually writing many different software systems which are all networked to work together, to process information that comes from various sources, and distribute this information to a set of client apps (that you also have to write) running on different devices and platforms.
The drawback is that it may not be possible to use CSS in full effect for older 4.x platforms because of erroneous and incomplete CSS support. As a rule of thumb you should only try it with the newest browsers available (IE 5.5, Netscape 6, Opera 5, and Konqueror). The RichInStyle site provides a good list of CSS bugs and support.
Basically any application has to match one important prerequisite to switch between different themes: it must separate the data of the application -- the model -- from the view of the data. Both components are connected and controlled by a controller.
In terms of OOP, this is called the model-view-controller (MVC) concept, Java's GUI toolkit Swing is probably the most famous representative.
After identifying the components, let's specify their roles in relation to our task:
<b>; you should stick to elements like
<strong>. Don't use well-known elements and attributes that give control over the presentation of a document. These are marked as deprecated in HTML 4.01 (which means that they are evil and will be removed in following specifications) and must be replaced by equivalent CSS definitions.
<link>element (see below). A style sheet file which holds the complete definition of the graphical representation is nothing more than a theme file. For activation, we only need one more component that controls everything.
1. Prepare your documents
As explained above, your HTML files should only contain structural markup after the first step. A good place to learn more about separating model and presentation is Jakob Nielsen's UseIt site. Other great places to start are pages about accessible design, such as the Web Content Accessibility Guidelines and the accompanying Techniques for Web Content Accessibility Guidelines.
2. Create themes
This step assumes at least some basic knowledge of the attributes supported in CSS. If you're new to CSS, you should read some introductory material first.
After organizing your information, you're ready to give it a visual representation. You can define styles for a certain element type, classes of elements, and individual elements, and apply them using CSS selectors. With CSS, you can also define elements to become invisible, this allows you to have even greater control over your layouts. It's especially important to identify all parts you want to give distinct views in different themes and to use a clever naming system.
After you create a default stylesheet, just copy it and use it as a template for additional style sheets, or themes. Store all style sheet files in a single common folder. To import a style sheet into an HTML document after creation, you write:
<link rel="stylesheet" type="text/css" href="Path to your style sheet file">
The trick is simply to write into your document while it's being
loaded, a browser will parse this like any other content and load the
defined style sheet file, which is applied to the document:
document.writeln('<link href="'+THEMES_FOLDER_PATH+s+'.css" type="text/css" rel="stylesheet">');
To make this reusable, you have to consider two points. First, of course, you have to wrap it in a function (see
It's very important to use absolute paths -- paths that are
evaluated starting from your document root folder. This is necessary
because you'll have to adjust the path every time you insert the script
into a new document which has a different relative location to your
style sheet files -- which isn't really a reusable script solution.
When you look at the code line above, you'll also find the variable
s, which holds the name of the theme, the file suffix
.css is added statically. Actually,
s should hold one of your theme's name that you stored in the common folder (whose name is specified in
Next we need a method to let users choose between different styles, so we create a reusable function called
setTheme(), which receives the name of a theme as an argument. This is how to call it:
setTheme(), we store the name of the theme with a specified key in our cookies with
SetCookie() after deleting an old value with
DeleteCookie(). To apply the new style sheet, the last step is to reload the current document which is easily done by resetting the current location. Since it comes, in most cases, from your memory cache, we're not generating network noise.
While the document is reloaded
insertStyleSheet() gets called again. Using
GetCookie(), we're trying to access the name of a theme, if specified. If none is found, the script uses a default style and writes the
<link> element into the document, see above.
4. Step: Add the script and correct settings
documents. What we didn't consider so far is what happens to clients
<noscript><link href="/styles/default.css" type="text/css" rel="stylesheet"></noscript>
After you create the snippet with the correct (absolute) paths, you can just cut and paste it anywhere in your site's documents.
You must take care that you always point to the same default style
sheet (in case you're not supplying a style sheet for users without
DEFAULT_THEME, in the script. The last step is to adjust the path to your themes folder in
(be sure to end your path with a slash) and you're done.
As we saw, implementing your own themes is easy as long as you understand the underlying principles and technologies. Also, keep in mind, that CSS support is not as consistent as it should be. For sites with a large audience, you should stick to the old dirty way. While we didn't discuss all the complexities in this article, hopefully, you've become curious for more -- and that's really all I wanted. Stay tuned!
All of the code that you write (in your Java classes) might be considered the Java application layer. Other layers are the XML Parser layer, the XML source (that supplies the XML data that is necessary), and the persistence engine (where the data is actually stored and retrieved by the source).
Your code (in the Java application layer) has to make use of the DOM or SAX API and the XML parser in order to access the information in XML documents (that come from your source). The source might be responsible for pulling data from different persistence engines (relational or object databases) and even the web (dynamically generated websites that supply only XML data).
In your application layer, you can create many interesting Java applications. The apps can run on the server side or client side or both. They may have graphical user interfaces or they may be web based. When I use the word application or app in this chapter, I don't exclude Java applets; I mean application (or app) in the broad sense of the word, i.e., I mean it to describe a software system written in Java that solves a real-world problem.
A good way to remember this pattern is to keep in mind that the four values go clockwise around the element, starting from the top. The values are always applied in this order, so in order to get the effect you want, you have to arrange the values correctly.
An easy way to remember the order in which sides have to be declared, other than thinking of it as being clockwise from the top, is to keep
By using XML and Java, you can quickly create and use information that is properly structured and valid. By using (or creating) DTDs and storing your information in XML documents, you have a cross-platform and language independent data validation mechanism (for free) in all your projects!
You might use XML to define file formats to store information that is generated and used by your applications. This is another use of the structured nature of XML. The only limitation is that binary information can't be embedded in the body of XML documents. For example, if you wrote a word processor in Java, you might choose to save your word processor documents to an XML (actually your ApplicationML) file. If you use a DTD then your word processor would also get input file format validation as a feature for free. There are many other advantages to using XML and a file storage format for your applications which will be illustrated later in the chapter.
Here are some benefits of the structured nature of XML: