diff options
| author | Jouni Koivuviita <jouni.koivuviita@itmill.com> | 2010-04-09 06:11:44 +0000 |
|---|---|---|
| committer | Jouni Koivuviita <jouni.koivuviita@itmill.com> | 2010-04-09 06:11:44 +0000 |
| commit | e97c2c4eb4ba21b78159dee53135ace21bd3d462 (patch) | |
| tree | cddadf40bf47924bf893f78a9f06a1c8e1614ad7 /WebContent/index.html | |
| parent | a1f28a17a60c6d58ff28223c8fb3f283ed8e6ba0 (diff) | |
| download | vaadin-framework-e97c2c4eb4ba21b78159dee53135ace21bd3d462.tar.gz vaadin-framework-e97c2c4eb4ba21b78159dee53135ace21bd3d462.zip | |
New rough start for demo/package-index page.
svn changeset:12403/svn branch:6.3
Diffstat (limited to 'WebContent/index.html')
| -rw-r--r-- | WebContent/index.html | 158 |
1 files changed, 73 insertions, 85 deletions
diff --git a/WebContent/index.html b/WebContent/index.html index 0a09d48bc8..d654530cac 100644 --- a/WebContent/index.html +++ b/WebContent/index.html @@ -15,7 +15,6 @@ <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> - <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 --> @@ -53,102 +52,46 @@ <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> + <p>The Sampler contains examples of all Vaadin <strong>core components</strong> and their <strong>features</strong> with example <strong>source code available</strong> for copying.</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> + <!--<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="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="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> <!-- /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>Documentation</h3> - <p class="documentation">Need help using Vaadin? Look no further. Everything you need to know is here.</p> - <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">Discussion Forum »</a></li> - </ul> - </div> <!-- /docs --> - - <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 --> + <h3 class="reasons">More Reasons to Choose Vaadin</h3> + + <ul id="reasons"> + <li id="programming-model"> + <h4 title="Write Java">Programming Model</h4> + <h5>Server side Java Only</h5> + <p>Forget about the client and RPC, you're only working with the server-side code. This separates Vaadin from similar client oriented Java frameworks such as GWT.</p> + </li> + <li id="theming"> + <h4 title="Themes">Flexible Theming</h4> + </li> + <li id="add-ons"> + <h4 title="Add-ons">Extending, Packaging and Distributing</h4> + </li> + <li id="documentation"> + <h4 title="Documentation">Best Documentation Around</h4> + </li> + <li id="jar"> + <h4 title="Lightweight">Just One JAR</h4> + </li> + <li id="compatibility"> + <h4 title="Compatibility">Compatible With What You Already Know</h4> + </li> + </ul> </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() { + function slideSwitch() { var $active = $('#sampler-slideshow li.active'); if ( $active.length == 0 ) $active = $('#sampler-slideshow li:last-child'); @@ -166,6 +109,49 @@ }); } + function doTabs() { + var content = $("#reasons"); + content.addClass("js"); + + // Generate tab captions + var tabs = content.before('<div id="tabs"></div>').prev(); + + $("#reasons li").each(function(i, li) { + li = $(li); + li.css({"position":"absolute"}); + if(i>0){ + li.hide(); + } + var caption = li.find("h4"); + var tab = tabs.append('<div class="tab">'+caption[0].title+'</div>').find(".tab:last-child"); + if(i==0) { + jQuery.data(tabs[0], "selected", tab); + jQuery.data(content[0], "open", li); + tab.addClass("first"); + tab.addClass("selected"); + } + jQuery.data(tab[0], "content", li); + tab.click(function() { + if(jQuery.data(tabs[0], "selected")[0] == this) + return; + + // Hide previous + jQuery.data(tabs[0], "selected").removeClass("selected"); + jQuery.data(content[0], "open").fadeOut("fast"); + + var tab = $(this); + var tabContent = jQuery.data(this, "content"); + // Show new + jQuery.data(tabs[0], "selected", tab); + tab.addClass("selected"); + jQuery.data(content[0], "open", tabContent); + tabContent.css({"opacity":""}); + tabContent.fadeIn("fast"); + }); + }); + + } + window.onload = function() { try { if(window.location.search && (window.location.search.indexOf('gwt.hosted') != -1 || window.location.search.indexOf('gwt.codesvr') != -1)) { @@ -182,9 +168,11 @@ } catch(e) {} setInterval( "slideSwitch()", 2200 ); + doTabs(); } - Cufon.replace(["h2","h3","#sampler .start","#directory-teaser h4"], {fontFamily: "HelveticaRounded"}); + Cufon.replace(["h2","h4","#sampler .start"], {fontFamily: "HelveticaRounded"}); + Cufon.replace(["h3"], {fontFamily: "HelveticaLight"}); </script> </body> </html> |