mirrors
/
vaadin-framework
mirror of https://github.com/vaadin/framework.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
							<!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>Vaadin @version@</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]--> 
	</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 &raquo;</a>
			</div>
		</div> <!-- /header -->
	
		<div id="subheader">
			<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">
				<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 <strong>core components</strong> and their <strong>features</strong> with example <strong>source code available</strong> for copying.</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">
		
			<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">
		function slideSwitch() {
		    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');
		        });
		}
		
		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)) {
					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 );
			doTabs();
		}
		
		Cufon.replace(["h2","h4","#sampler .start"], {fontFamily: "HelveticaRounded"});
		Cufon.replace(["h3"], {fontFamily: "HelveticaLight"});
	</script>
	
	<div style="height:0px; overflow:hidden;">
	
<!-- start pre caching sampler icons  -->

<img src="/VAADIN/themes/sampler/icons/sampleicons/75-AbsoluteLayoutBasic.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-AccordionDisabled.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-AccordionIcons.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ApplicationLayout.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-BasicMenuBar.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-BrowserInformation.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ButtonLink.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ButtonPush.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-CheckBoxes.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ClickableLayoutBasic.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ComboBoxContains.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ComboBoxInputPrompt.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ComboBoxNewItems.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ComboBoxPlain.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ComboBoxStartsWith.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-CssLayouts.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-CustomLayouts.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DateInline.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DateLocale.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DatePopup.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DateResolution.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DragDropHtml5FromDesktop.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DragDropRearrangeComponents.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DragDropServerValidation.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DragDropTableTree.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-DragDropTreeSorting.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-Errors.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ExpandingComponent.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-FlashEmbed.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-FormAdvancedLayout.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-FormBasic.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-FormPojo.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-GridLayoutBasic.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-HorizontalLayoutBasic.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-Icons.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ImageEmbed.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ImmediateUpload.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-JSApi.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LabelPlain.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LabelPreformatted.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LabelRich.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LayoutAlignment.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LayoutMargin.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LayoutSpacing.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LinkCurrentWindow.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LinkNoDecorations.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LinkSizedWindow.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ListSelectMultiple.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ListSelectSingle.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-LoginForm.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-MenuBarCollapsing.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-MenuBarHiddenItems.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-MenuBarItemStyles.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-MenuBarWithIcons.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NativeSelection.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NativeWindow.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NotificationCustom.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NotificationError.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NotificationHumanized.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NotificationTray.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-NotificationWarning.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-OptionGroups.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-PackageIcons.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-PanelBasic.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-PanelLight.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-PopupViewClosing.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-PopupViewContents.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ProgressIndicators.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ProminentPrimaryAction.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-RichTextEditor.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ShortcutBasics.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-ShortcutScope.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SliderHorizontal.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SliderVertical.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SplitPanelBasic.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-Subwindow.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SubwindowAutoSized.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SubwindowClose.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SubwindowModal.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SubwindowPositioned.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-SubwindowSized.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableActions.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableCellStyling.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableColumnAlignment.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableColumnCollapsing.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableColumnHeaders.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableColumnReordering.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableHeaderIcons.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableLazyLoading.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableMouseEvents.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableRowHeaders.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableRowStyling.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TableSorting.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TabSheetClosing.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TabSheetDisabled.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TabSheetIcons.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TabSheetScrolling.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TextArea.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TextFieldInputPrompt.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TextFieldSecret.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TextFieldSingle.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-Tooltips.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TreeActions.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TreeMouseEvents.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TreeMultiSelect.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TreeSingleSelect.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-TwinColumnSelect.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-UploadBasic.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-UploadWithProgressMonitoring.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-Validation.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-VerticalLayoutBasic.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-WebEmbed.gif">
<img src="/VAADIN/themes/sampler/icons/sampleicons/75-WebLayout.gif">
	
	</div>
	
	</body>
</html>