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. The difference with the previous tutorial is that here we will be merging two xml (specifically xhtml) documents.
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 XHTML fragment into an XHTML file</title>
</head>
<body>
<div>XML object will be loaded here</div>
</body>
</html>
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.
Below is the code to create a simple fragment "xmlobject.xml" which we shall insert into the view.
xmlobject.xml:
<!DOCTYPE div PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<div xmlns="http://www.w3.org/1999/xhtml">This is a XHTML fragment.</div>Create the "loadingxml.obyx" file using the code below and put it in the same directory as our XHTML file. Note that we can use relative filepaths in Obyx.
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 view">
<output space="store" value="view" />
<input space="file" value="loadingxml.ixml"/>
</instruction>
<instruction note="replace the div in our view with the fragment">
<output space="store" value="view#//h:div" />
<input space="file" value="xmlobject.xml" />
</instruction>
<instruction note="display view (and release from store)">
<input space="store" value="view" release="true" />
</instruction>
</input>
</instruction>
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.