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 2022/03/30 11:17:00 UTC
svn commit: r1899384 [7/14] - /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=1899384&r1=1899383&r2=1899384&view=diff
==============================================================================
--- myfaces/site/publish/tobago/getting-started.html (original)
+++ myfaces/site/publish/tobago/getting-started.html Wed Mar 30 11:17:00 2022
@@ -1,165 +1,23 @@
<!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>
+ <title>Tobago – Apache 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"/>
+ <meta http-equiv="refresh" content="5; URL=https://myfaces.apache.org/#tobago">
</head>
<body>
-<div id="header">
- <div id="top_menu">
- <div id="top_menu_container">
-
-
- <div class="date">
- Last Published: 03 Nov 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">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>
-
-
- <li class="collapsed">
- <a href="project-reports.html">Project Reports</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>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 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>
- <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>
- </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 -->
+<div style="padding: 4ex">
+ <h2>Outdated! Please use the current URL of the Tobago project page:</h2>
+ <h1 style="border: 3px solid green; margin: 10px; padding: 20px;">
+ <a class="externalLink"
+ href="https://myfaces.apache.org/#tobago">https://myfaces.apache.org/#tobago</a>
+ </h1>
+ <h3>
+ You will be redirected automatically in 5 seconds...
+ </h3>
+</div>
</body>
</html>
Modified: myfaces/site/publish/tobago/guide.html
URL: http://svn.apache.org/viewvc/myfaces/site/publish/tobago/guide.html?rev=1899384&r1=1899383&r2=1899384&view=diff
==============================================================================
--- myfaces/site/publish/tobago/guide.html (original)
+++ myfaces/site/publish/tobago/guide.html Wed Mar 30 11:17:00 2022
@@ -1,742 +1,23 @@
<!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>
+ <title>Tobago – Apache 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"/>
+ <meta http-equiv="refresh" content="5; URL=https://myfaces.apache.org/#tobago">
</head>
<body>
-<div id="header">
- <div id="top_menu">
- <div id="top_menu_container">
-
-
- <div class="date">
- Last Published: 03 Nov 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>
-
-
- <li class="collapsed">
- <a href="project-reports.html">Project Reports</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>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 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>
- <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">
-<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" %>
-<%@ taglib uri="http://myfaces.apache.org/tobago/extension" prefix="tx" %>
-<f:view>
- <tc:page>
- <f:facet name="layout">
- <tc:gridLayout/>
- </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">
-<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" %>
-<%@ taglib uri="http://myfaces.apache.org/tobago/extension" prefix="tx" %>
-<f:view>
- <tc:page width="400">
- <f:facet name="layout">
- <tc:gridLayout rows="fixed;1fr" margin="10"/>
- </f:facet>
- <tc:box label="Address">
- <f:facet name="layout">
- <tc:gridLayout rows="fixed;fixed;fixed;fixed"/>
- </f:facet>
- <tx:in label="First Name"/>
- <tx:in label="Last Name"/>
-
- <tc:panel>
- <f:facet name="layout">
- <tc:gridLayout columns="6*;1*"/>
- </f:facet>
- <tx:in label="Street / No"/>
- <tc:in />
- </tc:panel>
-
- <tx:in label="City"/>
- </tc:box>
-
- <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">
-<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="1fr 1fr 1fr" value="#{controller.currentAddressList}"
- var="address" state="#{controller.selectedAddresses}"
- sortActionListener="#{controller.sheetSorter}" rows="25"
- showRowRange="left" showPageRange="right" showDirectLinks="center">
- <tc:columnEvent event="dblclick" >
- <tc:command action="#{controller.editAddress}"/>
- </tc:columnEvent>
- <tc:column id="firstName" label="#{bundle.listFirstName}" sortable="true"
- rendered="#{controller.renderFirstName}">
- <tc:out value="#{address.firstName}"/>
- </tc:column>
- <tc:column id="lastName" label="#{bundle.listLastName}" sortable="true"
- rendered="#{controller.renderLastName}">
- <tc:out value="#{address.lastName}"/>
- </tc:column>
- <tc:column id="dayOfBirth" label="Birthday" sortable="true"
- rendered="#{controller.renderDayOfBirth}">
- <tc:out value="#{address.dayOfBirth}">
- <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">
-<pre><tc:tabGroup switchType="reloadTab" immediate="true">
- <tc:tab label="#{bundle.editorTabPersonal}">
- <jsp:include page="tab/personal.jsp"/>
- </tc:tab>
-
- <tc:tab label="#{bundle.editorTabBusiness}" rendered="#{!controller.simple}">
- <jsp:include page="tab/business.jsp"/>
- </tc:tab>
-
- <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">
-<pre><tc:menuBar>
- <tc:menu label="#{bundle.menuFile}">
- <tc:menuCommand label="#{bundle.menuFileNew}" action="#{controller.createAddress}" immediate="true"
- image="image/org/tango-project/tango-icon-theme/16x16/actions/contact-new.png"/>
- <tc:menuCommand label="Add Dummy Addresses" action="#{controller.addDummyAddresses}" immediate="true"/>
- <tc:menuSeparator/>
- <tc:menuCommand label="#{bundle.admin}" action="#{admin.admin}"
- image="image/org/tango-project/tango-icon-theme/16x16/categories/preferences-system.png"/>
- <tc:menuSeparator/>
- <tc:menuCommand label="Logout" action="#{controller.logout}"
- image="image/org/tango-project/tango-icon-theme/16x16/actions/system-log-out.png"/>
- </tc:menu>
-
- <tc:menu label="#{bundle.menuSettings}">
- ...
- </tc:menu>
-
- <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">
-<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"
- disabled="#{facesContext.viewRoot.viewId == '/application/list.jsp'}"/>
- <tc:button label="#{bundle.listNew}" action="#{controller.createAddress}"
- image="image/org/tango-project/tango-icon-theme/32x32/actions/contact-new.png"/>
- <tc:button label="#{bundle.toolbarAbout}"
- image="image/org/tango-project/tango-icon-theme/32x32/apps/help-browser.png">
- <tc:popupReference for=":page:about"/>
- </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">
-<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 1fr fixed" columns="150px;*"/>
- </f:facet>
-
- <tc:image width="150" height="150"
- value="image/org/tango-project/tango-icon-theme/address-book-splash-screen.png"/>
- <tc:panel>
- ...
- </tc:panel>
-
- <tc:cell spanX="2"/>
-
- <tc:cell spanX="2">
- <tc:panel>
- <f:facet name="layout">
- <tc:gridLayout columns="1fr fixed"/>
- </f:facet>
- <tc:cell/>
- <tc:button label="OK">
- <tc:attribute name="popupClose" value="immediate"/>
- </tc:button>
- </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">
-<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">
-<pre><tc:panel>
- <f:facet name="layout">
- <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">
-<pre>...
-<tc:label value="Normal"/>
-<tc:out value="999.99"/>
-
-<tc:label value="Number"/>
-<tc:out markup="number" value="999.99"/>
-
-<tc:label value="Emphasized"/>
-<tc:out markup="strong" value="999.99"/>
-
-<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><renderers>
- <renderer>
- <name>Progress</name>
- <supported-markup>
- <markup>ok</markup>
- <markup>warn</markup>
- <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">
-<pre>.tobago-progress-value-markup-ok {
- background: green;
-}
-
-.tobago-progress-value-markup-warn {
- background: yellow;
-}
-
-.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><tc:form>
- <tx:selectOneChoice label="#{bundle.footerLanguage}"
- value="#{controller.language}">
- <f:selectItems value="#{controller.languages}"/>
- <f:facet name="change">
- <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">
-<pre>public class AdminController {
-
- @RolesAllowed("admin")
- public String admin() {
- return OUTCOME_ADMIN;
- }
-
- ...
-}</pre>
- </div>
- </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 -->
+<div style="padding: 4ex">
+ <h2>Outdated! Please use the current URL of the Tobago project page:</h2>
+ <h1 style="border: 3px solid green; margin: 10px; padding: 20px;">
+ <a class="externalLink"
+ href="https://myfaces.apache.org/#tobago">https://myfaces.apache.org/#tobago</a>
+ </h1>
+ <h3>
+ You will be redirected automatically in 5 seconds...
+ </h3>
+</div>
</body>
</html>
Modified: myfaces/site/publish/tobago/howto-test.html
URL: http://svn.apache.org/viewvc/myfaces/site/publish/tobago/howto-test.html?rev=1899384&r1=1899383&r2=1899384&view=diff
==============================================================================
--- myfaces/site/publish/tobago/howto-test.html (original)
+++ myfaces/site/publish/tobago/howto-test.html Wed Mar 30 11:17:00 2022
@@ -1,165 +1,23 @@
<!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 – Howto create tests for Tobago Demo 3.0 or higher</title>
+ <title>Tobago – Apache 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"/>
+ <meta http-equiv="refresh" content="5; URL=https://myfaces.apache.org/#tobago">
</head>
<body>
-<div id="header">
- <div id="top_menu">
- <div id="top_menu_container">
-
-
- <div class="date">
- Last Published: 03 Nov 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">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>
-
-
- <li class="collapsed">
- <a href="project-reports.html">Project Reports</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>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 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>
- <div class="section">
- <h2><a name="Howto_create_QUnit_tests_for_Tobago_Demo_3.0_or_higher"></a>Howto create QUnit tests for Tobago
- Demo 3.0 or higher</h2>
- <p>The content of this page was moved to <a class="externalLink"
- href="http://tobago-vm.apache.org/faq.html"></a></p></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 -->
+<div style="padding: 4ex">
+ <h2>Outdated! Please use the current URL of the Tobago project page:</h2>
+ <h1 style="border: 3px solid green; margin: 10px; padding: 20px;">
+ <a class="externalLink"
+ href="https://myfaces.apache.org/#tobago">https://myfaces.apache.org/#tobago</a>
+ </h1>
+ <h3>
+ You will be redirected automatically in 5 seconds...
+ </h3>
+</div>
</body>
</html>