资讯频道 → 开源软件

20顶
3踩

开源的ToyBricks（积木）开发平台发布，像搭积木一样开发应用

2011-10-11 10:41 by 见习记者 cloudsinger 评论(43) 有31152人浏览

web java webos osgi rest

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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样例 part1 part2 part3】 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>

运行效果如下图：

分享到：

20
顶

3
踩

评论共 43 条请登录后发表评论

23 楼 287854442 2011-10-12 09:23

mahonet 写道

ray_linn 写道

40.        rtn.getDataList().add(row);
41.        rtn.getDataList().add(row);
42.        rtn.getDataList().add(row);
43.        rtn.getDataList().add(row);
44.        rtn.getDataList().add(row);
45.        rtn.getDataList().add(row);
46.        rtn.getDataList().add(row);
47.        rtn.getDataList().add(row);
48.        rtn.getDataList().add(row);
49.        rtn.getDataList().add(row);
50.        rtn.getDataList().add(row);
51.        rtn.getDataList().add(row);
52.        rtn.getDataList().add(row);
53.        rtn.getDataList().add(row);
54.        rtn.getDataList().add(row);
55.        rtn.getDataList().add(row);
56.        rtn.getDataList().add(row);
57.        rtn.getDataList().add(row);
58.        rtn.getDataList().add(row);
59.        rtn.getDataList().add(row);
60.        rtn.getDataList().add(row);
61.        rtn.getDataList().add(row);
62.        rtn.getDataList().add(row);
63.        rtn.getDataList().add(row);
64.        rtn.getDataList().add(row);
65.        rtn.getDataList().add(row);
66.        rtn.getDataList().add(row);
67.        rtn.getDataList().add(row);

吐了。。。。。。

这个确实有点恶心。。。

显然是用Eclipse的快捷键直接向下copy的，这不是问题所在

22 楼 cloudsinger 2011-10-12 09:19

llade 写道

依然还是比较分散。dailog要在不同的文件上定义一番。

另外，没看到持久层代码。

举个例子，你这里是DataGrid， <cs:rows onDblClick="showDialog"> ，假如我要编辑 onDblClick的此记录，要怎么做,在弹出的编辑框上带个保存按钮？还是得分散写吧？

如上所述，作为编辑动作的对话框实现，既可以像本例这样“单独作为子应用程序”实现，也可以“直接写在主应用程序页面中”，dialog方法的入参可以为子应用程序路径也可以为当前页面的中Component对象或者Html的Dom对象或者JQuery的对象等。

21 楼 cloudsinger 2011-10-12 08:53

kaki 写道

理想主义的东西，估计使用过程中慢的要死！！

在LoadRunner下测试的速度还是可以的，在页面N多组件的情况下，普通的PC机（2CPU，2G内存），Tomcat环境下，打开页面的速度基本上不会超过500MS

20 楼 yza0088 2011-10-12 08:53

不错，思想很好我很喜欢。
我们现在倡导的是真正的MDA，模型驱动的架构，只有有了模型才能真正的把业务逻辑沉淀下来。

19 楼 kaki 2011-10-12 08:49

理想主义的东西，估计使用过程中慢的要死！！

18 楼 fnet 2011-10-12 00:32

这个是？
类似于GWT那种？

17 楼 javamonkey 2011-10-11 23:46

java ee不是实现了一个在线商店的，要是能用这些平台实现这个程序，就可以了嘛。

为啥都不去实现这个。

我记得以前新技术出来，总要用新技术实现一个同样的在线商店，现在不流行了？还是根本实现不了？

16 楼 xyang81 2011-10-11 22:59

关注。。。。

15 楼 daifeng130 2011-10-11 20:35

积木理念，不看好。不同的公司业务千差万别，相同的组件很难满足需求。用Jquery、EXTJS很容易实现楼主同样的功能。

14 楼 llade 2011-10-11 18:53

13 楼 KimHo 2011-10-11 17:26

lzzgym 写道

这种所谓的开发平台，依本人经验，应该是只适合自己团队使用。另一个公司的团队一般都不会采用的，每个公司的业务情况相差很大，不是一个开发平台能通吃的。刨除一个学习成本的问题，如果团队不能完全hold住这个框架，那是一个极大的风险，做技术评估的时候谁敢承担此风险？？如果团队整体水平很高，这样的团队一般不屑于使用别人的平台，高手看别人的东西都是挑三拣四的。
一家之言。。。

你说出了国内众多开发平台的杯具之处

12 楼 lzzgym 2011-10-11 15:52

11 楼 paramore 2011-10-11 15:30

这个嘛。。。

10 楼 blue_halo 2011-10-11 14:59

应该搞个面向 s b 编程。

9 楼 cloudsinger 2011-10-11 14:46

徐射雕吧，遇到以前的同事了
------------------------------------------------------------------------
呵呵，例子而已，可以重构成：

for(int i=0;i<=30;i++){
rtn.getDataList().add(row); 
}

8 楼 yulon 2011-10-11 14:10

例子太少，不用学习

7 楼 volking 2011-10-11 13:17

浮云。现在只差一个标准。

6 楼 Bernard 2011-10-11 13:01

这种东西一般学习成本更高，维护成本更更高。

5 楼 attend 2011-10-11 12:56

简单看了一下源码，挺不错。

4 楼 shediao 2011-10-11 12:42

车明君？

发表评论

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

20顶3踩

开源的ToyBricks（积木）开发平台发布 ，像搭积木一样开发应用