O2OA(翱途)开发平台-快速入门开发一个门户实例

O2OA(翱途)开发平台[下称O2OA开发平台或者O2OA]拥有门户页面定制与集成的能力，平台通过门户定制，可以根据企业的文化，业务需要设计符合企业需要的统一信息门户，系统首页等UI界面。本篇主要介绍通过门户管理系统如何快速的进行一个门户页面的搭建开发，并介绍认识下门户开发界面上的一些基础元素。

一、先决条件

1、O2Server服务器正常运行

2、以拥有管理员权限或拥有门户管理员（PortalManager角色）的用户账号登录O2OA(翱途)开发平台，如：xadmin

3、可以进入门户管理平台并且创建门户应用

二、门户管理概述

O2OA平台是一个可定制的应用开发平台，可以通过门户平台搭建一个符合企业个性化需求的系统。所有设计开发都在浏览器端进行，您无需安装任何额外的软件和插件。那通过这篇文章我们可以看看通过我们的门户平台如何快速搭建一个门户实例。

三、开发过程简述

这篇文章我们会通过以下步骤开发实现一个门户：

  1. 创建一个门户应用应用

  2. 创建一个门户的页面，在页面中展现一个待办列表。

  3. 美化页面，添加样式。

  4. 在页面中增加一个新闻列表。

  5. 添加脚本，增加翻页功能。

最后实现的效果图：

image (53).png

四、开发步骤

1、创建一个门户应用

首先打开门户管理应用，点击右上角的新建门户按钮，在弹出窗口填写门户名称，这个名称需要在门户管理中唯一，不可重名。

image (54).png

点击 完成 后，我们会看到一个门户应用被创建成功了，如下图所示：

image (55).png

2、创建一个页面

点击并打开门户应用，默认进入页面配置视图。新创建的门户应用没有页面，我们可以点击左上角的新建页面按钮，系统将会为我们创建一个页面，点击并打开这个页面的设计器，如下图所示：

image (56).png

页面设计器分为组件列表、页面工具栏、页面设计区、页面元素区以及页面属性区，如下图所示：

image (57).png

修改页面名称（标题）

在页面属性区，在基本标签中，把页面的名称设置好，如下取名为 “首页”，如下图所示：

image (58).png

修改完成之后，并点击设计器左上角的保存按钮：

image (59).png

添加待办列表展示区

在页面设计器，从组件列表中拖动一个“容器”控件到页面设计区。再拖动两个“文本”控件到容器中。

点击第一个“文本”组件，在属性区编辑值为：“固定值”，内容为：“待办列表展示”，此设置将文本控件的显示内容设定为“待办列表展示 ”，如下图所示：

image (60).png

点击第二个“文本”组件在属性区编辑值为：“脚本”，在脚本区域中输入以下内容：

return this.session.user.name

此设置将使第二个文本控件显示当前用户的名称。

3、数据源组件使用

1）添加数据源

我们在组件区拖动一个“数据源”控件到容器中，再拖动一个“子数据源”控件嵌套到数据源控件中。

最后，我们拖动一个“数据文本”控件嵌套到子数据源中。如下图所示：

image (61).png

我们大右上方的页面元素区可以看到整个页面的DOM元素结构树，如下图所示：

image (63).png

接着我们要配置数据源，让页面通过数据源能够自动获取当前用户的待办信息列表。

在页面设计区，选中数据源控件。在属性区中切换到“数据源”标签，配置如下信息：

image (65).png

  • 方法：POST（数据源使用restful方式获取数据，获取待办列表的接口使用POST方法）；

  • 服务应用：流程（系统提供的restfulAPI的应用）

  • 路径：/jaxrs/task/v2/list/paging/1/size/20（获取待办的请求地址，系统内的固定写法）

我们可以通过 http://centerserver:80/x_program_center/jest/list.html 来查询到所有的服务应用和请求地址。OpenAPI的查询方法请参考《服务端OpenAPI接口查询方法》

2）数据源测试

然后我们可以点击“测试”，来查看获取到的数据，（注意当前登录用户是否有待办数据），如下图所示：

image (66).png

3）解析并展示数据

现在数据源可以获取到需要展示的数据了，接下去我们需要将获得的数据顺利地展示出来。

系统中所有接口都返回JSON格式的数据，根据上面的点击 “测试”所得到的结果，我们可以看出返回的数据中，data字段是一个数组，是真实的待办列表数据内容存放的位置。那么我们接下来要显示的内容就是data中的数据，所以此处我们需要通过子数据源来遍历data内容。

