[svn-components] 6956 - in /trunk/Tree/docs: img/yui1.gif tutorial.txt tutorial_example_yui.php tutorial_example_yui_full.php

Mon, 10 Dec 2007 08:42:12 -0800 

Author: dr
Date: Mon Dec 10 17:42:04 2007
New Revision: 6956

Log:
- Added YUI bits to the tutorial.

Added:
    trunk/Tree/docs/img/yui1.gif   (with props)
    trunk/Tree/docs/tutorial_example_yui.php   (with props)
    trunk/Tree/docs/tutorial_example_yui_full.php   (with props)
Modified:
    trunk/Tree/docs/tutorial.txt

Added: trunk/Tree/docs/img/yui1.gif
==============================================================================
Binary file - no diff available.

Propchange: trunk/Tree/docs/img/yui1.gif
------------------------------------------------------------------------------
    svn:mime-type = image/gif

Modified: trunk/Tree/docs/tutorial.txt
==============================================================================
--- trunk/Tree/docs/tutorial.txt [iso-8859-1] (original)
+++ trunk/Tree/docs/tutorial.txt [iso-8859-1] Mon Dec 10 17:42:04 2007
@@ -409,10 +409,56 @@
 .. figure:: img/graphviz.png
 
 
+YUI based visualization
+-----------------------
+
+Besides a console and graphical output, there is also a visitor available that
+renders the tree in a YUI_ compatible XHTML output. This can be used to
+automatically populate a YUI_ style menu. The code is pretty much the same,
+except for the addition of the xmlId argument to the constructor of
+ezcTreeVisitorYUI.
+
+.. include:: tutorial_example_yui.php
+   :literal:
+
+However, in order to actually render the menu, you need to have some specific
+javascript in the head element of your HTML. First of all you need to include
+the YUI code::
+
+    <script type="text/javascript" 
src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js";></script>
+    <script type="text/javascript" 
src="http://yui.yahooapis.com/2.3.1/build/container/container_core-min.js";></script>
+    <script type="text/javascript" 
src="http://yui.yahooapis.com/2.3.1/build/menu/menu-min.js";></script>
+
+And then you need the following code to turn the generated menu into a YUI menu
+(the {literal} opening and closing tag is required if you use the Template_
+component)::
+
+    <script type="text/javascript">
+    {literal}
+    YAHOO.util.Event.onContentReady('overview', function () {
+        var oMenu = new YAHOO.widget.MenuBar("menu", { autosubmenudisplay: 
true, showdelay: 200 });
+
+        oMenu.render();
+    });
+    {/literal}
+    </script>
+
+The full (minimal code) looks then like:
+
+.. include:: tutorial_example_yui_full.php
+   :literal:
+
+The result of that is (scaled):
+
+.. figure:: img/yui1.gif
+
+
 .. _DatabaseSchema: introduction_DatabaseSchema.html
 .. _PersistentObject: introduction_PersistentObject.html
+.. _Template: introduction_Template.html
 .. _TreeDatabaseTiein: introduction_TreeDatabaseTiein.html
 .. _TreePersistentObjectTiein: introduction_TreePersistentObjectTiein.html
+.. _YUI: http://developer.yahoo.com/yui/menu/
 
 ..
    Local Variables:

Added: trunk/Tree/docs/tutorial_example_yui.php
==============================================================================
--- trunk/Tree/docs/tutorial_example_yui.php (added)
+++ trunk/Tree/docs/tutorial_example_yui.php [iso-8859-1] Mon Dec 10 17:42:04 
2007
@@ -1,0 +1,10 @@
+<?php
+require_once 'tutorial_autoload.php';
+
+$store = new ezcTreeXmlInternalDataStore();
+$tree = new ezcTreeXml( 'files/example1.xml', $store );
+
+$visitor = new ezcTreeVisitorYUI( 'menu' );
+$tree->accept( $visitor );
+echo (string) $visitor;
+?>

Propchange: trunk/Tree/docs/tutorial_example_yui.php
------------------------------------------------------------------------------
    svn:eol-style = native

Added: trunk/Tree/docs/tutorial_example_yui_full.php
==============================================================================
--- trunk/Tree/docs/tutorial_example_yui_full.php (added)
+++ trunk/Tree/docs/tutorial_example_yui_full.php [iso-8859-1] Mon Dec 10 
17:42:04 2007
@@ -1,0 +1,29 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
+<head>
+    <link rel="stylesheet" type="text/css" 
href="http://yui.yahooapis.com/2.3.1/build/menu/assets/skins/sam/menu.css"/>
+
+    <script type="text/javascript" 
src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js";></script>
+    <script type="text/javascript" 
src="http://yui.yahooapis.com/2.3.1/build/container/container_core-min.js";></script>
+    <script type="text/javascript" 
src="http://yui.yahooapis.com/2.3.1/build/menu/menu-min.js";></script>
+    <script type="text/javascript">
+    YAHOO.util.Event.onContentReady('menu', function () {
+        var oMenu = new YAHOO.widget.MenuBar("menu", { autosubmenudisplay: 
true, showdelay: 200 });
+
+        oMenu.render();
+    });
+    </script>
+</head>
+<body  class="yui-skin-sam">
+<?php
+require_once 'tutorial_autoload.php';
+
+$store = new ezcTreeXmlInternalDataStore();
+$tree = new ezcTreeXml( 'files/example1.xml', $store );
+
+$visitor = new ezcTreeVisitorYUI( 'menu' );
+$tree->accept( $visitor );
+echo (string) $visitor;
+?>
+</body>
+</html>

Propchange: trunk/Tree/docs/tutorial_example_yui_full.php
------------------------------------------------------------------------------
    svn:eol-style = native


-- 
svn-components mailing list
svn-components@lists.ez.no
http://lists.ez.no/mailman/listinfo/svn-components

Reply via email to