Xpage移动开发(五)

上一篇:Xpage移动开发(四)

春光灿烂的周末,话说,真堵。今天周一,是的,我们又要开始学习新的Xpage移动开发知识了,还记得上一章节我们介绍的内容吗?我当然知道你们肯定忘记了——所以回复“Xpage”去看看吧。

我们上一章节说道,移动数据的视图展示,如下图

现 在这些视图里的数据是不能点的,因为你还没有定义一个mobile Page专门来打开特定的文档,没错,我们又要设计mobile Page控件来,不过首先,我们应该回到Data View控件中,设置一下属性pageName,比如设置pageName值为documentPage,告诉Data View控件你里面所有的文档要打开的话,都要通过documentPage这个mobile Page控件来打开。
所以我们要创建一个叫做documentPage的mobile Page控件,如下图

第一件事情就是设置pageName属性为documentPage

其次,往这个mobile Page控件中拖放一个Page heading(具体拖放过程我就不讲了啊),设置一下back属性为“back”,如下图

接着我们用打开一个容器控件面板,从里面拖放一个Panel面板,这个面板可以单独来绑定文档数据, 

然后再往这个Panel控件拖放一个Page Heading控件,属性设置为"back",label属性设置为"Document",moveTo 属性设置为"viewPage",如下图:

下面我们来绑定一下文档数据,从大纲面板中选择Panel控件,然后找到属性里面有一个Data,点击“Add”按钮,如下图:

在里面选择Domino Document,如下图

在这个面板中的右边,选择Form为Document;Default action是Open Document,如下图

下面我来进行表单布局,我这里用一个表格来布局,当然你完全可以不用布局,直接拖拽几个Edit Box控件也可以。我从容器控件面板中拖放一个Table控件过来,并且设置为三行两列

然后从核心控件面板上拖放label控件到第一列,拖动一个Edit box控件到第二列,如下图

依次将表格第二、三行都这么填充满,注意第三行第二列中应该放置一个Rich Text控件。然后,我们先来设置这个表格的第一列里的每个label标签,依次设置Label属性为Subject、Category、Body之类,如下图 

再 设置这个表格的第二列,依次选择第二列第一行、第二行、第三行里的控件,如选择第二列第一行的Edit Box控件,然后找到Data属性,设置Bind to属性,比如第二列第一行绑定到Subject、第二列第二行绑定到Category、第二列第三行绑定到Body等,如下图

做好了之后,激动人心的一刻终于到来了,我们可以直接预览来看看了。

如果你不想看到上面的图样式,希望看到iphone风格的,只需要在你的URL最后加上?platform=iphone即可,如下图

剩下的我想你就可以自己去测试一下看看了。
不过很显然,这个样例还没有讲完,因为我们还有很多事情要做,比如新建、编辑、保存、删除这个文档;或者我们想从视图中看到更多的问题,甚至要看发送工作流 通知等等,我是不是都能完成?没错,所以我会在今后的章节中再和大家来讲述,因为今天是周一,所以我少讲点,不给大家的生活和工作添堵。好吧,敬请期待!

 

本文来自于艾威培训

转载请注明:https://www.avtechcn.cn/share/652.html