选中“子数据源”，在属性区配置其JSON路径为：data，如下图所示：

image (67).png

在子数据源遍历数组里每个对象的过程中，我们需要在文本控制里展示出相关的内容，让用户可以看得到实际的业务数据。在数据源测试的过程中，我们展开数组中的每一个对象，都可以看到完整的数据。我们发现，title这个属性，是展示每个待办标题内容信息的，所以我们可以选中子数据源内的“数据文本”，并且配置JSON路径为：title，如下图所示。

image (68).png

4）保存并预览展示效果

保存当前页面，点击工具栏上的预览按钮，我们可以看到效果如下：

image (69).png

通过预览，我们可以看到效果如下：

image (70).png

现在没有添加任何样式，所以样子比较难看。展示的结果符合预期，第一行是前面固定文本，第二行是当前登录用户，后面是展现了一个待办title的列表。

4、为界面添加样式

回到页面设计界面：

1）选中最外层的“容器”组件，在属性区的样式中配置如下信息：

{
  "width":"90%",
  "margin":"auto"
}

image (71).png

2）选中第一个文本组件，设置样式如下：

{
	"font-size": "24px",
	"font-weigth": "bold",
	"line-height": "60px",
	"text-align": "center"
}

image (72).png

3）选中第二个文本组件，设置样式如下：

{
  "font-size":"18px",
  "font-weigth":"bold",
  "line-height":"40px",
  "text-align":"center"
}

image (73).png

4）选中数据文本控件，设置样式如下：

{
	"line-height": "30px",
	"border-bottom": "1px solid #cccccc"
}

image (74).png

保存当前页面，点击工具栏上的预览按钮，我们可以看到效果如下图所示：

image (75).png

5、增加新闻列表

我们前面实现的内容只包含一个待办列表，内容比较单一。门户首页需要丰富内容，我们接下来为界面增加一个新闻列表，获取系统内信息发布的内容，并且进行列表展现。

在设计区，我们再拖出一个“容器” 组件到页面上，然后把原先页面上最外层的那个容器拖入到这个新创建的“容器”中：

image (76).png

这里使用到了，我们门户编辑器中的组件移动功能，旁边还有几个小按钮分别是：复制选中内容、删除选中内容、把选中内容提取为部件。

然后我们调整样式。最外层的容器添加样式：

{
	"width": "1066px",
	"margin": "auto",
	"display": "flex",
	"justify-content": "space-between"
}

image (77).png

第二层容器（原有的最外层容器）的样式：

{
	"width": "676px"
}

image (78).png

然后我们再拖入一个容器，我们用来存放新闻列表，如下图所示：

image (79).png

{
	"width": "318px",
	"align-self": "flex-start"
}

接下来，跟上面待办列表一样，我们添加数据源、子数据源、数据文本，并填入数据源的路径等内容。

不同的是，新闻列表查询的是内容管理模块的数据：

image (80).png

/jaxrs/document/filter/list/1/size/20

image (81).png

子数据源仍然是遍历data数组，数据文本解析的属性仍然是title，如下图所示：

image (82).png

还是保存当前页面，点击工具栏上的预览按钮，效果如下图所示：

image (83).png

从界面感觉上，我们还应该给新闻列表加个头。

我们继续拖入一个 文本 组件，放入到右边新闻列表数据源上面，如下图所示：

image (84).png

然后再给这个文本组件添加样式：

{
	"font-size": "24px",
	"font-weigth": "bold",
	"line-height": "60px"
}

image (85).png

展示新闻列表标题的数据文本也需要添加样式：

image (86).png

保存当前页面。点击工具栏上的预览按钮，整体个页面的展示效果如下图所示：

image (87).png

五、通过脚本实现翻页功能

我们以待办列表为例，给待办列表增加一个翻页功能。

上面我们在待办的数据源中设置的路径为：/jaxrs/task/v2/list/paging/1/size/20；

其中的“1”表示要展现第一页的待办，“20”表示每页展现20条。

要实现翻页效果我们需要将固定的请求URL参数化。在这里我们设置两个参数：{page}和{size}分别代表当前页和每页条数。我们将数据源中设置的路径改为：/jaxrs/task/v2/list/paging/{page}/size/{size}

并且在数据源属性的“参数”中增加这两个参数。如下图所示：

image (88).png

其中的参数{page}和{size}需要通过脚本来对其赋值，具体脚本我们稍后再说。首先我们需要一个地方来记录当前的页码数、总共有几页等翻页信息，现在我们需要一个脚本来完成这个目标。

1、为表单添加事件脚本

