Jani Laakso
16 years ago
27 changed files with 246 additions and 1097 deletions
build/package/WebContent/demos.html → WebContent/demos.html
View File
+ 245
- 240
WebContent/index.html
View File
| @@ -1,242 +1,247 @@ | |||
| <!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><a href="reservr.html">Reservr</a></h4> | |||
| <div class="option"> | |||
| <span class="link"><a href="reservr.html">Reservr</a></span> | |||
| <span class="desc">Example car reservation application. Uses Google Maps widget.</span> | |||
| </div> | |||
| <br />Source code: | |||
| <span class="link"><a href="doc/demo-source/com/itmill/toolkit/demo/reservation">browse source</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h4><a href="TestBench/">Test Bench</a></h4> | |||
| <div class="option"> | |||
| <span class="link"><a href="TestBench/">TestBench</a></span> | |||
| <span class="desc">Internal test bench application for trying out different components and features of the IT Mill Toolkit</span> | |||
| </div> | |||
| <br />Source code: | |||
| <span class="link"><a href="doc/demo-source/com/itmill/toolkit/tests/">browse TestBench folder</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h4><a href="FeaturesApplication/">Feature Browser</a></h4> | |||
| <div class="option"> | |||
| <span class="link"><a href="FeaturesApplication/">FeatureBrowser</a></span> | |||
| <span class="desc">Test bench application for trying out different components and features of the IT Mill Toolkit</span> | |||
| </div> | |||
| <br />Source code: | |||
| <span class="link"><a href="doc/demo-source/com/itmill/toolkit/demo/features">browse features folder</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h3><a href="NotificationDemo/">Notification Demo</a></h3> | |||
| <div class="option"> | |||
| <p> | |||
| Smaller application which demonstrates Rich Text Area widget and Window notification functionality. | |||
| </p> | |||
| </div> | |||
| Source code: | |||
| <span class="link"><a href="doc/demo-source/com/itmill/toolkit/demo/NotificationDemo.java.html">NotificationDemo.java</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h4><a href="colorpicker/">Colorpicker widget</a></h4> | |||
| <div class="option"> | |||
| <span class="link"><a href="colorpicker/">Colorpicker widget</a></span> | |||
| <span class="desc">Demonstrates how to make new widgets easily with Toolkit. | |||
| See also documentation which is located <a href="/doc/manual/ch08s02.html">here</a>.</span> | |||
| </div> | |||
| <br />Source code: | |||
| <span class="link"><a href="doc/demo-source/com/itmill/toolkit/demo/colorpicker">browse source</a></span> | |||
| </div> | |||
| <div class="sample-code"> | |||
| <h3>Simple application demos</h3> | |||
| <div class="option"> | |||
| <span class="link"><a href="HelloWorld/">HelloWorld</a></span> | |||
| <span class="desc">Classic Hello World example.</span> | |||
| </div> | |||
| <div class="option"> | |||
| <span class="link"><a href="Calc/">Calc</a></span> | |||
| <span class="desc">Simple Toolkit application where events are used.</span> | |||
| </div> | |||
| <br />Source code: | |||
| <span class="link"><a href="doc/demo-source/com/itmill/toolkit/demo/HelloWorld.java.html">HelloWorld.java</a></span> and | |||
| <span class="link"><a href="doc/demo-source/com/itmill/toolkit/demo/Calc.java.html">Calc.java</a></span> | |||
| </div> | |||
| <div class="sample-code"> | |||
| <h3>Client-side caching demo</h3> | |||
| <div class="option"> | |||
| <span class="link"><a href="CachingDemo/">CachingDemo</a></span> | |||
| <span class="desc"> | |||
| Simple demo of Toolkit cache feature. An Tabsheet contains two tabs where second tab contains heavy server-side content processing. | |||
| For the first time you load tab2 it takes long time. Following request are lightning fast because | |||
| Toolkit server instruct client-side to use already cached version (components within tab2 have not changed). </span> | |||
| </div> | |||
| <br />Source code: | |||
| <span class="link"><a href="doc/demo-source/com/itmill/toolkit/demo/CachingDemo.java.html">CachingDemo.java</a></span> | |||
| </div> | |||
| <div class="sample-code"> | |||
| <h3><a href="UpgradingSample/">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="doc/demo-source/com/itmill/toolkit/demo/UpgradingSample.java.html">UpgradingSample.java</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h3><a href="QueryContainerDemo/">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 | |||
| data source 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="doc/demo-source/com/itmill/toolkit/demo/QueryContainerDemo.java.html">QueryContainerDemo.java</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h3><a href="TableDemo/">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> | |||
| </div> | |||
| <br />Source code: | |||
| <span class="link"><a href="doc/demo-source/com/itmill/toolkit/demo/TableDemo.java.html">TableDemo.java</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h3><a href="TreeFilesystemContainer/">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> data source 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="doc/demo-source/com/itmill/toolkit/demo/TreeFilesystemContainer.java.html">TreeFilesystemContainer.java</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h3><a href="TreeFilesystem/">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="doc/demo-source/com/itmill/toolkit/demo/TreeFilesystem.java.html">TreeFilesystem.java</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h3><a href="SelectDemo/">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="doc/demo-source/com/itmill/toolkit/demo/SelectDemo.java.html">SelectDemo.java</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h3><a href="FilterSelect/">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="doc/demo-source/com/itmill/toolkit/demo/FilterSelect.java.html">FilterSelect.java</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h3><a href="KeyboardShortcut/">Keyboard events demo</a></h3> | |||
| <div class="option"> | |||
| Contains few Toolkit UI components that can be interacted by pressing keys in keyboard. | |||
| <b>Note</b>: This feature is under development and is considered as beta. | |||
| </div> | |||
| <br />Source code: | |||
| <span class="link"><a href="doc/demo-source/com/itmill/toolkit/demo/KeyboardShortcut.java.html">KeyboardShortcut.java</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h3><a href="Parameters/">URI and Parameter handling demo</a></h3> | |||
| <div class="option"> | |||
| This is a demonstration of how URL parameters can be received 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="doc/demo-source/com/itmill/toolkit/demo/Parameters.java.html">Parameters.java</a></span> | |||
| </div> | |||
| <div class="feature-browser"> | |||
| <h3><a href="BufferedComponents/">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="doc/demo-source/com/itmill/toolkit/demo/BufferedComponents.java.html">BufferedComponents.java</a></span> | |||
| </div> | |||
| </div><!-- // Container --> | |||
| </body></html> | |||
| <head> | |||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |||
| <title>IT Mill Toolkit 5</title> | |||
| <link rel="stylesheet" type="text/css" href="demo/css/styles.css" /> | |||
| <!--[if IE]> | |||
| <link rel="stylesheet" type="text/css" href="demo/css/ie.css" /> | |||
| <![endif]--> | |||
| <script type="text/javascript"> | |||
| window.onload = function() { | |||
| itmill.init(); | |||
| } | |||
| var itmill = function() { | |||
| var isIE = /MSIE/.test(navigator.userAgent) && !window.opera; | |||
| var packageContent; | |||
| var package; | |||
| var demoArea; | |||
| var demos; | |||
| var additionalDemos; | |||
| var additionalDemosContent; | |||
| return { | |||
| init : function() { | |||
| // Fetch references | |||
| packageContent = document.getElementById("package-contents-content"); | |||
| package = document.getElementById("package-contents"); | |||
| demoArea = document.getElementById("demo-buttons"); | |||
| demos = demoArea.getElementsByTagName("li"); | |||
| additionalDemos = document.getElementById("additional-demos"); | |||
| additionalDemosContent = document.getElementById("additional-demos-content"); | |||
| // Hide panel initially | |||
| packageContent.style.display = "none"; | |||
| additionalDemosContent.style.display = "none"; | |||
| // Enable additional demos panel hiding/showing | |||
| var toggle = additionalDemos.getElementsByTagName("h3")[0]; | |||
| toggle.style.cursor = "pointer"; | |||
| toggle.title = "Show/hide additional demos"; | |||
| // Use the quick-n-dirty way to attach event listeners | |||
| toggle.onclick = function() {itmill.togglePanel(additionalDemosContent)}; | |||
| // Enable package contents panel hiding/showing | |||
| toggle = package.getElementsByTagName("h3")[0]; | |||
| toggle.style.cursor = "pointer"; | |||
| toggle.title = "Show/hide package contents"; | |||
| // Use the quick-n-dirty way to attach event listeners | |||
| toggle.onclick = function() {itmill.togglePanel(packageContent)}; | |||
| // enable demo button hovers | |||
| for(var i=0; i < demos.length; i++) { | |||
| demos[i].onmouseover = this.focusDemo; | |||
| } | |||
| demoArea.onmouseout = this.blurDemos; | |||
| // TODO implement feedback popup | |||
| }, | |||
| togglePanel : function(which) { | |||
| if(which._open) { | |||
| which.style.display = "none"; | |||
| which._open = false; | |||
| } else { | |||
| which.style.display = "block"; | |||
| which._open = true; | |||
| } | |||
| // Dirty fix to reposition package-content panel | |||
| if(which == additionalDemosContent) { | |||
| var current = package.style.marginTop ? parseInt(package.style.marginTop) : -105; | |||
| if(which._open) { | |||
| if(!which._height) | |||
| which._height = additionalDemos.offsetHeight - package.offsetHeight; | |||
| package.style.marginTop = (current + which._height) + "px"; | |||
| } else { | |||
| package.style.marginTop = (current - which._height) + "px"; | |||
| } | |||
| } | |||
| }, | |||
| focusDemo : function(e) { | |||
| var evt = e ? e : window.event; | |||
| var target = evt.target ? evt.target.parentNode : evt.srcElement.parentNode; // Should be the LI element | |||
| if(target.nodeType != 1 || target.nodeName != "LI") | |||
| return; | |||
| for(var i=0; i < demos.length; i++) { | |||
| var demo = demos[i]; | |||
| if(demo != target) { | |||
| if(isIE) | |||
| demo.style.filter = "alpha(opacity=60)"; | |||
| else | |||
| demo.style.opacity = "0.6"; | |||
| } else { | |||
| if(isIE) | |||
| demo.style.filter = ""; | |||
| else | |||
| demo.style.opacity = "1"; | |||
| } | |||
| } | |||
| }, | |||
| blurDemos : function(e) { | |||
| var evt = e ? e : window.event; | |||
| var target = evt.toElement || evt.relatedTarget; | |||
| if(target == demoArea || target.parentNode == demoArea || target.parentNode.parentNode == demoArea) | |||
| return; | |||
| for(var i=0; i < demos.length; i++) { | |||
| if(isIE) | |||
| demos[i].style.filter = ""; | |||
| else | |||
| demos[i].style.opacity = "1"; | |||
| } | |||
| } | |||
| }; | |||
| }(); | |||
| </script> | |||
| </head> | |||
| <body> | |||
| <div id="container"> | |||
| <div class="header"> | |||
| <h1>Introducing IT Mill Toolkit 5</h1> | |||
| <em>Effortless web application development for Java-programmers.</em> | |||
| <a href="http://www.itmill.com" title="Open www.itmill.com">Visit itmill.com</a> | |||
| </div> <!-- /Header --> | |||
| <div class="content"> | |||
| <div id="demos"> | |||
| <h2>Demos</h2> | |||
| <ul id="demo-buttons"> | |||
| <li id="feature-browser"><a href="FeaturesApplication/">Feature browser</a></li> | |||
| <li id="notifications"><a href="NotificationDemo/">Notifications</a></li> | |||
| <li id="reservr"><a href="reservr.html">Reservation application</a></li> | |||
| <li id="windowed-demos"><a href="WindowedDemos">Windowed demos</a></li> | |||
| <li class="clearer"></li> <!-- // simplifies things in JavaScipt --> | |||
| </ul> | |||
| <div class="clearer"></div> | |||
| <div id="additional-demos" class="panel"> | |||
| <div class="top"></div> | |||
| <h3>» Additional demos</h3> | |||
| <div id="additional-demos-content"> <!-- For JavaScript hooking --> | |||
| <ul> | |||
| <li><a href="table-demo">Table Demo</a></li> | |||
| <li><a href="select-demo">Select Demo</a></li> | |||
| </ul> | |||
| </div> | |||
| <div class="bottom"></div> | |||
| </div> <!-- /additional-demos --> | |||
| </div> <!-- /demos --> | |||
| <div id="getting-started"> | |||
| <h2>Getting started</h2> | |||
| <h4>Eclipse IDE Quickstart</h4> | |||
| <p>The easiest way to start working with IT Mill Toolkit is to | |||
| use Eclipse IDE with the Toolkit quickstart project. | |||
| <a href="doc/manual/ch01s05.html" class="more">Instant Toolkit workspace for Eclipse</a></p> | |||
| <h4>Manual Deployment</h4> | |||
| <p>If you do not use Eclipse, you can manually deploy the Toolkit | |||
| <a href="lib/itmill-toolkit.war">WAR-package</a> to your application server. | |||
| </p> | |||
| </div> <!-- /getting-started --> | |||
| <div id="support-licensing"> | |||
| <h2>Support and Licensing</h2> | |||
| <h4>Documentation</h4> | |||
| <p>Need help using IT Mill Toolkit? Look no further. Everything you need to know is here.</p> | |||
| <ul class="links"> | |||
| <li><a href="doc/manual/manual.html">Manual</a> <a href="doc/manual.pdf" class="more"><span>(</span>PDF<span>)</span></a></li> | |||
| <li><a href="doc/api/index.html" class="more">JavaDoc API</a></li> | |||
| <li><a href="http://forum.itmill.com" class="more">Support forum</a></li> | |||
| </ul> | |||
| <h4>Licenses</h4> | |||
| <p>All of IT Mill Toolkit's core is licensed under liberal Open Source license. Commercial licenses are also available. | |||
| <a href="license/licensing-guidelines.html" class="more">Licensing Guidelines</a></p> | |||
| </div> <!-- /support-licensing --> | |||
| <div id="package-contents" class="panel"> | |||
| <div class="top"></div> | |||
| <h3>» Package contents</h3> | |||
| <em>Version <version></version></em> | |||
| <div id="package-contents-content"> <!-- For JavaScript hooking --> | |||
| <div class="library"> | |||
| <h5>Library</h5> | |||
| <p>Contains all you need to start a new Toolkit project (binaries, sources, default | |||
| themes and widgetsets). <a href="WEB-INF/lib/itmill-toolkit-<version></version>.jar">Toolkit JAR</a></p> | |||
| </div> | |||
| <div class="documentation"> | |||
| <h5>Documentation</h5> | |||
| <ul> | |||
| <li><a href="release-notes.html">Release Notes</a></li> | |||
| <li><a href="doc/manual/manual.html">Manual</a> (<a href="manual.pdf">view as PDF</a>)</li> | |||
| <li><a href="doc/api/index.html">JavaDoc API</a></li> | |||
| </ul> | |||
| </div> | |||
| <div class="support"> | |||
| <h5>Support & Licensing</h5> | |||
| <ul> | |||
| <li><a href="http://forum.itmill.com">Support forum</a></li> | |||
| <li><a href="license/licensing-guidelines.html">Licensing Guidelines</a></li> | |||
| <li>Prices and purchase from <a href="mailto:sales@itmill.com">sales@itmill.com</a></li> | |||
| </ul> | |||
| </div> | |||
| </div> | |||
| <div class="bottom"></div> | |||
| </div> <!-- /package-contents --> | |||
| <div class="clearer"></div> | |||
| </div> <!-- /content--> | |||
| <div class="footer"> | |||
| <a href="http://www.itmill.com">IT Mill Ltd.</a> | |||
| <em>Interfacing IT</em> | |||
| </div> <!-- /footer --> | |||
| </div> <!-- /container --> | |||
| </body> | |||
| </html> | |||
+ 1
- 1
build/VERSION.properties
View File
| @@ -1 +1 @@ | |||
| version=5.0.0-alpha-18 | |||
| version=5.0.0-alpha-19 | |||
+ 0
- 21
build/build.xml
View File
| @@ -411,8 +411,6 @@ | |||
| <filterchain> | |||
| <expandproperties /> | |||
| <replacetokens begintoken="<" endtoken=">"> | |||
| <token key="body" value="${html.body.tag}${html.body.start1}${product-name}${html.body.start2}" /> | |||
| <token key="/body" value="${html.body.end}${html.body.endtag}" /> | |||
| <token key="version" value="${version}" /> | |||
| <token key="/version" value="" /> | |||
| </replacetokens> | |||
| @@ -512,25 +510,6 @@ | |||
| </fileset> | |||
| </copy> | |||
| <!-- copy build/package/WebContent/* --> | |||
| <copy todir="${output-dir}/WebContent"> | |||
| <fileset dir="build/package/WebContent"> | |||
| <exclude name="index.html" /> | |||
| </fileset> | |||
| </copy> | |||
| <copy todir="${output-dir}/WebContent"> | |||
| <filterchain> | |||
| <expandproperties /> | |||
| <replacetokens begintoken="<" endtoken=">"> | |||
| <token key="version" value="${version}" /> | |||
| <token key="/version" value="" /> | |||
| </replacetokens> | |||
| </filterchain> | |||
| <fileset dir="build/package/WebContent"> | |||
| <filename name="index.html" /> | |||
| </fileset> | |||
| </copy> | |||
| </target> | |||
| <target name="compile-fileupload"> | |||
+ 0
- 232
build/package/WebContent/demo/css/demos.css
View File
| @@ -1,232 +0,0 @@ | |||
| html { | |||
| font-size: 100%; | |||
| } | |||
| body { | |||
| font-family: "Trebuchet MS", Tahoma, Geneva, Helvetica, Arial, sans-serif; | |||
| font-size: 62.5%; /* Scale down to 10px */ | |||
| line-height: 1.8em; | |||
| color: #5c666a; | |||
| background: #e9eced url(../img/body-bg.gif) repeat-x; | |||
| } | |||
| .clearer { | |||
| height: 0; | |||
| overflow: hidden; | |||
| clear: both; | |||
| } | |||
| h1, h2, h3, h4, h5, h6 { | |||
| margin: 0; | |||
| padding: 0; | |||
| font-weight: normal; | |||
| font-size: 1em; | |||
| } | |||
| a { | |||
| text-decoration: none; | |||
| } | |||
| a:link { | |||
| color: #4696d0; | |||
| } | |||
| a:visited { | |||
| color: #7d9bb2; | |||
| } | |||
| a:hover { | |||
| color: #59b6fa; | |||
| } | |||
| a:active { | |||
| color: #ff581e; | |||
| } | |||
| a.more { | |||
| padding-right: 10px; | |||
| background: transparent url(../img/link-arrow.png) no-repeat center right; | |||
| } | |||
| a.more span { | |||
| color: #5c666a; | |||
| } | |||
| /* page furniture */ | |||
| #container { | |||
| width: 759px; | |||
| margin: 60px auto; | |||
| } | |||
| #container .header { | |||
| height: 81px; | |||
| background: transparent url(../img/header.png); | |||
| } | |||
| #container .content { | |||
| background: #fff url(../img/content-bg.png); | |||
| padding: 10px 27px 10px 27px; | |||
| width: 705px; /* for IE hasLayout, fixes beekaboo-bug */ | |||
| } | |||
| #container .footer { | |||
| height: 72px; | |||
| background: transparent url(../img/footer.png) no-repeat; | |||
| position: relative; | |||
| } | |||
| #container .footer a { | |||
| display: block; | |||
| width: 95px; | |||
| height: 15px; | |||
| text-indent: -90000px; | |||
| position: absolute; | |||
| left: 27px; | |||
| bottom: 3px; | |||
| background: transparent url(../img/itmill-logo.png); | |||
| border: none; | |||
| overflow: hidden; /* IE6 fix */ | |||
| } | |||
| #container .footer em { | |||
| display: block; | |||
| width: 111px; | |||
| height: 18px; | |||
| text-indent: -90000px; | |||
| position: absolute; | |||
| right: 27px; | |||
| bottom: 0; | |||
| background: transparent url(../img/itmill-slogan.png); | |||
| } | |||
| #container .header h1, | |||
| #container .header em { | |||
| display: none; | |||
| } | |||
| #container .header a { | |||
| color: #5c666a; | |||
| float: right; | |||
| padding-right: 10px; | |||
| background: transparent url(../img/link-arrow2.png) no-repeat center right; | |||
| margin: 30px 27px 0 0; | |||
| border: none; | |||
| font-size: 1.2em; | |||
| } | |||
| /* content area */ | |||
| .content h2 { | |||
| font-size: 18px; | |||
| color: #f14c1a; | |||
| height: 18px; | |||
| padding: 4px 0 6px 34px; | |||
| letter-spacing: -0.02em; | |||
| } | |||
| #demos h2 { | |||
| background: transparent url(../img/icon-eye.png) no-repeat; | |||
| } | |||
| #demos { | |||
| font-size: 1.3em; | |||
| } | |||
| #demos { | |||
| width: 705px; | |||
| font-size: 1.2em; | |||
| } | |||
| #demos h4 { | |||
| font-weight: bold; | |||
| margin: 1em 0 0.2em 0; | |||
| } | |||
| /* demo icons */ | |||
| #demos ul { | |||
| list-style: none; | |||
| margin: 0; | |||
| padding: 0; | |||
| } | |||
| #demos li { | |||
| float: left; | |||
| width: 160px; | |||
| height: 135px; | |||
| margin: 14px 15px 0 0; | |||
| } | |||
| #demos li a { | |||
| display: block; | |||
| padding-top: 115px; | |||
| height: 20px; | |||
| width: 160px; | |||
| text-align: center; | |||
| } | |||
| #demos #windowed-demos { | |||
| background: #fff url(../img/demos/windowed.png) no-repeat; | |||
| } | |||
| #demos #reservr { | |||
| background: #fff url(../img/demos/reservr.png) no-repeat; | |||
| } | |||
| #demos #feature-browser { | |||
| background: #fff url(../img/demos/features.png) no-repeat; | |||
| } | |||
| #demos #notifications { | |||
| background: #fff url(../img/demos/notifications.png) no-repeat; | |||
| } | |||
| /* additional demos */ | |||
| #additional { | |||
| width: 300px; | |||
| padding: 0 17px 0 17px; | |||
| margin-top: 20px; | |||
| background: #ecf0f3 url(../img/package-bg.png); | |||
| overflow: hidden; | |||
| font-size: 1.1em; | |||
| clear: left; | |||
| } | |||
| #additional .top { | |||
| height: 5px; | |||
| width: 334px; | |||
| margin: 0 -17px 0 -17px; | |||
| background: transparent url(../img/package-top.png); | |||
| overflow: hidden; | |||
| } | |||
| #additional .bottom { | |||
| height: 5px; | |||
| width: 334px; | |||
| margin: 0 -17px 0 -17px; | |||
| background: transparent url(../img/package-bottom.png); | |||
| overflow: hidden; | |||
| } | |||
| #additional-content { | |||
| margin: 13px 0 17px 0; | |||
| } | |||
| #additional ul { | |||
| list-style: none; | |||
| margin: 0; | |||
| padding: 0; | |||
| } | |||
| #additional h3 { | |||
| font-size: 1.1em; | |||
| margin: 4px 0 5px 0; | |||
| color: #5b7b93; | |||
| } | |||
+ 0
- 20
build/package/WebContent/demo/css/ie.css
View File
| @@ -1,20 +0,0 @@ | |||
| /* for IE hasLayout, fixes background not showing */ | |||
| * html a.more { | |||
| zoom: 1; | |||
| } | |||
| *+html a.more { | |||
| zoom: 1; | |||
| } | |||
| a.more span { | |||
| color: #5c666a; | |||
| } | |||
| * html #additional-demos { | |||
| margin-top: -3px; | |||
| } | |||
| *+html #additional-demos { | |||
| margin-top: -3px; | |||
| } | |||
+ 0
- 336
build/package/WebContent/demo/css/styles.css
View File
| @@ -1,336 +0,0 @@ | |||
| html { | |||
| font-size: 100%; | |||
| } | |||
| body { | |||
| font-family: "Trebuchet MS", Tahoma, Geneva, Helvetica, Arial, sans-serif; | |||
| font-size: 62.5%; /* Scale down to 10px */ | |||
| line-height: 1.8em; | |||
| color: #5c666a; | |||
| background: #e9eced url(../img/body-bg.gif) repeat-x; | |||
| } | |||
| .clearer { | |||
| height: 0; | |||
| overflow: hidden; | |||
| clear: both; | |||
| } | |||
| h1, h2, h3, h4, h5, h6 { | |||
| margin: 0; | |||
| padding: 0; | |||
| font-weight: normal; | |||
| font-size: 1em; | |||
| } | |||
| a { | |||
| text-decoration: none; | |||
| } | |||
| a:link { | |||
| color: #4696d0; | |||
| } | |||
| a:visited { | |||
| color: #7d9bb2; | |||
| } | |||
| a:hover { | |||
| color: #59b6fa; | |||
| } | |||
| a:active { | |||
| color: #ff581e; | |||
| } | |||
| a.more { | |||
| padding-right: 10px; | |||
| background: transparent url(../img/link-arrow.png) no-repeat center right; | |||
| } | |||
| a.more span { | |||
| color: #5c666a; | |||
| } | |||
| /* page furniture */ | |||
| #container { | |||
| width: 759px; | |||
| margin: 60px auto; | |||
| } | |||
| #container .header { | |||
| height: 81px; | |||
| background: transparent url(../img/header.png); | |||
| } | |||
| #container .content { | |||
| background: #fff url(../img/content-bg.png); | |||
| padding: 10px 27px 20px 27px; | |||
| width: 705px; /* for IE hasLayout, fixes beekaboo-bug */ | |||
| } | |||
| #container .footer { | |||
| height: 72px; | |||
| background: transparent url(../img/footer.png) no-repeat; | |||
| position: relative; | |||
| } | |||
| #container .footer a { | |||
| display: block; | |||
| width: 95px; | |||
| height: 15px; | |||
| text-indent: -90000px; | |||
| position: absolute; | |||
| left: 27px; | |||
| bottom: 3px; | |||
| background: transparent url(../img/itmill-logo.png); | |||
| border: none; | |||
| overflow: hidden; /* IE6 fix */ | |||
| } | |||
| #container .footer em { | |||
| display: block; | |||
| width: 111px; | |||
| height: 18px; | |||
| text-indent: -90000px; | |||
| position: absolute; | |||
| right: 27px; | |||
| bottom: 0; | |||
| background: transparent url(../img/itmill-slogan.png); | |||
| } | |||
| #container .header h1, | |||
| #container .header em { | |||
| display: none; | |||
| } | |||
| #container .header a { | |||
| color: #5c666a; | |||
| float: right; | |||
| padding-right: 10px; | |||
| background: transparent url(../img/link-arrow2.png) no-repeat center right; | |||
| margin: 30px 27px 0 0; | |||
| border: none; | |||
| font-size: 1.2em; | |||
| } | |||
| /* content area */ | |||
| .content h2 { | |||
| font-size: 18px; | |||
| color: #f14c1a; | |||
| height: 18px; | |||
| padding: 4px 0 6px 34px; | |||
| letter-spacing: -0.02em; | |||
| } | |||
| #getting-started h2 { | |||
| background: transparent url(../img/icon-home.png) no-repeat; | |||
| margin-bottom: 78px; | |||
| } | |||
| #demos h2 { | |||
| background: transparent url(../img/icon-eye.png) no-repeat; | |||
| } | |||
| #support-licensing h2 { | |||
| background: transparent url(../img/icon-doc.png) no-repeat; | |||
| } | |||
| #getting-started, | |||
| #demos, | |||
| #support-licensing { | |||
| font-size: 1.3em; | |||
| } | |||
| #getting-started, | |||
| #support-licensing { | |||
| width: 340px; | |||
| } | |||
| #demos { | |||
| width: 335px; | |||
| float: right; | |||
| font-size: 1.2em; | |||
| } | |||
| #getting-started h4, | |||
| #demos h4, | |||
| #support-licensing h4 { | |||
| font-weight: bold; | |||
| margin: 1em 0 0.2em 0; | |||
| } | |||
| #getting-started p, | |||
| #support-licensing p { | |||
| margin: 0 0 1em 0; | |||
| } | |||
| #support-licensing .links { | |||
| list-style: none; | |||
| padding: 0; | |||
| margin: -1em 0 1em 0; | |||
| height: 1.8em; | |||
| } | |||
| #support-licensing .links li { | |||
| float: left; | |||
| margin-right: 1.5em; | |||
| } | |||
| /* eclipse image */ | |||
| #getting-started { | |||
| background: transparent url(../img/eclipse-quickstart.png) no-repeat 0 40px; | |||
| } | |||
| /* demo icons */ | |||
| #demo-buttons { | |||
| list-style: none; | |||
| margin: 0; | |||
| padding: 0; | |||
| width: 100%; | |||
| } | |||
| #demo-buttons li { | |||
| float: left; | |||
| width: 160px; | |||
| height: 135px; | |||
| margin-top: 14px; | |||
| } | |||
| #demo-buttons .clearer { | |||
| float: none; | |||
| height: 0; | |||
| margin: 0; | |||
| } | |||
| #demo-buttons li a { | |||
| display: block; | |||
| padding-top: 115px; | |||
| height: 20px; | |||
| width: 160px; | |||
| text-align: center; | |||
| } | |||
| #demo-buttons #windowed-demos { | |||
| background: #fff url(../img/demos/windowed.png) no-repeat; | |||
| } | |||
| #demo-buttons #reservr { | |||
| background: #fff url(../img/demos/reservr.png) no-repeat; | |||
| margin-right: 15px; | |||
| } | |||
| #demo-buttons #feature-browser { | |||
| background: #fff url(../img/demos/features.png) no-repeat; | |||
| margin-right: 15px; | |||
| } | |||
| #demo-buttons #notifications { | |||
| background: #fff url(../img/demos/notifications.png) no-repeat; | |||
| } | |||
| /* package contents */ | |||
| .panel { | |||
| width: 300px; | |||
| padding: 0 17px 0 17px; | |||
| background: #ecf0f3 url(../img/package-bg.png); | |||
| overflow: hidden; | |||
| font-size: 1.1em; | |||
| } | |||
| .panel .top { | |||
| height: 5px; | |||
| width: 334px; | |||
| margin: 0 -17px 0 -17px; | |||
| background: transparent url(../img/package-top.png); | |||
| overflow: hidden; | |||
| } | |||
| .panel .bottom { | |||
| height: 5px; | |||
| width: 334px; | |||
| margin: 0 -17px 0 -17px; | |||
| background: transparent url(../img/package-bottom.png); | |||
| overflow: hidden; | |||
| } | |||
| #package-contents { | |||
| float: right; | |||
| margin: -105px 1px 0 0; | |||
| } | |||
| #package-contents-content { | |||
| margin: 13px 0 17px 0; | |||
| } | |||
| #package-contents ul { | |||
| list-style: none; | |||
| margin: 0; | |||
| padding: 0; | |||
| } | |||
| #package-contents h3 { | |||
| font-size: 1.1em; | |||
| margin: 4px 0 5px 0; | |||
| color: #5b7b93; | |||
| } | |||
| #package-contents em { | |||
| font-size: 0.9em; | |||
| font-style: normal; | |||
| float: right; | |||
| margin-top: -23px; | |||
| color: #87a0b2 | |||
| } | |||
| #package-contents h5 { | |||
| font-weight: bold; | |||
| margin: 0 0 0.2em 0; | |||
| color: #3f5f77; | |||
| } | |||
| #package-contents p { | |||
| margin: 0; | |||
| } | |||
| #package-contents .library { | |||
| width: 143px; | |||
| margin-right: 15px; | |||
| float: left; | |||
| } | |||
| #package-contents .documentation { | |||
| width: 134px; | |||
| float: left; | |||
| } | |||
| #package-contents .support { | |||
| clear: left; | |||
| padding-top: 1.5em; | |||
| } | |||
| /* additional demos */ | |||
| #additional-demos { | |||
| clear: left; | |||
| font-size: 1em; | |||
| margin-top: 10px; | |||
| } | |||
| #additional-demos h3 { | |||
| font-size: 1.1em; | |||
| margin: 4px 0 5px 0; | |||
| color: #5b7b93; | |||
| } | |||
BIN
build/package/WebContent/demo/img/body-bg.gif
View File
BIN
build/package/WebContent/demo/img/content-bg.png
View File
BIN
build/package/WebContent/demo/img/demos/features.png
View File
BIN
build/package/WebContent/demo/img/demos/notifications.png
View File
BIN
build/package/WebContent/demo/img/demos/reservr.png
View File
BIN
build/package/WebContent/demo/img/demos/windowed.png
View File
BIN
build/package/WebContent/demo/img/eclipse-quickstart.png
View File
BIN
build/package/WebContent/demo/img/footer.png
View File
BIN
build/package/WebContent/demo/img/header.png
View File
BIN
build/package/WebContent/demo/img/icon-doc.png
View File
BIN
build/package/WebContent/demo/img/icon-eye.png
View File
BIN
build/package/WebContent/demo/img/icon-home.png
View File
BIN
build/package/WebContent/demo/img/itmill-logo.png
View File
BIN
build/package/WebContent/demo/img/itmill-slogan.png
View File
BIN
build/package/WebContent/demo/img/link-arrow.png
View File
BIN
build/package/WebContent/demo/img/link-arrow2.png
View File
BIN
build/package/WebContent/demo/img/package-bg.png
View File
BIN
build/package/WebContent/demo/img/package-bottom.png
View File
BIN
build/package/WebContent/demo/img/package-top.png
View File
+ 0
- 247
build/package/WebContent/index.html
View File
| @@ -1,247 +0,0 @@ | |||
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |||
| <html> | |||
| <head> | |||
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |||
| <title>IT Mill Toolkit 5</title> | |||
| <link rel="stylesheet" type="text/css" href="demo/css/styles.css" /> | |||
| <!--[if IE]> | |||
| <link rel="stylesheet" type="text/css" href="demo/css/ie.css" /> | |||
| <![endif]--> | |||
| <script type="text/javascript"> | |||
| window.onload = function() { | |||
| itmill.init(); | |||
| } | |||
| var itmill = function() { | |||
| var isIE = /MSIE/.test(navigator.userAgent) && !window.opera; | |||
| var packageContent; | |||
| var package; | |||
| var demoArea; | |||
| var demos; | |||
| var additionalDemos; | |||
| var additionalDemosContent; | |||
| return { | |||
| init : function() { | |||
| // Fetch references | |||
| packageContent = document.getElementById("package-contents-content"); | |||
| package = document.getElementById("package-contents"); | |||
| demoArea = document.getElementById("demo-buttons"); | |||
| demos = demoArea.getElementsByTagName("li"); | |||
| additionalDemos = document.getElementById("additional-demos"); | |||
| additionalDemosContent = document.getElementById("additional-demos-content"); | |||
| // Hide panel initially | |||
| packageContent.style.display = "none"; | |||
| additionalDemosContent.style.display = "none"; | |||
| // Enable additional demos panel hiding/showing | |||
| var toggle = additionalDemos.getElementsByTagName("h3")[0]; | |||
| toggle.style.cursor = "pointer"; | |||
| toggle.title = "Show/hide additional demos"; | |||
| // Use the quick-n-dirty way to attach event listeners | |||
| toggle.onclick = function() {itmill.togglePanel(additionalDemosContent)}; | |||
| // Enable package contents panel hiding/showing | |||
| toggle = package.getElementsByTagName("h3")[0]; | |||
| toggle.style.cursor = "pointer"; | |||
| toggle.title = "Show/hide package contents"; | |||
| // Use the quick-n-dirty way to attach event listeners | |||
| toggle.onclick = function() {itmill.togglePanel(packageContent)}; | |||
| // enable demo button hovers | |||
| for(var i=0; i < demos.length; i++) { | |||
| demos[i].onmouseover = this.focusDemo; | |||
| } | |||
| demoArea.onmouseout = this.blurDemos; | |||
| // TODO implement feedback popup | |||
| }, | |||
| togglePanel : function(which) { | |||
| if(which._open) { | |||
| which.style.display = "none"; | |||
| which._open = false; | |||
| } else { | |||
| which.style.display = "block"; | |||
| which._open = true; | |||
| } | |||
| // Dirty fix to reposition package-content panel | |||
| if(which == additionalDemosContent) { | |||
| var current = package.style.marginTop ? parseInt(package.style.marginTop) : -105; | |||
| if(which._open) { | |||
| if(!which._height) | |||
| which._height = additionalDemos.offsetHeight - package.offsetHeight; | |||
| package.style.marginTop = (current + which._height) + "px"; | |||
| } else { | |||
| package.style.marginTop = (current - which._height) + "px"; | |||
| } | |||
| } | |||
| }, | |||
| focusDemo : function(e) { | |||
| var evt = e ? e : window.event; | |||
| var target = evt.target ? evt.target.parentNode : evt.srcElement.parentNode; // Should be the LI element | |||
| if(target.nodeType != 1 || target.nodeName != "LI") | |||
| return; | |||
| for(var i=0; i < demos.length; i++) { | |||
| var demo = demos[i]; | |||
| if(demo != target) { | |||
| if(isIE) | |||
| demo.style.filter = "alpha(opacity=60)"; | |||
| else | |||
| demo.style.opacity = "0.6"; | |||
| } else { | |||
| if(isIE) | |||
| demo.style.filter = ""; | |||
| else | |||
| demo.style.opacity = "1"; | |||
| } | |||
| } | |||
| }, | |||
| blurDemos : function(e) { | |||
| var evt = e ? e : window.event; | |||
| var target = evt.toElement || evt.relatedTarget; | |||
| if(target == demoArea || target.parentNode == demoArea || target.parentNode.parentNode == demoArea) | |||
| return; | |||
| for(var i=0; i < demos.length; i++) { | |||
| if(isIE) | |||
| demos[i].style.filter = ""; | |||
| else | |||
| demos[i].style.opacity = "1"; | |||
| } | |||
| } | |||
| }; | |||
| }(); | |||
| </script> | |||
| </head> | |||
| <body> | |||
| <div id="container"> | |||
| <div class="header"> | |||
| <h1>Introducing IT Mill Toolkit 5</h1> | |||
| <em>Effortless web application development for Java-programmers.</em> | |||
| <a href="http://www.itmill.com" title="Open www.itmill.com">Visit itmill.com</a> | |||
| </div> <!-- /Header --> | |||
| <div class="content"> | |||
| <div id="demos"> | |||
| <h2>Demos</h2> | |||
| <ul id="demo-buttons"> | |||
| <li id="feature-browser"><a href="FeaturesApplication/">Feature browser</a></li> | |||
| <li id="notifications"><a href="NotificationDemo/">Notifications</a></li> | |||
| <li id="reservr"><a href="reservr.html">Reservation application</a></li> | |||
| <li id="windowed-demos"><a href="WindowedDemos">Windowed demos</a></li> | |||
| <li class="clearer"></li> <!-- // simplifies things in JavaScipt --> | |||
| </ul> | |||
| <div class="clearer"></div> | |||
| <div id="additional-demos" class="panel"> | |||
| <div class="top"></div> | |||
| <h3>» Additional demos</h3> | |||
| <div id="additional-demos-content"> <!-- For JavaScript hooking --> | |||
| <ul> | |||
| <li><a href="table-demo">Table Demo</a></li> | |||
| <li><a href="select-demo">Select Demo</a></li> | |||
| </ul> | |||
| </div> | |||
| <div class="bottom"></div> | |||
| </div> <!-- /additional-demos --> | |||
| </div> <!-- /demos --> | |||
| <div id="getting-started"> | |||
| <h2>Getting started</h2> | |||
| <h4>Eclipse IDE Quickstart</h4> | |||
| <p>The easiest way to start working with IT Mill Toolkit is to | |||
| use Eclipse IDE with the Toolkit quickstart project. | |||
| <a href="doc/manual/ch01s05.html" class="more">Instant Toolkit workspace for Eclipse</a></p> | |||
| <h4>Manual Deployment</h4> | |||
| <p>If you do not use Eclipse, you can manually deploy the Toolkit | |||
| <a href="lib/itmill-toolkit.war">WAR-package</a> to your application server. | |||
| </p> | |||
| </div> <!-- /getting-started --> | |||
| <div id="support-licensing"> | |||
| <h2>Support and Licensing</h2> | |||
| <h4>Documentation</h4> | |||
| <p>Need help using IT Mill Toolkit? Look no further. Everything you need to know is here.</p> | |||
| <ul class="links"> | |||
| <li><a href="doc/manual/manual.html">Manual</a> <a href="doc/manual.pdf" class="more"><span>(</span>PDF<span>)</span></a></li> | |||
| <li><a href="doc/api/index.html" class="more">JavaDoc API</a></li> | |||
| <li><a href="http://forum.itmill.com" class="more">Support forum</a></li> | |||
| </ul> | |||
| <h4>Licenses</h4> | |||
| <p>All of IT Mill Toolkit's core is licensed under liberal Open Source license. Commercial licenses are also available. | |||
| <a href="license/licensing-guidelines.html" class="more">Licensing Guidelines</a></p> | |||
| </div> <!-- /support-licensing --> | |||
| <div id="package-contents" class="panel"> | |||
| <div class="top"></div> | |||
| <h3>» Package contents</h3> | |||
| <em>Version <version></version></em> | |||
| <div id="package-contents-content"> <!-- For JavaScript hooking --> | |||
| <div class="library"> | |||
| <h5>Library</h5> | |||
| <p>Contains all you need to start a new Toolkit project (binaries, sources, default | |||
| themes and widgetsets). <a href="WEB-INF/lib/itmill-toolkit-<version></version>.jar">Toolkit JAR</a></p> | |||
| </div> | |||
| <div class="documentation"> | |||
| <h5>Documentation</h5> | |||
| <ul> | |||
| <li><a href="release-notes.html">Release Notes</a></li> | |||
| <li><a href="doc/manual/manual.html">Manual</a> (<a href="manual.pdf">view as PDF</a>)</li> | |||
| <li><a href="doc/api/index.html">JavaDoc API</a></li> | |||
| </ul> | |||
| </div> | |||
| <div class="support"> | |||
| <h5>Support & Licensing</h5> | |||
| <ul> | |||
| <li><a href="http://forum.itmill.com">Support forum</a></li> | |||
| <li><a href="license/licensing-guidelines.html">Licensing Guidelines</a></li> | |||
| <li>Prices and purchase from <a href="mailto:sales@itmill.com">sales@itmill.com</a></li> | |||
| </ul> | |||
| </div> | |||
| </div> | |||
| <div class="bottom"></div> | |||
| </div> <!-- /package-contents --> | |||
| <div class="clearer"></div> | |||
| </div> <!-- /content--> | |||
| <div class="footer"> | |||
| <a href="http://www.itmill.com">IT Mill Ltd.</a> | |||
| <em>Interfacing IT</em> | |||
| </div> <!-- /footer --> | |||
| </div> <!-- /container --> | |||
| </body> | |||
| </html> | |||
Loading…