Added few demos more. Enhanced documentation and looks.

svn changeset:1099/svn branch:trunk

1 files changed, 71 insertions, 24 deletions

diff --git a/WebContent/index.html b/WebContent/index.html
index fe2acbc698..f1a5098e3d 100644
--- a/WebContent/index.html
+++ b/WebContent/index.html
@@ -12,7 +12,7 @@
 <div id="toolkit"></div>
 
   <div id="feature-browser">
-	<h3>Feature Browser</h3>
+	<h4>Feature Browser</h4>
 	<div class="option">
 	 <span class="link"><a href="features/?renderingMode=detect">Autodetected mode</a></span>
 	 <span class="desc">Use AJAX if supported by browser, otherwise fallback to HTML mode</span>
@@ -29,7 +29,7 @@
   </div>
   
   <div id="sample-code">
-	<h4>Simple applications</h4>
+	<h3>Simple application demos</h3>
 	<div class="option">
 	 <span class="link"><a href="HelloWorld">HelloWorld</a></span>
 	 <span class="desc">Simple Toolkit application.</span>
@@ -41,52 +41,100 @@
 	<br />
   </div>
   
+  <div id="sample-code">
+	<h3><a href="Login">Long lifecycle of Toolkit applications</a></h3>
+	<div class="option">
+	<p>
+	Demonstrates sample <a href="http://www.millstone.org">Millstone</a> application that was ajaxified (upgraded to Toolkit 4.0.0)
+	simply by changing three import namespaces and adding Toolkit libraries to classpath.
+	Initial IT Mill Toolkit framework has existed since 2001 (see <a href="http://www.millstone.org">Millstone</a>) and is
+	ready for production use today.
+	</p>
+	<b>Note: This sample application was created on year 2002.</b>
+	</div>	
+  </div>
+  
+  
   <div id="feature-browser">
 	<h3><a href="openajax/index.html">OpenAjax Hub Conformance tests</a></h3>
 	<div class="option">
-	 Integrates sample Toolkit application to HTML page which performs basic OpenAjax hub conformance tests.
-	 See HTML source what is required for integration.
+	<p>
+	 Performs basic OpenAjax hub conformance tests against IT Mill Toolkit.
+	 Also demonstrates how to integrate Toolkit applications into HTML pages.
+	 </p>
 	 <b>Note:</b> Embedded FeatureBrowser application is the same
 	 application instance that can be accessed as standalone application, see <code>FeatureBrowser</code>.
 	</div>	
   </div>
   
    <div id="feature-browser">
-	<h3><a href="EmbeddedToolkit.jsp">Embedding Toolkit application to other frameworks</a></h3>
+	<h3><a href="ToolkitMashup.jsp">Toolkit application mashup</a></h3>
 	<div class="option">
-	 Integrates sample Toolkit application to JSP page. See HTML source or respective jsp 
-	 file what is required for integration. <b>Note:</b> Embedded TableDemo application is the same
+	 <p>
+	 Demonstrates how Toolkit application may be integrated into other frameworks. In this example we use JSP pages.
+	 See HTML source or respective jsp file what code blocks are required for integration.
+	 </p>
+	 <b>Note:</b> Integrated TableDemo application is the same
 	 application instance that can be accessed as standalone application, see <code>TableDemo</code>.
 	</div>	
   </div>
   
   <div id="feature-browser">
+	<h3><a href="LayoutDemo">LayoutDemo</a></h3>
+	<div class="option">
+	<p>
+	 This example demonstrates layouts for Tookit application.
+	</p>
+	<p>
+	 Demonstrates: how to create
+	 <code>com.itmill.toolkit.ui.OrderedLayout</code>,
+	 <code>com.itmill.toolkit.ui.GridLayout</code>,
+	 <code>com.itmill.toolkit.ui.Panel</code> and
+	 <code>com.itmill.toolkit.ui.TabSheet</code> 
+    </p>
+	</div>	
+  </div>
+  
+  <div id="feature-browser">
 	<h3><a href="QueryContainerDemo">QueryContainerDemo</a></h3>
 	<div class="option">
+	<p>
 	 This example shows how Table, Select and Tree UI components can use Containers. 
 	 QueryContainer is used to bind SQL table rows into Toolkit UI components. 
 	 Table has few example actions added. Also embedding XHTML through Label components is used. 
+	</p>
+	<p>
 	 Demonstrates: how to create <code>com.itmill.toolkit.data.Container</code> and set it as 
 	 datasource to UI components <code>com.itmill.toolkit.ui.Component.Tree</code>, how to 
 	 receive ExpandEvent and implement <code>com.itmill.toolkit.ui.Tree.ExpandListener</code>, 
 	 how to use <code>com.itmill.toolkit.event.Action</code>.
+    </p>
 	</div>	
   </div>
   
    <div id="feature-browser">
 	<h3><a href="TableDemo">TableDemo</a></h3>
 	<div class="option">
-	 Similar to QueryContainerDemo but uses table only. Two buttons demonstrate another 
-	 possibility how event framework works, in this example specific methods are 
-	 registered for button click events. <b>Note:</b> This application instance is embedded
-	 to jsp page also, see <code>EmbeddedToolkit.jsp</code> above.
+	 <p>
+	 Similar to QueryContainerDemo but uses only Table component.
+	 </p>
+	 <p>
+	 Two buttons demonstrate another 
+	 possibility how event framework may be used, in this example specific methods are 
+	 registered for button click events.
+	 </p>
+	 <b>Note:</b> This application instance is embedded
+	 to jsp page also, see <code>ToolkitMashup.jsp</code>.
 	</div>	
   </div>
   
   <div id="feature-browser">
 	<h3><a href="TreeFilesystemContainer">TreeFilesystemContainer</a></h3>
 	<div class="option">
-	 Browsable file explorer using Toolkit Tree component. Demonstrates: how to
+	 <p>
+	 Browsable file explorer using Toolkit Tree component.
+	 </p>
+	 Demonstrates: how to
   	 use <code>com.itmill.toolkit.ui.Component.Tree</code> datasource container,
 	 how to create <code>com.itmill.toolkit.data.util.FilesystemContainer</code>,
 	 how to read <code>com.itmill.toolkit.ui.Component.Event</code> objects, how
@@ -107,9 +155,19 @@
   </div>
   
   <div id="feature-browser">
+	<h3><a href="SelectDemo">SelectDemo</a></h3>
+	<div class="option">
+	<p>
+	 This example shows select component with default and lazy loading functionality enabled (a.k.a Google Suggest).
+	 Click to first select component and type few letters to see it in action. Second select component has default functionality.
+	</p>
+	</div>	
+  </div>
+  
+  <div id="feature-browser">
 	<h3><a href="ModalWindow">Modal window</a></h3>
 	<div class="option">
-	 Example of Modal Window.
+	 Example of how Modal Windows may be created using Window component.
 	</div>	
   </div>
 
@@ -129,17 +187,6 @@
 	</div>	
   </div>
 
- 
-  <div id="sample-code">
-	<h4>Upgrading from Millstone 3 to Toolkit 4.0.0</h4>
-	<div class="option">
-	 <span class="link"><a href="Login">Login</a></span>
-	 <span class="desc">Simple Millstone 3.1.1 application that was upgraded to Toolkit 4.0.0 by updating three import rows.</span>
-	</div>
-	<br />
-	<br />
-  </div>
-  
 <!--
   <div id="sample-code">
 	<h3>IT Mill Toolkit Sample Code</h3>