Tutorials to .com

Tutorials to .com » Website » Xml » SVG and XForms: the basics

SVG and XForms: the basics

Print View , by: iSee ,Total views: 33 ,Word Count: 2814 ,Date: Wed, 26 Aug 2009 Time: 10:05 PM

As I write this, there are two kinds of technology in the just-released or soon to be released, would be an incredible driving force for development-related applications with the respective set off a minor revolution in the field. XForms is a long-awaited alternative to HTML forms technology. It goes beyond a simple repetition of xml provides an xml editing program and through the abstract user interface layer. In the meantime, Scalable Vector Graphics (Scalabel Vector Graphics, SVG) as it accelerated a second smaller version of the upgrade, dramatically expanding the application of the occasion, adaptability and scalability, even higher than in the past. This series of articles introducing the study of these two techniques new perspective, and demonstrate ways to integrate the two. In this paper, an analysis of XForms and SVG, and study the possible correlation between them.


XForms are the successor to HTML forms, but in the development of an interactive form-based applications, HTML form, the importance should not be ignored.

A Brief History of HTML form

I assume that you as a developerWorks xml zone of the reader, may already have the HTML (and later XHTML) and its function in the form of knowledge related applications. HTML form is a pioneer in client and server interaction, more than a static document request goes a step further. HTML form is a very realistic approach. It is through a variety of pre-set a good widget (widget), such as a simple input fields, text boxes, radio buttons, combo box, select lists, etc., to the development of Web content provides the exchange of text data and user means. It is no exaggeration to say that, Web to develop to such a state, HTML forms are played an important role. However, we still have to look at the real meaning of this technology. Web is not just a magical birth of a new development trends and new economic models and so on means of communication. In fact, Web Development does not like the sound so good. Every developer, has been used as long as the form-based interactive technology developed over even a relatively simple Web application that can give you to list the long list of people upset problem. There is no doubt that including XForms committed to addressing issues, such as authentication, as well as the user interface controls restrictions on input values and so on.

In the HTML era, verify that the problem is usually a headache, a developer solution to this problem in general there are three. The first and most direct way is to let the server is responsible for authentication, usually through the Perl scripting language such as realized. The preparation of such a procedure is unusual tedious work, this solution itself is also very bad, because every time in the form verification process an error is encountered, it must return a new document, later re-processing time. The second method is the client-side validation, which involves completely with the object model associated with the platform to use java Script-based scripting technology. The third method is the first and second combination of two methods. No matter which method you use, the job is still daunting, and the results are never satisfactory.

In the user interface, the situation is not very good. I have listed above all the UI widgets are a pretty good start, but the problem soon emerged. Fairly small range of UI controls, if you want to provide a richer input mechanisms, such as the calendar used to select the dates of departure, then one must use an intelligent client-side dhtml scripts and terrible ways. These technologies are for compatibility in terms of the terrible burden. Each form controls the appearance and behavior are closely associated with a specific platform. Although this approach can be with the user's environment, well integrated, but it is limited to create a complete custom control, the possibility can not be in order to achieve broader purposes of the graphical interface, simple changes, or even no guarantee that a variety of platforms have the same look and feel.

In addition to authentication and user interface controls the two major problems, device-dependent, accessibility, lack of a means of integration with the XML and other issues also deserve attention, so we must begin the study of new forms solution. When the W3C began developing the next generation of Web forms, all of these issues have been taken into account by.

Be achieved with XML form

Recently, many Web applications are beginning to make a fuss around the XML. With the increasing number of such applications, XML's functionality is already reflected to the client machines (such as the use of XHTML). XForms and XML platform, closely linked, so with the perfect combination of XML-processing. XForms form of the model and the performance of complete separation, which introduces a new form representation.

The model form is essentially a structured placeholder mechanism, the user can, through appropriate human-machine interface to which input data. In XForms, content developers to use the XML definition of the model, that is, the most able to meet the needs of custom XML grammar, based on the specific goal to build model structures. Once the definition of a good model, the rest of the work is only part of the definition of which should be exposed through the user interface.

With the XForms user interface defines the method quite abstract, you will never be provided directly to the needs of what the UI looks like. Content developers to build elements of the built-in XForms user interface. From a relatively high level of speaking, XForms element defines how users enter or select a specific element of the model (via the XPath expression specified). If I had less abstract way to represent the last word in the HTML, you say "here, drawing a text input control, allowing users to enter a date string", while in XForms, you say "to the user an appropriate control, in order to choose the value of the model is right for me. "

This method is good, but in the end it is how to solve those problems in front of it? XML Model decent place, is that you can (through the built-in W3C XML Schema data types, or XForms their type) to really bind to a particular data type in the model an arbitrary element. First of all, when the user input or by choosing a value of the control when the validation of the value of this work can be combined by the specified XForms data types automatically. Second, because your model element with a data type, when you reference it through the user interface elements of the time, you can be sure, the user can access to an appropriate data selection method. XForms we mentioned earlier, you can say "to the user an appropriate control, in order to choose the value of the model is right for me.", So if you want to provide the type of the value of the date, then the XForms it is possible to identify these tips, in order to show you a calendar control to enter a date.

Whether or not you believe the above, I am just here too involved in the fur XForms only, in this connection more information, please refer to the references. Earlier I mentioned HTML form a drawback is its lack of style support. In XForms, there is no user interface elements which have a variety of appearance, because all these elements define the interaction only the constraints (such as the number of entries to choose from). Data type is prompted to XForms input controls the appropriate expression to the user. You can use SVG to implement XForms performance and interaction layer. Here take a look at what SVG recently made progress, such progress is how to help us to achieve the vision of the above.

