SheelApps.com

GWT SDK makes it easy to build web application with complex UI design. The set of widgets and layout classes in GWT provides building block which are missing in basic HTML.
But how about writing JS library using GWT?
Well thanks to gwt-exporter it is very easy to build standalone JavaScript library using GWT. Just to prove it, I built a simple JS library which exposes few GWT Layout classes as JS functions. So now you can use GWT layout in any HTML page without writing single line of GWT code.

The following GWT generated JS file exposes GWT Layout as easy to use JS functions.
For example :

 
<script type="text/javascript" language="javascript" src="gwtlayout/gwtlayout.nocache.js"></script>
 
    <script>
     	function gwtLayoutOnLoad() {
     		var layout = new gwtlayout.LayoutManager();	
 
     		layout.splitPanel({
     			'CONTAINER' : 'splitPanel',
     			'HEIGHT' : 400,
     			'WEST' : {
					'CONTAINER' : 'divWest',
					'SIZE' : 100
 				},
 				'EAST' : {
					'CONTAINER' : 'divEast',
					'SIZE' : 100
 				},
				'NORTH' : {
					'CONTAINER' : 'divNorth',
					'SIZE' : 50
     			 },
     			'SOUTH' : {
 					'CONTAINER' : 'divSouth',
 					'SIZE' : 50
      			 },
     			 'CENTER' : {
					'CONTAINER' : 'divCenter'
 			     }		
     		});
 
     		layout.stackPanel({
     			'CONTAINER' : 'stackPanel',
     			'HEIGHT' : 250,
     			'WIDTH' : 350,
         		'headerSize' : 2,
         		'stack' :[
         		        {'HEADER' : 'h1', 'CONTAINER' : 'c1'},
         		        {'HEADER' : 'h2', 'CONTAINER' : 'c2'}
                ]
     		});
 
     		layout.tabPanel({
     			'CONTAINER' : 'tabPanel',
     			'HEIGHT' : 250,
     			'WIDTH' : 350,
         		'tabSize' : 1.5,
         		'tab' :[
         		        {'HEADER' : 'tab1', 'CONTAINER' : 'tc1'},
         		        {'HEADER' : 'tab2', 'CONTAINER' : 'tc2'}
                ]
     		});
     	}
    </script>
 
 

And HTML for layout is :

 
 
  <div id="divWest">I am west</div>
     	<div id="divEast">I am east</div>
		<div id="divNorth">I am north</div>
		<div id="divSouth">I am south</div>
		<div id="divCenter">I am center</div>
    <div id="splitPanel" style="border:1px dotted"></div>
 
   <div> 
     <div id="h1">I am header 1</div>
     <div id="c1">I am content 1</div>
	<div id="h2">I am header 2</div>
	<div id="c2">I am content 2	</div>
    <div id="stackPanel" style="border:1px dotted"></div>
 
 
 
     <div id="tab1">tab1</div>
     <div id="tc1">I am tab content 1</div>
	<div id="tab2">tab2</div>
	<div id="tc2">I am tab content 2	</div>
    <div id="tabPanel" style="border:1px dotted"></div>
 </div>
 
 
 

Download source-code

Download or browse the source-code here https://bitbucket.org/sheel/gwtlib

Demo