]> source.dussan.org Git - vaadin-framework.git/commitdiff
Fixes #4340: Redesign demo page to include add-on demo and Directory links
authorJouni Koivuviita <jouni.koivuviita@itmill.com>
Wed, 31 Mar 2010 11:46:45 +0000 (11:46 +0000)
committerJouni Koivuviita <jouni.koivuviita@itmill.com>
Wed, 31 Mar 2010 11:46:45 +0000 (11:46 +0000)
svn changeset:12255/svn branch:6.3

WebContent/index.html
WebContent/release-notes.html

index 46bc8846fd602f5cf3324fa094e678f5c8e9105f..43a46288b165a93271649570fa5b119115bc1d35 100644 (file)
                <!--[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 &ndash; 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 &raquo;</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>&bull;</li>
+                         <li><a href="#addons">Add-ons</a></li>
+                         <li>&bull;</li>
+                         <li><a href="#code-examples">Code Examples</a></li>
+                         <li>&bull;</li>
+                         <li><a href="#getting-started">Getting Started</a></li>
+                         <li>&bull;</li>
+                         <li><a href="#docs">Documentation</a></li>
+                         <li>&bull;</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 &raquo;</a></li>
+                         <li><a href="http://dev.vaadin.com" title="Open dev.vaadin.com">Issue Tracker &raquo;</a></li>
+                         <li><a href="http://www.vaadin.com" title="Open www.vaadin.com">Vaadin Home &raquo;</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 &amp; 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 &raquo;</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 &raquo;</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 &raquo;</strong>
+                               <strong class="new"><em>Notable In This Release</em> &bull;&nbsp;Drag'n'drop &bull;&nbsp;Keyboard&nbsp;Shortcuts &bull;&nbsp;AbsoluteLayout &bull;&nbsp;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 &ndash; advanced layout &amp; theme</a> &nbsp; (<a href="docs/example-source/com/vaadin/demo/VaadinTunesLayout.java.html">sources</a>)</li>
-                                       <li><a class="demoapp" href="Coverflow/">Coverflow &ndash; Flex integration</a> &nbsp; (<a href="docs/example-source/com/vaadin/demo/coverflow">sources</a>)</li>
-                                       <li><a class="demoapp" href="ReindeerTheme">Reindeer theme &ndash; 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 &ndash; 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 &raquo;</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> &nbsp; (<a href="docs/example-source/com/vaadin/demo/HelloWorld.java.html">sources</a>)</li>
                                        <li><a class="demoapp" href="Calc/">Calculator</a> &nbsp; (<a href="docs/example-source/com/vaadin/demo/Calc.java.html">sources</a>)</li>
-                                       <li><a class="demoapp" href="colorpicker">Colorpicker &ndash; creating new widgets</a> &nbsp; (<a href="docs/example-source/com/vaadin/demo/colorpicker">sources</a>)</li>
+                                       <li><a class="demoapp" href="VaadinTunesLayout/">VaadinTunes &ndash; advanced layout &amp; theme</a> &nbsp; (<a href="docs/example-source/com/vaadin/demo/VaadinTunesLayout.java.html">sources</a>)</li>
+                                       <li><a class="demoapp" href="Coverflow/">Coverflow &ndash; Flex integration</a> &nbsp; (<a href="docs/example-source/com/vaadin/demo/coverflow">sources</a>)</li>
+                                       <li><a class="demoapp" href="ReindeerTheme">Reindeer theme &ndash; 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 &raquo;</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 &raquo;</a></li>
+                                               <li><a href="AddressBook/" class="demoapp">See Address Book application &raquo;</a></li>
+                                       </ul>
+                               </div>          
+                       </div> <!--/getting-started -->
+                       
                        <div id="docs">
-                               <h3>Tutorial &ndash; 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 &raquo;</a></li>
-                                       <li><a href="AddressBook/" class="demoapp">See Address Book application &raquo;</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) &raquo;</a></li>
                                        <li><a href="docs/api/index.html">JavaDoc API &raquo;</a></li>
-                                       <li><a href="http://www.vaadin.com/forum">Forum &raquo;</a></li>
+                                       <li><a href="http://www.vaadin.com/forum">Discussion Forum &raquo;</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 &raquo;</a></li>
-                                  <li><a href="license/licensing-guidelines.html">Licensing Guidelines &raquo;</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 &ndash; 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 &ndash; 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 &raquo;</a></li>
+                                          <li><a href="license/licensing-guidelines.html">Licensing Guidelines &raquo;</a></li>
+                                       </ul>
+                               </div>
+                               <div id="pro">
+                                       <h4>Support &amp; Services</h4>
+                                       <p>The commercial products complement Vaadin and make it possible for you to get better results quicker &ndash; 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 &ndash; 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>
index 26ddb74d3221be0de49d21a209ca038de564e7ac..b737a2961c5123c0fcf69da6d7d34453564bf8f6 100644 (file)
@@ -14,7 +14,7 @@
                <div id="header">
                        <h1>Vaadin &ndash; thinking of U and I</h1>
                        <div id="version">