Scalable Vector Graphics

XForms and SVG the new features of the potential collaboration between the many ideas can be achieved.

Early SVG 1.0

In September 2001, SVG 1.0 became a Recommendation, from that time onwards, quite a lot of this technology gradually been applied to different business areas. Notably the range of applications, including maps and graphics. Recently, SVG using open-source project is carried out on their own more and more application-oriented development, these projects aim is to provide reusable, SVG-based user interface controls library. In these projects, interactive SVG is based on a scripting language (typically ECMAScript) and the DOM (including SVG-specific extensions).

Although the basis of these projects are the same, but the structure of the library is moving in a different direction. Construct such a structure has a very direct way, that is, the library provides an object-oriented ECMAScript API. In this way, if I want to create a SVG of the combo box, I can provide a SVGComboBox class. Users can create an instance of this class, call the parameter values filled in several ways, and issue drawing commands - in this way with the traditional framework of the general UI is very similar to the toolbox, like Swing, WinForms, Aqua and so on. While these libraries are in fact built on top of SVG to provide API to the library just to DOM scripting mechanisms to abstract, but almost non-existent with the SVG language itself integrate situation. Moreover, the use of custom controls for each API have to go through a learning process, and we do not have the inherent advantages of the use of XML, such as statements or semantics and so on.

Can be more of a clever way to provide a reusable library, that is, to let some XML as a public API. Back to the combo box I have just mentioned an example, I can own the name of the space to provide an XML element, such as <ui:comboBox>. Part of the library when the program loads to parse the entire document and check what parts of the <ui:comboBox>, and then construct SVGComboBox object. <ui:comboBox> element is essentially as a form of shorthand used to call SVGComboBox instance all the necessary methods. Since I custom element is part of the DOM, so the user through the DOM API to access my custom control or change the property value (such as the x coordinate location, or control content), I can still use the conversion event. As time goes by, many developers believe that this method is more appropriate. They believe that XML-centric approach can adapt to the environment in the SVG.

It has been confirmed, however, this method is not as previously thought as the best approach. Rendering the work is still carried out in the document tree, it has proved such an approach would, in some cases system crashes. All the things to put in the same tree is also risky. The biggest risk is a custom mix of information and the original structure. If different extended information on the contents of the document tree has been assumed, then the above approach would lead to incompatibilities between them.

Some SVG developers have been discussing the extension mechanism built on top of the SVG approach. These discussions W3C SVG Working Group provides the necessary information, they can address these issues in the specification. In SVG 1.2, we find the solution of the first sign, in which the emergence of a new feature called the RCC.

Lifted the veil: RCC and SVG 1.2

Rendering Custom Content (RCC) is the SVG grammar environment, the use of custom XML-based framework for the latest. RCC frame in SVG based on the concept of technology and provide a layer of very lightweight.

RCC for developers to bring the main joy is that it will SVG 1.0 previously hidden a concept well-exposed, this concept is called a shadow tree (the tree images). Tree in SVG 1.0 imaging used to expand <use>, <pattern> and <marker> the performance of these elements in SVG. Until now, SVG implementation still contains a tree image manipulation, RCC to allow any element of foreign grammar can have the public image of the tree, so that this mechanism will be exposed. SVG 1.2 trees for access to images provide a new DOM API; You can use regular DOM API, like the manipulation of regular document tree manipulation of images, like a tree. Suppose you build all the graphics and added event listener exist in a self-contained tree, the other components is difficult to touch. Even if you really want to do, but also fully aware of the tree to do any work inside is likely to be destructive. With the image tree, the document tree, the only thing left is your custom element, there are no otherness.

Your goal is to use DOM scripting, custom elements, as well as the common way to use custom elements were integrated into the document tree. RCC is only one aspect of the problem, if you want, like any other element, like SVG elements, then the event also needs the same manner. SVG 1.2 There are two other RCC-related with the new standards: DOM Level 3 Events and XML Events (see Resources). With DOM Level 3 Events, you'll be able to create custom types of special events. Thus, when the user through the graphical appearance of this element (in the image of the element tree) to choose a new value, <ui:comboBox> will be able to send a select event.

Able to send a custom event, of course good, but also need to be able to monitor these events. To do this, you can use the original DOM Level 2 routines EventTarget:: addEventListener () method. However, this approach implies the need for a programming environment, and we would normally expect a descriptive approach can be used in a given element in the realization of the event listener. With the XML Events, you can by a standard declarative syntax to monitor any event, built-in event or custom event can be. You no longer need to those based on attributes event listener (eg, onmouseover), does not need friends to help. Meanwhile, in the event area, RCC for SVG brings two new built-in events, they used the definition of foreign elements in RCC binding mechanisms. In the next article in this series you will see, these two events, and the entire RCC framework, are very good things, they make SVG developers can provide a similar element with the conventional custom SVG elements, and thus for the SVG for all XML applications paved the way for the new programming platform.


XForms is a highly abstract, XML-based solution to the HTML forms pose a challenge. It achieves complete separation of data and performance. At the same time, SVG 1.2 trees through the images and direct the event integration mechanism, providing a more scalable platform, and these encapsulated in the RCC framework. Understanding of these facts, we should begin to provide a simple way with the RCC to build custom UI, and then XForms environment, reuse of these components, thereby providing a rich user experience. The next article in this series will focus on how to create a SVG based on the RCC components, later, we go further into the integration with XForms.

XML Tutorial Articles

Can't Find What You're Looking For?

Rating: Not yet rated


No comments posted.