aboutsummaryrefslogtreecommitdiffstats
path: root/WebContent
diff options
context:
space:
mode:
authorJani Laakso <jani.laakso@itmill.com>2007-04-03 06:54:56 +0000
committerJani Laakso <jani.laakso@itmill.com>2007-04-03 06:54:56 +0000
commit3febfb5a1f30fd58ae1afcdea75ad6ab5b0c9458 (patch)
tree7edaa2e4e88e3b1f0d24fb2599ddfb646a58b452 /WebContent
parent7397520086aec1cff86d6da93577c9c8d68aeb3f (diff)
downloadvaadin-framework-3febfb5a1f30fd58ae1afcdea75ad6ab5b0c9458.tar.gz
vaadin-framework-3febfb5a1f30fd58ae1afcdea75ad6ab5b0c9458.zip
Added few demos more. Enhanced documentation and looks.
svn changeset:1099/svn branch:trunk
Diffstat (limited to 'WebContent')
-rw-r--r--WebContent/ToolkitMashup.jsp65
-rw-r--r--WebContent/WEB-INF/web.xml30
-rw-r--r--WebContent/index.html95
3 files changed, 164 insertions, 26 deletions
diff --git a/WebContent/ToolkitMashup.jsp b/WebContent/ToolkitMashup.jsp
new file mode 100644
index 0000000000..d8fce6280a
--- /dev/null
+++ b/WebContent/ToolkitMashup.jsp
@@ -0,0 +1,65 @@
+<%
+ //
+ // Demonstrates how Toolkit application can be integrated into jsp pages
+ //
+ String test = "This text comes from EmbeddedToolkit.jsp file";
+ // Toolkit application name. This is servlet URL pattern, see web.xml
+ String applicationName = "TableDemo";
+%>
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+ "http://www.w3.org/TR/html4/loose.dtd">
+
+ <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ITMillToolkit40="http://itmill.com/toolkit">
+
+ <head>
+ <title>Embedding Toolkit to JSP pages</title>
+
+ <!-- Toolkit code block starts -->
+
+ <NOSCRIPT><META http-equiv="refresh" content="0; url=?WA_NOSCRIPT=1" /></NOSCRIPT>
+ <link rel="stylesheet" href="<%=applicationName %>/RES/base/css/base-ajax.css" type="text/css" />
+ <link rel="stylesheet" href="<%=applicationName %>/RES/base/css/calendar-default.css" type="text/css" />
+ <script src="<%=applicationName %>/RES/base/script/ajax-client.js" type="text/javascript"></script>
+ <script src="<%=applicationName %>/RES/base/script/base-ajax-components.js" type="text/javascript"></script>
+ <script src="<%=applicationName %>/RES/base/ext/jscalendar/calendar.js" type="text/javascript"></script>
+ <script src="<%=applicationName %>/RES/base/ext/jscalendar/lang/calendar-en.js" type="text/javascript"></script>
+ <script src="<%=applicationName %>/RES/base/ext/jscalendar/calendar-setup.js" type="text/javascript"></script>
+ <script src="<%=applicationName %>/RES/base/ext/firebug/firebugx.js" type="text/javascript"></script>
+ <link rel="stylesheet" href="<%=applicationName %>/RES/corporate/css/corporate-ajax.css" type="text/css" />
+ <script src="<%=applicationName %>/RES/corporate/script/corporate-ajax-components.js" type="text/javascript"></script>
+
+ <!-- Toolkit code block ends -->
+
+ </head>
+
+ <!-- Toolkit code: for body set tag class with value itmtk -->
+ <body class="itmtk">
+ <center>
+ <h3><%=test %> before Toolkit application.</h3>
+ <hr />
+
+ <!-- Toolkit code block starts -->
+
+ <div id="ajax-wait">Loading...</div>
+ <div id="ajax-window"></div>
+ <script language="JavaScript">
+ itmill.tmp = new itmill.Client(document.getElementById('ajax-window'),"<%=applicationName %>/UIDL/","<%=applicationName %>/RES/base/client/",document.getElementById('ajax-wait'));
+ (new itmill.themes.Base("<%=applicationName %>/RES/base/")).registerTo(itmill.tmp);
+ itmill.tmp.start();
+ delete itmill.tmp;
+ </script>
+
+ <!-- Toolkit code block ends -->
+
+ </tr></td></table>
+
+ <hr />
+ <h3><%=test %> after Toolkit application.</h3>
+ <br />
+ <br />
+ </center>
+ </body>
+
+ </html>
+ \ No newline at end of file
diff --git a/WebContent/WEB-INF/web.xml b/WebContent/WEB-INF/web.xml
index 0ce0ba0bd4..13d6344e40 100644
--- a/WebContent/WEB-INF/web.xml
+++ b/WebContent/WEB-INF/web.xml
@@ -2,6 +2,32 @@
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>IT Mill Toolkit</display-name>
+ <servlet>
+ <servlet-name>LayoutDemo</servlet-name>
+ <servlet-class>com.itmill.toolkit.terminal.web.ApplicationServlet</servlet-class>
+ <init-param>
+ <param-name>application</param-name>
+ <param-value>com.itmill.toolkit.demo.LayoutDemo</param-value>
+ </init-param>
+ </servlet>
+ <servlet-mapping>
+ <servlet-name>LayoutDemo</servlet-name>
+ <url-pattern>/LayoutDemo/*</url-pattern>
+ </servlet-mapping>
+
+ <servlet>
+ <servlet-name>SelectDemo</servlet-name>
+ <servlet-class>com.itmill.toolkit.terminal.web.ApplicationServlet</servlet-class>
+ <init-param>
+ <param-name>application</param-name>
+ <param-value>com.itmill.toolkit.demo.SelectDemo</param-value>
+ </init-param>
+ </servlet>
+ <servlet-mapping>
+ <servlet-name>SelectDemo</servlet-name>
+ <url-pattern>/SelectDemo/*</url-pattern>
+ </servlet-mapping>
+
<servlet>
<servlet-name>features</servlet-name>
<servlet-class>com.itmill.toolkit.terminal.web.ApplicationServlet</servlet-class>
@@ -20,7 +46,7 @@
<servlet-class>com.itmill.toolkit.terminal.web.ApplicationServlet</servlet-class>
<init-param>
<param-name>application</param-name>
- <param-value>com.itmill.toolkit.example.Parameters</param-value>
+ <param-value>com.itmill.toolkit.demo.Parameters</param-value>
</init-param>
</servlet>
<servlet-mapping>
@@ -145,7 +171,6 @@
<url-pattern>/shortcut/*</url-pattern>
</servlet-mapping>
-
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
@@ -154,4 +179,5 @@
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
+
</web-app>
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>