Original source: http://www.javaworld.com/javaworld/jw-10-2004/jw-1025- xkins.html
Note: Please refer to the original text. Summary
In this article, Guillermo Meyer illustrates the process of applying skin-friendly process, explains how to manage the skin's frame - xkins to make skin for your application. Xkins can be used with other UI frameworks such as Struts and Titles, etc.. Here Meyer will implement a need for two skin when you together, while describing how to add a unique skin.
The skin refers to the appearance of the user interface, which brings different visual feelings for web applications. When the user clicks the button, the skin changes the user interface, but does not change the action of the UI. The replacement of the skin leads to changes in the application, but in order to achieve this change, the web application must know how to use the skin.
Why do you need to add skin for web applications? With regard to the use of skin, there may be a lot of purposes, but these purposes are not necessary. In a simple application, increasing the skin will not be bid, but in some cases, you must use the skin to handle it. These situations are:
l When the skin is required: When the user selects personalized skin, even when the personalized skin is created.
l Adding skin capabilities when you want to give your corporate component: If you create different solutions for different clients, you can reuse all components (tag libraries). If your components use skin skills, you only need to simply change the skin of each client.
l In response to a specific business situation, you need to add a different skin: For example, in a market or cross-banking application, different people work in the same system, you need to modify your app in accordance with the image of the user group.
Increasing the skin for web applications is not an easy task. You can use a stacked style sheet to change the path of the image, but you will be limited by the CSS capabilities. If you have a different component in every skin, that is, the CSS will not help you in each skin. However, if you simply change your format, you can solve your problem, you can use CSS.
A good way to create a skin is to define each part of the user interface, and then combine each part into a complete interface. For example, if you have an interface component composed of simple tables in the skin A, it is a complex table with header, foot, picture and even sound in the skin B, which will generate different HTMLs for each skin structure. Tr> and
Tags). As an example, let us assume an HTML that represents a label, as in the skin A:
this is my label
In the skin B, the label will generate this:
This is my label
This allows you to find that these two UIs are completely different in each skin. They have the same information (this is my label), but is expressed in different HTML tags. This function CSS cannot be completed separately. It may be done using XML conversion or XSL. Or you can use xkins. l What is xkins
Xkins is a framework for managing skin for web applications. In the early server-side Java programming, you need to manually enter HTML in the servlet. Next, the appearance of JSP (Java Server Pages), you can write HTML outside the Java code. Now, when we use a label library with an HTML tag in the Java code, we have encountered the same problem. With Xkins, you can use a new and very useful feature-skin, write HTML to the outside of the code. For more details, you can view the homepage of Xkins.
Figure 1 Xkins location in web applications
Use the tags using Xkins and Struts web applications, follow the following life cycle:
N struts Initialize Xkins using xkins plugin
n Struts Controller Receive HTTP Request
n struts perform methods, oriented to JSP page display
N JSP page Using the label library display page
N tag library with xkins with xkins shell - xkinprocessor
N xkinprocessor gets a template represented by user skin and label instructions
N xkinprocessor uses TemplateProcessor and template association
n TemplateProcessor displays the class of each part of the UI of the skin. TemplateProcessor can display the output using Velocity, JByte (Java By Template Engine), Groovy, or other template engine.
n TemplateProcessor uses resources (elements and paths) in your skin, return to the template to handle tags.
N template processed tag transfer to the browser
The xkins address is managed by the following basic principles:
N Generate HTML outside the Java code: The label is generating HTML code, changing these code needs to change the Java code and re-deploy the app. Xkins allows you to place the generated HTML in a custom file (XML file). In addition, Xkins allows you to place an HTML format label outside the JSP page so that the visual feeling of the application will be expanded.
n Define skin structure: template, resources and paths form a skin. The resource can be a constant or an element like a picture and a CSS file. Define the path to help you organize your skin files. Define templates can reuse the UI parts in your application.
n Allows the extended xkins framework: You can use your own template language to expand Xkins based on your own needs. For example, if you need to generate a picture, you can implement a template processor that generates pictures. The template processing of XKins is based on Velocity and JByte. For example, if you tend to use Groovy, you can create a Groovy template processor to handle your UI section.
n divide the UI into the basic element: In Xkins, you can separate all UI components and create a template. In this way, you can reuse the individual parts and any part of the change makes the skin different.
n Use inheritance to reduce skin maintenance: In xkins, a skin can inherit other skin, use all templates, paths, and resources in the skin. This reduces the maintenance of the template.
n Use synthesis to create skin: As inheritance extension, XKins allows users to synthesize to reduce maintenance and increase templates. Due to these features, users can create their own personalized skin by selecting different UI portions from existing skin. n Define skin type: Use skin type, you can determine that there is at least one of the skin in the xkins instance with the same template. The skin type is the only skin in all other skin in an XKins instance. Here, the skin example refers to a group of skin treated together in a web application.
The greatest advantage of Xkins is that all HTMLs have a place. If you need to change, you only need to simply modify the template. For example, if your page file is too large, it is found that the location of the excessive HTML or those pictures can be separated, then change the template to less page file size. You can also provide a lightweight skin for users with slow network speed, providing heavyweight for broadband users.
Note: You can use Xkins and CSS. In fact, CSS is because font types and colors are recommended, because reusing CSS files can avoid clearing the appearance of fonts each time, thereby reducing the size of the file.
In web applications, the skin can be compressed into a simple file (zip file) for easy deployment. If you define a skin type, if the third party's skin meets your declared skin type, you can also add it to your web application.
You can use xkins in a variety of ways, but use Xkins and tag libraries as the best way in web applications. You can use these tags to generate your page, or decorate existing tags.
l Define the skin
Here are some tips for defining the skin:
n Determine the skin color; use global constants so that other skin can inherit and cover them.
n Create reusable templates for each tag library.
n Use an element that can be inherited to create a template so that the entire template does not need to be rewritten in order to change the UI appearance.
n Create a foundation skin for your web app, use it as the type of your xkins instance.
n Avoid writing HTML inside the Java code. If you have a label library, servlet, or even a JSP page containing HTML code, you can consider porting HTML into the xkins template.
l example
Now let's take a look, in a simple web application that requires skin management, design, design, develop, and deploy XKins's operations. In this example, we implements a simple application for two online bookstores - Amazing and Barnie & Nibble to register users. This app will be used in two sites (through other formats selected by frames, portlets, or bookstores), but must provide specific appearances for each bookstore.
In order to achieve our application, we follow the steps below:
1. Get the HTML page containing each skin.
2. Determine the skin template.
3, create a skin.
4, use the skin.
5, deploy web application.
l Get HTML page containing each skin
First, we get the graphical page design provided by each bookstore. These materials may be a page prototype, which must contain all possible page elements in the application (in our example, just a page). As shown in Figures 2 and 3.
Figure 2 Amazing's appearance
Figure 3 Exterior of Barnie & Nibble
As we see, the two pages have different colors, pictures and layout. In addition, the information collector is different, plus the Amazing button is a GIF format, and Barnie & Nibble is a format HTML button.
l Determine the skin template
Now we must organize the page part to generate some templates for our app. We can start from scratch, or we can break down our HTML on a simple skin used to create a form. The base skin exists in the xkins framework in the form of xkins form tags. The xkins form is a label library implementation using Xkins to generate a form for a web application. The base skin defines the framework, field, buttons, and more. We should use this skin while adding the templates (such as channels) needed for our project. This base skin also allows us to produce our JSP page using the XKins form tag.
Let's take a look at the list of templates we need:
n frame: Table containing the entire form
N framemandatorycaption: Text-to-mandatory field
N Field: Layout of the label and input box
n FieldLabel: A text containing a label
N FieldLabelMandatory: Mark a paragraph of a command tag
n FieldInput: Control Input Box
N FieldInputMandatory: Text box that must be filled in
n Button: Execute Commands button
n Branding: Channel corresponding to each bookstore
l Create a skin
Once we are determined by different parts of our ui, we can create two skin using Xkins. We started from named in xkins-definition.xml files:
Now, we must create a directory structure in the root directory of the Web in Figure 4:
Figure 4 Skin Directory
In each subdirectory, we must place the definition.xml file to describe the skin. Let's take a look at some skin templates. If you need to view all example templates, you can download the source code from the links provided at the end of the file.
Let's take a look at the definition syntax of the skin in definition.xml containing Amazing skin:
Base is the default skin, which is single and xkins form to help us add skin to your application. Amazing's skin inherits it (Barnie & Nibble is also). We now start covering the Skin template for each skin, starting from the overlay field template:
< Template name = "FieldLabel" group = "field"> $ label: ]]> $ label: ]> $ colspan "style =" font-family: Verdana, Arial, Helvetica, Sans-Serif Font-size: x-small; "> $ input (optional) ]> $ input ]> above all models The boards are Velocity Templates. Note Parameters, like $ COLSPAN, is passed to template, can be used by template. These parameters are transmitted in XkinsProcessor called by the label library.
Below, we started cutting HTML and pastes from the imitated page into the xkins template. Next, we use the same method to handle the frame, buttons, and channels. The following code shows a piece of skin of Barnie & Nibble (just Field template):
$ label
$ INPUT
]]]]]>
Face = "Arial, Helvetica, Sans-Serif"> $ label
]]]]]>
$ label
]]]]]>
>
$ INPUT (optional)
]]]]]>
]]]]]>
JSP: Bodycontent
->
$ bodycontent
]]]]]>
l use skin
Now we have an Base skin and two-needed skin, we can use these skin to create a JSP page. To accomplish this, we use the XKins form label because they use the templates defined in the Skin. You can create your own label library as Xkins form, so you no longer need to use the xkins form. But the XKins form and Struts framework are compatible, and it is used in our app.
We need two pages:
n index.jsp: Execute data login
n done.jsp: print results
Our example is just a demonstration, so it is not necessary to have a real handle request, just need to be redirected from index.jsp to done.jsp. In practical applications, this process between these pages must be completed.
Note How XKins is integrated with Struts in our example applications. The xkins tag library does not replace the Struts tag library, they just modify the page. For example, you can't use the
this HTML tab, but to accommodate the form and add skin capability. If your app uses struts, and you want to use Xkins, just place the XKins form label library in your page to modify. Next, pass all HTML tags used in the JSP page to XKins templates to make XKins create visual appearance.
Although not used in the example, Title can be used with Xkins. Xkins can work with Titles without alternating: Let the Titles management page layout, XKins management components.
The following code shows the JSP page of the implementation example, using the XKins form and Struts tag library:
In our example, we used Struts that has solved the internationalization problem, which came as a UI framework. We use the tag to implement the BRANDING template at the top of the page, and use to implement the form. We have a multi-line Frame. Each row has one or more field. When the frame is implemented, it requires each line to achieve itself. At the same time, each line requires the field to realize itself. In each example, all of these formations use the templates defined in the skin, so only need to change the XKINS definition file, you can change the visual appearance of the page without changing the JSP.
The Buttons Tag contains a page button, which passes the parameter to the Frame template, so you can place these form buttons on the designated location of the template. Here, we use the Button tag to achieve the buttons of the skin requirements. In Amazing Skin, we create a button with a picture (in the table), in Barnie & Nibble skin, we use the HTML button. Note that JSP does not include HTML and CSS classes: HTML implementation and formats are delegated to Xkins.
l Deploy web application
Now all parts are set, you only use the sample application to start using the sample application to deploy the WAR file to the servlet container. In the example, we integrate XKins and Struts. You can configure xkinsplugin: in Struts-Config.xml
l Business is extension!
After a successful implementation of our application, a new client, Box bookstore accepts our service. The company gave us its application's visual appearance, we develop the skin, as shown in Figure 5:
Figure 5 Box bookstore skin
This skin is different from the skin of other bookstores, showing the XKins framework in developing skin to perceive the user's flexibility. You can get the skin in the source code.
l other skin usage
Xkins is not only used in web applications. Xkins structure allows you:
n Create floating pictures in each batch. You can create a GIF or Vector tag language if the browser supports, determines the skin according to the browser.
n Different outputs are created according to the client. You can have a skin created by HTML, another creation WML, another creation XML, determines the skin according to the client device type.
n Create a report according to user parameters. A skin creates a PDF, a creating CSV, and another HTML.
N Create a different HTML based on the browser type. You can create a skin for IE, a for Netscape, another for Linux.
In short, you can use xkins for all the templates for all templates in your application.
Even if you don't need to create a HTML from the template, you only need to use CSS and images, you can simply use Xkins to organize files. For example, you can declare the image path, the CSS file name, etc., as the xkins definition below:
]]]]]>
In the JSP page, you can use these definitions like this:
As you can see, you can use xkins to organize your files, if you change a path or a picture of a picture, you only need to change the Xkins definition is enough.
l Xkins's future: Xkins Faces
As we see, Xkins is based on the specific components representing the label library. This concept is consistent with the JSF (Java Server Faces). JSF uses HTML (or other ML) to generate HTML (or other ML) for its components. Xkins can also be used as a generation of agents and increasing skin.
Xkins Faces is a JSF implemented using Xkins. The main implementation applies Decorator mode to implement JSF. Xkins Faces defines a skin type, so third-party providers can create a lot of features similar to skin. This way, if you use JSF and Xkins Faces to develop an app, from all Xkins skin types define in the templates needed by Xkins Faces, you can download a new skin for your web app, deploy it, you can not be modified That is to use it. So in the near future, many skin will be used to download and use in web applications, or your users can create their own skin on the basis of the skin, using these templates directly from the Internet without deploying them.