点击页面设计区空白处或点击元素列表区中的<Form>，确保Form被选中，切换属性区到“事件”页，“事件”页内的就是页面加载的时候各个阶段会执行的事件。

image (89).png

我们需要在queryLoad事件或beforeLoad事件中添加可执行的脚本，点击事件“queryLoad”，会出现脚本编辑区域，添加如下脚本：

this.pageObj = {};
this.pageObj.size = 20; //每页显示20条
this.pageObj.page = 1;  //当前是第1页
this.pageObj.taskCount = 0;   //待办总数

//通过服务，获取当前人的待办总数
o2.Actions.load("x_processplatform_assemble_surface").TaskAction.countWithPerson(this.session.user.id, function(json){
    this.pageObj.taskCount = json.data.count;
}.bind(this), null, false);
var n = this.pageObj.taskCount/this.pageObj.size;
this.pageObj.pagesize = (n.toInt()==n) ? n : n+1;   //总共多少页

//定义“下一页”方法
this.define("nextPage", function(){
    var p = this.pageObj.page+1;
    if (p<=this.pageObj.pagesize){
        this.pageObj.page = p;
        var source = this.page.get("Source")//获取数据源组
        source._getO2Uri();//刷新数据源路径
        source.reload();   //刷新取数据源组件
    }
}.bind(this));

//定义“上一页”方法
this.define("prevPage", function(){
    var p = this.pageObj.page-1;
    if (p>0){
        this.pageObj.page = p;
        var source = this.page.get("Source")//获取数据源组
        source._getO2Uri();//刷新数据源路径
        source.reload();   //刷新取数据源组件
    }
}.bind(this));

//定义跳转到第几页方法
this.define("gotoPage", function(p){
    if (p>0 && p<=this.pageObj.pagesize){
        this.pageObj.page = p;
        var source = this.page.get("Source")//获取数据源组
        source._getO2Uri();//刷新数据源路径
        source.reload();   //刷新取数据源组件
    }
}.bind(this));

2、添加翻页元素

拖动一个容器组件到页面（为了放置翻页的按钮），然后添加两个按钮到容器组件内，添加一个下拉框到容器组件内，将两个按钮的名称分别改为“上一页”和“下一页”如下图所示：

image (90).png

并给新增的容器添加一点样式：

{
"display": "flex",
"justify-content": "center"
}

image (91).png

然后点击我们添加的下拉框组件，在属性中设置“可选值”为脚本，在脚本框输入如下代码：

var options = [];
for (var i=1; i<=this.pageObj.pagesize; i++){
    options.push(i+"|"+i);
}
return options; //返回可选的列表

添加好之后的效果，如下图所示：

image (92).png

然后我们切换到下拉框属性的事件页签，在change事件中添加如下脚本：

//获取下拉框选中的值，select是下拉框的名称
var p = this.page.get("select").getData();
this.gotoPage(p);

image (94).png

给上一页按钮添加click事件脚本如下：

this.prevPage();
this.page.get("select").setData(this.pageObj.page);//设置下拉框的值

image (95).png

给下一页按钮添加click事件脚本如下：

this.nextPage();
this.page.get("select").setData(this.pageObj.page);//设置下拉框的值

image (96).png

3、为数据源添加参数

回到我们的待办列表数据源，选中它，切换属性到“数据源”页，给我们的参数添加脚本。点击“page”参数，在脚本框中输入以下脚本：

return this.pageObj.page;

image (97).png

点击“size”参数，在脚本框中输入以下脚本：

return this.pageObj.size;

image (98).png

保存当前页面。然后点击工具栏上的预览按钮，查看显示效果：

至此，我们的第一个门户实例就基本完成了。虽然页面样子比较难看，但是整个开发过程我们把整个门户设计器的所有基本内容都接触到了。包括整个设计器的各个区域内容、组件使用、组件属性设置、样式设置、脚本设置等等！希望对您有帮助！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/497131.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

DoubleU-Net：一种用于医学图像分割的深度卷积神经网络

DoubleU-Net：一种用于医学图像分割的深度卷积神经网络

DoubleU-Net&#xff1a;一种用于医学图像分割的深度卷积神经网络 摘要引言相关工作方法 DoubleU-Net A Deep Convolutional Neural Network for Medical Image Segmentation–2020 摘要 语义图像分割是将图像中的每个像素标记为相应的类的过程。基于编码器-解码器的方法&…
阅读更多...
如何在Win10使用IIS服务搭建WebDAV网站并实现无公网IP访问内网文件内容

