Use Yahoo UI widgets - [fleXive]

Overview

Some flexive components use the Yahoo UI toolkit for client-side widgets (e.g. fx:resultTable). To enable YUI on your page, you have to make the following modifications:

Set the "yui" flag of fx:includes in the head section of your page:
```
<fx:includes yui="true"/>
```

Add
```
<fx:yuiSetup/>
```
near the end of your page. This initializes all Yahoo widgets and loads the required libraries.

Using YUI directly

Unless you include the necessary files directly, you have to specify the required modules using flexive.yui.require, e.g.:
```
<script type="text/javascript">
    flexive.yui.require("button");
    flexive.yui.require("menu");
</script>
```
The required libraries will be included at the end of the page by the fx:yuiSetup tag.

YUI Example: a client-side result table

This page renders two tables from a FxSQL result using the fx:resultTable component.

<!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"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:fx="http://www.flexive.com/jsf/core">
  <head>
      <fx:includes yui="true"/>
  </head>
  <body class="yui-skin-sam">

    <h:form>

        <h4>Thumbnail view</h4>
        <fx:resultTable var="thumbnailsTable" value="SELECT @pk, #image/caption" viewType="thumbnails"/>

        <h4>List view (default)</h4>
        <fx:resultTable var="listTable" value="SELECT *"/>
  
    </h:form>

    <fx:yuiSetup/>
  </body>
</html>