`

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

EXTfreemarkerjQueryUIJavaScript 
阅读更多

前段时间看有讨论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>
 

 

 

 

 

 

 

分享到：
| Groovy文件import路径问题
评论
3 楼 jixh2009 2009-12-10  
很有意思!
2 楼 key232323 2009-06-04  
这个只是我一个java企业开发平台（个人项目，打算开源的）的web ui的一部分，
等过几周，我那个平台小完善了，我放到网上，svn上去。

到时候欢迎来拍砖。
1 楼 wq13480 2009-05-29  
源码能分享下就更好了!
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单.rar

    总的来说，这个项目结合了多种技术，利用Struts2处理请求，Spring进行依赖管理和事务控制，Hibernate处理数据，Freemarker生成动态页面，jQuery提供前端交互，而jquery-treeview则提供了树形菜单的可视化。...

    spring4.0+hibernate4.3+freemarker+jquery+ext4.2

    spring4.0+hibernate4.3+freemarker+jquery+extjs4.2 在实现了漂亮的首页，图表拖拉都实现了，这里重点是spring4.0和freemarker的搭建，注意其中的包的变化以及配置的不同 main.view为spring的入口，ext的节目为main...

    freemarker替换变量实例

    freemarker替换变量实例

    spring+hibernate+freemarker+jQuery 登录注册例子

    Spring提供了业务逻辑和安全框架，Hibernate负责数据持久化，Freemarker生成动态视图，而jQuery则增强了前端用户体验。通过这个实例，开发者可以学习到如何将这些组件有效地整合在一起，构建出健壮的Web应用程序。

    原创 用FreeMarker宏 和 Jquery 做树（Hbiernate和JDBC版）

    标题 "原创 用FreeMarker宏 和 Jquery 做树（Hbiernate和JDBC版）" 描述了如何使用FreeMarker模板引擎的宏功能，结合jQuery库，创建一个可展示层次结构数据的树形视图。在这个过程中，可能涉及了两个主要的技术：...

    sitemesh和freemarker结合自我总结

    ### Freemarker与Sitemesh结合的关键知识点 #### 一、简介 ...Freemarker的一个显著特点...通过上述步骤，可以有效地将Freemarker和Sitemesh结合使用，实现动态内容与静态布局的分离，提高Web应用的开发效率和可维护性。

    安装freemarker插件（freemarker的eclipse插件）

    安装freemarker插件（freemarker的eclipse插件） a) 首先下载 freemarker-ide-0.9.14.zip(在这里不用下载了，附件中已经有了) b) 解压后：把hudson.freemarker_ide_0.9.14这个文件放到:eclipse\plugins下面 c) 发现...

    springMVC整合ext4js

    与Ext4JS结合时，可以在前端对按钮、菜单等元素进行权限判断，动态显示或隐藏，确保用户只能访问其被授权的功能。 至于提供的文件，"Ext4js整合springMVC生成添加表单.docx"可能包含了关于如何使用Ext4JS创建添加...

    freemarker ftp编辑

    1.首先下载 freemarker-ide-0.9.14.zip 2. 解压后：把hudson.freemarker_ide_0.9.14这个文件放到:eclipse\plugins下面 3.发现hudson.freemarker_ide_0.9.14下的freemarker-2.3.6.jar包是比较早的版本，用新的 ...

    spring3 mvc restful freemarker jquery json

    开发者在FreeMarker模板中定义变量和逻辑，FreeMarker会将这些变量与后台传递的对象进行绑定，从而实现页面动态渲染。 jQuery在前端扮演着重要角色，它简化了DOM元素的选择、事件处理、Ajax异步请求等功能，使得...

    公交线路搜索系统，mysql+jdbc+servlet+freemarker+json+jquery+arttemplate+百

    MySQL负责数据存储，JDBC和Servlet处理数据交互，Freemarker和ArtTemplate构建用户界面，jQuery增强用户体验，而JSON和百度地图API则提供了数据传输和地图服务。这个系统展示了Web开发中的典型技术栈，为类似应用...

    java 使用 freemarker 导出word 包含 图片和动态的数据表，动态行和动态列

    总的来说，通过Java、FreeMarker和Apache POI的结合，我们可以高效地生成包含动态内容的Word文档，无论是文字、表格还是图片，都能轻松实现动态生成。这在处理大量个性化报告或数据分析时非常有用，大大提高了开发...

    FreeMarker结合官方文档Demo

    FreeMarker是一款强大的、开源的模板引擎，主要用于生成动态HTML、XML或其他格式的文本。它与Java语言紧密结合，常用于Web应用中的视图层，实现MVC（Model-View-Controller）设计模式。FreeMarker的工作原理是，将...

    SpringBoot+JPA+Freemarker 生成动态SQL

    结合SpringBoot和JPA，我们可以创建一个服务，该服务使用JPA的Repository接口与数据库进行交互，并通过Freemarker生成动态SQL。具体步骤如下： 1. **设置项目**：创建一个SpringBoot项目，添加Spring Data JPA和...

    maven2项目集成springmvc、spring3、freemarker、ibatis和EasyUI实例

    总的来说，这个项目是一个典型的Java Web应用架构，它利用Maven管理依赖，Spring MVC处理Web请求，Spring3负责组件管理和业务逻辑，iBatis处理数据库交互，Freemarker生成动态视图，而EasyUI则提供了用户友好的界面...

    freemarker模板

    Freemarker模板是一种强大的、基于Java的开源模板引擎，用于生成动态内容。它主要用于Web应用程序，尤其是与Spring框架集成时，但也可用于任何需要将数据模型转化为文本输出的场景，如电子邮件生成、报告制作等。在...

    Java freemarker 模板生成word动态表格

    总结来说，Java FreeMarker模板生成Word动态表格是通过结合FreeMarker模板引擎的灵活性和Apache POI的强大功能，来高效地创建和更新包含动态数据的Word文档，尤其适用于需要大量定制和自动化生成的场景。通过理解并...

    springmvc采用freemarker动态生成带图片的word

    在IT行业中，SpringMVC和Freemarker是两个非常重要的技术组件，它们分别用于构建Web应用程序和服务端模板渲染。在本项目中，我们将探讨如何利用SpringMVC与Freemarker来动态生成带有图片的Word文档。 SpringMVC是...

    FreeMarker通用的分页

    FreeMarker提供了一种灵活且强大的方式来处理动态内容，尤其适用于Web开发中的视图层。在FreeMarker中实现通用的分页功能是提高Web应用程序性能和用户体验的重要一环。 ### FreeMarker通用分页知识点解析 #### 1. ...

    springboot集成freemarker入门案例

    Bootstrap是一个流行的前端开发框架，提供了预设的CSS样式和组件，可以帮助快速构建响应式和移动设备优先的网站。将Bootstrap与FreeMarker结合，可以通过在FTL模板中引入Bootstrap的CSS和JS文件，轻松地创建美观的...

Magicbox
Global site tag (gtag.js) - Google Analytics