diff options
| author | Jouni Koivuviita <jouni.koivuviita@itmill.com> | 2010-03-31 11:46:45 +0000 |
|---|---|---|
| committer | Jouni Koivuviita <jouni.koivuviita@itmill.com> | 2010-03-31 11:46:45 +0000 |
| commit | 0e1c9479660d91825dc39fd282f236fb803b1b54 (patch) | |
| tree | 263d62697dafa70b46dbe3ee428c61a0dc358a5c /WebContent/index.html | |
| parent | 61f6bcac6d5bdcf3ff7c3c774a2ad37d7798c207 (diff) | |
| download | vaadin-framework-0e1c9479660d91825dc39fd282f236fb803b1b54.tar.gz vaadin-framework-0e1c9479660d91825dc39fd282f236fb803b1b54.zip | |
Fixes #4340: Redesign demo page to include add-on demo and Directory links
svn changeset:12255/svn branch:6.3
Diffstat (limited to 'WebContent/index.html')
| -rw-r--r-- | WebContent/index.html | 218 |
1 files changed, 145 insertions, 73 deletions
diff --git a/WebContent/index.html b/WebContent/index.html index 46bc8846fd..43a46288b1 100644 --- a/WebContent/index.html +++ b/WebContent/index.html @@ -7,112 +7,184 @@ <!--[if IE]> <link rel="stylesheet" type="text/css" href="demo/css/ie.css" /> <![endif]--> - <script type="text/javascript"> - window.onload = function() { - try { - if(window.location.search && (window.location.search.indexOf('gwt.hosted') != -1 || window.location.search.indexOf('gwt.codesvr') != -1)) { - var hostedParam = window.location.search; - var demolinks = document.getElementsByTagName("a"); - for (var k = 0; k < demolinks.length; k++) { - var link = demolinks[k]; - if(link.className.indexOf - ("demoapp") != -1) { - link.href = link.href + hostedParam; - } - } - } - } catch(e) {} - } - </script> - </head> + </head> <!-- /head --> <body> <div id="header"> <h1>Vaadin – thinking of U and I</h1> <div id="version"> <strong>Version @version@</strong> - <a href="release-notes.html" class="release-notes" title="Read the release notes for this Vaadin version">Release Notes</a> + <a href="release-notes.html" class="release-notes" title="Read the release notes for this Vaadin version">Release Notes »</a> <span class="version-check">(<a href="http://www.itmill.com/downloads/itmill-toolkit.htm?checkVersion" title="Check if you have the latest Vaadin version (requires Internet connection)">check for latest version</a>)</span> </div> </div> <!-- /header --> <div id="subheader"> - <strong>Great, you’ve made it this far with Vaadin. Now let’s get started for real!</strong> - <div class="links"> - <a href="http://vaadin.com/forum" title="Open vaadin.com/forum">vaadin.com/forum</a> - <a href="http://dev.vaadin.com" title="Open dev.vaadin.com">dev.vaadin.com</a> - <a href="http://www.vaadin.com" title="Open www.vaadin.com">www.vaadin.com</a> - </div> + <ul id="menu"> + <li><a href="#sampler">Sampler</a></li> + <li>•</li> + <li><a href="#addons">Add-ons</a></li> + <li>•</li> + <li><a href="#code-examples">Code Examples</a></li> + <li>•</li> + <li><a href="#getting-started">Getting Started</a></li> + <li>•</li> + <li><a href="#docs">Documentation</a></li> + <li>•</li> + <li><a href="#support">Support</a></li> + </ul> + <ul id="links"> + <li><a href="http://vaadin.com/forum" title="Open vaadin.com/forum">Discussion Forum »</a></li> + <li><a href="http://dev.vaadin.com" title="Open dev.vaadin.com">Issue Tracker »</a></li> + <li><a href="http://www.vaadin.com" title="Open www.vaadin.com">Vaadin Home »</a></li> + </ul> </div> <!-- /subheader --> <div id="upfront"> <div id="sampler"> <a href="sampler/" class="demoapp"> - <em class="new"><strong>New Samples</strong>+ Updated Look & Feel</em> - <h2>Vaadin Sampler</h2> - <p>Sampler contains examples of most features, as well as combination examples and useful UI patterns that you can use simply by copy-pasting the code.</p> - <strong>Start Sampler »</strong> - </a> - </div> - <div id="eclipse"> - <a href="http://www.vaadin.com/eclipse"> - <em class="new"><strong>New Version</strong></em> - <h2>Vaadin Eclipse Plugin</h2> - <p>The easiest way to start working with Vaadin is to use Eclipse IDE and download the Vaadin Eclipse plugin from our website.</p> - <strong>How to install the Vaadin Eclipse Plugin »</strong> + <div id="sampler-slideshow"> + <ul> + <li class="active"><img src="demo/img/sampler/home.png" alt="Sampler home screen" /></li> + <li><img src="demo/img/sampler/category.png" alt="Sampler category screen" /></li> + <li><img src="demo/img/sampler/sample.png" alt="Sampler individual sample screen" /></li> + <li><img src="demo/img/sampler/source.png" alt="Sampler example source code" /></li> + </ul> + <span class="mask"></span> + </div> + <h2>Sampler</h2> + <p>The Sampler contains examples of all Vaadin core components and their features with example source code available for copy-pasting.</p> + <strong class="start">Start Sampler »</strong> + <strong class="new"><em>Notable In This Release</em> • Drag'n'drop • Keyboard Shortcuts • AbsoluteLayout • GWT 2.0</strong> </a> </div> </div> <!-- /upfront --> <div id="content"> - <div id="demos"> - <h3>Additional demos</h3> - <ul><li><a class="demoapp" href="VaadinTunesLayout/">VaadinTunes – advanced layout & theme</a> (<a href="docs/example-source/com/vaadin/demo/VaadinTunesLayout.java.html">sources</a>)</li> - <li><a class="demoapp" href="Coverflow/">Coverflow – Flex integration</a> (<a href="docs/example-source/com/vaadin/demo/coverflow">sources</a>)</li> - <li><a class="demoapp" href="ReindeerTheme">Reindeer theme – see available styles</a></li> - </ul> - <h3>Code Examples</h3> + <div id="addons"> + <h3>Vaadin Add-on Demos</h3> <ul> + <li><a href="http://demo.vaadin.com/timeline" title="Open Timeline demo (online)"><img src="demo/img/addons/timeline.png" alt="" /><span><h4>Timeline</h4> Interactive lazy-loading graphs</span></a></li> + <li><a href="http://demo.vaadin.com/colorpicker" title="Open ColorPicker demo (online)"><img src="demo/img/addons/colorpicker.png" alt="" /><span><h4>ColorPicker</h4> Cross-browser color picking</span></a></li> + <li><a href="http://demo.vaadin.com/chameleontheme" title="Open Cameleon Theme demo (online)"><img src="demo/img/addons/chameleon.png" alt="" /><span><h4>Chameleon Theme</h4>Create your own theme in seconds</span></a></li> + <li><a href="http://demo.vaadin.com/jpacontainer" title="Open JPAContainer demo (online)"><img src="demo/img/addons/jpacontainer.png" alt="" /><span><h4> JPAContainer</h4></span></a></li> + </ul> + </div> <!-- /addons --> + + <div id="directory-teaser"> + <a href="http://vaadin.com/directory"> + <h4>Download these add-ons <em>and hundreds more...</em></h4> + <h3>Vaadin Add-on Directory</h3> + <p>The Directory collects add-ons for Vaadin in one central on-line repository. It makes them easy to browse, evaluate, download, integrate and buy.</p> + <p>Some of the add-ons are Open Source and free – some require a commercial per developer license.</p> + <p>You can also distribute your own add-ons + in the Directory, free or commercial.</p> + <span>Go to the Directory at vaadin.com »</span> + </a> + </div> + + <div id="code-examples"> + <h3>Code Examples</h3> + <p>Below are some examples of Vaadin UI code. The applications themselves are useless, but you can see how the actual code looks like by clicking the "sources" links.</p> + <ul class="link-list"> <li><a class="demoapp" href="HelloWorld/">Hello world</a> (<a href="docs/example-source/com/vaadin/demo/HelloWorld.java.html">sources</a>)</li> <li><a class="demoapp" href="Calc/">Calculator</a> (<a href="docs/example-source/com/vaadin/demo/Calc.java.html">sources</a>)</li> - <li><a class="demoapp" href="colorpicker">Colorpicker – creating new widgets</a> (<a href="docs/example-source/com/vaadin/demo/colorpicker">sources</a>)</li> + <li><a class="demoapp" href="VaadinTunesLayout/">VaadinTunes – advanced layout & theme</a> (<a href="docs/example-source/com/vaadin/demo/VaadinTunesLayout.java.html">sources</a>)</li> + <li><a class="demoapp" href="Coverflow/">Coverflow – Flex integration</a> (<a href="docs/example-source/com/vaadin/demo/coverflow">sources</a>)</li> + <li><a class="demoapp" href="ReindeerTheme">Reindeer theme – see available styles</a></li> </ul> - </div> <!-- /demos --> + </div> <!-- /code-examples --> + + <div id="getting-started"> + <h3>Getting Started</h3> + <div id="eclipse"> + <a href="http://www.vaadin.com/eclipse"> + <h4>Vaadin Eclipse Plugin</h4> + <p>The easiest way to start working with Vaadin is to use Eclipse IDE and download the Vaadin Eclipse plugin from our website.</p> + <span>How to install the Vaadin Eclipse Plugin »</span> + </a> + </div> + <div id="tutorial"> + <h4>Tutorial - Address Book</h4> + <p class="tutorial">Read the step-by-step tutorial and learn how to build a simple contact management app.</p> + <ul> + <li><a href="http://www.vaadin.com/tutorial/">Step-by-step Tutorial »</a></li> + <li><a href="AddressBook/" class="demoapp">See Address Book application »</a></li> + </ul> + </div> + </div> <!--/getting-started --> + <div id="docs"> - <h3>Tutorial – Address Book</h3> - <p class="tutorial">Read the step-by-step tutorial and learn how to build a simple contact management app.</p> - <ul> - <li><a href="http://www.vaadin.com/tutorial/">Step-by-step Tutorial »</a></li> - <li><a href="AddressBook/" class="demoapp">See Address Book application »</a></li> - </ul> - <h3>Documentation</h3> <p class="documentation">Need help using Vaadin? Look no further. Everything you need to know is here.</p> - <ul> + <ul class="link-list"> <li><a href="docs/book-of-vaadin.pdf">Book of Vaadin (manual) »</a></li> <li><a href="docs/api/index.html">JavaDoc API »</a></li> - <li><a href="http://www.vaadin.com/forum">Forum »</a></li> + <li><a href="http://www.vaadin.com/forum">Discussion Forum »</a></li> </ul> </div> <!-- /docs --> - </div> <!-- /content --> - <div id="footer"> - <div id="open-source"> - <h4>Open Source Development and Licenses</h4> - <p>Vaadin is developed as an Open Source software and its core is licensed under - the liberal Apache 2.0 License. Commercial licenses that include support are also available.</p> - <ul> - <li><a href="http://dev.vaadin.com" title="Open dev.vaadin.com">Developer website »</a></li> - <li><a href="license/licensing-guidelines.html">Licensing Guidelines »</a></li> - </ul> - </div> - <div id="pro"> - <h4>Commercial Solutions and Services</h4> - <p>The commercial products complement Vaadin and make it possible for you to get better results quicker – both from a development perspective as well as from a business perspective.</p> - <p>We are also glad to help you hands on or even do the work for you – which ever you prefer.</p> - <p>Read more about the <a href="http://www.vaadin.com/services/">Services</a> or the <a href="http://www.vaadin.com/support/">Support</a> alternatives.</p> - </div> - </div> <!-- /footer --> + <div id="support"> + <div id="open-source"> + <h4>Open Source Development</h4> + <p>Vaadin is developed as an Open Source software and its core is licensed under + the liberal Apache 2.0 License. Commercial licenses that include support are also available.</p> + <ul class="link-list"> + <li><a href="http://dev.vaadin.com" title="Open dev.vaadin.com">Developer Website »</a></li> + <li><a href="license/licensing-guidelines.html">Licensing Guidelines »</a></li> + </ul> + </div> + <div id="pro"> + <h4>Support & Services</h4> + <p>The commercial products complement Vaadin and make it possible for you to get better results quicker – both from a development perspective as well as from a business perspective.</p> + <p>We are also glad to help you hands on or even do the work for you – which ever you prefer.</p> + <p>Read more about the <a href="http://www.vaadin.com/services/">Services</a> or the <a href="http://www.vaadin.com/support/">Support</a> alternatives.</p> + </div> + </div> <!-- /support --> + + </div> <!-- /content --> + + <script type="text/javascript" src="demo/js/jquery.min.js"></script> + <script src="demo/js/fonts.js" type="text/javascript"></script> + <script type="text/javascript"> + var slideSwitch = function() { + var $active = $('#sampler-slideshow li.active'); + + if ( $active.length == 0 ) $active = $('#sampler-slideshow li:last-child'); + + // use this to pull the images in the order they appear in the markup + var $next = $active.next().length ? $active.next() + : $('#sampler-slideshow li:first-child'); + + $active.addClass('last-active'); + + $next.css({opacity: 0.0}) + .addClass('active') + .animate({opacity: 1.0}, 500, function() { + $active.removeClass('active last-active'); + }); + } + + window.onload = function() { + try { + if(window.location.search && (window.location.search.indexOf('gwt.hosted') != -1 || window.location.search.indexOf('gwt.codesvr') != -1)) { + var hostedParam = window.location.search; + var demolinks = document.getElementsByTagName("a"); + for (var k = 0; k < demolinks.length; k++) { + var link = demolinks[k]; + if(link.className.indexOf + ("demoapp") != -1) { + link.href = link.href + hostedParam; + } + } + } + } catch(e) {} + + setInterval( "slideSwitch()", 2200 ); + } + + Cufon.replace(["h2","h3","#sampler .start","#directory-teaser h4"], {fontFamily: "HelveticaRounded"}); + </script> </body> </html> |