diff options
| author | Jani Laakso <jani.laakso@itmill.com> | 2007-04-23 11:33:28 +0000 |
|---|---|---|
| committer | Jani Laakso <jani.laakso@itmill.com> | 2007-04-23 11:33:28 +0000 |
| commit | 2fae04eee642364a00b08e58432a8d5e5a5181cf (patch) | |
| tree | ec263938f1191938a3514c3366cc1103c208d751 /WebContent/index.html | |
| parent | f4f2577edd820a76ca31ba9b6d72db6cc41928b1 (diff) | |
| download | vaadin-framework-2fae04eee642364a00b08e58432a8d5e5a5181cf.tar.gz vaadin-framework-2fae04eee642364a00b08e58432a8d5e5a5181cf.zip | |
Fixed #579, #622
Removed Toolkit Mashup demo because it did not work with IE7 (would have required IE7 dependant checks code on JSP page).
Fixed #631,
index.html and CSS. Now fonts should be the same for Safari and IE7 too.
svn changeset:1299/svn branch:trunk
Diffstat (limited to 'WebContent/index.html')
| -rw-r--r-- | WebContent/index.html | 515 |
1 files changed, 250 insertions, 265 deletions
diff --git a/WebContent/index.html b/WebContent/index.html index b486a56fc8..3287dd84c7 100644 --- a/WebContent/index.html +++ b/WebContent/index.html @@ -1,265 +1,250 @@ -<html> -<head> -<title>IT Mill Toolkit Demo</title> -<link rel="stylesheet" type="text/css" href="styles/demos.css" /> -</head> -<body> - -<div id="container"> - -<div id="itmilllogo"><h1>IT Mill Toolkit</h1></div> - -<div id="toolkit"></div> - - <div id="feature-browser"> - <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 class="option"> - <span class="link"><a href="features?renderingMode=ajax">AJAX mode</a></span> - <span class="desc">Select AJAX-based technology mode</span> - </div> - <div class="option"> - <span class="link"><a href="features?renderingMode=html">HTML mode</a></span> - <span class="desc">Select page based request/response technology mode</span> - </div> - <br /><br />Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/features">browse features folder</a></span> - </div> - - <div id="sample-code"> - <h3>Simple application demos</h3> - <div class="option"> - <span class="link"><a href="HelloWorld?renderingMode=ajax">HelloWorld</a></span> - <span class="desc">Simple Toolkit application.</span> - </div> - <div class="option"> - <span class="link"><a href="Calc?renderingMode=ajax">Calc</a></span> - <span class="desc">Simple Toolkit application where events are used.</span> - </div> - <br /><br />Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/HelloWorld.java.html">HelloWorld.java</a></span> - <span class="link"><a href="src/com/itmill/toolkit/demo/Calc.java.html">Calc.java</a></span> - <br /> - </div> - - <div id="sample-code"> - <h3><a href="UpgradingSample?renderingMode=ajax">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:</b> This sample application was created on year 2002. - </div> - <br />Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/UpgradingSample.java.html">UpgradingSample.java</a></span> - </div> - - - <div id="feature-browser"> - <h3><a href="openajax/index.html">OpenAjax Hub Conformance tests</a></h3> - <div class="option"> - <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</em>. - </div> - </div> - - <div id="feature-browser"> - <h3><a href="ToolkitMashup.jsp">Toolkit application mashup demo</a></h3> - <div class="option"> - <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 <em>TableDemo</em>. - </div> - <br />Source code: - <span class="link"><a href="ToolkitMashup.jsp.txt">ToolkitMashup.jsp</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="LayoutDemo?renderingMode=ajax">Layout demo</a></h3> - <div class="option"> - <p> - This example demonstrates layouts for Tookit application. - </p> - <p> - Demonstrates how to use - <em>com.itmill.toolkit.ui.OrderedLayout</em>, - <em>com.itmill.toolkit.ui.GridLayout</em>, - <em>com.itmill.toolkit.ui.Panel</em> and - <em>com.itmill.toolkit.ui.TabSheet</em>. - </p> - </div> - Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/LayoutDemo.java.html">LayoutDemo.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="CustomLayoutDemo?renderingMode=ajax">Custom layout and custom theme demo</a></h3> - <div class="option"> - <p> - This example demonstrates how Toolkit interacts with HTML pages - that web designer usually creates. Shows how Toolkit UI components - are placed to HTML pages and how HTML pages are rendered within Toolkit - framework. - </p> - <p> - Demonstrates how to create - <em>com.itmill.toolkit.ui.CustomLayout</em>. - </p> - </div> - Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/CustomLayoutDemo.java.html">CustomLayoutDemo.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="QueryContainerDemo?renderingMode=ajax">Tree using QueryContainer demo</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 <em>com.itmill.toolkit.data.Container</em> and set it as - datasource to UI components <em>com.itmill.toolkit.ui.Component.Tree</em>, how to - receive ExpandEvent and implement <em>com.itmill.toolkit.ui.Tree.ExpandListener</em>, - how to use <em>com.itmill.toolkit.event.Action</em>. - </p> - </div> - Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/QueryContainerDemo.java.html">QueryContainerDemo.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="TableDemo?renderingMode=ajax">Table demo</a></h3> - <div class="option"> - <p> - Similar to <em>Tree using QueryContainer demo</em> but uses different style - for handling events with Table component. - </p> - <p> - Demonstrates 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 <em>ToolkitMashup.jsp</em>. - </div> - <br />Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/TableDemo.java.html">TableDemo.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="TreeFilesystemContainer?renderingMode=ajax">Tree using FilesystemContainer demo</a></h3> - <div class="option"> - <p> - Browsable file explorer using Toolkit Tree component. - </p> - Demonstrates how to - use <em>com.itmill.toolkit.ui.Component.Tree</em> datasource container, - how to create <em>com.itmill.toolkit.data.util.FilesystemContainer</em>, - how to read <em>com.itmill.toolkit.ui.Component.Event</em> objects, how - to receive and handle any event by implementing - <em>com.itmill.toolkit.ui.Component.Listener</em>. - </div> - <br />Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/TreeFilesystemContainer.java.html">TreeFilesystemContainer.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="TreeFilesystem?renderingMode=ajax">Tree item handling demo</a></h3> - <div class="option"> - <p> - Browsable file explorer using Toolkit Tree component. - </p> - Demonstrates: how - to add items hierarchially into - <em>com.itmill.toolkit.ui.Component.Tree</em>, how to receive - ExpandEvent and implement - <em>com.itmill.toolkit.ui.Tree.ExpandListener</em>. - </div> - <br />Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/TreeFilesystem.java.html">TreeFilesystem.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="SelectDemo?renderingMode=ajax">Select demo</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 using your keyboard to see it in action. - Second select component has default functionality. - </p> - </div> - Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/SelectDemo.java.html">SelectDemo.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="FilterSelect?renderingMode=ajax">FilterSelect demo</a></h3> - <div class="option"> - <p> - This example shows three select components with lazy loading functionality enabled. - First select works like Google Suggest, second uses "Contains" filter and third uses custom "Ends with" filter. - Click to select components and type few letters using your keyboard to see it in action. - </p> - </div> - Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/FilterSelect.java.html">FilterSelect.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="ModalWindow?renderingMode=ajax">Modal window</a></h3> - <div class="option"> - Example of how Modal Windows may be created using Window component. - </div> - <br />Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/ModalWindow.java.html">ModalWindow.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="KeyboardShortcut?renderingMode=ajax">Keyboard events demo</a></h3> - <div class="option"> - Contains few Toolkit UI components that can be interacted by pressing keys in keyboard. - </div> - <br />Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/KeyboardShortcut.java.html">KeyboardShortcut.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="Parameters?renderingMode=ajax">URI and Parameter handling demo</a></h3> - <div class="option"> - This is a demonstration of how URL parameters can be recieved and handled. - Parameters and URL:s can be received trough the windows by registering - URIHandler and ParameterHandler classes window. - </div> - <br />Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/Parameters.java.html">Parameters.java</a></span> - </div> - - <div id="feature-browser"> - <h3><a href="BufferedComponents?renderingMode=ajax">Buffered UI components demo</a></h3> - <div class="option"> - Explains how to use buffering with UI components, and how to perform commit and discard functions. - With buffered UI components underlying data objects and UI objects have separate states. - </div> - <br />Source code: - <span class="link"><a href="src/com/itmill/toolkit/demo/BufferedComponents.java.html">BufferedComponents.java</a></span> - </div> - - -</div><!-- // Container --> - -</body> -</html> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+<title>IT Mill Toolkit Demo</title>
+<link rel="stylesheet" type="text/css" href="styles/demos.css" />
+</head>
+<body>
+<div id="container">
+
+<div id="itmilllogo"><h1>IT Mill Toolkit</h1></div>
+
+<div id="toolkit"></div>
+
+ <div class="feature-browser">
+ <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 class="option">
+ <span class="link"><a href="features?renderingMode=ajax">AJAX mode</a></span>
+ <span class="desc">Select AJAX-based technology mode</span>
+ </div>
+ <div class="option">
+ <span class="link"><a href="features?renderingMode=html">HTML mode</a></span>
+ <span class="desc">Select page based request/response technology mode</span>
+ </div>
+ <br />Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/features">browse features folder</a></span>
+ </div>
+
+ <div class="sample-code">
+ <h3>Simple application demos</h3>
+ <div class="option">
+ <span class="link"><a href="HelloWorld?renderingMode=ajax">HelloWorld</a></span>
+ <span class="desc">Simple Toolkit application.</span>
+ </div>
+ <div class="option">
+ <span class="link"><a href="Calc?renderingMode=ajax">Calc</a></span>
+ <span class="desc">Simple Toolkit application where events are used.</span>
+ </div>
+ <br />Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/HelloWorld.java.html">HelloWorld.java</a></span> and
+ <span class="link"><a href="src/com/itmill/toolkit/demo/Calc.java.html">Calc.java</a></span>
+ <br />
+ </div>
+
+ <div class="sample-code">
+ <h3><a href="UpgradingSample?renderingMode=ajax">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:</b> This sample application was created on year 2002.
+ </div>
+ <br />Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/UpgradingSample.java.html">UpgradingSample.java</a></span>
+ </div>
+
+
+ <div class="feature-browser">
+ <h3><a href="openajax/index.html">OpenAjax Hub Conformance tests</a></h3>
+ <div class="option">
+ <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 class="feature-browser">
+ <h3><a href="LayoutDemo?renderingMode=ajax">Layout demo</a></h3>
+ <div class="option">
+ <p>
+ This example demonstrates layouts for Tookit application.
+ </p>
+ <p>
+ Demonstrates how to use
+ <em>com.itmill.toolkit.ui.OrderedLayout</em>,
+ <em>com.itmill.toolkit.ui.GridLayout</em>,
+ <em>com.itmill.toolkit.ui.Panel</em> and
+ <em>com.itmill.toolkit.ui.TabSheet</em>.
+ </p>
+ </div>
+ Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/LayoutDemo.java.html">LayoutDemo.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="CustomLayoutDemo?renderingMode=ajax">Custom layout and custom theme demo</a></h3>
+ <div class="option">
+ <p>
+ This example demonstrates how Toolkit interacts with HTML pages
+ that web designer usually creates. Shows how Toolkit UI components
+ are placed to HTML pages and how HTML pages are rendered within Toolkit
+ framework.
+ </p>
+ <p>
+ Demonstrates how to create
+ <em>com.itmill.toolkit.ui.CustomLayout</em>.
+ </p>
+ </div>
+ Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/CustomLayoutDemo.java.html">CustomLayoutDemo.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="QueryContainerDemo?renderingMode=ajax">Tree using QueryContainer demo</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 <em>com.itmill.toolkit.data.Container</em> and set it as
+ datasource to UI components <em>com.itmill.toolkit.ui.Component.Tree</em>, how to
+ receive ExpandEvent and implement <em>com.itmill.toolkit.ui.Tree.ExpandListener</em>,
+ how to use <em>com.itmill.toolkit.event.Action</em>.
+ </p>
+ </div>
+ Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/QueryContainerDemo.java.html">QueryContainerDemo.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="TableDemo?renderingMode=ajax">Table demo</a></h3>
+ <div class="option">
+ <p>
+ Similar to <em>Tree using QueryContainer demo</em> but uses different style
+ for handling events with Table component.
+ </p>
+ <p>
+ Demonstrates 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 <em>ToolkitMashup.jsp</em>.
+ </div>
+ <br />Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/TableDemo.java.html">TableDemo.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="TreeFilesystemContainer?renderingMode=ajax">Tree using FilesystemContainer demo</a></h3>
+ <div class="option">
+ <p>
+ Browsable file explorer using Toolkit Tree component.
+ </p>
+ Demonstrates how to
+ use <em>com.itmill.toolkit.ui.Component.Tree</em> datasource container,
+ how to create <em>com.itmill.toolkit.data.util.FilesystemContainer</em>,
+ how to read <em>com.itmill.toolkit.ui.Component.Event</em> objects, how
+ to receive and handle any event by implementing
+ <em>com.itmill.toolkit.ui.Component.Listener</em>.
+ </div>
+ <br />Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/TreeFilesystemContainer.java.html">TreeFilesystemContainer.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="TreeFilesystem?renderingMode=ajax">Tree item handling demo</a></h3>
+ <div class="option">
+ <p>
+ Browsable file explorer using Toolkit Tree component.
+ </p>
+ Demonstrates: how
+ to add items hierarchially into
+ <em>com.itmill.toolkit.ui.Component.Tree</em>, how to receive
+ ExpandEvent and implement
+ <em>com.itmill.toolkit.ui.Tree.ExpandListener</em>.
+ </div>
+ <br />Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/TreeFilesystem.java.html">TreeFilesystem.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="SelectDemo?renderingMode=ajax">Select demo</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 using your keyboard to see it in action.
+ Second select component has default functionality.
+ </p>
+ </div>
+ Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/SelectDemo.java.html">SelectDemo.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="FilterSelect?renderingMode=ajax">FilterSelect demo</a></h3>
+ <div class="option">
+ <p>
+ This example shows three select components with lazy loading functionality enabled.
+ First select works like Google Suggest, second uses "Contains" filter and third uses custom "Ends with" filter.
+ Click to select components and type few letters using your keyboard to see it in action.
+ </p>
+ </div>
+ Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/FilterSelect.java.html">FilterSelect.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="ModalWindow?renderingMode=ajax">Modal window</a></h3>
+ <div class="option">
+ Example of how Modal Windows may be created using Window component.
+ </div>
+ <br />Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/ModalWindow.java.html">ModalWindow.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="KeyboardShortcut?renderingMode=ajax">Keyboard events demo</a></h3>
+ <div class="option">
+ Contains few Toolkit UI components that can be interacted by pressing keys in keyboard.
+ </div>
+ <br />Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/KeyboardShortcut.java.html">KeyboardShortcut.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="Parameters?renderingMode=ajax">URI and Parameter handling demo</a></h3>
+ <div class="option">
+ This is a demonstration of how URL parameters can be recieved and handled.
+ Parameters and URL:s can be received trough the windows by registering
+ URIHandler and ParameterHandler classes window.
+ </div>
+ <br />Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/Parameters.java.html">Parameters.java</a></span>
+ </div>
+
+ <div class="feature-browser">
+ <h3><a href="BufferedComponents?renderingMode=ajax">Buffered UI components demo</a></h3>
+ <div class="option">
+ Explains how to use buffering with UI components, and how to perform commit and discard functions.
+ With buffered UI components underlying data objects and UI objects have separate states.
+ </div>
+ <br />Source code:
+ <span class="link"><a href="src/com/itmill/toolkit/demo/BufferedComponents.java.html">BufferedComponents.java</a></span>
+ </div>
+
+
+</div><!-- // Container -->
+
+</body></html>
\ No newline at end of file |