Freemarker结合Blueprint和JQuery/Ext/JSCharts，动态组件
前段时间看有讨论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="[email protected]"></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>