如何在Win10使用IIS服务搭建WebDAV网站并实现无公网IP访问内网文件内容

文章目录 前言1. 安装IIS必要WebDav组件2. 客户端测试3. 使用cpolar内网穿透&#xff0c;将WebDav服务暴露在公网3.1 安装cpolar内网穿透3.2 配置WebDav公网访问地址 4. 映射本地盘符访问 前言 在Windows上如何搭建WebDav&#xff0c;并且结合cpolar的内网穿透工具实现在公网访…
阅读更多...
银行监管报送系统介绍（十二）：非居民金融账户涉税信息报送

银行监管报送系统介绍（十二）：非居民金融账户涉税信息报送

国家税务总局、财政部、中国人民银行、中国银行业监督管理委员会、中国证券监督管理委员会、国家金融监督管理总局2017年5月9日发布、2017年7月1日起施行的《非居民金融账户涉税信息尽职调查管理办法》。 一、《管理办法》出台的背景是什么&#xff1f; 　　受二十国集团&…
阅读更多...
软件设计师24--概念设计阶段

软件设计师24--概念设计阶段

软件设计师24--概念设计阶段 考点1&#xff1a;概念设计过程考点2&#xff1a;E-R图属性E-R模型-联系类型判断例题&#xff1a;E-R模型-联系类型判断扩充的E-R模型 考点1&#xff1a;概念设计过程 需求分析 --> 抽象数据 --> 设计局部ER模型 --> 合并局部模型消除冲突…
阅读更多...
接口自动化测试要做什么？8个步骤讲的明明白白

接口自动化测试要做什么？8个步骤讲的明明白白

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 先了解下接口测试流程&#xff1a; 1、需求分析 2、Api文档分析与评审 3、测试计划编写 4、用例设…
阅读更多...
2024年2月吸尘器行业线上电商（京东天猫淘宝）综合排行榜

2024年2月吸尘器行业线上电商（京东天猫淘宝）综合排行榜

鲸参谋监测的线上电商平台&#xff08;淘宝天猫京东&#xff09;2月吸尘器行业销售数据公开。 根据鲸参谋电商数据平台显示&#xff0c;吸尘器行业2月销量累计约53万件&#xff0c;环比上个月下滑29%&#xff0c;同比去年下滑19%&#xff1b;销售额累计约4亿&#xff0c;环比上…
阅读更多...
原生js实现循环滚动效果

原生js实现循环滚动效果

原生js实现如下图循环滚动效果 核心代码 <div class"scroll"><div class"blist" id"scrollContainer"><div class"bitem"></div>......<div class"bitem"></div></div> </di…
阅读更多...
ES学习日记(一)-------单节点安装启动

ES学习日记(一)-------单节点安装启动

基于ES7.4.1编写,其实一开始用的最新的8.1,但是问题太多了!!!!不稳定,降到7.4 下载好的安装包上传到服务器或虚拟机,创建ES目录,命令mkdir -p /路径xxxx 复制安装包到指定路径并解压: tar zxvf elasticsearch-8.1.0-linux-x86_64.tar.gz -C /usr/local/es/ 进入bin目录安装,命…
阅读更多...
【操作系统复习之路】操作系统概述（复习的同学有福啦）

【操作系统复习之路】操作系统概述（复习的同学有福啦）

长话短说&#xff0c;就记下笔记&#xff0c;期待期末90&#xff0c;随便希望能帮助到有需要的同学。 目录 一、操作系统的目标和作用 二、操作系统的发展过程 2.1 无OS 2.2 有OS 【1】批处理系统 【2】分时系统 【3】实时操作系统 【4】三种基本操作系统的比较&#…
阅读更多...
类的定义与实例化

类的定义与实例化

一.类的定义 1.1 格式 定义类的一般格式如下&#xff1a; class 类名{ public:公有成员列表; protected:保护成员列表; private:私有成员列表; }; 构成元素&#xff1a; &#xff08;1&#xff09;类头&#xff08;class head&#xff09; “class 类名”称为类头。 &…
阅读更多...
大视频上传断点续传解决方案

大视频上传断点续传解决方案

版本&#xff1a;6.5.40 代码&#xff1a;up6-jsp-springboot: Web大文件上传-jsp-springboot示例 - Gitee.com nosql示例 nosql示例不需要进行任何配置&#xff0c;可以直接访问测试。 SQL示例 1.创建数据库 2.配置数据库连接 3.自动下载maven依赖 4.启动项目 启动成功 6.访…
阅读更多...
开源 | 电动汽车充换电解决方案,从智能硬件到软件系统，全部自主研发

