How to structure XML for interactive Web applications?

XML (Extensible Markup Language) is the most popular option for Ajax, simply because it is a standard intermediate language for all programming languages ​​to use. In addition, XML supports both the server and the client, making it the most flexible solution. Basically, XML also has a traditional tag structure that you are so familiar with. The structure of XML tags is the same as the tags in HTML, except that HTML tags are pre-defined as tags,, and so forth. Here is an extremely simple example of HTML table. which can be easily translated as XHTML.

XML is accepted between front end and back end and for easy communication in multiple languages. This is one of the strengths of XML. It can let us create direct connections from the GUI to a server language or a database. Communication in XML between GUI and front end allows for a completely separate separation between these two application layers. The separation of GUI with the back end logic is very important because it can give us a completely separate application in which GUI developers can do on the front end while the developers back end application working on the back end.

This seems to have a general feeling but it is an incomplete view in many companies. It keeps a clear part of the separated application for easy management and allows individual application developers to focus on one layer for development. Not only is it a method for application developers, it is equally important for any application developer working on each individual part of the application. With this structure, an application developer can focus on the special layers of the application regardless of or change adjacent layers.

XML format is very popular, but there are many important principles to consider when planning a solution. Imagine by formatting e-mail data into a structure that can be requested through an Ajax section and displayed with client-side JavaScript objects. When building this structure, we want that we can use it in many objects or components that will make this structure.

The components

XML consists of common tags called components, which are defined in the structural aspect of a web application. They can be displayed under any name, value or type of data that will be used in your application. When creating an XML structure, you will become an architect in your application, deciding what type of data to display clear items on the screen or what will happen based on human interactions. use.

Keeping the structure as abstract as possible by not naming items clearly is a very important thing for the application, but there are problems that prevent us. In this case, it is really not useful to spend time making our XML structure abstract because it may not even be necessary to reuse XML data in many parts of the application. That said, with an XML email example it is completely capable and it will be reused in other aspects of the application. The XML format below is not usable, but that is not too important.   

To keep the items selected abstract, we will change the names of the elements in the selection.


From
Subject
Date


This option provides flexibility that allows us to easily add selected items. There are many reasons to prove this; It is important to remember that we can add a new select item without changing the structure of the XML data. This has explained the reason for flexibility and an easier to change option of XML than the previous examples. If we create object-oriented objects to display data, we don't need to parse and display the code to manage the new components. Here it answers why the abstract structure is important.

For example, imagine that you need to display the same list of items in two different ways, such as data grid and e-mail preview. This setting can be used in both objects to eliminate any confusion in the code of the application. Which components have created XML here, and have a certain limit on individual components. Let's look at the properties and how they can help us to add the traditional type of information to the data.

Properties

The attributes of XML also possess traditional features that exist as we can add your components to provide more clear information for the structure. From the e-mail example, let's focus on the e-mail component. An e-mail has many attributes such as an action that is triggered when the e-mail is selected and a related icon such as closing or opening based on the read status of the e-mail. In order to present e-mails according to the XML structure, they have created a group of items that can eventually become a collection of objects or ranges when they are separated on the client side. This is where we add the action and the properties of the icon. Adding attributes to components is quite easy. Let's look at one of our ideas below to see how to add actions and attributes to an XML component.

An abstract list of selected items ( email.xml )



BUG Found]]>
2006-03-31 09:27:26


There are many important issues that require knowledge when using these attributes, especially in large applications when you make an error in the structure part, then this error can cause great devastation. when resizing. One of the biggest problems with these attributes is the inability to add multiple values ​​in the same attribute. This can cause a problem, if you decide late while you need to have more detailed examples defined as an attribute, leave you or application developers around you are changing. Multiple locations, where there are many references to attributes.

Another important issue and one we will discuss in a solution in the next section is adding HTML to your XML. HTML cannot add attributes because it will create an invalid structure. There is only one way to add HTML to the XML structure within a component. It is safer to add an element to an attribute because when you make an error and forget the format of the element including HTML, you must reformat it so that HTML accepts without quite breaking. Any code can refer to it. To add HTML to components so that it can be read by programming, you must parse it and not break the validity of XML, then we need to add the CDATA tag to the component tags.

CDATA

CDATA creates XML with many highlights, after all, web applications that use it by allowing them to add HTML to XML components. HTML can be used to display formatted data in a DOM (Document Object Model) component in your Ajax front end application. When XML is separated by the programming language we are using, the value between the component tags is also parsed. The following example shows a group of nested components in the nested component.


Grace Hopper
BUG Found
2006-03-31 09:27:26


These closed components need to be subdivided into subcomponents with separators that make the programming language understand them as child nodes. This means that the HTML closing tags within the XML components will not work because the separators will treat these components as child elements or closed components of the parent element but not the HTML tags, this will make XML invalid, causing errors or unexpected results. The following XML segment will distinguish the HTML tag as a component because they will be treated as closed XML tags instead of HTML.

BUG Found

To add HTML to the XML component, we used CDATA. XML parsers do not immediately separate the data of the following tags, although it is a valid XML structure and will eventually be the HTML format we want to display in this page. The following code will show that XML is valid for HTML closing tags in a component using CDATA.

BUG Found]]>

When this data is closed by the client side language, in this case it will be JavaScript, then the HTML will return as the content between the two tags. For example, the text value of BUG Found will display as bold text to users in the GUI if we write data for the document. Data can be written for documents by targeting a HTML tag using DOM and attaching to the data of the innerHTML attribute of JavaScript or we can simplify them by using document.write () to write prices. direct value for positioning position in the code.

When planning to format and name the tags you will use in XML, you need to remember some things. For example, it would be nice to have unique names for components. This will eliminate separation problems when using the getElementsByTagName method of JavaScript. By using this method, you will return an array of all components by the name you specify without looking at the depth where they reside.

One problem may be that these value groups with different depths will not be related to each other and can be combined into an array that does not describe the data location, this may be a Nightmare for you or application developers with you. There are many ways to separate data using closed tags with identical names, such as targeting the childNodes attribute, but this can be difficult and can extend the application development process. You can also create an object that has methods for separating clear items by name at each different depth such as XPath that is made in other languages ​​or using attributes to identify different nodes that have the same one name. For the purposes of this article, however, we simply define our structure in a way that we no longer worry about such issues.

There are many standardized ways of separating XML with different languages, but separating XML with JavaScript is a bit different. JavaScript has a method named getElementsByTagName that can target a group of components directly by name and allow us to access them to be able to separate elements or attribute values ​​easily. This parameter will return all to a single element or a group of elements by the name of the tags understood as parameters, see the example below.

response.getElementsByTagName ('items');

This method will search within a group of components and it will return an array of child nodes that you will need to extract and receive their data within the button values.