“像搭积木一样开发应用”--开源的ToyBricks（积木）开发平台

ToyBricks

ToyBricks（积木）（以下简称ToyBricks）是基于面向积木方法论构建的、面向Java开发（尤其是RIA应用）的开源开发平台， 旨在提供给开发者一个简单易用、高效率、高产品质量、易扩展的开源平台，“像搭积木一样开发软件”。

 

ToyBricks解决了很多长期困扰Java开发者的问题，如：

1）开发所应用的“平台”都是拼凑而成而非真正意义上的整合解决方案 。

事实上，很多软件公司的平台都是用开源软件“混搭”而成，典型的，如 SSH（Struts+Spring+Hibernate）、FSH（Flex+Spring+Hibernate）等，这种混搭方案天然的割裂了作为组件 的完整性，因为很多组件是横跨展现、业务逻辑甚至持久层的 ；

2）JavaEE中Web开发规范的缺陷。

在当前的JavaEE开发中，作为一个功能，页面与业务逻辑、配置等文件是分散在不同地方的 （页面jsp、 html、js、css、图片等等一般放在工程rootFolder的某个文件夹中；业务逻辑放在classpath下；配置文件有时候要放在WEB-INF 文件夹中），这种分散天然的破坏了作为一个功能的“聚合”要求 （事实上在我们日常的设计工作中，人们追求松耦合更甚于高聚合），我们很多时候是希望作为一个功能的全部文件放在一起的；
这种分散式的结构直接导致了“一个功能或模块打包形成一个jar文件作为产出物”的困难 。

3）多个功能、模块之间的冲突问题 。

jar冲突是最显而易见的了，不同模块要求同一jar的版本可能不同，由于缺乏像OSGI那样的单元（OSGI中为Bundle） 隔离机制，所以只能一方向另一方妥协；

4）编程模型复杂、学习难度高 。

无论Struts的MVC、Flex的组件模型、Spring的IOC/AOP、Hibernate的ORM等等，其学习与应用 都是有一定难度的；

5）缺乏组件模型或组件模型复杂。

可复用的资源积累是一个软件企业知识资产积累的重要组成部分 ，以JSP的Tag为例，目前很多企业内部只有少部分高 水平技术人员被授权开发公司应用的标签库，这严重限制了可复用资源的积累；

 

6）缺乏清晰的功能、模块边界。

功能、模块之间高度耦合，且耦合分散在各个角落，导致模块拆分困难 ；

 

ToyBricks目前提供的功能

1）ToyBricks JavaBean运行容器；
2）Aquarell模板引擎；
3）RIA实现；
4）常规组件库：

  1】  UI 类

      1.   按钮（支持下拉菜单、状态控制、图标自动匹配）

      2.  Text 编辑器（支持自定义扩展、校验器等）

      3.  TextArea 编辑器（支持自定义扩展、校验器等）

      4. Combox 编辑器（可组合其他编辑器、支持即时搜索（可配置客户端或服务端数据源）、校验器等等）

      5.  日期（时间）选择器（支持可配置的年月、年月日、年月日时间、时间等等选择）

      6. HTML 编辑器（基于 CKEditor ，支持各类常规操作，可通过配置 mode （模式）为 basic/cms 等来批量选择功能按钮）

      7.  选择树编辑器（支持单选、多选、节点锁定等等）

      8.  文件上传（基于 Flex 技术、支持单个与多文件上传、限制类型、大小、各类回调函数等等）

      9.  代码高亮显示

      10.  数据表格（支持列排序、列搜索、单元格编辑、分页、行菜单、表格菜单、预定义模板按钮等等）

      11.  自由格式表格

      12.  Tree （支持节点懒加载、工具条按钮扩展、节点菜单等等）

      13.   表单（ Form ）（支持编辑器自由布局与格式化布局、支持值自动分发与收集、统一校验等等）

      14.  菜单（无限层级支持、状态控制、动态数据源等等）

      15.  菜单条

      16.  TabBox （支持 Tab 懒加载、锁定等）

      17.  工具条

      18.   对话框

      19.  CSS 引用（支持全局（页面）唯一引用）

      20.  JavaScript 引用（支持全局（页面）唯一引用）

      21.  Splitter

      22.  图标库（预置了上百种各类图标，提供非常简单的扩展机制）

  2】  数据源（基于 Toplink （ JPA ），支持基于 JPA 规范的 ORM ，支持多数据源，域对象自动发现等等）

  3】  Dao （同时支持基于 JPA 规范与原生 SQL ）

 

ToyBricks的特性

1）开发者只需要掌握简单的Java、Html（简单的Javascript及CSS）即可 ；
2）搭积木的开发体验 ，开发者只需要编写必须的代码；
3）ToyBricks提供了丰富的组件库 ；
4）桌面级的用户产品体验 ；
5）应用即组件、一切皆组件 。事实上，实际开发中有约50%以上都是重复的功能，基于ToyBricks体系，您可以将您想要的一切封装成组件；
6）一个功能（模块、甚至系统）可以打包成一个jar文件，边界清晰 ；
7）运行时隔离；
8）比OSGI更简单的扩展机制 （套娃模型）；
9）搭配ToyBricks的WebOS平台，您已经拥有了一套完整的系统；

 

ToyBricks平台结构

 

 

【下载ToyBricks平台（V4.0）核心源代码】 见附件

 

【下载ToyBricks平台源代码许可协议】 见附件

 

【下载ToyBricks平台开发手册】 见附件

 

【下载Demo样例】 MyEclipse工程形式的Demo（下载附件后（共三部分），解压缩，import入MyEclipse即可）

 

Demo工程源码简单分析

1.文件结构

 

2.源代码片段

