Freemarker结合Blueprint和JQuery/Ext/JSCharts，动态组件

最新推荐文章于 2018-05-21 15:40:15 发布

最新推荐文章于 2018-05-21 15:40:15 发布 · 109 阅读

文章标签：

#EXT #freemarker #jQuery #UI #JavaScript #ViewUI

java world 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种使用Freemarker模板引擎结合JQuery和自定义CSS框架Blueprint来构建灵活Web用户界面的方法。通过具体示例展示了如何集成JSChart插件绘制饼状图和柱状图，并实现了一个包含日期选择器和对话框的表格样例。

前段时间看有讨论web ui的，昨天一同学还向我吹嘘他们公司的UI多牛，jsp标签几百个。

我没那么牛，也没那么多精力，结合一前写的代码，整合了JQuery的一些Plugin和Blueprint（一css框架，强烈推荐），做了一些灵活的空间，写了几个例子，
分享给大家

下面是几个图

发现以这种思路做web ui还是可以尝试下的，不用ZK了，简单的我选择用JQuery，他的插件应该可以满足一般应用了，如果复杂的用Ext，一样在加载到浏览器之前，html和js甚至css都是用freemarker结合后台数据生成好的

源码和平时写html和js都一样，没什么区别

下面是两个例子文件目录和源码

<#import "/zftl/zftl-base.ftl" as page>
<#import "/zftl/zftl-jscharts.ftl" as chart>

<#assign basePath = page.beginPath in page />

<@page.page_header title="Demo Of ZFTL" widget_list=['chart','blueprint']>

</@page.page_header>

<@page.page_body>
<div class="container">
		<h1>JSChart integrated with Freemarker and JQuery</h1>
		<hr>
    <div class="column span-12">
   	<div class="notice">
      	Pie Chart Demo
      </div>		
      <fieldset>
        <legend>Pie Charts</legend>

    		  <p>
    		      		  <@chart.basic_pie />
    		  </p>
          
    		  <p>
    		  <div id="pie_graph">Loading graph...</div>
				<script type="text/javascript">
					
					var myData = new Array(['Jan', 2], ['Feb', 1], ['Mar', 3], ['Apr', 6], ['May', 8], ['Jun', 10], ['Jul', 9], ['Aug', 8], ['Sep', 5], ['Oct', 6], ['Nov', 2], ['Dec', 4]);
					var colors = ['#FFCC00', '#FFFF00', '#CCFF00', '#99FF00', '#33FF00', '#00FF66', '#00FF99', '#00FFCC', '#FF0000', '#FF3300', '#FF6600', '#FF9900'];
					var myChart = new JSChart('pie_graph', 'pie');
					myChart.setDataArray(myData);
					myChart.colorizePie(colors);
					myChart.setPiePosition(200, 180);
					myChart.setPieRadius(95);
					myChart.setPieUnitsFontSize(8);
					myChart.setPieUnitsColor('#474747');
					myChart.setPieValuesColor('#474747');
					myChart.setPieValuesOffset(-10);
					myChart.setTitleColor('#fff');
					myChart.setSize(300, 300);
					myChart.draw();
					
				</script>

    		  </p>
        
      </fieldset>   
    </div>
    <div class="column span-12 last">
    
      <div class="notice">
      	Bar Chart Demo
      </div>		
      <fieldset>
        <legend>Bar Charts</legend>

    		  <p>
    		  <@chart.basic_bar />
    		  </p>
          
    		  <p>
    		  <div id="graph">Loading graph...</div>

				<script type="text/javascript">
					
					var myData = new Array(['Jan', 2], ['Feb', 1], ['Mar', 3], ['Apr', 6], ['May', 8], ['Jun', 10], ['Jul', 9], ['Aug', 8], ['Sep', 5], ['Oct', 6], ['Nov', 2], ['Dec', 4]);
					var colors = ['#CE0000', '#EF2323', '#D20202', '#A70000', '#850000', '#740000', '#530000', '#850000', '#B00000', '#9C0404', '#CE0000', '#BA0000'];
					var myChart = new JSChart('graph', 'bar');
					myChart.setDataArray(myData);
					myChart.colorizeBars(colors);
					myChart.setDataArray(myData);
					myChart.setAxisColor('#9D9F9D');
					myChart.setAxisWidth(1);
					myChart.setAxisNameX('Months');
					myChart.setAxisNameY('Values');
					myChart.setAxisNameColor('#655D5D');
					myChart.setAxisNameFontSize(9);
					myChart.setAxisPaddingLeft(50);
					myChart.setAxisValuesDecimals(1);
					myChart.setAxisValuesColor('#9C1919');
					myChart.setTextPaddingLeft(0);
					myChart.setBarValuesColor('#9C1919');
					myChart.setBarBorderWidth(0);
					myChart.setTitleColor('#8C8382');
					myChart.setGridColor('#5D5F5D');
					myChart.draw();
					
				</script>
    		  </p>
        
      </fieldset>
    
    </div>
    <hr>
    
    <div class="column span-16 last">
    
	<div id="pie_chart_div">Loading graph...</div>

	<script type="text/javascript">
		var myData = new Array(['IE7', 26], ['IE6', 24.6], ['Firefox', 44.2], ['Safari', 2.6], ['Opera', 2.1]);
		var colors = ['#0673B8', '#0091F1', '#F85900', '#1CC2E6', '#C32121'];
		var myChart = new JSChart('pie_chart_div', 'pie');
		myChart.setDataArray(myData);
		myChart.colorizePie(colors);
		myChart.setTitle('W3schools browser statistics in August 2008 (%)');
		myChart.setTitleColor('#8E8E8E');
		myChart.setTitleFontSize(11);
		myChart.setTextPaddingTop(280);
		myChart.setPieValuesDecimals(1);
		myChart.setPieUnitsFontSize(9);
		myChart.setPieValuesFontSize(8);
		myChart.setPieValuesColor('#fff');
		myChart.setPieUnitsColor('#969696');
		myChart.setSize(616, 321);
		myChart.setPiePosition(308, 145);
		myChart.setPieRadius(95);
		myChart.setFlagColor('#fff');
		myChart.setFlagRadius(4);
		myChart.setTooltip(['Firefox','Including Mozilla and all Gecko browsers']);
		myChart.setTooltip(['IE6','Including IE5 and older browsers']);
		myChart.setTooltipOpacity(1);
		myChart.setTooltipBackground('#ddf');
		myChart.setTooltipPosition('ne');
		myChart.setTooltipOffset(2);
		myChart.setBackgroundImage('${page.beginPath}images/chart/chart_bg.jpg');
		myChart.draw();
	</script>

    </div>
    <hr>
	
    <p><a href="javascript:void();">JSCharts</a></p>   
</div>
</@page.page_body>

<#import "/zftl/zftl-base.ftl" as page>
<#import "/zftl/zftl-widget.ftl" as widget>

<#assign basePath = page.beginPath in page />

<@page.page_header title="Demo Of ZFTL" widget_list=['grid', 'blueprint', 'ui.pack']>
	<script>
	$(function(){
		$('.flexme').flexigrid({
			striped:false,
			title:'One Simple'
			});
			
		$("#birth").datepicker();
			
				// Dialog			
				$('#dialog').dialog({
					autoOpen: false,
					width: 500,
					height: 500,
					buttons: {
						"Ok": function() { 
							$.weeboxs.open($('#name').val(), {type:'warning'});
							// $(this).dialog("close"); 
						}, 
						"Cancel": function() { 
							$(this).dialog("close"); 
						} 
					}
				});
				
				// Dialog Link
				$('#dialog_link').click(function(){
					$('#dialog').dialog('open');
					return false;
				})
	});
	</script>
</@page.page_header>

<@page.page_body>
<div class="container">
<h3>Demo Of ZFTL Grid</h3>

<table class="flexme">
	<thead>
    		<tr>
            	<th width="100">Col 1</th>
            	<th width="100">Col 2</th>
            	<th width="100">Col 3 is a long header name</th>
            	<th width="300">Col 4</th>
            </tr>
    </thead>
    <tbody>
    		<tr>
            	<td>This is data 1 with overflowing content</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" id="dialog_link">Open Dialog</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
    		<tr>
            	<td>This is data 1</td>
            	<td>This is data 2</td>
            	<td>This is data 3</td>
            	<td>
			  	  <button type="button" class="button positive" onclick="">Positive</button>
			  	  <button type="button" class="button negative" onclick="">Negative</button>
				</td>
            </tr>
            
    </tbody>
</table>
<hr />
		<!-- ui-dialog -->
		<div id="dialog" class="span-8" title="Dialog Title">
		  <form id="dummy" action="" method="post">
          <p><label for="name">Your Name</label><br />
      		  <input type="text" class="text" id="name" name="name" value="Name"></p>
          <p><label for="pwd">Your Password</label><br />
      		  <input type="password" class="text" id="pwd" name="pwd" value="abc"></p>
          <p><label for="email">Your Email</label><br />
      		  <input type="text" class="text" id="email" name="email" value="your@mail.com"></p>
          <p><label for="email">Your Birth</label><br />
      		  <input type="text" class="text" id="birth" name="birth" value=""></p>
      		  
   		  <p><button type="submit" class="button">Submit</button>  </p>
      	  </form>
		</div>
</div>
</@page.page_body>