O2OA
简介
O2OA 是一套现代企业级的办公平台。她有以下特点:
1. 核心代码开源
2. 全功能免费
3. 私有化部署,下载软件后可以安装在自己的服务器上
4. 随时随地办公,平台支持兼容HTML5的浏览器,并且开发了源生的IOS/Android应用
5. 高可扩展性,用户通过简单的学习后,可以自定义配置门户、流程应用、内容管理应用
更多的产品介绍、使用说明、下载、在线体验、API及讨论请移步至http://o2oa.io/
安装
建议您在http://o2oa.io/中下载最新版本的O2 Server进行安装使用
如果您要使用github的程序自行打包,可以fork
本仓库。
fork
操作完成后,会在您的 github 账户下创建一个 o2oa 的副本。接下来可以克隆到本地。
cd {YOUR_WORKING_DIRECTORY}
git clone https://github.com/{YOUR_GITHUB_USERNAME}/o2oa.git
扩展开发
在开发前,请先了解mootools
, 我们基于 mootools
https://mootools.net/ 架构创建了产品的js类库。
目录
前台程序位于github的x_desktop_web目录。
目录说明
x_desktop //桌面资源、平台基础资源和通用工具类
config //系统配置目录
css
framework //系统用到的开源框架
ace //脚本编辑器框架
d3 //图表框架
echarts //考勤用到的图表框架
htmleditor //富文本编辑器
kityminder //脑图
mootools //模块化、面对对象的JS Web应用框架
raphael //矢量图形框架,在流程图配置中用到
js
mwf4 //通用资源和工具
package
lp //系统桌面语言包
widget //通用工具类
xAction //登录页和桌面用到的后台交互类
xDesktop //系统桌面工具类
xScript //流程引擎和内容管理自定义脚本的运行环境
MWF.js //底层方法JS库,对mootools的补充
preview //预览界面模拟json
common.js //底层方法、通用方法、框架引用JS库
index.html //首页HTML
app.html //在新窗口打开应用时的HTML
forum.html //在新窗口打开论坛的HTML
cmsdocMobile.html //手机端打开内容管理文档页面的HTML
{NAME}.html //其他在新窗口打开的HTML
x_component_Attendance //考勤应用
x_component_Chat //在线交流应用
x_component_cms_Column //CMS(内容管理)栏目的列式、增删配置
x_component_cms_ColumnManager //CMS栏目管理设置(分类、表单、脚本、数据字典的列式、增删)
x_component_cms_Document //CMS文档
x_component_cms_FormDesigner //CMS表单设计
x_component_cms_Index //CMS首页
x_component_cms_Module //CMS栏目页面
x_component_cms_QueryViewDesigner //CMS查询视图设计(嵌入在文档中)
x_component_cms_ScriptDesigner //CMS脚本设计
x_component_cms_ViewDesigner //CMS列式视图设计
x_component_cms_Xform //CMS文档中表单的实现
x_component_Execution //OKR应用
x_component_ExeManager //OKR文档的管理界面
x_component_File //云文件
x_component_Forum //论坛首页
x_component_ForumCategory //论坛分类页面
x_component_ForumDocument //论坛帖子页面
x_component_ForumPerson //论坛个人中心
x_component_ForumSearch //论坛搜索结果页面
x_component_ForumSection //论坛版块界面
x_component_HotArticle //热点图片管理界面
x_component_Meeting //会议室管理
x_component_Note //桌面记事本插件
x_component_OnlineMeeting //在线会议应用
x_component_OnlineMeetingRoom //在线会议室
x_component_Organization //人员、部门、组织管理以及选择
x_component_portal_PageDesigner //门户页面设计
x_component_portal_Portal //门户展现
x_component_portal_portalExplorer
x_component_portal_PortalManager //门户管理设置(页面、脚本的列式、增删)
x_component_portal_ScriptDesigner //门户脚本设计
x_component_portal_XPage //门户页面实现
x_component_process_Application //流程应用
x_component_process_ApplicationExplorer
x_component_process_DictionaryDesigner //流程数据字典
x_component_process_FormDesigner //流程表单设计
x_component_process_ProcessDesigner //流程图设计
x_component_process_ProcessManager //流程管理设置(流程图、表单、脚本、数据字典的列式、增删)
x_component_process_ScriptDesigner //流程脚本设计
x_component_process_StatDesigner //流程统计、流程监控设计
x_component_process_TaskCenter //办公中心,普通用户发起流程和查看待办
x_component_process_ViewDesigner //流程查询视图设计
x_component_process_Work //流程任务的展现
x_component_process_Xfrom //流程表单的实现
x_component_Profile //用户个人设置界面
x_component_Template //列式、弹出页接口类
规范:
* 每个应用都是以 x_component_{APPLICATION_NAME}
方式来命名,如x_component_Attendance表示考勤的目录
* 应用中至少包括下列文件及目录:
x_component_{APPLICATION_NAME} //x_component_HelloWorld
Main.js //应用主程序
$Main //主程序用到的资源包
appicon.png //应用图标,在桌面上显示,尺寸为72*72
default //样式包,可以创建其他名称的样式包,并在options传入到Main.js以改变页面风格
css.wcss //样式文件,以json格式编写
icon.png //打开应用时,桌面标签页的图标,图片尺寸为24*24
lp //语言包,目前支持中文
zh-cn.js
Actions //如果没有后台交互,您可以忽略此目录
action.json //后台服务的url和方法,本系统使用JAX-RS 方式的 RESTful Web Service
RestAction.js //应用程序中直接使用此类的方法进行后台交互
创建Hello World
本样例中,我们创建一个名为HelloWorld的应用,在应用窗口中显示“您好,这是我的第一个O2应用!”。
创建目录:
在x_desktop_web目录下创建x_component_HelloWorld目录,并按照规范第2点创建目录和文件。
编写css.wcss:
打开$Main\default\css.wcss输入json格式的样式文本。
{
"contentStyle" : {
"font-size" : "14px",
"line-height" : "20px",
"margin" : "20px",
"padding" : "10px"
}
}
编写lp\zh-cn.js:
MWF.xApplication.HelloWorld.LP = {
"title": "HelloWorld",
"contentText": "您好,这是我的第一个O2应用!"
};
编写Main.js:
//所有的应用类都扩展在MWF.xApplication对象下
//应用名称HelloWorld要和目录x_component_HelloWorld最后一段一致
//在执行时,平台会自动创建MWF.xApplication.HelloWorld类和MWF.xApplication.HelloWorld.options
MWF.xApplication.HelloWorld.options.multitask = true; //multitask表示应用可以在一个浏览器窗口重复打开
MWF.xApplication.HelloWorld.Main = new Class({ //应用入口类
Extends: MWF.xApplication.Common.Main, //MWF.xApplication.Common.Main类提供了平台桌面窗口创建和其他基本功能,比如展现、最大化、最小化等
Implements: [Options, Events], //使用mootools的Options和Events类,请参考mootools的文档
options: { //应用选项
"style": "default", //样式,和 目录$Main/default对应。应用初始化的时候会自动加载$Main/default/css.wcss文件,可以在this.css中使用定义的样式
"name": "HelloWorld",
"icon": "icon.png", //打开应用时,桌面标签页的图标
"width": "400", //应用窗口宽度
"height": "500", //应用窗口高度
"isResize": false, //应用窗口是否允许拖动改变大小
"isMax": false, //应用窗口是否允许最大化
"title": MWF.xApplication.HelloWorld.LP.title //应用窗口标题,MWF.xApplication.HelloWorld.LP在 lp/zh-cn.js中定义
},
onQueryLoad: function(){ //在应用加载前执行的程序
this.lp = MWF.xApplication.HelloWorld.LP; //设置应用的语言包
},
loadApplication: function(callback){
//this.restActions = new MWF.xApplication.HelloWorld.Actions.RestActions(); //后台交互对象。和Actions/RestAction.js对应,如果没有后台交互可以忽略此代码
var div = new Element("div", { //创建一个div
styles : this.css.contentStyle, //样式为content。应用初始化的时候会自动加载$Main/default/css.wcss文件,可以在this.css中使用定义的样式
text : this.lp.contentText //文本内容是zh-cn.js里定义的contentText
}).inject( this.content ) //插入到窗口内容中。this.content是应用窗口的内容DOM容器,您创建的DOM对象都是this.content的子对象
}
});
部署应用
1. 在web端进入系统
2. 点击左上角的图标打开应用菜单,切换到“组件”界面。
3. 打开“部署管理”,在打开的界面最下方找到“部署组件”并点击。
4. 部署组件界面中,“组件名称”、“组件标题”、“组件路径”都填写"HelloWorld",然后点击“部署组件”,部署完成。
5. 已部署的应用可以在“组件”界面找到,您可以拖动到桌面创建快捷方式。