This tutorial covers the processes involved in loading up a HTML fragment as an object and displaying it, within a larger HTML view.
In this tutorial we will load a HTML fragment into a XHTML file, if you have started at the beginning "hello world" and also studied tutorial 2, you will find many similarities between loading a view and loading a HTML fragment into a XHTML view using OBYX, in fact the XHTML file used here, is very similar to the previous tutorial, the only thing it changes is the title, contents of the div tag and the file name, this time we will call our XHTML file, "loadingxml.ixml".
So when you place the "loadingxml.ixml" file into your directory, the browser will display the contents of the div tag, which is "XML object will be loaded here", similarly to the previous tutorial, where we loaded the view into the div, here we will load our XML object, using an OBYX file.
Create the "loadingxml.ixml" file from the code below and put it into the server.
loadingxml.ixml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Loading a HTML fragment into an XHTML file</title>
</head>
<body>
<div>XML object will be loaded here</div>
</body>
</html>
The similarities with the previous tutorial are not limited to XHTML, our OBYX file, on what concerns namespaces and creating a view, is also similar to the code used in tutorial 2, the difference being that the input value has now the name of our XHTML file, so "loadingxml.ixml" and that's where the similarities end.
If you need to review these concepts, you can go back to tutorial 2, as well as use the links on the right hand side to access the relevant tutorials on the W3Schools website.
Create the "loadingxml.obyx" file using the code below and put it in the same directory as our XHTML file, (remember we can use relative paths in OBYX, using XPath) it will not affect that file yet and will output: "Error. input:file xmlobject.xml does not exist".
This is obvious as we haven't yet created the XML object.
loadingxml.obyx:
<instruction xmlns="http://www.obyx.org">
<input>
<instruction note="declare namespace hook h for xhtml">
<output space="namespace" value="h"/>
<input value="http://www.w3.org/1999/xhtml"/>
</instruction>
<instruction note="load xml object into xhtml file">
<output space="store" value="view" />
<input space="file" value="loadingxml.ixml"/>
</instruction>
<instruction note="store object in a fragment">
<output space="store" value="fragment" />
<input space="file" value="xmlobject.xml" />
</instruction>
<instruction note="add an obejct to the view (div)">
<output space="store" value="view#//h:div" />
<input space="store" value="fragment" />
</instruction>
<instruction note="load xml object into a xhtml file">
<input space="store" value="view" />
</instruction>
</input>
</instruction>
Below is the code to create our very simple object and we call it "xmlobject.xml" as the input value defined in our OBYX file, when we put this file in the same directory, it will now be called by the OBYX file and output to the xpath defined.
xmlobject.xml:
<?xml version="1.0" encoding="UTF-8"?>
<div xmlns="http://www.w3.org/1999/xhtml">This is a XML object</div>Note that before the Xpath instruction, there is a new instruction in comparison to tutorial 2.
<instruction note="store object in a fragment">
<output space="store" value="fragment" />
<input space="file" value="xmlobject.xml" />
</instruction><output space="store" value="view#//h:div" />We have also attributed the value of "fragment" to the object, this means that only the portion of the XML file referenced will be called and displayed.
You can learn more about XPath from the W3Schools website.
This is the simplest form of a program to load a XML object into a XHTML file, we deliberately use the smallest possible amount of code to illustrate what the program is capable of doing, in larger programs it allows for the placement of an object anywhere on a web page, the use of stored objects and XPath within OBYX greatly reduces the amount of time creating XHTML templates, that is some of the power of OBYX at work separating our concerns.
By the end of this tutorial you should have knowledge about the following concept:
And also reinforced your knowledge of the following concepts:
Understanding these basic concepts are essential to OBYX programming. Spend time experimenting with each of the examples and ensure you understand why each of the elements are used.