O2OA(翱途)開發平臺[下稱O2OA開發平臺或者O2OA]擁有門戶頁面定製與集成的能力，平臺通過門戶定製，可以根據企業的文化，業務需要設計符合企業需要的統一信息門戶，系統首頁等UI界面。本篇主要介紹通過門戶管理系統如何快速的進行一個門戶頁面的搭建開發，並介紹認識下門戶開發界面上的一些基礎元素。
一、先決條件
1、O2Server服務器正常運行
2、以擁有管理員權限或擁有門戶管理員（PortalManager角色）的用戶賬號登錄O2OA(翱途)開發平臺，如：xadmin
3、可以進入門戶管理平臺並且創建門戶應用
二、門戶管理概述
O2OA平臺是一個可定製的應用開發平臺，可以通過門戶平臺搭建一個符合企業個性化需求的系統。所有設計開發都在瀏覽器端進行，您無需安裝任何額外的軟件和插件。那通過這篇文章我們可以看看通過我們的門戶平臺如何快速搭建一個門戶實例。
三、開發過程簡述
這篇文章我們會通過以下步驟開發實現一個門戶：
-
創建一個門戶應用應用
-
創建一個門戶的頁面，在頁面中展現一個待辦列表。
-
美化頁面，添加樣式。
-
在頁面中增加一個新聞列表。
-
添加腳本，增加翻頁功能。
最後實現的效果圖：
四、開發步驟
1、創建一個門戶應用
首先打開門戶管理應用，點擊右上角的新建門戶按鈕，在彈出窗口填寫門戶名稱，這個名稱需要在門戶管理中唯一，不可重名。
點擊 完成 後，我們會看到一個門戶應用被創建成功了，如下圖所示：
2、創建一個頁面
點擊並打開門戶應用，默認進入頁面配置視圖。新創建的門戶應用沒有頁面，我們可以點擊左上角的新建頁面按鈕，系統將會爲我們創建一個頁面，點擊並打開這個頁面的設計器，如下圖所示：
頁面設計器分爲組件列表、頁面工具欄、頁面設計區、頁面元素區以及頁面屬性區，如下圖所示：
修改頁面名稱（標題）
在頁面屬性區，在基本標籤中，把頁面的名稱設置好，如下取名爲 “首頁”，如下圖所示：
修改完成之後，並點擊設計器左上角的保存按鈕：
添加待辦列表展示區
在頁面設計器，從組件列表中拖動一個“容器”控件到頁面設計區。再拖動兩個“文本”控件到容器中。
點擊第一個“文本”組件，在屬性區編輯值爲：“固定值”，內容爲：“待辦列表展示”，此設置將文本控件的顯示內容設定爲“待辦列表展示 ”，如下圖所示：
點擊第二個“文本”組件在屬性區編輯值爲：“腳本”，在腳本區域中輸入以下內容：
return this.session.user.name
此設置將使第二個文本控件顯示當前用戶的名稱。
3、數據源組件使用
1）添加數據源
我們在組件區拖動一個“數據源”控件到容器中，再拖動一個“子數據源”控件嵌套到數據源控件中。
最後，我們拖動一個“數據文本”控件嵌套到子數據源中。如下圖所示：
我們大右上方的頁面元素區可以看到整個頁面的DOM元素結構樹，如下圖所示：
接着我們要配置數據源，讓頁面通過數據源能夠自動獲取當前用戶的待辦信息列表。
在頁面設計區，選中數據源控件。在屬性區中切換到“數據源”標籤，配置如下信息：
-
方法：POST（數據源使用restful方式獲取數據，獲取待辦列表的接口使用POST方法）；
-
服務應用：流程（系統提供的restfulAPI的應用）
-
路徑：/jaxrs/task/v2/list/paging/1/size/20（獲取待辦的請求地址，系統內的固定寫法）
我們可以通過 http://centerserver:80/x_program_center/jest/list.html 來查詢到所有的服務應用和請求地址。OpenAPI的查詢方法請參考《服務端OpenAPI接口查詢方法》
2）數據源測試
然後我們可以點擊“測試”，來查看獲取到的數據，（注意當前登錄用戶是否有待辦數據），如下圖所示：
3）解析並展示數據
現在數據源可以獲取到需要展示的數據了，接下去我們需要將獲得的數據順利地展示出來。
系統中所有接口都返回JSON格式的數據，根據上面的點擊 “測試”所得到的結果，我們可以看出返回的數據中，data字段是一個數組，是真實的待辦列表數據內容存放的位置。那麼我們接下來要顯示的內容就是data中的數據，所以此處我們需要通過子數據源來遍歷data內容。
選中“子數據源”，在屬性區配置其JSON路徑爲：data，如下圖所示：
在子數據源遍歷數組裏每個對象的過程中，我們需要在文本控制裏展示出相關的內容，讓用戶可以看得到實際的業務數據。在數據源測試的過程中，我們展開數組中的每一個對象，都可以看到完整的數據。我們發現，title這個屬性，是展示每個待辦標題內容信息的，所以我們可以選中子數據源內的“數據文本”，並且配置JSON路徑爲：title，如下圖所示。
4）保存並預覽展示效果
保存當前頁面，點擊工具欄上的預覽按鈕，我們可以看到效果如下：
通過預覽，我們可以看到效果如下：
現在沒有添加任何樣式，所以樣子比較難看。展示的結果符合預期，第一行是前面固定文本，第二行是當前登錄用戶，後面是展現了一個待辦title的列表。
4、爲界面添加樣式
回到頁面設計界面：
1）選中最外層的“容器”組件，在屬性區的樣式中配置如下信息：
{
"width":"90%",
"margin":"auto"
}
2）選中第一個文本組件，設置樣式如下：
{
"font-size": "24px",
"font-weigth": "bold",
"line-height": "60px",
"text-align": "center"
}
3）選中第二個文本組件，設置樣式如下：
{
"font-size":"18px",
"font-weigth":"bold",
"line-height":"40px",
"text-align":"center"
}
4）選中數據文本控件，設置樣式如下：
{
"line-height": "30px",
"border-bottom": "1px solid #cccccc"
}
保存當前頁面，點擊工具欄上的預覽按鈕，我們可以看到效果如下圖所示：
5、增加新聞列表
我們前面實現的內容只包含一個待辦列表，內容比較單一。門戶首頁需要豐富內容，我們接下來爲界面增加一個新聞列表，獲取系統內信息發佈的內容，並且進行列表展現。
在設計區，我們再拖出一個“容器” 組件到頁面上，然後把原先頁面上最外層的那個容器拖入到這個新創建的“容器”中：
這裏使用到了，我們門戶編輯器中的組件移動功能，旁邊還有幾個小按鈕分別是：複製選中內容、刪除選中內容、把選中內容提取爲部件。
然後我們調整樣式。最外層的容器添加樣式：
{
"width": "1066px",
"margin": "auto",
"display": "flex",
"justify-content": "space-between"
}
第二層容器（原有的最外層容器）的樣式：
{
"width": "676px"
}
然後我們再拖入一個容器，我們用來存放新聞列表，如下圖所示：
{
"width": "318px",
"align-self": "flex-start"
}
接下來，跟上面待辦列表一樣，我們添加數據源、子數據源、數據文本，並填入數據源的路徑等內容。
不同的是，新聞列表查詢的是內容管理模塊的數據：
/jaxrs/document/filter/list/1/size/20
子數據源仍然是遍歷data數組，數據文本解析的屬性仍然是title，如下圖所示：
還是保存當前頁面，點擊工具欄上的預覽按鈕，效果如下圖所示：
從界面感覺上，我們還應該給新聞列表加個頭。
我們繼續拖入一個 文本 組件，放入到右邊新聞列表數據源上面，如下圖所示：
然後再給這個文本組件添加樣式：
{
"font-size": "24px",
"font-weigth": "bold",
"line-height": "60px"
}
展示新聞列表標題的數據文本也需要添加樣式：
保存當前頁面。點擊工具欄上的預覽按鈕，整體個頁面的展示效果如下圖所示：
五、通過腳本實現翻頁功能
我們以待辦列表爲例，給待辦列表增加一個翻頁功能。
上面我們在待辦的數據源中設置的路徑爲：/jaxrs/task/v2/list/paging/1/size/20；
其中的“1”表示要展現第一頁的待辦，“20”表示每頁展現20條。
要實現翻頁效果我們需要將固定的請求URL參數化。在這裏我們設置兩個參數：{page}和{size}分別代表當前頁和每頁條數。我們將數據源中設置的路徑改爲：/jaxrs/task/v2/list/paging/{page}/size/{size}
並且在數據源屬性的“參數”中增加這兩個參數。如下圖所示：
其中的參數{page}和{size}需要通過腳本來對其賦值，具體腳本我們稍後再說。首先我們需要一個地方來記錄當前的頁碼數、總共有幾頁等翻頁信息，現在我們需要一個腳本來完成這個目標。
1、爲表單添加事件腳本
點擊頁面設計區空白處或點擊元素列表區中的<Form>，確保Form被選中，切換屬性區到“事件”頁，“事件”頁內的就是頁面加載的時候各個階段會執行的事件。
我們需要在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、添加翻頁元素
拖動一個容器組件到頁面（爲了放置翻頁的按鈕），然後添加兩個按鈕到容器組件內，添加一個下拉框到容器組件內，將兩個按鈕的名稱分別改爲“上一頁”和“下一頁”如下圖所示：
並給新增的容器添加一點樣式：
{
"display": "flex",
"justify-content": "center"
}
然後點擊我們添加的下拉框組件，在屬性中設置“可選值”爲腳本，在腳本框輸入如下代碼：
var options = [];
for (var i=1; i<=this.pageObj.pagesize; i++){
options.push(i+"|"+i);
}
return options; //返回可選的列表
添加好之後的效果，如下圖所示：
然後我們切換到下拉框屬性的事件頁籤，在change事件中添加如下腳本：
//獲取下拉框選中的值，select是下拉框的名稱
var p = this.page.get("select").getData();
this.gotoPage(p);
給上一頁按鈕添加click事件腳本如下：
this.prevPage();
this.page.get("select").setData(this.pageObj.page);//設置下拉框的值
給下一頁按鈕添加click事件腳本如下：
this.nextPage();
this.page.get("select").setData(this.pageObj.page);//設置下拉框的值
3、爲數據源添加參數
回到我們的待辦列表數據源，選中它，切換屬性到“數據源”頁，給我們的參數添加腳本。點擊“page”參數，在腳本框中輸入以下腳本：
return this.pageObj.page;
點擊“size”參數，在腳本框中輸入以下腳本：
return this.pageObj.size;
保存當前頁面。然後點擊工具欄上的預覽按鈕，查看顯示效果：
至此，我們的第一個門戶實例就基本完成了。雖然頁面樣子比較難看，但是整個開發過程我們把整個門戶設計器的所有基本內容都接觸到了。包括整個設計器的各個區域內容、組件使用、組件屬性設置、樣式設置、腳本設置等等！希望對您有幫助！