上一篇：Xpage移动开发（三）
首先，这个主题帖绝对不会太监。其次，各位看官，上一章节中，我们仔细讨论了那个各种控件（如不熟悉或不记得，请劳烦再回去翻一番“Xpage移动开发（三）”的文档）；万事开头难。希望大家能记住了那些控件，今天我们具体运用以实例。
来，现在我们创建一个真正的Xpage移动应用。
做一个什么应用好呢？文档，我们就做一个专门记录和查看文档数据的一个应用吧，不单因为它简单，更因为它非常具有代表性，以前诸君学Notes开发的时候不 都是从文档数据库开始的么？我们要做的这个文档应用程序首先需要能查看所有的录入文档，这当然需要一个视图；其次，我们能录入文档数据，需要一个表单。另 外，在移动设备上，我们还需要有一系列导航功能和按钮功能，等等。我知道你和我一样摩拳擦掌，跃跃欲试，那么开始吧。好吧，我们得来建一个全新的空白 Notes应用程序，名字叫做Documents，如下图
创建完成以后，别忘记了找到Application Properties，里面有一个Advanced页面。是的，在“Xpage Libraries”那个地方，选择两个扩展库：com.ibm.xsp.extlib.library和 com.ibm.xsp.extlibx.library；都勾上吧。如下图
不过，我们要暂停一下，下面又要说道一个概念。
我们说移动设备应用程序有三种，Native、Hybird、Web；很显然易见，Xpage移动应用属于Web，但是它的效果却很像Native，因为 Xpage特意提供了一个特定的主题（Theme），这种主题为xpage移动控件（如Data view、Outline和Form Table）提供了Native化的体验。如果没有这个主题，那么Xpage开发出的移动应用程序会和别的Web站点没有两样。
重点是，这个主题比较特别，它只能作用于那些有特定前缀名称的Xpage页面，该特定前缀可以在应用属性中的 xsp.theme.mobile.pagePrefix中进行设置，比如你设置的xsp.theme.mobile.pagePrefix是 xsp.theme.mobile.pagePrefix=m_，那么你的Xpage名字也应该以m_开始才能使用到这个主题，所以在接下来的开发中，我 们先设置一下xsp.theme.mobile.pagePrefix，方法是，选择Windows菜单中的“Show Eclipse Views”中的“Package Explorer”，如下图
在WebContent下面的WEB-INF的xsp.properties中，选择”Source”，在最后一行加入语句xsp.theme.mobile.pagePrefix=m_加入语句xsp.theme.mobile.pagePrefix=m_，如下
接着通过传统的Notes开发办法在此应用程序中相应的表单和视图，表单用来确立数据的格式；视图用来展示文档的查看方式：
1、表单叫做Document，包含三个字段：Subject、Category、Body；Subject是文本、可编辑的；Category是选项字段、可编辑的；Body是富文本、可编辑的；如下图：
2、视图有两个列，叫做Subject和Category，分别对应表单中的Subject、Category字段如下图
3、上面的事情做完后，记得录入几条数据，从Notes中查看一下，如下图
然后我们在此数据库中创建一个空白的Xpage页面，取名为m_Documents（你应该知道了为什么名字前面要加一个m_了吧）
从Moblie控件面板中拖出一个Single Page Application 控件到Xpage
在Outline面板中，选择这个Singe Page Application控件，在Properties面板中，找到All Properties，里面有一个selectPageName，我们输入一个名字“homePage”
之后往这个Single Page Application 控件中间的编辑区域中（小绿球图标里），拖进一个
在Outline视图中，选择Mobile Pages控件，在Properties面板中，找到All Properties，里面有一个label，名字叫做“homePage”，如下图
再接着往Mobile Pages控件的编辑区域里面拖放一个Page Heading控件。找到这个Page Heading控件的属性，在lable属性中，我们写上“Home”
之后我们再拖放一个Rounded List控件到Mobile Pages控件的编辑区域
我知道这个鼠标的操作可能有点困难，但是我要鼓励你迎难而上，风雨之后见彩虹。看，拖放之后的效果是这样的：
再接着我们要将一个Static Line Item控件拖放到这个Rounded List控件的编辑区域里面，如下图
选择这个Static Line Item控件，在里面的label属性中写入All Documents；在moveto中
写入viewPage, 如下图
现在你可以在Chrome浏览器中简单的浏览一下：
我 们一点击“All Documents”应该会跳到一个视图的页面中去，即我们在Static Line Item控件的在moveto中写入的viewPage，但是我们现在还没有这个viewPage，我们需要这个viewPage。viewPage也是 一个Mobile Page，所以我们得继续向Singe Page Application控件中拖入一个新的Mobile Page控件,，如下图
我知道这也是一件很难的事情，所以你要像女子织针一样细心才行。拖拽完成之后的效果：
我们给这个Mobile Page取一个名字，没错，就叫做viewPage，注意大小写啊，如下图
这个Mobile Page中应该先包含一些标题给用户看，最好还要有一些导航按钮，用户可以点击“返回”或”Home”之类的，所以我们先往Mobile Page中拖放一个Page Heading控件，并设置label设置为Docs
如果你希望能手机屏幕上出现"返回"，那么在back属性中输入一个”back”，表明点击back就返回，如下图
这个Mobile Page中应该还包含一个视图的，所以我们需要往里面拖放一个视图控件Data View，此控件可不在Mobile控件面板中，而是在Extension Library面板中，如下图
拖放之后，跳出一个面板对话框，在里面选一个视图，我们只有一个视图不是吗？所以选择“All Documents”
但是问题是，我们总不需要把视图中所有的列都显示出来，对吧？手机屏幕就那么小一点，所以我们只要显示最能代表该文档数据的一列值，比如我们这里的Subject；这时我们就找到一个属性summaryColumn，在里面直接写上Subject，如下图
如果你考虑得更多，那么你应该想到，一个视图中最多可显示多少行数据，对吧？还有用户一打开视图中的文档，是只读还是编辑，所以我们都需要设置一下，看看下图：
我们设置的视图中的显示行数是5，如上图Data下的row属性；另外在openDocAsReadOnly中设置为true。
如果你有进一步的考虑，比如说性能问题，或者翻页等等……好吧，我们还是留到以后去讲。
现在我们在Chrome中简单地浏览一下，如下图
第一步：
第二步：点击“Home”
你能看到一个最上面的标题叫“Docs”；前面还有一个按钮叫“back”；并且你能清楚地看到有5行数据显示出来了。
现在这些数据是不能点的，因为你还没有定义一个mobile Page专门来打开特定的文档，没错，我们又要设计mobile Page控件来打开用户选定的文档。但是我，我觉得今天讲得够多了的吧？所以，下一章我们再继续？敬请期待！