project.ria.xml 该文件定义了应用程序

<?xml version="1.0" encoding="UTF-8"?>
<prolet id="helloworld" title="Helloworld" view="helloworld.aq.html"
	class="HelloworldBiz">
	<!-- 子应用程序 -->
	<subpro id="dialog0" title="对话框" view="dialog0.aq.html" />
	<subpro id="dialog1" title="helloworld作为组件使用" view="dialog1.aq.html" />
</prolet>

 

HelloworldBiz 主应用程序的业务逻辑

package helloworld;

import java.util.HashMap;
import java.util.Map;

import org.cloudsinger.components.util.ListDataModel;
import org.cloudsinger.toybricks.api._JunctionTo;

public class HelloworldBiz {

	private String name = "Hello ToyBricks.";

	public void setName(String _name) {
		name = _name;
	}

	/**
	 * ajax调用返回结果
	 * 
	 * @return
	 */
	public String getName() {
		return name;
	}

	/**
	 * 挂接到组件（demoGrid）的依赖项（getDataSource），获取数据源
	 * <p>
	 * 数据表格获取数据源有多种方法，如直接给出jpaSql、如本例中给出结果集等等
	 * </p>
	 * 
	 * @return
	 */
	@_JunctionTo("this/demoGrid:getDataSource")
	public ListDataModel<Map<String, String>> getDemoGridDS() {
		ListDataModel<Map<String, String>> rtn = new ListDataModel<Map<String, String>>();
		Map<String, String> row = new HashMap<String, String>();
		row.put("id", "20110203");
		row.put("title", "面向积木编程");
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		rtn.getDataList().add(row);
		return rtn;
	}

}

 

helloworld.aq.html 主应用程序的视图

<!-- 引用ToyBricks的UI组件库 -->
<#taglib use="cloudsinger.components/ui/*" for="cs"/>

<style>
	.tt{
		background-color:#f1f1f1;
		height:50px;font-family:微软雅黑;font-size:16px;font-weight:bold;
		line-height:50px;
	}
</style>

<script>
	function sayHello(){	
		var msg = ${window}.ajax("getName");
		alert("您单击的结果是："+msg+"，右键单击可以显示菜单哦");
	}
	function showDialog(){
		${window}.dialogR("dialog0",500,400);
	}
	function showOtherHelloworld(){
		${window}.dialog("dialog1",700,400);
	}
</script>

<#-- 打印变量 --#>
<div class="tt">${name}</div>

<#-- 菜单条组件 --#>
<cs:Menubar>
	<cs:Menu title="文件">
		<cs:item title="打开对话框" onclick="showDialog" />
		<cs:item title="将helloworld作为组件打开" onclick="showOtherHelloworld" />
		<cs:item />
		<cs:item title="其他">
			<cs:item title="子菜单项目" onclick="alert('子菜单项目')" />
			<cs:item title="子菜单项目" onclick="alert('子菜单项目')" />
			<cs:item title="子菜单项目" onclick="alert('子菜单项目')" />
		</cs:item>
	</cs:Menu>
	<cs:Menu title="帮助">
		<cs:item title="关于" onclick="alert('ToyBricks开放平台演示应用程序')"/>
	</cs:Menu>
</cs:Menubar>

<#-- 工具条组件 --#>
<cs:Toolbar>
	<cs:Button title="新建" onclick="alert('新建')" />
	<cs:Button title="打开对话框" onclick="showDialog" />
	<cs:Button title="将helloworld作为组件打开" onclick="showOtherHelloworld" />
	<cs:Button/>
	<cs:Button title="关于">
		<cs:menu>
			<cs:Menu>
				<cs:item title="关于" onclick="alert('ToyBricks开放平台演示应用程序')"/>
			</cs:Menu>
		</cs:menu>
	</cs:Button>
</cs:Toolbar>

<#-- 菜单组件，注册为按钮btn的右键菜单 --#>
<cs:Menu apply="#btn">
	<cs:item title="测试菜单项" />
	<cs:item title="新建" />
	<cs:item />
	<cs:item title="其他">
		<cs:item title="测试菜单项" />
	</cs:item>
</cs:Menu>

<#-- 数据列表组件 --#>
<cs:DataGrid id="demoGrid" style="height:300px;width:100%;">
	<cs:columns>
		<cs:colum field="id" title="ID" />
		<cs:colum field="title" title="标题" />
	</cs:columns>
	<cs:rows onDblClick="showDialog">
		<cs:menu>
			<cs:Menu>
				<cs:item title="打开对话框" onclick="showDialog" />
				<cs:item title="将helloworld作为组件打开" onclick="showOtherHelloworld" />
			</cs:Menu>
		</cs:menu>
	</cs:rows>
</cs:DataGrid>

 

 

dialog0.aq.html 第一个对话框的视图

 

<#taglib use="cloudsinger.components/ui/*" for="cs"/>

<cs:TabBox>
	<cs:Tab title="欢迎">
		<img id="imm" src="${lafPath}/welcome.gif" />
	</cs:Tab>
	<cs:Tab title="Tab页面1">
		<div>abc</div>
	</cs:Tab>
</cs:TabBox>

 

 

dialog1.aq.html 第二个对话框的视图

<#taglib use="helloworld" for="hw"/>
<div style="border:1px dashed red;">
    <hw:helloworld name="应用程序即组件，我也是一个组件哦"/>
</div>

 

 

 

 

 

运行效果如下图：

 

 

 

 

 

天云创意.基础平台研发团队

合作者意向联系方式 Mail:[e-mail] QQ 16384284

美丽人生.精彩创意 天云创 意

 

 

评论

2 楼 kuowei 2011-10-19  

1 楼 rich_li 2011-10-11