]> source.dussan.org Git - vaadin-framework.git/commitdiff
projects / vaadin-framework.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: f4f2577)
Fixed #579, #622
authorJani Laakso <jani.laakso@itmill.com>
Mon, 23 Apr 2007 11:33:28 +0000 (11:33 +0000)
committerJani Laakso <jani.laakso@itmill.com>
Mon, 23 Apr 2007 11:33:28 +0000 (11:33 +0000)
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

WebContent/ToolkitMashup.jsp [deleted file] patch | blob | history
WebContent/ToolkitMashup.jsp.txt [deleted file] patch | blob | history
WebContent/index.html patch | blob | history
WebContent/styles/demos.css patch | blob | history

diff --git a/WebContent/ToolkitMashup.jsp b/WebContent/ToolkitMashup.jsp
deleted file mode 100644 (file)
index eb563f0..0000000
--- a/WebContent/ToolkitMashup.jsp
+++ /dev/null
@@ -1,84 +0,0 @@
-<%
-  //
-  // Demonstrates how Toolkit application can be integrated into jsp pages
-  //
-  // You need to add 
-  // 1. one code block under <head>
-  // 2. one tag to <body>
-  // 3. one code block under <body>
-  //
-  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/ToolkitMashup.jsp.txt b/WebContent/ToolkitMashup.jsp.txt
deleted file mode 100644 (file)
index eb563f0..0000000
--- a/WebContent/ToolkitMashup.jsp.txt
+++ /dev/null
@@ -1,84 +0,0 @@
-<%
-  //
-  // Demonstrates how Toolkit application can be integrated into jsp pages
-  //
-  // You need to add 
-  // 1. one code block under <head>
-  // 2. one tag to <body>
-  // 3. one code block under <body>
-  //
-  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/index.html b/WebContent/index.html
index b486a56fc838db8ae9203226e5db2e28548aa600..3287dd84c7e006ae0287212cdc23f0a9df8ed4ba 100644 (file)
--- 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">\r
+<html>\r
+<head>\r
+<title>IT Mill Toolkit Demo</title>\r
+<link rel="stylesheet" type="text/css" href="styles/demos.css" />\r
+</head>\r
+<body>\r
+<div id="container">\r
+\r
+<div id="itmilllogo"><h1>IT Mill Toolkit</h1></div>\r
+\r
+<div id="toolkit"></div>\r
+\r
+  <div class="feature-browser">\r
+       <h4>Feature Browser</h4>\r
+       <div class="option">\r
+        <span class="link"><a href="features?renderingMode=detect">Autodetected mode</a></span>\r
+        <span class="desc">Use AJAX if supported by browser, otherwise fallback to HTML mode</span>\r
+       </div>\r
+       <div class="option">\r
+        <span class="link"><a href="features?renderingMode=ajax">AJAX mode</a></span>\r
+        <span class="desc">Select AJAX-based technology mode</span>\r
+       </div>\r
+       <div class="option">\r
+        <span class="link"><a href="features?renderingMode=html">HTML mode</a></span>\r
+        <span class="desc">Select page based request/response technology mode</span>\r
+       </div>\r
+       <br />Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/features">browse features folder</a></span>\r
+  </div>\r
+  \r
+  <div class="sample-code">\r
+       <h3>Simple application demos</h3>\r
+       <div class="option">\r
+        <span class="link"><a href="HelloWorld?renderingMode=ajax">HelloWorld</a></span>\r
+        <span class="desc">Simple Toolkit application.</span>\r
+       </div>\r
+       <div class="option">\r
+        <span class="link"><a href="Calc?renderingMode=ajax">Calc</a></span>\r
+        <span class="desc">Simple Toolkit application where events are used.</span>\r
+       </div>\r
+       <br />Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/HelloWorld.java.html">HelloWorld.java</a></span> and \r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/Calc.java.html">Calc.java</a></span>\r
+       <br />\r
+  </div>\r
+  \r
+  <div class="sample-code">\r
+       <h3><a href="UpgradingSample?renderingMode=ajax">Long lifecycle of Toolkit applications</a></h3>\r
+       <div class="option">\r
+       <p>\r
+       Demonstrates sample <a href="http://www.millstone.org/">Millstone</a> application that was ajaxified (upgraded to Toolkit 4.0.0)\r
+       simply by changing three import namespaces and adding Toolkit libraries to classpath.\r
+       Initial IT Mill Toolkit framework has existed since 2001 (see <a href="http://www.millstone.org/">Millstone</a>) and is\r
+       ready for production use today.\r
+       </p>\r
+       <b>Note:</b> This sample application was created on year 2002.\r
+       </div>  \r
+       <br />Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/UpgradingSample.java.html">UpgradingSample.java</a></span>\r
+  </div>\r
+  \r
+  \r
+  <div class="feature-browser">\r
+       <h3><a href="openajax/index.html">OpenAjax Hub Conformance tests</a></h3>\r
+       <div class="option">\r
+       <p>\r
+        Performs basic OpenAjax hub conformance tests against IT Mill Toolkit.\r
+        Also demonstrates how to integrate Toolkit applications into HTML pages.\r
+        </p>\r
+        <b>Note:</b> Embedded FeatureBrowser application is the same\r
+        application instance that can be accessed as standalone application, see <code>FeatureBrowser.\r
+       </code></div>   \r
+  </div>\r
+  \r
+  <div class="feature-browser">\r
+       <h3><a href="LayoutDemo?renderingMode=ajax">Layout demo</a></h3>\r
+       <div class="option">\r
+       <p>\r
+        This example demonstrates layouts for Tookit application.\r
+       </p>\r
+       <p>\r
+        Demonstrates how to use\r
+        <em>com.itmill.toolkit.ui.OrderedLayout</em>,\r
+        <em>com.itmill.toolkit.ui.GridLayout</em>,\r
+        <em>com.itmill.toolkit.ui.Panel</em> and\r
+        <em>com.itmill.toolkit.ui.TabSheet</em>.\r
+    </p>\r
+       </div>  \r
+       Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/LayoutDemo.java.html">LayoutDemo.java</a></span>\r
+  </div>\r
+  \r
+  <div class="feature-browser">\r
+       <h3><a href="CustomLayoutDemo?renderingMode=ajax">Custom layout and custom theme demo</a></h3>\r
+       <div class="option">\r
+       <p>\r
+        This example demonstrates how Toolkit interacts with HTML pages\r
+        that web designer usually creates. Shows how Toolkit UI components\r
+        are placed to HTML pages and how HTML pages are rendered within Toolkit\r
+        framework.\r
+       </p>\r
+       <p>\r
+        Demonstrates how to create\r
+        <em>com.itmill.toolkit.ui.CustomLayout</em>.\r
+    </p>\r
+       </div>  \r
+       Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/CustomLayoutDemo.java.html">CustomLayoutDemo.java</a></span>\r
+  </div>\r
+  \r
+  <div class="feature-browser">\r
+       <h3><a href="QueryContainerDemo?renderingMode=ajax">Tree using QueryContainer demo</a></h3>\r
+       <div class="option">\r
+       <p>\r
+        This example shows how Table, Select and Tree UI components can use Containers. \r
+        QueryContainer is used to bind SQL table rows into Toolkit UI components. \r
+        Table has few example actions added. Also embedding XHTML through Label components is used. \r
+       </p>\r
+       <p>\r
+        Demonstrates how to create <em>com.itmill.toolkit.data.Container</em> and set it as \r
+        datasource to UI components <em>com.itmill.toolkit.ui.Component.Tree</em>, how to \r
+        receive ExpandEvent and implement <em>com.itmill.toolkit.ui.Tree.ExpandListener</em>, \r
+        how to use <em>com.itmill.toolkit.event.Action</em>.\r
+    </p>\r
+       </div>\r
+       Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/QueryContainerDemo.java.html">QueryContainerDemo.java</a></span>\r
+  </div>\r
+  \r
+   <div class="feature-browser">\r
+       <h3><a href="TableDemo?renderingMode=ajax">Table demo</a></h3>\r
+       <div class="option">\r
+        <p>\r
+        Similar to <em>Tree using QueryContainer demo</em> but uses different style\r
+        for handling events with Table component.\r
+        </p>\r
+        <p>\r
+        Demonstrates another possibility how event framework may be used,\r
+        in this example specific methods are registered for button click events.\r
+        </p>\r
+        <b>Note:</b> This application instance is embedded\r
+        to jsp page also, see <em>ToolkitMashup.jsp</em>.\r
+       </div>\r
+       <br />Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/TableDemo.java.html">TableDemo.java</a></span>\r
+  </div>\r
+  \r
+  <div class="feature-browser">\r
+       <h3><a href="TreeFilesystemContainer?renderingMode=ajax">Tree using FilesystemContainer demo</a></h3>\r
+       <div class="option">\r
+        <p>\r
+        Browsable file explorer using Toolkit Tree component.\r
+        </p>\r
+        Demonstrates how to\r
+        use <em>com.itmill.toolkit.ui.Component.Tree</em> datasource container,\r
+        how to create <em>com.itmill.toolkit.data.util.FilesystemContainer</em>,\r
+        how to read <em>com.itmill.toolkit.ui.Component.Event</em> objects, how\r
+        to receive and handle any event by implementing\r
+        <em>com.itmill.toolkit.ui.Component.Listener</em>.\r
+       </div>\r
+       <br />Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/TreeFilesystemContainer.java.html">TreeFilesystemContainer.java</a></span>\r
+  </div>\r
+  \r
+  <div class="feature-browser">\r
+       <h3><a href="TreeFilesystem?renderingMode=ajax">Tree item handling demo</a></h3>\r
+       <div class="option">\r
+        <p>\r
+        Browsable file explorer using Toolkit Tree component.\r
+        </p>\r
+        Demonstrates: how\r
+        to add items hierarchially into\r
+        <em>com.itmill.toolkit.ui.Component.Tree</em>, how to receive\r
+        ExpandEvent and implement\r
+        <em>com.itmill.toolkit.ui.Tree.ExpandListener</em>.\r
+       </div>  \r
+       <br />Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/TreeFilesystem.java.html">TreeFilesystem.java</a></span>\r
+  </div>\r
+  \r
+  <div class="feature-browser">\r
+       <h3><a href="SelectDemo?renderingMode=ajax">Select demo</a></h3>\r
+       <div class="option">\r
+       <p>\r
+        This example shows select component with default and lazy loading functionality enabled (a.k.a Google Suggest).\r
+        Click to first select component and type few letters using your keyboard to see it in action.\r
+        Second select component has default functionality.\r
+       </p>\r
+       </div>\r
+       Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/SelectDemo.java.html">SelectDemo.java</a></span>\r
+  </div>\r
+  \r
+  <div class="feature-browser">\r
+       <h3><a href="FilterSelect?renderingMode=ajax">FilterSelect demo</a></h3>\r
+       <div class="option">\r
+       <p>\r
+        This example shows three select components with lazy loading functionality enabled.\r
+        First select works like Google Suggest, second uses "Contains" filter and third uses custom "Ends with" filter.\r
+        Click to select components and type few letters using your keyboard to see it in action.\r
+       </p>\r
+       </div>\r
+       Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/FilterSelect.java.html">FilterSelect.java</a></span>\r
+  </div>\r
+  \r
+  <div class="feature-browser">\r
+       <h3><a href="ModalWindow?renderingMode=ajax">Modal window</a></h3>\r
+       <div class="option">\r
+        Example of how Modal Windows may be created using Window component.\r
+       </div>\r
+       <br />Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/ModalWindow.java.html">ModalWindow.java</a></span>\r
+  </div>\r
+\r
+  <div class="feature-browser">\r
+       <h3><a href="KeyboardShortcut?renderingMode=ajax">Keyboard events demo</a></h3>\r
+       <div class="option">\r
+        Contains few Toolkit UI components that can be interacted by pressing keys in keyboard.\r
+       </div>\r
+       <br />Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/KeyboardShortcut.java.html">KeyboardShortcut.java</a></span>\r
+  </div>\r
+  \r
+  <div class="feature-browser">\r
+       <h3><a href="Parameters?renderingMode=ajax">URI and Parameter handling demo</a></h3>\r
+       <div class="option">\r
+        This is a demonstration of how URL parameters can be recieved and handled.\r
+        Parameters and URL:s can be received trough the windows by registering\r
+        URIHandler and ParameterHandler classes window.\r
+       </div>\r
+       <br />Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/Parameters.java.html">Parameters.java</a></span>\r
+  </div>\r
+\r
+  <div class="feature-browser">\r
+       <h3><a href="BufferedComponents?renderingMode=ajax">Buffered UI components demo</a></h3>\r
+       <div class="option">\r
+        Explains how to use buffering with UI components, and how to perform commit and discard functions.\r
+        With buffered UI components underlying data objects and UI objects have separate states.\r
+       </div>\r
+       <br />Source code:\r
+       <span class="link"><a href="src/com/itmill/toolkit/demo/BufferedComponents.java.html">BufferedComponents.java</a></span>\r
+  </div>\r
+  \r
+\r
+</div><!-- // Container -->\r
+\r
+</body></html>
\ No newline at end of file
diff --git a/WebContent/styles/demos.css b/WebContent/styles/demos.css
index c0501a5aec30d2a6c6eedde1d330656253a47f64..ad029a1cd4133915957259c5857fcb1e5ab6a9ec 100644 (file)
--- a/WebContent/styles/demos.css
+++ b/WebContent/styles/demos.css
@@ -112,8 +112,8 @@ hr {
        border: none;
 }
 
-#feature-browser,
-#sample-code {
+.feature-browser,
+.sample-code {
        clear: both;
        padding: 10px 10px 20px 50px;
        background-color: #f7f7f7;
@@ -123,11 +123,11 @@ hr {
        margin: 30px 0;
 }
 
-#feature-browser {
+.feature-browser {
        background: #f7f7f7 url(feature_browser_bg.gif) no-repeat top right;
 }
 
-#sample-code {
+.sample-code {
        background: #f7f7f7 url(sample_code_bg.gif) no-repeat top right;
 }
 
@@ -140,5 +140,4 @@ hr {
        width: 15em;
 }
 .option .desc {
-       float: left;
 }
\ No newline at end of file
Vaadin 6, 7, 8 is a Java framework for modern Java web applications: https://github.com/vaadin/framework