You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by lo...@apache.org on 2020/07/30 13:22:42 UTC
svn commit: r1880449 [10/20] - /myfaces/site/publish/tobago/
Modified: myfaces/site/publish/tobago/getting-started.html
URL: http://svn.apache.org/viewvc/myfaces/site/publish/tobago/getting-started.html?rev=1880449&r1=1880448&r2=1880449&view=diff
==============================================================================
--- myfaces/site/publish/tobago/getting-started.html (original)
+++ myfaces/site/publish/tobago/getting-started.html Thu Jul 30 13:22:41 2020
@@ -1,236 +1,165 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Tobago – Getting Started</title>
+ <link rel="stylesheet" type="text/css" media="all" href="./css/maven-base.css"/>
+ <link rel="stylesheet" type="text/css" media="all" href="./css/maven-theme.css"/>
+ <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+</head>
+<body>
+<div id="header">
+ <div id="top_menu">
+ <div id="top_menu_container">
+ <div class="date">
+ Last Published: 30 Jul 2020
+ </div>
+ <ul>
+ <li>
+ <a href="http://www.apache.org/">Apache</a>
+ </li>
+ <li>
+ <a href="../">MyFaces</a>
+ </li>
+ <li>
+ <a href="./">Tobago</a>
+ </li>
+ <li>
+ <a href="mail-lists.html">Mailing Lists</a>
+ </li>
+ </ul>
+ <div class="clear"></div>
+ </div> <!-- close top_menu_container -->
+ </div> <!-- close top_menu -->
+ <div id="header_bottom">
+ <div id="logo_banner_container">
+ <div id="logo">
+ <a href="./">
+ <img src="images/tobagoLogo.png" alt=""/>
+ </a>
+ </div>
+ <div id="banner">
+ <a href="../">
+ <img src="img/banners/MyFaces_logo.jpg" alt=""/>
-
-
-
-
-
-
-
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Tobago – Getting Started</title>
- <link rel="stylesheet" type="text/css" media="all" href="./css/maven-base.css"/>
- <link rel="stylesheet" type="text/css" media="all" href="./css/maven-theme.css"/>
- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- </head>
- <body>
- <div id="header">
- <div id="top_menu">
- <div id="top_menu_container">
-
-
-
- <div class="date">
- Last Published: 16 Feb 2020
- </div>
- <ul>
- <li>
- <a href="http://www.apache.org/">Apache</a>
- </li>
- <li>
- <a href="../">MyFaces</a>
- </li>
- <li>
- <a href="./">Tobago</a>
- </li>
- <li>
- <a href="mail-lists.html">Mailing Lists</a>
- </li>
- </ul>
- <div class="clear"></div>
- </div> <!-- close top_menu_container -->
- </div> <!-- close top_menu -->
- <div id="header_bottom">
- <div id="logo_banner_container">
- <div id="logo">
- <a href="./">
-
- <img src="images/tobagoLogo.png" alt="" />
-
- </a>
- </div>
- <div id="banner">
- <a href="../">
-
- <img src="img/banners/MyFaces_logo.jpg" alt="" />
-
- </a>
- </div>
- <div class="clear"></div>
+ </a>
+ </div>
+ <div class="clear"></div>
</div> <!-- close logo_banner_container -->
- </div> <!-- close header_bottom -->
- </div> <!-- close header -->
- <div id="main_container">
- <div id="left_column">
- <div class="left_menu_top">
- <div class="left_menu_bottom">
+ </div> <!-- close header_bottom -->
+</div> <!-- close header -->
+<div id="main_container">
+ <div id="left_column">
+ <div class="left_menu_top">
+ <div class="left_menu_bottom">
<h5>Tobago</h5>
- <div class="content">
- <ul class="left_menu">
-
- <li class="none">
- <a href="index.html">Introduction</a>
- </li>
-
- <li class="none">
- <a href="http://tobago-vm.apache.org/download.html" class="externalLink">Download<span/></a>
- </li>
-
- <li class="none">
- <a href="http://tobago-vm.apache.org/" class="externalLink">Demo & Docs<span/></a>
- </li>
-
- <li class="none">
- <a href="guide.html">Guide to Tobago</a>
- </li>
+ <div class="content">
+ <ul class="left_menu">
+
+ <li class="none">
+ <a href="index.html">Introduction</a>
+ </li>
+
+ <li class="none">
+ <a href="http://tobago-vm.apache.org/download.html" class="externalLink">Download<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="http://tobago-vm.apache.org/" class="externalLink">Demo & Docs<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="guide.html">Guide to Tobago</a>
+ </li>
</ul>
- </div><!-- close content -->
- </div><!-- close left_menu_bottom -->
+ </div><!-- close content -->
+ </div><!-- close left_menu_bottom -->
</div><!-- close left_menu_top -->
- <div class="left_menu_top">
- <div class="left_menu_bottom">
+ <div class="left_menu_top">
+ <div class="left_menu_bottom">
<h5>Project Documentation</h5>
- <div class="content">
- <ul class="left_menu">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li class="collapsed">
- <a href="project-info.html">Project Information</a>
- </li>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li class="collapsed">
- <a href="project-reports.html">Project Reports</a>
- </li>
+ <div class="content">
+ <ul class="left_menu">
+
+
+ <li class="collapsed">
+ <a href="project-info.html">Project Information</a>
+ </li>
+
+
+ <li class="collapsed">
+ <a href="project-reports.html">Project Reports</a>
+ </li>
</ul>
- </div><!-- close content -->
- </div><!-- close left_menu_bottom -->
+ </div><!-- close content -->
+ </div><!-- close left_menu_bottom -->
</div><!-- close left_menu_top -->
- <div class="left_menu_top">
- <div class="left_menu_bottom">
+ <div class="left_menu_top">
+ <div class="left_menu_bottom">
<h5>Foundation</h5>
- <div class="content">
- <ul class="left_menu">
-
- <li class="none">
- <a href="http://apache.org/" class="externalLink">ASF<span/></a>
- </li>
-
- <li class="none">
- <a href="http://www.apache.org/foundation/sponsorship.html" class="externalLink">Sponsorship<span/></a>
- </li>
-
- <li class="none">
- <a href="http://www.apache.org/foundation/thanks.html" class="externalLink">Thanks<span/></a>
- </li>
-
- <li class="none">
- <a href="http://www.apache.org/security/" class="externalLink">Security<span/></a>
- </li>
-
- <li class="none">
- <a href="http://www.apache.org/licenses/" class="externalLink">License<span/></a>
- </li>
+ <div class="content">
+ <ul class="left_menu">
+
+ <li class="none">
+ <a href="http://apache.org/" class="externalLink">ASF<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="http://www.apache.org/foundation/sponsorship.html" class="externalLink">Sponsorship<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="http://www.apache.org/foundation/thanks.html" class="externalLink">Thanks<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="http://www.apache.org/security/" class="externalLink">Security<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="http://www.apache.org/licenses/" class="externalLink">License<span/></a>
+ </li>
</ul>
- </div><!-- close content -->
- </div><!-- close left_menu_bottom -->
+ </div><!-- close content -->
+ </div><!-- close left_menu_bottom -->
</div><!-- close left_menu_top -->
- <div id="powered_by">
- <a href="http://maven.apache.org/" title="Built by Maven" class="poweredBy">
- <img alt="Built by Maven" src="./img/banners/maven-feather.png"></img>
- </a>
- </div> <!-- close powered_by -->
- <div id="powered_by">
- <a href="http://www.apache.org/events/current-event.html" title="ApacheCon">
- <img alt="ApacheCon" src="http://www.apache.org/events/current-event-125x125.png" />
- </a>
- </div>
- <div class="clear"></div>
+ <div id="powered_by">
+ <a href="http://maven.apache.org/" title="Built by Maven" class="poweredBy">
+ <img alt="Built by Maven" src="./img/banners/maven-feather.png"></img>
+ </a>
+ </div> <!-- close powered_by -->
+ <div id="powered_by">
+ <a href="http://www.apache.org/events/current-event.html" title="ApacheCon">
+ <img alt="ApacheCon" src="http://www.apache.org/events/current-event-125x125.png"/>
+ </a>
</div>
- <div id="body_column">
- <div>
+ <div class="clear"></div>
+ </div>
+ <div id="body_column">
+ <div>
<div class="section">
-<h2><a name="Content_was_moved"></a>Content was moved</h2>
-<p>The content of this page was moved to <a class="externalLink" href="http://tobago-vm.apache.org/getting-started.html"></a></p></div>
+ <h2><a name="Content_was_moved"></a>Content was moved</h2>
+ <p>The content of this page was moved to <a class="externalLink"
+ href="http://tobago-vm.apache.org/getting-started.html"></a></p>
</div>
</div>
- <div class="clear"></div>
- </div> <!-- close main container -->
- <div id="footer">
- <div class="copyright">
- ©
- 2002-2020
- Apache Software Foundation, Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.<br/>
- Apache MyFaces, Apache Tobago, Apache, the Apache feather logo, and the Apache MyFaces project logos are trademarks of The Apache Software Foundation.
- </div><!-- close copyright -->
- </div><!-- close footer -->
- </body>
+ </div>
+ <div class="clear"></div>
+</div> <!-- close main container -->
+<div id="footer">
+ <div class="copyright">
+ ©
+ 2002-2020
+ Apache Software Foundation, Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License,
+ Version 2.0</a>.<br/>
+ Apache MyFaces, Apache Tobago, Apache, the Apache feather logo, and the Apache MyFaces project logos are trademarks
+ of The Apache Software Foundation.
+ </div><!-- close copyright -->
+</div><!-- close footer -->
+</body>
</html>
Modified: myfaces/site/publish/tobago/guide.html
URL: http://svn.apache.org/viewvc/myfaces/site/publish/tobago/guide.html?rev=1880449&r1=1880448&r2=1880449&view=diff
==============================================================================
--- myfaces/site/publish/tobago/guide.html (original)
+++ myfaces/site/publish/tobago/guide.html Thu Jul 30 13:22:41 2020
@@ -1,293 +1,271 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Tobago – Guide to Tobago</title>
+ <link rel="stylesheet" type="text/css" media="all" href="./css/maven-base.css"/>
+ <link rel="stylesheet" type="text/css" media="all" href="./css/maven-theme.css"/>
+ <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
+</head>
+<body>
+<div id="header">
+ <div id="top_menu">
+ <div id="top_menu_container">
+ <div class="date">
+ Last Published: 30 Jul 2020
+ </div>
+ <ul>
+ <li>
+ <a href="http://www.apache.org/">Apache</a>
+ </li>
+ <li>
+ <a href="../">MyFaces</a>
+ </li>
+ <li>
+ <a href="./">Tobago</a>
+ </li>
+ <li>
+ <a href="mail-lists.html">Mailing Lists</a>
+ </li>
+ </ul>
+ <div class="clear"></div>
+ </div> <!-- close top_menu_container -->
+ </div> <!-- close top_menu -->
+ <div id="header_bottom">
+ <div id="logo_banner_container">
+ <div id="logo">
+ <a href="./">
+ <img src="images/tobagoLogo.png" alt=""/>
+ </a>
+ </div>
+ <div id="banner">
+ <a href="../">
+ <img src="img/banners/MyFaces_logo.jpg" alt=""/>
+ </a>
+ </div>
+ <div class="clear"></div>
+ </div> <!-- close logo_banner_container -->
+ </div> <!-- close header_bottom -->
+</div> <!-- close header -->
+<div id="main_container">
+ <div id="left_column">
+ <div class="left_menu_top">
+ <div class="left_menu_bottom">
+ <h5>Tobago</h5>
+ <div class="content">
+ <ul class="left_menu">
+ <li class="none">
+ <a href="index.html">Introduction</a>
+ </li>
+
+ <li class="none">
+ <a href="http://tobago-vm.apache.org/download.html" class="externalLink">Download<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="http://tobago-vm.apache.org/" class="externalLink">Demo & Docs<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="guide.html" class="selected">Guide to Tobago</a>
+ </li>
+ </ul>
+ </div><!-- close content -->
+ </div><!-- close left_menu_bottom -->
+ </div><!-- close left_menu_top -->
+ <div class="left_menu_top">
+ <div class="left_menu_bottom">
+ <h5>Project Documentation</h5>
+ <div class="content">
+ <ul class="left_menu">
+ <li class="collapsed">
+ <a href="project-info.html">Project Information</a>
+ </li>
-
-
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>Tobago – Guide to Tobago</title>
- <link rel="stylesheet" type="text/css" media="all" href="./css/maven-base.css"/>
- <link rel="stylesheet" type="text/css" media="all" href="./css/maven-theme.css"/>
- <link rel="stylesheet" type="text/css" media="print" href="./css/print.css"/>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- </head>
- <body>
- <div id="header">
- <div id="top_menu">
- <div id="top_menu_container">
-
-
-
- <div class="date">
- Last Published: 16 Feb 2020
- </div>
- <ul>
- <li>
- <a href="http://www.apache.org/">Apache</a>
- </li>
- <li>
- <a href="../">MyFaces</a>
- </li>
- <li>
- <a href="./">Tobago</a>
- </li>
- <li>
- <a href="mail-lists.html">Mailing Lists</a>
- </li>
- </ul>
- <div class="clear"></div>
- </div> <!-- close top_menu_container -->
- </div> <!-- close top_menu -->
- <div id="header_bottom">
- <div id="logo_banner_container">
- <div id="logo">
- <a href="./">
-
- <img src="images/tobagoLogo.png" alt="" />
-
- </a>
- </div>
- <div id="banner">
- <a href="../">
-
- <img src="img/banners/MyFaces_logo.jpg" alt="" />
-
- </a>
- </div>
- <div class="clear"></div>
- </div> <!-- close logo_banner_container -->
- </div> <!-- close header_bottom -->
- </div> <!-- close header -->
- <div id="main_container">
- <div id="left_column">
- <div class="left_menu_top">
- <div class="left_menu_bottom">
- <h5>Tobago</h5>
- <div class="content">
- <ul class="left_menu">
-
- <li class="none">
- <a href="index.html">Introduction</a>
- </li>
-
- <li class="none">
- <a href="http://tobago-vm.apache.org/download.html" class="externalLink">Download<span/></a>
- </li>
-
- <li class="none">
- <a href="http://tobago-vm.apache.org/" class="externalLink">Demo & Docs<span/></a>
- </li>
-
- <li class="none">
- <a href="guide.html" class="selected">Guide to Tobago</a>
- </li>
+ <li class="collapsed">
+ <a href="project-reports.html">Project Reports</a>
+ </li>
</ul>
- </div><!-- close content -->
- </div><!-- close left_menu_bottom -->
+ </div><!-- close content -->
+ </div><!-- close left_menu_bottom -->
</div><!-- close left_menu_top -->
- <div class="left_menu_top">
- <div class="left_menu_bottom">
- <h5>Project Documentation</h5>
- <div class="content">
- <ul class="left_menu">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li class="collapsed">
- <a href="project-info.html">Project Information</a>
- </li>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <li class="collapsed">
- <a href="project-reports.html">Project Reports</a>
- </li>
+ <div class="left_menu_top">
+ <div class="left_menu_bottom">
+ <h5>Foundation</h5>
+ <div class="content">
+ <ul class="left_menu">
+
+ <li class="none">
+ <a href="http://apache.org/" class="externalLink">ASF<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="http://www.apache.org/foundation/sponsorship.html" class="externalLink">Sponsorship<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="http://www.apache.org/foundation/thanks.html" class="externalLink">Thanks<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="http://www.apache.org/security/" class="externalLink">Security<span/></a>
+ </li>
+
+ <li class="none">
+ <a href="http://www.apache.org/licenses/" class="externalLink">License<span/></a>
+ </li>
</ul>
- </div><!-- close content -->
- </div><!-- close left_menu_bottom -->
+ </div><!-- close content -->
+ </div><!-- close left_menu_bottom -->
</div><!-- close left_menu_top -->
- <div class="left_menu_top">
- <div class="left_menu_bottom">
- <h5>Foundation</h5>
- <div class="content">
- <ul class="left_menu">
-
- <li class="none">
- <a href="http://apache.org/" class="externalLink">ASF<span/></a>
- </li>
-
- <li class="none">
- <a href="http://www.apache.org/foundation/sponsorship.html" class="externalLink">Sponsorship<span/></a>
- </li>
-
- <li class="none">
- <a href="http://www.apache.org/foundation/thanks.html" class="externalLink">Thanks<span/></a>
+ <div id="powered_by">
+ <a href="http://maven.apache.org/" title="Built by Maven" class="poweredBy">
+ <img alt="Built by Maven" src="./img/banners/maven-feather.png"></img>
+ </a>
+ </div> <!-- close powered_by -->
+ <div id="powered_by">
+ <a href="http://www.apache.org/events/current-event.html" title="ApacheCon">
+ <img alt="ApacheCon" src="http://www.apache.org/events/current-event-125x125.png"/>
+ </a>
+ </div>
+ <div class="clear"></div>
+ </div>
+ <div id="body_column">
+ <div>
+ <div class="section">
+ <h2><a name="Guide_to_Tobago">Guide to Tobago</a></h2>
+ <p><i>This guide covers primarily Tobago 1 and 2. Most basic ideas are the same in Tobago 3, but documented in
+ the demo application.</i></p>
+ <hr/>
+ <p>Tobago is a JavaServer Faces (JSF) framework and component library. It provides a comfortable way to layout
+ screens of desktop-like applications with a consistent look & feel. Tobago emphasizes the separation of
+ structure and design of screens. Screens are developed independently of the view technology -- no HTML, CSS,
+ or JavaScript. Because of strict separation a screen can be displayed with different themes. These themes can
+ be used to render screens according to different corporate design without changing the sources of the
+ screens.</p>
+ <p>This guide assumes basic knowledge about JSF. For more information about JSF see one of the various books
+ about JSF, the <a class="externalLink" href="http://java.sun.com/javaee/5/docs/tutorial/doc/bnaph.html">Sun
+ Java 5 Tutorial</a> or the <a class="externalLink"
+ href="http://java.sun.com/javaee/javaserverfaces/download.html">JSF
+ Specification.</a></p></div>
+ <div class="section">
+ <h2><a name="Content">Content</a></h2>
+ <p> </p>
+ <ul>
+ <li><a href="#Guide_to_Tobago">Guide to Tobago</a></li>
+ <li><a href="#Content">Content</a></li>
+ <li><a href="#Environment">Environment</a>
+ <ul>
+ <li><a href="#Building_and_Deploying_the_Tobago_Examples">Building and Deploying the Tobago Examples</a>
+ </li>
+ <li><a href="#Building_Tobago">Building Tobago</a></li>
+ <li><a href="#Building_your_own_Tobago_Application">Building your own Tobago Application</a></li>
+ <li><a href="#A_Minimal_Tobago_Page">A Minimal Tobago Page</a></li>
+ </ul>
</li>
-
- <li class="none">
- <a href="http://www.apache.org/security/" class="externalLink">Security<span/></a>
+ <li><a href="#Creating_a_Tobago_page">Creating a Tobago page</a>
+ <ul>
+ <li><a href="#Basic_Controls">Basic Controls</a></li>
+ <li><a href="#Text_Input">Text Input</a></li>
+ <li><a href="#Sheet">Sheet</a></li>
+ <li><a href="#Tab_Group">Tab Group</a></li>
+ <li><a href="#Menu">Menu</a></li>
+ <li><a href="#Tool_Bar">Tool Bar</a></li>
+ <li><a href="#Popup">Popup</a></li>
+ <li><a href="#File_Upload">File Upload</a></li>
+ </ul>
</li>
-
- <li class="none">
- <a href="http://www.apache.org/licenses/" class="externalLink">License<span/></a>
+ <li><a href="#Features_and_Concepts">Features and Concepts</a>
+ <ul>
+ <li><a href="#Layout">Layout</a></li>
+ <li><a href="#Themes">Themes</a></li>
+ <li><a href="#Markup">Markup</a></li>
+ <li><a href="#Partial_Rendering">Partial Rendering</a></li>
+ <li><a href="#Virtual_Forms">Virtual Forms</a></li>
+ <li><a href="#Security">Security</a></li>
+ </ul>
</li>
- </ul>
- </div><!-- close content -->
- </div><!-- close left_menu_bottom -->
- </div><!-- close left_menu_top -->
- <div id="powered_by">
- <a href="http://maven.apache.org/" title="Built by Maven" class="poweredBy">
- <img alt="Built by Maven" src="./img/banners/maven-feather.png"></img>
- </a>
- </div> <!-- close powered_by -->
- <div id="powered_by">
- <a href="http://www.apache.org/events/current-event.html" title="ApacheCon">
- <img alt="ApacheCon" src="http://www.apache.org/events/current-event-125x125.png" />
- </a>
- </div>
- <div class="clear"></div>
- </div>
- <div id="body_column">
- <div>
+ </ul>
+ </div>
<div class="section">
-<h2><a name="Guide_to_Tobago">Guide to Tobago</a></h2>
-<p><i>This guide covers primarily Tobago 1 and 2. Most basic ideas are the same in Tobago 3, but documented in the demo application.</i></p><hr />
-<p>Tobago is a JavaServer Faces (JSF) framework and component library. It provides a comfortable way to layout screens of desktop-like applications with a consistent look & feel. Tobago emphasizes the separation of structure and design of screens. Screens are developed independently of the view technology -- no HTML, CSS, or JavaScript. Because of strict separation a screen can be displayed with different themes. These themes can be used to render screens according to different corporate design without changing the sources of the screens.</p>
-<p>This guide assumes basic knowledge about JSF. For more information about JSF see one of the various books about JSF, the <a class="externalLink" href="http://java.sun.com/javaee/5/docs/tutorial/doc/bnaph.html">Sun Java 5 Tutorial</a> or the <a class="externalLink" href="http://java.sun.com/javaee/javaserverfaces/download.html">JSF Specification.</a></p></div>
-<div class="section">
-<h2><a name="Content">Content</a></h2>
-<p> </p>
-<ul>
-<li><a href="#Guide_to_Tobago">Guide to Tobago</a></li>
-<li><a href="#Content">Content</a></li>
-<li><a href="#Environment">Environment</a>
-<ul>
-<li><a href="#Building_and_Deploying_the_Tobago_Examples">Building and Deploying the Tobago Examples</a></li>
-<li><a href="#Building_Tobago">Building Tobago</a></li>
-<li><a href="#Building_your_own_Tobago_Application">Building your own Tobago Application</a></li>
-<li><a href="#A_Minimal_Tobago_Page">A Minimal Tobago Page</a></li></ul></li>
-<li><a href="#Creating_a_Tobago_page">Creating a Tobago page</a>
-<ul>
-<li><a href="#Basic_Controls">Basic Controls</a></li>
-<li><a href="#Text_Input">Text Input</a></li>
-<li><a href="#Sheet">Sheet</a></li>
-<li><a href="#Tab_Group">Tab Group</a></li>
-<li><a href="#Menu">Menu</a></li>
-<li><a href="#Tool_Bar">Tool Bar</a></li>
-<li><a href="#Popup">Popup</a></li>
-<li><a href="#File_Upload">File Upload</a></li></ul></li>
-<li><a href="#Features_and_Concepts">Features and Concepts</a>
-<ul>
-<li><a href="#Layout">Layout</a></li>
-<li><a href="#Themes">Themes</a></li>
-<li><a href="#Markup">Markup</a></li>
-<li><a href="#Partial_Rendering">Partial Rendering</a></li>
-<li><a href="#Virtual_Forms">Virtual Forms</a></li>
-<li><a href="#Security">Security</a></li></ul></li></ul></div>
-<div class="section">
-<h2><a name="Environment">Environment</a></h2>
-<div class="section">
-<h3><a name="Building_and_Deploying_the_Tobago_Examples">Building and Deploying the Tobago Examples</a></h3>
-<p>Tobago uses Maven as a build management system. The provided examples are normally build with Maven, but it would be easy to use an alternative build system. The necessary artifacts can be downloaded <a href="./download.html">here</a> or from the Maven repository.</p>
-<p>We will use the address book demo as an example in this guide. Since the address book example is currently not part of the Tobago distribution, you have to check-out the sources from the Apache Subversion repository. We will use the latest release tag for this.</p>
-<div class="source">
-<pre>svn co https://svn.apache.org/repos/asf/myfaces/tobago/tags/tobago-1.0.22/example/addressbook/ tobago-addressbook</pre></div>
-<p>You will need Java 5 and Maven 2.0.9 or later to build the address book example. Use the following command to compile the sources and deploy the web application on an embedded Jetty server:</p>
-<div class="source">
-<pre>mvn jetty:run-exploded</pre></div>
-<p>If you point your browser to <a class="externalLink" href="http://localhost:8080/">http://localhost:8080/</a> and you will be directed to the login dialog of the address book example.<br /> </p><img src="images/guide-addressbook-login.png" alt="Address Book Login" />
-<p>You can click on the guest/guest or admin/admin links or fill in the authentication information yourself and press the 'Login' button. After displaying a splash screen for a while the application will direct you to the address list page.<br /> </p><img src="images/guide-addressbook-list.png" alt="Address List" />
-<p>A freshly started instance of the address book example will not contain any addresses in the list. But you can add addresses by pressing the 'New' button in the tool bar. The addresses will be stored in an embedded Derby database.</p></div>
-<div class="section">
-<h3><a name="Building_Tobago">Building Tobago</a></h3>
-<p>To use the latest version of Tobago you can use the snapshot artifacts build by our continuous integration server Continuum, which are available in the <a class="externalLink" href="https://repository.apache.org/content/repositories/snapshots/org/apache/myfaces/tobago/">Apache snapshot repository.</a></p>
-<p>Alternatively, you can build Tobago yourself. You will need Java 5 and Maven 2.0.9 or later.</p>
-<p>Check-out Tobago from the Apache Subversion repository</p>
-<div class="source">
-<pre>svn co https://svn.apache.org/repos/asf/myfaces/tobago/trunk/ tobago</pre></div>
-<p>To build the complete project with all sub-modules you have to enter the following command</p>
-<div class="source">
-<pre>mvn install</pre></div>
-<p>For more information on building Tobago -- especially the 1.0.x branch -- see <a href="./getting-started.html">Getting Started.</a></p></div>
-<div class="section">
-<h3><a name="Building_your_own_Tobago_Application">Building your own Tobago Application</a></h3>
-<p>The Tobago example distribution contains the tobago-example-blank WAR, which can act as starting point for your own Tobago application. Since Tobago is based on JSF you need a JSF implementation if the application server you are targeting doesn't contain one.</p>
-<p>If you cannot use Java 5 or higher you can use retrotranslated JARs from the Tobago distribution to develop and run Tobago applications with Java 1.4 (only Tobago 1.0.x).</p>
-<p>A Tobago application is a web application which is packaged as a WAR. For a JSF application the <tt>FacesServlet</tt> needs to be configured in the <tt>/WEB-INF/web.xml</tt>. To serve the internal resources of Tobago directly from the Tobago JARs the Tobago <tt>ResourceServlet</tt> has to configured, too. The configuration of a Tobago application is controlled by the <tt>WEB-INF/tobago-config.xml</tt> file. This can be used to declare the available themes and the default theme. Additionally, it can be used to locally add markup -- see the <a href="#Themes">Themes</a> section for further information.</p></div>
-<div class="section">
-<h3><a name="A_Minimal_Tobago_Page">A Minimal Tobago Page</a></h3>
-<p>You can use JSP or Facelets to write Tobago pages. For Facelets support the extension module tobago-facelets has to be added as a dependency. Because the address book example uses JSP as rendering technology we will focus on JSP for now.</p>
-<p>Tobago provides two tag libraries -- the core library and the extension library. The corresponding TLDs contain documentation for the provided tags which is generated from annotations on the underlying tag classes. The core tag library contains basic controls and the extension library convenience tags for pre-assembled tag compositions -- for example a composition of a label and an input control.</p>
-<p>A minimal Tobago JSP page looks like this:</p>
-<div class="source">
+ <h2><a name="Environment">Environment</a></h2>
+ <div class="section">
+ <h3><a name="Building_and_Deploying_the_Tobago_Examples">Building and Deploying the Tobago Examples</a></h3>
+ <p>Tobago uses Maven as a build management system. The provided examples are normally build with Maven, but it
+ would be easy to use an alternative build system. The necessary artifacts can be downloaded <a
+ href="./download.html">here</a> or from the Maven repository.</p>
+ <p>We will use the address book demo as an example in this guide. Since the address book example is currently
+ not part of the Tobago distribution, you have to check-out the sources from the Apache Subversion
+ repository. We will use the latest release tag for this.</p>
+ <div class="source">
+ <pre>svn co https://svn.apache.org/repos/asf/myfaces/tobago/tags/tobago-1.0.22/example/addressbook/ tobago-addressbook</pre>
+ </div>
+ <p>You will need Java 5 and Maven 2.0.9 or later to build the address book example. Use the following command
+ to compile the sources and deploy the web application on an embedded Jetty server:</p>
+ <div class="source">
+ <pre>mvn jetty:run-exploded</pre>
+ </div>
+ <p>If you point your browser to <a class="externalLink"
+ href="http://localhost:8080/">http://localhost:8080/</a> and you will be
+ directed to the login dialog of the address book example.<br/> </p><img
+ src="images/guide-addressbook-login.png" alt="Address Book Login"/>
+ <p>You can click on the guest/guest or admin/admin links or fill in the authentication information yourself
+ and press the 'Login' button. After displaying a splash screen for a while the application will direct you
+ to the address list page.<br/> </p><img src="images/guide-addressbook-list.png" alt="Address List"/>
+ <p>A freshly started instance of the address book example will not contain any addresses in the list. But you
+ can add addresses by pressing the 'New' button in the tool bar. The addresses will be stored in an embedded
+ Derby database.</p></div>
+ <div class="section">
+ <h3><a name="Building_Tobago">Building Tobago</a></h3>
+ <p>To use the latest version of Tobago you can use the snapshot artifacts build by our continuous integration
+ server Continuum, which are available in the <a class="externalLink"
+ href="https://repository.apache.org/content/repositories/snapshots/org/apache/myfaces/tobago/">Apache
+ snapshot repository.</a></p>
+ <p>Alternatively, you can build Tobago yourself. You will need Java 5 and Maven 2.0.9 or later.</p>
+ <p>Check-out Tobago from the Apache Subversion repository</p>
+ <div class="source">
+ <pre>svn co https://svn.apache.org/repos/asf/myfaces/tobago/trunk/ tobago</pre>
+ </div>
+ <p>To build the complete project with all sub-modules you have to enter the following command</p>
+ <div class="source">
+ <pre>mvn install</pre>
+ </div>
+ <p>For more information on building Tobago -- especially the 1.0.x branch -- see <a
+ href="./getting-started.html">Getting Started.</a></p></div>
+ <div class="section">
+ <h3><a name="Building_your_own_Tobago_Application">Building your own Tobago Application</a></h3>
+ <p>The Tobago example distribution contains the tobago-example-blank WAR, which can act as starting point for
+ your own Tobago application. Since Tobago is based on JSF you need a JSF implementation if the application
+ server you are targeting doesn't contain one.</p>
+ <p>If you cannot use Java 5 or higher you can use retrotranslated JARs from the Tobago distribution to develop
+ and run Tobago applications with Java 1.4 (only Tobago 1.0.x).</p>
+ <p>A Tobago application is a web application which is packaged as a WAR. For a JSF application the <tt>FacesServlet</tt>
+ needs to be configured in the <tt>/WEB-INF/web.xml</tt>. To serve the internal resources of Tobago directly
+ from the Tobago JARs the Tobago <tt>ResourceServlet</tt> has to configured, too. The configuration of a
+ Tobago application is controlled by the <tt>WEB-INF/tobago-config.xml</tt> file. This can be used to declare
+ the available themes and the default theme. Additionally, it can be used to locally add markup -- see the <a
+ href="#Themes">Themes</a> section for further information.</p></div>
+ <div class="section">
+ <h3><a name="A_Minimal_Tobago_Page">A Minimal Tobago Page</a></h3>
+ <p>You can use JSP or Facelets to write Tobago pages. For Facelets support the extension module
+ tobago-facelets has to be added as a dependency. Because the address book example uses JSP as rendering
+ technology we will focus on JSP for now.</p>
+ <p>Tobago provides two tag libraries -- the core library and the extension library. The corresponding TLDs
+ contain documentation for the provided tags which is generated from annotations on the underlying tag
+ classes. The core tag library contains basic controls and the extension library convenience tags for
+ pre-assembled tag compositions -- for example a composition of a label and an input control.</p>
+ <p>A minimal Tobago JSP page looks like this:</p>
+ <div class="source">
<pre><%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tobago/component" prefix="tc" %>
@@ -299,14 +277,21 @@
</f:facet>
<tc:out value="Hello World"/>
</tc:page>
-</f:view></pre></div>
-<p>A similar page is part of the blank WAR: <br /><a class="externalLink" href="https://svn.apache.org/repos/asf/myfaces/tobago/tags/tobago-1.0.22/example/blank/src/main/webapp/helloWorld.jsp">https://svn.apache.org/repos/asf/myfaces/tobago/tags/tobago-1.0.22/example/blank/src/main/webapp/helloWorld.jsp</a></p></div></div>
-<div class="section">
-<h2><a name="Creating_a_Tobago_page">Creating a Tobago page</a></h2>
-<p>The address book example needs an address editing page to add new addresses to the address book and to update existing ones.</p>
-<p>A simple version of an address editor allows to edit the first and last name of a person and basic address data like street, house number and city. Such an editor could look like this:<br /> </p><img src="images/guide-simple-editor.png" alt="Simple Address Editor" />
-<p>This page is generated by the following code:</p>
-<div class="source">
+</f:view></pre>
+ </div>
+ <p>A similar page is part of the blank WAR: <br/><a class="externalLink"
+ href="https://svn.apache.org/repos/asf/myfaces/tobago/tags/tobago-1.0.22/example/blank/src/main/webapp/helloWorld.jsp">https://svn.apache.org/repos/asf/myfaces/tobago/tags/tobago-1.0.22/example/blank/src/main/webapp/helloWorld.jsp</a>
+ </p></div>
+ </div>
+ <div class="section">
+ <h2><a name="Creating_a_Tobago_page">Creating a Tobago page</a></h2>
+ <p>The address book example needs an address editing page to add new addresses to the address book and to update
+ existing ones.</p>
+ <p>A simple version of an address editor allows to edit the first and last name of a person and basic address
+ data like street, house number and city. Such an editor could look like this:<br/> </p><img
+ src="images/guide-simple-editor.png" alt="Simple Address Editor"/>
+ <p>This page is generated by the following code:</p>
+ <div class="source">
<pre><%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://myfaces.apache.org/tobago/component" prefix="tc" %>
@@ -314,7 +299,7 @@
<f:view>
<tc:page width="400">
<f:facet name="layout">
- <tc:gridLayout rows="fixed;*" margin="10"/>
+ <tc:gridLayout rows="fixed;1fr" margin="10"/>
</f:facet>
<tc:box label="Address">
<f:facet name="layout">
@@ -336,36 +321,63 @@
<tc:cell />
</tc:page>
-</f:view></pre></div>
-<p>We have a box with the label "Address" containing four rows of input controls for first name, last name, street, house number, and city.</p>
-<div class="section">
-<h3><a name="Basic_Controls">Basic Controls</a></h3>
-<p>HTML offers a decent set of basic controls. These controls form the basis of the Tobago controls including single-line input controls, text areas, check boxes, radio buttons, links, buttons, labels, and others.</p>
-<p>The Tobago demo contains an overview page for the basic controls.<br /> </p><img src="images/guide-basic-controls.png" alt="Basic Controls " />
-<p>Live demo of the basic controls: <a class="externalLink" href="http://tobago-vm.apache.org/demo-2-release/faces/content/01-basic/basic.xhtml">http://tobago-vm.apache.org/demo-2-release/faces/content/01-basic/basic.xhtml</a></p>
-<p>The basic controls page also shows two variants of a normal input control: the date input control and the time input control.</p></div>
-<div class="section">
-<h3><a name="Text_Input">Text Input</a></h3>
-<p>The single-line text input control comes in two flavors: the <tt><tc:in></tt> tag from the core tag library (<tt>tc</tt> is the preferred prefix for the core tag library) and the <tt><tx:in></tt> from the extension tag library (<tt>tx</tt>).</p>
-<p>The extension tag library provides convenient shorthands for boilerplate code. For every input control there is for example an extended version, which layouts a label next before the input field. The label is connected with the field. If the label is clicked the related field is focused.</p>
-<p>A code fragment from the address book example:</p>
-<div class="source">
+</f:view></pre>
+ </div>
+ <p>We have a box with the label "Address" containing four rows of input controls for first name, last
+ name, street, house number, and city.</p>
+ <div class="section">
+ <h3><a name="Basic_Controls">Basic Controls</a></h3>
+ <p>HTML offers a decent set of basic controls. These controls form the basis of the Tobago controls including
+ single-line input controls, text areas, check boxes, radio buttons, links, buttons, labels, and others.</p>
+ <p>The Tobago demo contains an overview page for the basic controls.<br/> </p><img
+ src="images/guide-basic-controls.png" alt="Basic Controls "/>
+ <p>Live demo of the basic controls: <a class="externalLink"
+ href="http://tobago-vm.apache.org/demo-2-release/faces/content/01-basic/basic.xhtml">http://tobago-vm.apache.org/demo-2-release/faces/content/01-basic/basic.xhtml</a>
+ </p>
+ <p>The basic controls page also shows two variants of a normal input control: the date input control and the
+ time input control.</p></div>
+ <div class="section">
+ <h3><a name="Text_Input">Text Input</a></h3>
+ <p>The single-line text input control comes in two flavors: the <tt><tc:in></tt> tag from the core tag
+ library (<tt>tc</tt> is the preferred prefix for the core tag library) and the <tt><tx:in></tt> from
+ the extension tag library (<tt>tx</tt>).</p>
+ <p>The extension tag library provides convenient shorthands for boilerplate code. For every input control
+ there is for example an extended version, which layouts a label next before the input field. The label is
+ connected with the field. If the label is clicked the related field is focused.</p>
+ <p>A code fragment from the address book example:</p>
+ <div class="source">
<pre><tx:in value="#{controller.currentAddress.firstName}"
label="#{bundle.editorFirstName}" required="true">
<f:validateLength minimum="2" maximum="20"/>
-</tx:in></pre></div>
-<p>The <tt>value</tt> attribute refers the content of the control. If a value binding is used, this content can be written back into a bean property.</p>
-<p>The <tt>label</tt> attribute generates the textual description for the control. The theme decides how the label is actually rendered, for example it assigns a default width. This width can be overwritten with the <tt>labelWidth</tt> attribute. If you utilize a value binding to a resource bundle declared by a <tt><tc:loadBundle></tt> tag, you automatically get localization for the text labels. An underscore in the label transforms the following character into an access key. The theme normally underlines the access key to make this circumstance visible to the user. The access key can be used to quickly focus the related input control by pressing <tt>Alt</tt> in combination with the access key.</p>
-<p>If the control is marked as <tt>required</tt> the respective validation takes place. Additionally, the theme tries to visualize this fact. Speyside renders a small check mark icon inside the field, which vanishes if the field contains any data.</p>
-<p>For more information about the possible attributes of an input tag see the TLD documentation for <a class="externalLink" href="http://myfaces.apache.org/tobago/tobago-core/tlddoc/tc/in.html"><tt><tc:in></tt></a> and <a class="externalLink" href="http://myfaces.apache.org/tobago/tobago-core/tlddoc/tx/in.html"><tt><tx:in></tt></a>.</p></div>
-<div class="section">
-<h3><a name="Sheet">Sheet</a></h3>
-<p>The sheet control is used to display tabular data.</p>
-<p>The address book example uses a sheet to give an overview of all stored addresses.<br /> </p><img src="images/guide-sheet.png" alt="Sheet" />
-<p>Live demo of a sheet: <a class="externalLink" href="http://tobago-vm.apache.org/demo-2-release/faces/content/02-sheet/sheet.xhtml">http://tobago-vm.apache.org/demo-2-release/faces/content/02-sheet/sheet.xhtml</a></p>
-<p>A code fragment from the address book example:</p>
-<div class="source">
-<pre><tc:sheet columns="1*;1*;1*" value="#{controller.currentAddressList}"
+</tx:in></pre>
+ </div>
+ <p>The <tt>value</tt> attribute refers the content of the control. If a value binding is used, this content
+ can be written back into a bean property.</p>
+ <p>The <tt>label</tt> attribute generates the textual description for the control. The theme decides how the
+ label is actually rendered, for example it assigns a default width. This width can be overwritten with the
+ <tt>labelWidth</tt> attribute. If you utilize a value binding to a resource bundle declared by a <tt><tc:loadBundle></tt>
+ tag, you automatically get localization for the text labels. An underscore in the label transforms the
+ following character into an access key. The theme normally underlines the access key to make this
+ circumstance visible to the user. The access key can be used to quickly focus the related input control by
+ pressing <tt>Alt</tt> in combination with the access key.</p>
+ <p>If the control is marked as <tt>required</tt> the respective validation takes place. Additionally, the
+ theme tries to visualize this fact. Speyside renders a small check mark icon inside the field, which
+ vanishes if the field contains any data.</p>
+ <p>For more information about the possible attributes of an input tag see the TLD documentation for <a
+ class="externalLink" href="http://myfaces.apache.org/tobago/tobago-core/tlddoc/tc/in.html"><tt><tc:in></tt></a>
+ and <a class="externalLink" href="http://myfaces.apache.org/tobago/tobago-core/tlddoc/tx/in.html"><tt><tx:in></tt></a>.
+ </p></div>
+ <div class="section">
+ <h3><a name="Sheet">Sheet</a></h3>
+ <p>The sheet control is used to display tabular data.</p>
+ <p>The address book example uses a sheet to give an overview of all stored addresses.<br/> </p><img
+ src="images/guide-sheet.png" alt="Sheet"/>
+ <p>Live demo of a sheet: <a class="externalLink"
+ href="http://tobago-vm.apache.org/demo-2-release/faces/content/02-sheet/sheet.xhtml">http://tobago-vm.apache.org/demo-2-release/faces/content/02-sheet/sheet.xhtml</a>
+ </p>
+ <p>A code fragment from the address book example:</p>
+ <div class="source">
+<pre><tc:sheet columns="1fr 1fr 1fr" value="#{controller.currentAddressList}"
var="address" state="#{controller.selectedAddresses}"
sortActionListener="#{controller.sheetSorter}" rows="25"
showRowRange="left" showPageRange="right" showDirectLinks="center">
@@ -386,14 +398,21 @@
<f:convertDateTime pattern="#{bundle.editorDatePattern}"/>
</tc:out>
</tc:column>
-</tc:sheet></pre></div></div>
-<div class="section">
-<h3><a name="Tab_Group">Tab Group</a></h3>
-<p>The tab group control displays rectangular content in the same area of the screen with the help of tab panels.</p>
-<p>In the address book example the tab group is used to structure the input controls for an address into three groups for general, business, and miscellaneous information.<br /> </p><img src="images/guide-tab-group.png" alt="Tab Group" />
-<p>Live demo of a tab group: <a class="externalLink" href="http://tobago-vm.apache.org/demo-2-release/faces/content/04-tab/tab.xhtml">http://tobago-vm.apache.org/demo-2-release/faces/content/04-tab/tab.xhtml</a></p>
-<p>A code fragment from the address book example:</p>
-<div class="source">
+</tc:sheet></pre>
+ </div>
+ </div>
+ <div class="section">
+ <h3><a name="Tab_Group">Tab Group</a></h3>
+ <p>The tab group control displays rectangular content in the same area of the screen with the help of tab
+ panels.</p>
+ <p>In the address book example the tab group is used to structure the input controls for an address into three
+ groups for general, business, and miscellaneous information.<br/> </p><img
+ src="images/guide-tab-group.png" alt="Tab Group"/>
+ <p>Live demo of a tab group: <a class="externalLink"
+ href="http://tobago-vm.apache.org/demo-2-release/faces/content/04-tab/tab.xhtml">http://tobago-vm.apache.org/demo-2-release/faces/content/04-tab/tab.xhtml</a>
+ </p>
+ <p>A code fragment from the address book example:</p>
+ <div class="source">
<pre><tc:tabGroup switchType="reloadTab" immediate="true">
<tc:tab label="#{bundle.editorTabPersonal}">
<jsp:include page="tab/personal.jsp"/>
@@ -406,13 +425,19 @@
<tc:tab label="#{bundle.editorTabMisc}" rendered="#{!controller.simple}">
<jsp:include page="tab/misc.jsp"/>
</tc:tab>
-</tc:tabGroup></pre></div></div>
-<div class="section">
-<h3><a name="Menu">Menu</a></h3>
-<p>The menu control can be used to render a menu bar at the top of a screen like it is typically used in desktop applications. But the location for menus is not limited to this place.<br /> </p><img src="images/guide-menu.png" alt="Menu" />
-<p>Live demo of a menu: <a class="externalLink" href="http://tobago-vm.apache.org/demo-2-release/faces/content/05-toolBar/toolBar.xhtml">http://tobago-vm.apache.org/demo-2-release/faces/content/05-toolBar/toolBar.xhtml</a></p>
-<p>A code fragment from the address book example:</p>
-<div class="source">
+</tc:tabGroup></pre>
+ </div>
+ </div>
+ <div class="section">
+ <h3><a name="Menu">Menu</a></h3>
+ <p>The menu control can be used to render a menu bar at the top of a screen like it is typically used in
+ desktop applications. But the location for menus is not limited to this place.<br/> </p><img
+ src="images/guide-menu.png" alt="Menu"/>
+ <p>Live demo of a menu: <a class="externalLink"
+ href="http://tobago-vm.apache.org/demo-2-release/faces/content/05-toolBar/toolBar.xhtml">http://tobago-vm.apache.org/demo-2-release/faces/content/05-toolBar/toolBar.xhtml</a>
+ </p>
+ <p>A code fragment from the address book example:</p>
+ <div class="source">
<pre><tc:menuBar>
<tc:menu label="#{bundle.menuFile}">
<tc:menuCommand label="#{bundle.menuFileNew}" action="#{controller.createAddress}" immediate="true"
@@ -433,14 +458,21 @@
<tc:menu label="#{bundle.menuHelp}">
...
</tc:menu>
-</tc:menuBar></pre></div></div>
-<div class="section">
-<h3><a name="Tool_Bar">Tool Bar</a></h3>
-<p>The tool bar control is used to render a special rectangular area of buttons. There are two versions of toolbars: a standalone version and version that embeds itself in the border of a box. To embed a tool bar it has to be attached to a <tt><tc:box></tt> via a toolbar facet.</p>
-<p>The address book example uses a tool bar below the menu to provide convenient access to the most common actions from the menu.<br /> </p><img src="images/guide-toolbar.png" alt="Tool Bar" />
-<p>Live demo of a tool bar: <a class="externalLink" href="http://tobago-vm.apache.org/demo-2-release/faces/content/05-toolBar/toolBar.xhtml">http://tobago-vm.apache.org/demo-2-release/faces/content/05-toolBar/toolBar.xhtml</a></p>
-<p>A code fragment from the address book example:</p>
-<div class="source">
+</tc:menuBar></pre>
+ </div>
+ </div>
+ <div class="section">
+ <h3><a name="Tool_Bar">Tool Bar</a></h3>
+ <p>The tool bar control is used to render a special rectangular area of buttons. There are two versions of
+ toolbars: a standalone version and version that embeds itself in the border of a box. To embed a tool bar it
+ has to be attached to a <tt><tc:box></tt> via a toolbar facet.</p>
+ <p>The address book example uses a tool bar below the menu to provide convenient access to the most common
+ actions from the menu.<br/> </p><img src="images/guide-toolbar.png" alt="Tool Bar"/>
+ <p>Live demo of a tool bar: <a class="externalLink"
+ href="http://tobago-vm.apache.org/demo-2-release/faces/content/05-toolBar/toolBar.xhtml">http://tobago-vm.apache.org/demo-2-release/faces/content/05-toolBar/toolBar.xhtml</a>
+ </p>
+ <p>A code fragment from the address book example:</p>
+ <div class="source">
<pre><tc:toolBar iconSize="big">
<tc:button label="#{bundle.toolbarAddressList}" action="#{controller.search}" immediate="true"
image="image/org/tango-project/tango-icon-theme/32x32/mimetypes/x-office-address-book.png"
@@ -453,16 +485,20 @@
</tc:button>
<tc:button label="#{bundle.admin}" action="#{admin.admin}"
image="image/org/tango-project/tango-icon-theme/32x32/categories/preferences-system.png"/>
-</tc:toolBar></pre></div></div>
-<div class="section">
-<h3><a name="Popup">Popup</a></h3>
-<p>Popups are used to render small modal dialogs inside the current screen. The original screen is disabled until the popup is released with one of the popup buttons.<br /> </p><img src="images/guide-popup.png" alt="Tool Bar" />
-<p>A code fragment from the address book example:</p>
-<div class="source">
+</tc:toolBar></pre>
+ </div>
+ </div>
+ <div class="section">
+ <h3><a name="Popup">Popup</a></h3>
+ <p>Popups are used to render small modal dialogs inside the current screen. The original screen is disabled
+ until the popup is released with one of the popup buttons.<br/> </p><img src="images/guide-popup.png"
+ alt="Tool Bar"/>
+ <p>A code fragment from the address book example:</p>
+ <div class="source">
<pre><tc:popup id="about" width="300" height="220" left="200" top="200">
<tc:box label="About">
<f:facet name="layout">
- <tc:gridLayout rows="150px;*;fixed" columns="150px;*"/>
+ <tc:gridLayout rows="150px 1fr fixed" columns="150px;*"/>
</f:facet>
<tc:image width="150" height="150"
@@ -476,7 +512,7 @@
<tc:cell spanX="2">
<tc:panel>
<f:facet name="layout">
- <tc:gridLayout columns="*;fixed"/>
+ <tc:gridLayout columns="1fr fixed"/>
</f:facet>
<tc:cell/>
<tc:button label="OK">
@@ -485,62 +521,101 @@
</tc:panel>
</tc:cell>
</tc:box>
-</tc:popup></pre></div></div>
-<div class="section">
-<h3><a name="File_Upload">File Upload</a></h3>
-<p>The file select control can be used to upload files.<br /> </p><img src="images/guide-upload.png" alt="File Upload" />
-<p>A code fragment from the address book example:</p>
-<div class="source">
+</tc:popup></pre>
+ </div>
+ </div>
+ <div class="section">
+ <h3><a name="File_Upload">File Upload</a></h3>
+ <p>The file select control can be used to upload files.<br/> </p><img src="images/guide-upload.png"
+ alt="File Upload"/>
+ <p>A code fragment from the address book example:</p>
+ <div class="source">
<pre><tc:file value="#{controller.uploadedFile}" required="true">
<tc:validateFileItem contentType="image/*"/>
-</tc:file></pre></div></div></div>
-<div class="section">
-<h2><a name="Features_and_Concepts">Features and Concepts</a></h2>
-<div class="section">
-<h3><a name="Layout">Layout</a></h3>
-<p>Tobago organizes the placement of components with the help of layout managers. The main layout manager is called grid layout. It divides the available rectangular space into grid cells. The grid is spawned by the column and row values of the <tt><tc:gridLayout></tt> tag. The syntax of these values is based on the <a class="externalLink" href="http://www.w3.org/TR/html401/types.html#type-multi-length">multi-length notation</a> known from HTML.</p>
-<p>To add a layout manager to a container like box, panel or page you have to add a layout facet (i.e. a facet with the name 'layout') to the respective container tag.</p>
-<p>A code fragment from the address book example:</p>
-<div class="source">
+</tc:file></pre>
+ </div>
+ </div>
+ </div>
+ <div class="section">
+ <h2><a name="Features_and_Concepts">Features and Concepts</a></h2>
+ <div class="section">
+ <h3><a name="Layout">Layout</a></h3>
+ <p>Tobago organizes the placement of components with the help of layout managers. The main layout manager is
+ called grid layout. It divides the available rectangular space into grid cells. The grid is spawned by the
+ column and row values of the <tt><tc:gridLayout></tt> tag. The syntax of these values is based on the
+ <a class="externalLink" href="http://www.w3.org/TR/html401/types.html#type-multi-length">multi-length
+ notation</a> known from HTML.</p>
+ <p>To add a layout manager to a container like box, panel or page you have to add a layout facet (i.e. a facet
+ with the name 'layout') to the respective container tag.</p>
+ <p>A code fragment from the address book example:</p>
+ <div class="source">
<pre><tc:panel>
<f:facet name="layout">
- <tc:gridLayout columns="*" rows="fixed;fixed;*"/>
+ <tc:gridLayout columns="1fr" rows="fixed;fixed;1fr"/>
</f:facet>
<tx:in label="First Name"/>
<tx:in label="Last Name"/>
<tc:cell />
-</tc:panel></pre></div>
-<p>In this example we place to two input controls with labels into two consecutive rows. Below the two input fields we add a spacer element. The layout token '<tt>fixed</tt>' advises the layout manager to give the input control the height, which this kind of control normally possesses in the selected theme.</p>
-<p>The values of the column and row attributes of the <tt><tc:gridLayout></tt> tag can contain a semicolon separated list of layout tokens. A layout token can be an exact length in pixels like <tt>200px</tt>, a percentage length like <tt>25%</tt>, a relative length like <tt>2*</tt>, or a specific length called <tt>fixed</tt>, which's exact length is determined by the theme and make sure the control is usable -- a single-line input control for example needs to be so high that characters from the assigned font can be read inside the control.</p>
-<p>Relative lengths are determined last by the layout manager. The available remaining space is distributed among the existing relative lengths. Each length receives space proportional to the integer before the '<tt>*</tt>'. A single '<tt>*</tt>' is a shorthand for '<tt>1*</tt>'.</p>
-<p>The layout manager handles the <tt>rendered</tt> attribute of controls, too. If the <tt>rendered</tt> attribute is dynamically defined by a value binding, the page can contain fewer controls in some cases than in others. The layout manager can then distribute the newly available space between the remaining relative and percentage lengths.</p></div>
-<div class="section">
-<h3><a name="Themes">Themes</a></h3>
-<p>A theme defines how the structured view is actually rendered. It provides the look & feel of the controls inside a view. It appoints colors, dimensions, spacing, fonts and other graphical properties.</p>
-<p>Tobago includes a small collection of themes called after cities on the island Tobago: Scarborough, Speyside, Charlotteville, and Richmond. Scarborough is a basic theme, which tries to focus on features of plain HTML, Speyside is the main theme of Tobago, Charlotteville and Richmond are mainly color variations of Speyside.<br />  </p><img src="images/guide-theme-scarborough.png" alt="Scarborough" />
-<p>Scarborough<br /> </p><img src="images/guide-theme-speyside.png" alt="Speyside" />
-<p>Speyside<br /> </p><img src="images/guide-theme-charlotteville.png" alt="Charlotteville" />
-<p>Charlotteville<br /> </p><img src="images/guide-theme-richmond.png" alt="Richmond" />
-<p>Richmond</p></div>
-<div class="section">
-<h3><a name="Markup">Markup</a></h3>
-<p>Since you don't have direct control over design without writing your own theme, Tobago supports the concept of markup. You can assign certain logical markup values to a control to fine-tune the rendering. A theme specifies the supported markup for every control. The standard theme already provides some helpful markups.<br /> </p>
-<table border="1" class="bodyTable">
-<tr class="a">
-<td align="left"><tt><tc:out></tt></td>
-<td align="left">strong, deleted, number</td></tr>
-<tr class="b">
-<td align="left"><tt><tc:in></tt></td>
-<td align="left">number</td></tr>
-<tr class="a">
-<td align="left"><tt><tc:label></tt></td>
-<td align="left">number</td></tr>
-<tr class="b">
-<td align="left"><tt><tc:treeNode></tt></td>
-<td align="left">strong</td></tr></table>
-<p>Also see the <a class="externalLink" href="https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml">standard <tt>tobago-config.xml</tt></a></p>
-<p>The markup <tt>strong</tt> is normally emphasized, <tt>deleted</tt> is rendered struck out, and <tt>number</tt> is right aligned. Multiple markups can be combined as a comma separated list:</p>
-<div class="source">
+</tc:panel></pre>
+ </div>
+ <p>In this example we place to two input controls with labels into two consecutive rows. Below the two input
+ fields we add a spacer element. The layout token '<tt>fixed</tt>' advises the layout manager to give the
+ input control the height, which this kind of control normally possesses in the selected theme.</p>
+ <p>The values of the column and row attributes of the <tt><tc:gridLayout></tt> tag can contain a
+ semicolon separated list of layout tokens. A layout token can be an exact length in pixels like
+ <tt>200px</tt>, a percentage length like <tt>25%</tt>, a relative length like <tt>2*</tt>, or a specific
+ length called <tt>fixed</tt>, which's exact length is determined by the theme and make sure the control is
+ usable -- a single-line input control for example needs to be so high that characters from the assigned font
+ can be read inside the control.</p>
+ <p>Relative lengths are determined last by the layout manager. The available remaining space is distributed
+ among the existing relative lengths. Each length receives space proportional to the integer before the '<tt>*</tt>'.
+ A single '<tt>*</tt>' is a shorthand for '<tt>1*</tt>'.</p>
+ <p>The layout manager handles the <tt>rendered</tt> attribute of controls, too. If the <tt>rendered</tt>
+ attribute is dynamically defined by a value binding, the page can contain fewer controls in some cases than
+ in others. The layout manager can then distribute the newly available space between the remaining relative
+ and percentage lengths.</p></div>
+ <div class="section">
+ <h3><a name="Themes">Themes</a></h3>
+ <p>A theme defines how the structured view is actually rendered. It provides the look & feel of the
+ controls inside a view. It appoints colors, dimensions, spacing, fonts and other graphical properties.</p>
+ <p>Tobago includes a small collection of themes called after cities on the island Tobago: Scarborough,
+ Speyside, Charlotteville, and Richmond. Scarborough is a basic theme, which tries to focus on features of
+ plain HTML, Speyside is the main theme of Tobago, Charlotteville and Richmond are mainly color variations of
+ Speyside.<br/>  </p><img src="images/guide-theme-scarborough.png" alt="Scarborough"/>
+ <p>Scarborough<br/> </p><img src="images/guide-theme-speyside.png" alt="Speyside"/>
+ <p>Speyside<br/> </p><img src="images/guide-theme-charlotteville.png" alt="Charlotteville"/>
+ <p>Charlotteville<br/> </p><img src="images/guide-theme-richmond.png" alt="Richmond"/>
+ <p>Richmond</p></div>
+ <div class="section">
+ <h3><a name="Markup">Markup</a></h3>
+ <p>Since you don't have direct control over design without writing your own theme, Tobago supports the concept
+ of markup. You can assign certain logical markup values to a control to fine-tune the rendering. A theme
+ specifies the supported markup for every control. The standard theme already provides some helpful
+ markups.<br/> </p>
+ <table border="1" class="bodyTable">
+ <tr class="a">
+ <td align="left"><tt><tc:out></tt></td>
+ <td align="left">strong, deleted, number</td>
+ </tr>
+ <tr class="b">
+ <td align="left"><tt><tc:in></tt></td>
+ <td align="left">number</td>
+ </tr>
+ <tr class="a">
+ <td align="left"><tt><tc:label></tt></td>
+ <td align="left">number</td>
+ </tr>
+ <tr class="b">
+ <td align="left"><tt><tc:treeNode></tt></td>
+ <td align="left">strong</td>
+ </tr>
+ </table>
+ <p>Also see the <a class="externalLink"
+ href="https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-theme/tobago-theme-standard/src/main/resources/META-INF/tobago-config.xml">standard
+ <tt>tobago-config.xml</tt></a></p>
+ <p>The markup <tt>strong</tt> is normally emphasized, <tt>deleted</tt> is rendered struck out, and
+ <tt>number</tt> is right aligned. Multiple markups can be combined as a comma separated list:</p>
+ <div class="source">
<pre>...
<tc:label value="Normal"/>
<tc:out value="999.99"/>
@@ -553,11 +628,16 @@
<tc:label value="Emphasized Number"/>
<tc:out markup="number,strong" value="999.99"/>
-...</pre></div>
-<p>This code fragment is rendered like this:<br /> </p><img src="images/guide-markup.png" alt="Markup example" />
-<p>You can add markup in your own theme or extend the current themes on the fly by adding a <tt><renderers></tt> section into the <tt>tobago-config.xml.</tt></p>
-<p>The address book example adds markup values to the <tt><tc:progress></tt> control to be able to colorize the control depending on the criticallity of the progress value. On the administration page the progress control is used to visualize the memory consumption of the VM.</p>
-<div class="source">
+...</pre>
+ </div>
+ <p>This code fragment is rendered like this:<br/> </p><img src="images/guide-markup.png"
+ alt="Markup example"/>
+ <p>You can add markup in your own theme or extend the current themes on the fly by adding a <tt><renderers></tt>
+ section into the <tt>tobago-config.xml.</tt></p>
+ <p>The address book example adds markup values to the <tt><tc:progress></tt> control to be able to
+ colorize the control depending on the criticallity of the progress value. On the administration page the
+ progress control is used to visualize the memory consumption of the VM.</p>
+ <div class="source">
<pre><renderers>
<renderer>
<name>Progress</name>
@@ -567,11 +647,16 @@
<markup>error</markup>
</supported-markup>
</renderer>
-</renderers></pre></div>
-<p>See the <a class="externalLink" href="https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-example/tobago-example-addressbook-war/src/main/webapp/WEB-INF/tobago-config.xml">address book <tt>tobago-config.xml</tt></a> for a complete example.</p>
-<p>The various progress variants look like this:<br /> </p><img src="images/guide-progress.png" alt="Progress markup" />
-<p>Markup attributes are rendered into HTML as extra CSS style classes, which can be used to modify the normal styling of a control. In the progress example the following CSS is added to the Speyside theme:</p>
-<div class="source">
+</renderers></pre>
+ </div>
+ <p>See the <a class="externalLink"
+ href="https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-example/tobago-example-addressbook-war/src/main/webapp/WEB-INF/tobago-config.xml">address
+ book <tt>tobago-config.xml</tt></a> for a complete example.</p>
+ <p>The various progress variants look like this:<br/> </p><img src="images/guide-progress.png"
+ alt="Progress markup"/>
+ <p>Markup attributes are rendered into HTML as extra CSS style classes, which can be used to modify the normal
+ styling of a control. In the progress example the following CSS is added to the Speyside theme:</p>
+ <div class="source">
<pre>.tobago-progress-value-markup-ok {
background: green;
}
@@ -582,19 +667,33 @@
.tobago-progress-value-markup-error {
background: red;
-}</pre></div>
-<p>See the address book example <a class="externalLink" href="https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-example/tobago-example-addressbook-web/src/main/webapp/tobago-resource/html/speyside/standard/style/tobago.css">Speyside <tt>tobago.css</tt></a>.</p>
-<p>The <tt>tobago.css</tt> file is collected by the Tobago resource manager and can be used to overwrite and extend the default <tt>tobago.css</tt> file of the theme.</p>
-<p>Tobago 1.0.x and Tobago 1.5.x are using the old name <tt>style.css</tt>, since Tobago 2.0.0 <tt>tobago.css</tt> is used, <tt>style.css</tt> will also be included for compatibility (in Tobago 2.x).</p>
-<p>The <a class="externalLink" href="https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-theme/tobago-theme-example/">example theme</a> provides an example for styling sheet cells and contains more complex examples of markup, which need addtional JavaScript to generate more dynamic behaviours like fade-out effects or client-side change detection.</p></div>
-<div class="section">
-<h3><a name="Partial_Rendering">Partial Rendering</a></h3>
-<p>To avoid the reload of complete screens Tobago provides partial rendering, which advises the client to update only parts of the screen to optimize the amount of data sent to the client and the time to render necessary updates. Some controls like the tab control and the sheet directly support partial rendering. Whereas container controls like the generic panel allow to group arbitrary controls to be able to update them exclusively as a group.</p></div>
-<div class="section">
-<h3><a name="Virtual_Forms">Virtual Forms</a></h3>
-<p>The page tag establishes an implicit form for all controls on the screen. The form tag allows to divide these controls into smaller groups to be able to manage validation only for these grouped controls.</p>
-<p>A code fragment from the address book example:</p>
-<div class="source">
+}</pre>
+ </div>
+ <p>See the address book example <a class="externalLink"
+ href="https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-example/tobago-example-addressbook-web/src/main/webapp/tobago-resource/html/speyside/standard/style/tobago.css">Speyside
+ <tt>tobago.css</tt></a>.</p>
+ <p>The <tt>tobago.css</tt> file is collected by the Tobago resource manager and can be used to overwrite and
+ extend the default <tt>tobago.css</tt> file of the theme.</p>
+ <p>Tobago 1.0.x and Tobago 1.5.x are using the old name <tt>style.css</tt>, since Tobago 2.0.0
+ <tt>tobago.css</tt> is used, <tt>style.css</tt> will also be included for compatibility (in Tobago 2.x).</p>
+ <p>The <a class="externalLink"
+ href="https://svn.apache.org/repos/asf/myfaces/tobago/trunk/tobago-theme/tobago-theme-example/">example
+ theme</a> provides an example for styling sheet cells and contains more complex examples of markup, which
+ need addtional JavaScript to generate more dynamic behaviours like fade-out effects or client-side change
+ detection.</p></div>
+ <div class="section">
+ <h3><a name="Partial_Rendering">Partial Rendering</a></h3>
+ <p>To avoid the reload of complete screens Tobago provides partial rendering, which advises the client to
+ update only parts of the screen to optimize the amount of data sent to the client and the time to render
+ necessary updates. Some controls like the tab control and the sheet directly support partial rendering.
+ Whereas container controls like the generic panel allow to group arbitrary controls to be able to update
+ them exclusively as a group.</p></div>
+ <div class="section">
+ <h3><a name="Virtual_Forms">Virtual Forms</a></h3>
+ <p>The page tag establishes an implicit form for all controls on the screen. The form tag allows to divide
+ these controls into smaller groups to be able to manage validation only for these grouped controls.</p>
+ <p>A code fragment from the address book example:</p>
+ <div class="source">
<pre><tc:form>
<tx:selectOneChoice label="#{bundle.footerLanguage}"
value="#{controller.language}">
@@ -603,12 +702,16 @@
<tc:command action="#{controller.languageChangedList}"/>
</f:facet>
</tx:selectOneChoice>
-</tc:form></pre></div></div>
-<div class="section">
-<h3><a name="Security">Security</a></h3>
-<p>The extension module tobago-security allows to protect method bindings with the help of annotations. The module provides alternative command components with security handling. The available annotations are <tt>@RolesAllowed</tt>, <tt>@DenyAll</tt>, and <tt>@PermitAll</tt>.</p>
-<p>A code fragment from the address book example:</p>
-<div class="source">
+</tc:form></pre>
+ </div>
+ </div>
+ <div class="section">
+ <h3><a name="Security">Security</a></h3>
+ <p>The extension module tobago-security allows to protect method bindings with the help of annotations. The
+ module provides alternative command components with security handling. The available annotations are <tt>@RolesAllowed</tt>,
+ <tt>@DenyAll</tt>, and <tt>@PermitAll</tt>.</p>
+ <p>A code fragment from the address book example:</p>
+ <div class="source">
<pre>public class AdminController {
@RolesAllowed("admin")
@@ -617,18 +720,23 @@
}
...
-}</pre></div></div></div>
+}</pre>
+ </div>
+ </div>
</div>
</div>
- <div class="clear"></div>
- </div> <!-- close main container -->
- <div id="footer">
- <div class="copyright">
- ©
- 2002-2020
- Apache Software Foundation, Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</a>.<br/>
- Apache MyFaces, Apache Tobago, Apache, the Apache feather logo, and the Apache MyFaces project logos are trademarks of The Apache Software Foundation.
- </div><!-- close copyright -->
- </div><!-- close footer -->
- </body>
+ </div>
+ <div class="clear"></div>
+</div> <!-- close main container -->
+<div id="footer">
+ <div class="copyright">
+ ©
+ 2002-2020
+ Apache Software Foundation, Licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License,
+ Version 2.0</a>.<br/>
+ Apache MyFaces, Apache Tobago, Apache, the Apache feather logo, and the Apache MyFaces project logos are trademarks
+ of The Apache Software Foundation.
+ </div><!-- close copyright -->
+</div><!-- close footer -->
+</body>
</html>