There are good arguments for keeping the list separate from the body of the view, but they don't really apply here yet - so let's just stick that into the main list-view for the moment anyway, and we can always refactor the code later on.
Below is the HTML code we need to create our view, let's call it dvdlist.html
<!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>My DVD Library List-View</title>
</head>
<body>
<h2>My DVD Library</h2>
<ol id="dvdlist">
<li><a href="dvditem.obyx">[ADD NEW DVD]</a></li>
</ol>
<div id="newdivd"><!-- do NEW here --></div>
</body>
</html>
For each instance of a dvd in the list, we will be using the same basic structure:
<li><a href="dvditem.obyx?ean13">TITLE</a></li>So let's define the view for that dvd list instance: dvdli.html
<!DOCTYPE li PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<li xmlns="http://www.w3.org/1999/xhtml">
<a href="dvditem.obyx?ean13=" ><!-- title here --></a>
</li>
Notice that xhtml strict doesn't actually allow for the xmlns attribute to exist for XHTML fragments, but Obyx is able to factor that in, and it helps us as it defines the fragment as belonging to the correct xhtml namespace.
So let's now introduce a basic control for inserting our data into the list view and our much awaited first obyx code in this tutorial: dvdlist.obyx
<instruction xmlns="http://www.obyx.org" note="dvd list controller">
<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 dvdlist page view">
<output space="store" value="view"/>
<input space="file" value="dvdlist.html"/>
</instruction>
<instruction note="load dvd instance xhtml fragment">
<output space="store" value="dvdli"/>
<input space="file" value="dvdli.html"/>
</instruction>
<iteration operation="sql" note="iterate through the table">
<control value="select ean13,title from ean13item order by title"/>
<body>
<instruction note="grab a copy of the dvd instance">
<output space="store" value="item"/>
<input space="store" value="dvdli"/>
</instruction>
<instruction note="add title field to item">
<output space="store" value="item!#/h:li/h:a/comment()"/>
<input space="field" value="title"/>
</instruction>
<instruction note="add ean13 field to item href">
<output space="store" value="item#/h:li/h:a/@href/child-gap()"/>
<input space="field" value="ean13"/>
</instruction>
<instruction note="insert item into view">
<output space="store" value="view!#//h:ol[@id='dvdlist']/child-gap()"/>
<input space="store" value="item" release="true"/>
</instruction>
</body>
</iteration>
<instruction note="discard the template">
<output space="none"/>
<input space="store" value="dvdli" release="true"/>
</instruction>
<instruction note="display the view">
<input space="store" value="view" release="true"/>
</instruction>
</input>
</instruction>
At this point, we have a simple DVD list working already! We can click on any of the DVDs, and it takes us to ... a 404!
Click the link below to go to the next part of our tutorial