--- /dev/null
+<%
+ //
+ // 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
<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>
<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>
<url-pattern>/shortcut/*</url-pattern>
</servlet-mapping>
-
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
+
</web-app>
<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>
</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>
<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
</div>
</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>
</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>
--- /dev/null
+package com.itmill.toolkit.demo;
+
+import com.itmill.toolkit.terminal.ClassResource;
+import com.itmill.toolkit.ui.*;
+
+/**
+ * This example demonstrates layouts. Layouts are populated with sample Toolkit
+ * UI components.
+ *
+ * @author IT Mill Ltd.
+ * @since 4.0.0
+ *
+ */
+public class LayoutDemo extends com.itmill.toolkit.Application {
+
+ /**
+ * Initialize Application. Demo components are added to main window.
+ */
+ public void init() {
+ Window mainWindow = new Window("Layout demo");
+ setMainWindow(mainWindow);
+
+ // set the application to use Corporate -theme
+ setTheme("corporate");
+
+ //
+ // Create horizontal ordered layout
+ //
+ OrderedLayout layoutA = new OrderedLayout(
+ OrderedLayout.ORIENTATION_HORIZONTAL);
+ // Add 4 panels
+ fillLayout(layoutA, 4);
+
+ //
+ // Create vertical ordered layout
+ //
+ OrderedLayout layoutB = new OrderedLayout(
+ OrderedLayout.ORIENTATION_VERTICAL);
+ // Add 4 panels
+ fillLayout(layoutB, 4);
+
+ //
+ // Create grid layout
+ //
+ GridLayout layoutG = new GridLayout(4, 4);
+ // Add 16 panels components
+ fillLayout(layoutG, 16);
+
+ //
+ // Create grid layout
+ //
+ GridLayout layoutG2 = new GridLayout(4, 4);
+ // Add 4 panels with absolute coordinates (diagonally)
+ layoutG2.addComponent(getExampleComponent("x=0, y=0"), 0, 0);
+ layoutG2.addComponent(getExampleComponent("x=1, y=1"), 1, 1);
+ layoutG2.addComponent(getExampleComponent("x=2, y=2"), 2, 2);
+ layoutG2.addComponent(getExampleComponent("x=3, y=3"), 3, 3);
+ // Add 4 pictures with absolute coordinates (diagonally)
+ layoutG2.addComponent(getExamplePicture("x=3, y=0"), 3, 0);
+ layoutG2.addComponent(getExamplePicture("x=2, y=1"), 2, 1);
+ layoutG2.addComponent(getExamplePicture("x=1, y=2"), 1, 2);
+ layoutG2.addComponent(getExamplePicture("x=0, y=3"), 0, 3);
+
+ //
+ // Create TabSheet
+ //
+ TabSheet tabsheet = new TabSheet();
+ tabsheet
+ .setCaption("Tabsheet, above layouts are added to this component");
+ tabsheet.addTab(layoutA, "Horizontal ordered layout", null);
+ tabsheet.addTab(layoutB, "Vertical ordered layout", null);
+ tabsheet.addTab(layoutG, "First grid layout", null);
+ tabsheet.addTab(layoutG2, "Second grid layout", null);
+
+ //
+ // Add demo layouts to main window
+ //
+ mainWindow.addComponent(new Label(
+ "<h3>Horizontal ordered layout</h3>Added four components.",
+ Label.CONTENT_XHTML));
+ mainWindow.addComponent(layoutA);
+ mainWindow.addComponent(new Label(
+ "<br /><h3>Vertical ordered layout</h3>Added four components.",
+ Label.CONTENT_XHTML));
+ mainWindow.addComponent(layoutB);
+ mainWindow.addComponent(new Label(
+ "<br /><h3>Grid Layout (4 x 4)</h3>Added 16 components.",
+ Label.CONTENT_XHTML));
+ mainWindow.addComponent(layoutG);
+ mainWindow
+ .addComponent(new Label("<br /><h3>Grid Layout (4 x 4)</h3>"
+ + "Added four panels and four embedded components "
+ + "diagonally with absolute coordinates.",
+ Label.CONTENT_XHTML));
+ mainWindow.addComponent(layoutG2);
+ mainWindow.addComponent(new Label(
+ "<br /><h3>TabSheet</h3>Added above layouts as tabs.",
+ Label.CONTENT_XHTML));
+ mainWindow.addComponent(tabsheet);
+
+ }
+
+ private Component getExamplePicture(String caption) {
+ ClassResource cr = new ClassResource("features/m-bullet-blue.gif", this);
+ Embedded em = new Embedded("Embedded " + caption, cr);
+ em.setWidth(170);
+ return em;
+ }
+
+ private Component getExampleComponent(String caption) {
+ Panel panel = new Panel();
+ panel.setCaption("Panel component " + caption);
+ panel
+ .addComponent(new Label(
+ "Panel is a container for other components, by default it draws a frame around it's "
+ + "extremities and may have a caption to clarify the nature of the contained components' purpose."
+ + " Panel contains an layout where the actual contained components are added, "
+ + "this layout may be switched on the fly.",
+ Label.CONTENT_XHTML));
+ panel.setWidth(222);
+ return panel;
+ }
+
+ /**
+ * Add multiple demo component to given layout.
+ *
+ * @param layout
+ * where components are added
+ * @param numberOfComponents
+ * to add
+ */
+ private void fillLayout(Layout layout, int numberOfComponents) {
+ for (int i = 1; i <= numberOfComponents; i++) {
+ layout.addComponent(getExampleComponent(Integer.toString(i)));
+ }
+ }
+
+}
* communicate with EmbeddedToolkit.jsp
*/
public void handleParameters(Map parameters) {
- // disabled, see bug #550
- //params.removeAllItems();
+ // TODO: disabled, see bug #550
+ // params.removeAllItems();
System.out.println("handleParameters()");
for (Iterator i = parameters.keySet().iterator(); i.hasNext();) {
String name = (String) i.next();
v += "'" + values[j] + "'";
}
params.addItem(new Object[] { v }, name);
- System.out.println("parameter name="+name+", value="+v);
}
}
}
tree.setDescription("Try right mouse button to initiate "
+ "actions menu. Note: on Opera you use meta key "
+ "and left mouse button.");
+ tree.setStyle("menu");
// Populate Toolkit Tree using select component as data source
tree.setContainerDataSource(select.getContainerDataSource());
--- /dev/null
+package com.itmill.toolkit.demo;
+
+import java.sql.SQLException;
+import com.itmill.toolkit.data.util.QueryContainer;
+import com.itmill.toolkit.demo.util.SampleDatabase;
+import com.itmill.toolkit.ui.*;
+
+/**
+ * This example demonstrates what is lazy loading feature on Select component.
+ * Demo Uses similar concepts to QueryContainerDemo.
+ *
+ * @author IT Mill Ltd.
+ * @since 4.0.0
+ *
+ */
+public class SelectDemo extends com.itmill.toolkit.Application {
+
+ // Select component where SQL rows are attached (using QueryContainer)
+ private Select select = new Select();
+
+ private Select lazySelect = new Select();
+
+ // Database provided with sample data
+ private SampleDatabase sampleDatabase;
+
+ /**
+ * Initialize Application. Demo components are added to main window.
+ */
+ public void init() {
+ Window main = new Window("Select demo");
+ setMainWindow(main);
+
+ // set the application to use Corporate -theme
+ setTheme("corporate");
+
+ // Main window contains heading, table, select and tree
+ Panel panel = new Panel("Select demo (a.k.a Google Suggests)");
+ panel.addComponent(lazySelect);
+ panel.addComponent(new Label("<hr />", Label.CONTENT_XHTML));
+ panel.addComponent(select);
+ main.addComponent(panel);
+
+ // create demo database
+ sampleDatabase = new SampleDatabase();
+
+ initSelects();
+ }
+
+ private void initSelects() {
+ // init select
+ select.setCaption("All employees default functionality.");
+ select.setItemCaptionPropertyId("WORKER");
+ // populate Toolkit select component with test SQL table rows
+ try {
+ QueryContainer qc = new QueryContainer(
+ "SELECT ID, UNIT||', '||LASTNAME||' '||FIRSTNAME"
+ + " AS WORKER FROM employee ORDER BY WORKER",
+ sampleDatabase.getConnection());
+ select.setContainerDataSource(qc);
+ } catch (SQLException e) {
+ e.printStackTrace();
+ }
+
+ // init lazySelect
+ lazySelect.setCaption("All employees with lazy loading "
+ + "(a.k.a Google Suggests) activated.");
+ lazySelect.setItemCaptionPropertyId("WORKER");
+ // use lazy loading (a.k.a Google Suggest)
+ lazySelect.setLazyLoading(true);
+ // use same datasource as select object uses
+ lazySelect.setContainerDataSource(select.getContainerDataSource());
+ }
+
+}
}
public void handleAction(Action action, Object sender, Object target) {
- main.addComponent(new Label("ShortcutAction fired" + action));
if (target == a)
this.buttonAHandler();
if (target == b)
this.close();
}
+ public void buttonAHandler() {
+ main.addComponent(new Label("Button A handler fired"));
+ }
+
public void buttonBHandler() {
main.addComponent(new Label("Button B handler fired"));
}
public void buttonCHandler() {
main.addComponent(new Label("Button C handler fired"));
}
-
- public void buttonAHandler() {
- main.addComponent(new Label("Button A handler fired"));
- }
}
projects / vaadin-framework.git / commitdiff