-                               <a href="javascript:history.go(-1);" title="Back to index page">Back</a>
+                               <a href="javascript:history.go(-1);" title="Back to index page">&laquo; Back</a>
                        </div>
                </div> <!-- /header -->
 
@@ -22,7 +22,7 @@
 
 <p>Version @version@ built on @builddate@.</p>
 
-<h2><a name="overview">Release Notes for Vaadin @version@</a></h2>
+<h2 id="overview">Release Notes for Vaadin @version@</h2>
 
 <ul>
   <li><a href="#overview">Overview</a></li>
@@ -94,7 +94,7 @@ widget sets and refresh your project in Eclipse. If you are upgrading from earli
 6.3.0, notice that Vaadin 6.3 uses GWT 2.0 (included in the installation package). See
 <a href="#upgrading">General Upgrade Notes</a> for more details on upgrading.</p>
 
-<h2><a name="widgetupgrade">Upgrading from an Earlier Version of Vaadin 6</a></h2>
+<h2 id="widgetupgrade">Upgrading from an Earlier Version of Vaadin 6</h2>
 
 <p>The way how widget sets are defined was simplified in Vaadin 6.2.
 Existing projects, where custom widgets (a custom widget set) are used,
@@ -123,7 +123,7 @@ If you package a widget set as a JAR for use in other projects:
 </ul>
 </p>
 
-<h2><a name="upgrading">General Upgrade Notes</a></h2>
+<h2 id="upgrading">General Upgrade Notes</h2>
 
 <p>When upgrading from an earlier version of the Vaadin library, you should always do the following:</p>
 
@@ -146,7 +146,7 @@ If you package a widget set as a JAR for use in other projects:
 
 <p>Using the Vaadin project facet in the Eclipse IDE does the steps 1 and 2 automatically.</p>
 
-<h2><a name="upgrading-tk5">Instructions for Upgrading from IT Mill Toolkit 5</a></h2>
+<h2 id="upgrading-tk5">Instructions for Upgrading from IT Mill Toolkit 5</h2>
 
 <p>While the Vaadin 6 API is otherwise mostly backward-compatible with IT Mill Toolkit 5.4, the
 change of the product name has made it necessary to reflect it in the Java package names,
@@ -219,7 +219,7 @@ client-side widgets with Google Web Toolkit (GWT).</p>
   <li>Rename <strong>IToolkitOverlay</strong> &#x2192; <strong>VOverlay</strong>
 </ul>
 
-<h2><a name="gae">Notes and Limitations for Google App Engine</a></h2>
+<h2 id="gae">Notes and Limitations for Google App Engine</h2>
 
 <p>The following instructions and limitations apply when you run a Vaadin application
 under the Google App Engine.</p>
@@ -254,7 +254,7 @@ under the Google App Engine.</p>
   <li><p>The application remains locked during uploads - a progress bar is not possible</p></li>
 </ul>
 
-<h2><a name="known-problems">Important known problems in Vaadin @version@</a></h2>
+<h2 id="known-problems">Important known problems in Vaadin @version@</h2>
 
 <ul>
        <li><p><a href="http://dev.vaadin.com/ticket/1155">#1155</a>:
@@ -269,7 +269,7 @@ under the Google App Engine.</p>
 <p>For other known problems, see open tickets at developer site <a
        href="http://dev.vaadin.com/">dev.vaadin.com</a>.</p>
 
-<h2><a name="changelog">Change Log</a></h2>
+<h2 id="changelog">Change Log</h2>
 
 <p>The following closed issues have been included in this release:</p>
        
@@ -330,7 +330,7 @@ under the Google App Engine.</p>
   <li><a href="http://dev.vaadin.com/ticket/4399">#4399</a>: AbstractApplicationServlet.RequestType enum should have visibility protected</li>
   <li><a href="http://dev.vaadin.com/ticket/4401">#4401</a>: Clicking on week numbers in VCalendarPanel selects a date</li></ul>
 
-<h2><a name="requirements">Requirements</a></h2>
+<h2 id="requirements">Requirements</h2>
 
 <p>Vaadin is available for the following operating systems:</p>
 
@@ -398,7 +398,7 @@ work.</p>
 
 
 <div id="footer">
-       <span class="slogan">Vaadin &ndash; thinking of U and I<span>
+       <span class="slogan"><strong>vaadin <em>}></em></strong> thinking of U and I<span> <a href="#top">&uarr; Back to top</a>
 </div> <!-- /footer -->
 
 </body>