This tutorial assumes that you've read XOAD Page Skeleton.
XOAD HTML is an extension that allows you to update the content and the style of a page. The best way to start using XOAD HTML is to show you a basic example. Take a look at this JavaScript code that updates a DIV element:
<div id="container">Text...</div> <script type="text/javascript"> function update() { var container = document.getElementById('container'); container.innerHTML = 'Other text...'; container.style.color = 'red'; } </script> <a href="#server" onclick="update(); return false;">Update</a>
Here is the above example, but this time using XOAD HTML:
<?php class Example { function update() { // Note the '&' operator. $container =& XOAD_HTML::getElementById('container'); $container->innerHTML = 'Other text...'; $container->style['color'] = 'red'; } } define('XOAD_AUTOHANDLE', true); require_once('xoad.php'); ?> <?= XOAD_Utilities::header('.') . "\n" ?> <script type="text/javascript"> var obj = <?= XOAD_Client::register(new Example()) ?>; </script> <div id="container">Text...</div> <a href="#server" onclick="obj.update(); return false;">Update</a>
We have a class that is exported using XOAD_Client::register
(if you still haven't read XOAD Page Skeleton
go back and do it). This class has only one method update
that takes no arguments and updates the DIV element. As you can see
HTML manipulation is quite easy using XOAD HTML.
This tutorial is a bit different. It'll be organized as series of Questions and Answers. Let's get started.
A: Use XOAD_HTML::getElementsByTagName.
<?php class Example { function update() { $links =& XOAD_HTML::getElementsByTagName('a'); $links->style['backgroundColor'] = 'yellow'; } } define('XOAD_AUTOHANDLE', true); require_once('xoad.php'); ?> <?= XOAD_Utilities::header('.') . "\n" ?> <script type="text/javascript"> var obj = <?= XOAD_Client::register(new Example()) ?>; </script> <ul class="resources"> <li><a href="http://www.xoad.org/news/">News</a></li> <li><a href="http://www.xoad.org/documentation/source/">Documentation</a></li> <li><a href="http://www.xoad.org/tutorials/">Tutorials</a></li> <li><a href="http://www.xoad.org/examples/">Examples</a></li> <li><a href="http://forums.xoad.org/viewforum.php?id=2">Bugs</a></li> <li><a href="http://forums.xoad.org/viewforum.php?id=3">Support Requests</a></li> <li><a href="http://forums.xoad.org/viewforum.php?id=4">Feature Requests</a></li> <li><a href="http://forums.xoad.org/viewforum.php?id=6">Public Forums</a></li> <li class="php-books"><a href="http://www.very-clever.com/books/php"><strong>PHP books</strong></a></li> </ul> <a href="#server" onclick="obj.update(); return false;">Update</a>
A: Use XOAD_HTML::getElementsByName.
<?php class Example { function update() { $something =& XOAD_HTML::getElementsByName('something'); $something->setAttribute('disabled', true); } } define('XOAD_AUTOHANDLE', true); require_once('xoad.php'); ?> <?= XOAD_Utilities::header('.') . "\n" ?> <script type="text/javascript"> var obj = <?= XOAD_Client::register(new Example()) ?>; </script> <form action="#" method="post"> <fieldset> <legend>Choose something:</legend> <input type="radio" id="choice-1" name="something" /><label for="choice-1">Choice 1</label><br /> <input type="radio" id="choice-2" name="something" /><label for="choice-2">Choice 2</label><br /> <input type="radio" id="choice-3" name="something" checked="checked" /><label for="choice-3">Choice 3</label><br /> <input type="radio" id="choice-4" name="something" /><label for="choice-4">Choice 4</label><br /> <input type="radio" id="choice-5" name="something" /><label for="choice-5">Choice 5</label> </fieldset> </form> <a href="#server" onclick="obj.update(); return false;">Update</a>
A: Use XOAD_HTML::addScriptBlock.
<?php class Example { function alert() { XOAD_HTML::addScriptBlock('alert("Some text here...");'); } } define('XOAD_AUTOHANDLE', true); require_once('xoad.php'); ?> <?= XOAD_Utilities::header('.') . "\n" ?> <script type="text/javascript"> var obj = <?= XOAD_Client::register(new Example()) ?>; </script> <a href="#server" onclick="obj.alert(); return false;">Alert</a>
Note that the script must end with semicolon. This will not work:
XOAD_HTML::addScriptBlock('alert("Some text here...")'); XOAD_HTML::addScriptBlock('alert("Other text here...")');
This will work (note the semicolons at the end of each line):
XOAD_HTML::addScriptBlock('alert("Some text here...");'); XOAD_HTML::addScriptBlock('alert("Other text here...");');
Tip: XOAD_HTML::addScriptBlock returns a reference to an object representing the script block. You can change the block contents:
$block =& XOAD_HTML::addScriptBlock('alert("Some text here...");'); $block->script = 'alert("Changed text...");';
A: Use XOAD_HTML::cssQuery (will be available in 0.6.0.0).
<?php class Example { function update() { $links =& XOAD_HTML::cssQuery('ul li a[rel="external"]'); $links->style['color'] = 'red'; } } define('XOAD_AUTOHANDLE', true); require_once('xoad.php'); ?> <?= XOAD_Utilities::header('.') . "\n" ?> <script type="text/javascript"> var obj = <?= XOAD_Client::register(new Example()) ?>; </script> <ul class="resources"> <li><a href="http://www.xoad.org/news/">News</a></li> <li><a href="http://www.xoad.org/documentation/source/">Documentation</a></li> <li><a href="http://www.xoad.org/tutorials/">Tutorials</a></li> <li><a href="http://www.xoad.org/examples/">Examples</a></li> <li><a href="http://forums.xoad.org/viewforum.php?id=2" rel="external">Bugs</a></li> <li><a href="http://forums.xoad.org/viewforum.php?id=3" rel="external">Support Requests</a></li> <li><a href="http://forums.xoad.org/viewforum.php?id=4" rel="external">Feature Requests</a></li> <li><a href="http://forums.xoad.org/viewforum.php?id=6" rel="external">Public Forums</a></li> <li class="php-books"><a href="http://www.very-clever.com/books/php" rel="external"><strong>PHP books</strong></a></li> </ul> <a href="#server" onclick="obj.update(); return false;">Update</a>
A: Take a look at the Forms example. The full source code is available in the ZIP package.
This tutorial will be constantly updated. If you have any questions or would like to discuss the tutorial feel free to do it in the forums.
Happy coding.