开源 | 电动汽车充换电解决方案,从智能硬件到软件系统，全部自主研发

文章目录 一、产品功能部分截图1.手机端&#xff08;小程序、安卓、ios&#xff09;2.PC端 二、小程序体验账号以及PC后台体验账号1.小程序体验账号2.PC后台体验账号关注公众号获取最新资讯 三、产品简介&#xff1f;1. 充电桩云平台&#xff08;含硬件充电桩&#xff09;&…
阅读更多...
VTK——自定义二维图像涂抹Widget（支持任意值涂抹），擦除，恢复 vtkCustomPaintWidget

VTK——自定义二维图像涂抹Widget（支持任意值涂抹），擦除，恢复 vtkCustomPaintWidget

通过鼠标控制 涂抹区域&#xff0c;可以进行&#xff0c;后退&#xff0c;可以进行二维标注&#xff0c;也可以进行回退&#xff0c;也可以任意值涂抹。 vtkCustomPaintWidget 1.标注&#xff1a; 2.擦除 视频&#xff1a; 2D标注 vtkPaint VTK 2D 标注 描绘 2D 擦除&#x…
阅读更多...
蓝桥杯-卡片换位

蓝桥杯-卡片换位

solution 有一个测试点没有空格&#xff0c;要特别处理&#xff0c;否则会有一个测试点运行错误&#xff01; 还有输入数据的规模在变&#xff0c;小心顺手敲错了边界条件 #include<iostream> #include<string> #include<queue> #include<map> #incl…
阅读更多...
picgo + 腾讯云 cos 图床搭建

picgo + 腾讯云 cos 图床搭建

文章目录 0.背景&简介1.注册腾讯云并创建 COS 存储桶2.获取 API 密钥3.安装并配置 PicGo4.配置typora 0.背景&简介 背景: 文档笔记有图片但存储在本地, 想发送给别人需要连同图片目录一起绑定发送比较麻烦 这里使用对象存储 CDN搭建图床 简介: PicGo 是一款开源的图片…
阅读更多...
为什么Python不适合写游戏？

为什么Python不适合写游戏？

知乎上有热门个问题&#xff1a;Python 能写游戏吗&#xff1f;有没有什么开源项目&#xff1f; Python可以开发游戏&#xff0c;但不是好的选择 Python作为脚本语言&#xff0c;一般很少用来开发游戏&#xff0c;但也有不少大型游戏有Python的身影&#xff0c;比如&#xff1…
阅读更多...
使用AI创造诗词歌曲

使用AI创造诗词歌曲

大家好我是在看&#xff0c;记录普通人学习探索AI之路。 在前面的几讲&#xff0c;我们介绍了AI的使用方法&#xff0c;今天我们正式进入实操环节&#xff0c;讲一讲用如何用AI来创作诗歌。 之前我们在讲AI使用的时候&#xff0c;曾经介绍过一种技巧叫做"种子词提示”。…
阅读更多...
快速创建zookeeper集群

快速创建zookeeper集群

先说明&#xff0c;zookeeper集群的3个节点都放在同一个虚拟机&#xff08;穷&#xff09;&#xff0c;所以搭建是一个伪集群&#xff0c;因为一个服务器挂机&#xff0c;所有节点都会停止。工作实际情况安装到三个服务器&#xff0c;并修改节点配置的ip地址即可&#xff08;红…
阅读更多...
虚拟机-从头配置Ubuntu18.04（包括anaconda,cuda,cudnn,pycharm,ros,vscode）

虚拟机-从头配置Ubuntu18.04（包括anaconda,cuda,cudnn,pycharm,ros,vscode）

最好先安装anaconda后cuda和cudnn&#xff0c;因为配置环境的时候可能conda会覆盖cuda的路径&#xff08;不确定这种说法对不对&#xff0c;这里只是给大家的建议&#xff09; 准备工作&#xff1a; 1.Ubuntu18.04&#xff0c;x86_64&#xff0c;amd64 虚拟机下载和虚拟机Ubu…
阅读更多...
Discord账号多开如何做？有什么办法可以同时在线？

Discord账号多开如何做？有什么办法可以同时在线？

Discord 是一款免费的语音和文本聊天应用程序。它是一个游戏聊天应用程序和社区&#xff0c;最初是游戏的语音和IM服务&#xff0c;然后转向直播&#xff0c;然后是游戏商店的社区平台。它成为游戏玩家在游戏中交流和协作的首选工具。下面将为你介绍如何同时使用多个discord账号…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站