一、Maqetta简介
Maqetta是IBM开发的一个创建桌面和移动用户界面的HTML5设计编辑工具。该项目已经捐助给开源机构Dojo基金会。Maqetta提供WYSIWYG可视化HTML5用户界面设计功能,仅需简单的拖曳操作,支持桌面和移动用户界面,一般可用于原型设计。Maqetta应用本身用HTML5/Ajax编写,因此运行在浏览器中无需请求额外的插件或下载。用户可以下载源码,并安装在自己的服务器上,并可自定义源码来满足自己的需求。
二、通过源码运行Maqetta
1、安装与配置eclipse
1)、下载eclipse,网址为:http://eclipse.org/downloads/。这里我们使用的版本为eclipse-jee-kepler-SR1-win32-x86_64(注意选择与自己机器相匹配的版本)。
2)、打开eclipse,选择工作空间的位置。
3)、设置目标平台,为了使我们导入的Maqetta源码能够正常运行,我们需要设置一个目标平台,用来运行这些源码。
a、下载以下的某个文件包,并解压在某一个位置。
- Latest Maqetta release (M10+)
- Maqetta nightly (after 2013-03-27)
- Orion 2.0 build
这里下载的是Orion 2.0 build,版本为eclipse-orion-2.0-win32.win32.x86_64.zip。解压后的路径为D:\eclipse-orion-2.0-win32.win32.x86_64\eclipse
b、安装如下:
点击Window,选择Preferences,选择Plug-in Developement,选择Target Platform。
点击add,选择default,如下图所示。
点击Next,点击Add如下图所示。
选择Directory,点击Browse,选择Orion解压后的路径D:\eclipse-orion-2.0-win32.win32.x86_64\eclipse。点击Finish
选择${eclipse_home},点击Remove。并将Target 的 Name改成orion。如下图所示
点击Finish,并勾选orion,使之激活。如下图所示
这样目标平台已经安装成功。
2、导入源码
a、下载Maqetta的源码,地址为:https://github.com/maqetta/maqetta。下载完成之后解压到某一目录。这里下载完成后解压的目录为:D:\maqetta-master。
b、将Maqetta解压目录中的如下几个工程导入到eclipse。
- davinci.dojo_1_8
- davinci.gridx
- davinci.html
- davinci.releng
- maqetta.client.feature
- maqetta.client.orion
- maqetta.client.plugins.defaults
- maqetta.clipart
- maqetta.core.client
- maqetta.core.server
- maqetta.libraries.feature
- maqetta.server.configurator
- maqetta.server.feature
- maqetta.server.orion
- maqetta.server.orion.authentication.ldap (optional)
- maqetta.shapes
c、导入之后还无法运行,因为davinci.dojo_1_8、davinci.gridx和maqetta.core.client工程的WebContent下的有些目录里面的内容为空。如下图所示:
这是因为Maqetta使用到了其他的开源项目,dojo和gridx。此时我们只需在github上的Maqetta的源码中跟进去即可找到dojo和gridx。找到之后,下载,并拷贝至以上三个工程的相关目录下即可。如下图所示:
3、运行
选择Run,选择RunConfigurations。选择OSGi Framework下的maqetta-orion multi user,点击Run,即可运行,如下图所示:
在控制台输入ss,就会打印"Framework is launched.",说明Maqetta已经正常运行成功。如下图:
此时我们可以通过浏览器来访问 http://localhost:8081/maqetta.第一次访问需要我们注册,注册完成可以进入设计界面,界面如下图所示: