WebX入門指南

[說明] 本文圍繞WebX的Web架構展開，試圖將整個開發中使用的軟體棧或者說生態系統串聯起來。本文中不講解原理性的東西，只是講解各種情境下如何使用WebX相關的技術。入門指南中涉及到的實踐指南和原理指南，不會展開，在後續博文中，詳細闡述。 WebX簡介

詳細的簡介說明見WebX官網。首先看一下WebX的官方介紹:

Webx是一個架構，它可用來做下面的事情：
建立一個全功能的Web應用
    Webx提供了建立一個Web應用所需要的所有必要功能.
建立一個新的Web架構
    Webx允許你定製、甚至重寫大部分的Webx架構邏輯，從而實現全新的功能，或者和其它應用程式框架相整合。
建立一個非Web應用
    Webx的功能並不受限於Web應用，而是對所有類型的應用都有協助。
    Webx所提供的SpringExt子架構是對Spring架構的擴充，能簡化Spring的配置，加強了Spring組件的擴充性。

所以應該來說，WebX基於Spring組件，提供了開發Web應用以及非Web應用的基礎性平台。從本質上講，Webx可以做為一個spring容器來使用，只要是spring允許的一切，webx都能做。Webx的特色功能還是在web上面，不僅僅是作為spring容器來使用，而是一套完整的擴充性強的MVC架構。

WebX = Spring + 組件 + Velocity

從官方的說明來看，WebX的定位並不僅僅是Web架構，而是強調了架構的靈活性和擴充性。對於這一點，大家後面好好體會哈。現在流行的MVC架構很多，SSH、Spring MVC是比較主流的。WebX的優劣勢官方也有說明。這裡我也敢隨便說，誰好誰不好，我選擇學習WebX的原因有兩個： Webx構建了一個完整的生態，提供了各種支援 成熟可靠、可擴充

關於WebX的一些詳細內容，這裡不再贅述，使用WebX開發網站，通常結合Velocity模板引擎和IBatis ORM等一起使用。下面簡單介紹下相關的技術： Spring

Spring架構是由於軟體開發的複雜性而建立的。Spring使用的是基本的JavaBean來完成以前只可能由EJB完成的事情。然而，Spring的用途不僅僅限於伺服器端的開發。從簡單性、可測試性和松耦合性的角度而言，絕大部分Java應用都可以從Spring中受益。-[百度百科]- 目的：解決公司專屬應用程式開發的複雜性 功能：使用基本的JavaBean代替EJB，並提供了更多的公司專屬應用程式功能 Velocity

Velocity是一個基於java的模板引擎（template engine）。它允許任何人僅僅使用簡單的範本語言（template language）來引用由java代碼定義的對象。
當Velocity應用於web開發時，介面設計人員可以和java程式開發人員同步開發一個遵循MVC架構的web網站，也就是說，頁面設計人員可以只關注頁面的顯示效果，而由java程式開發人員關注商務邏輯編碼。Velocity將java代碼從web頁面中分離出來，這樣為web網站的長期維護提供了便利，同時也為我們在JSP和PHP之外又提供了一種可選的方案。-[百度百科]- IBatis

MyBatis 是支援普通SQL查詢，預存程序和進階映射的優秀持久層架構。MyBatis 消除了幾乎所有的JDBC代碼和參數的手工設定以及結果集的檢索。MyBatis 使用簡單的 XML或註解用於配置和原始映射，將介面和 Java 的POJOs（Plain Old Java Objects，普通的 Java對象）映射成資料庫中的記錄。 WebX入門指南 建立WebX應用

詳細內容參考：http://openwebx.org/docs/firstapp.html
WebX工程使用Maven來構建，建立WebX應用和建立普通的Maven工程是一樣的，本文中使用的IDE是Intelij Idea。
1. 建立Webx工程

命令列：

mvn archetype:generate -DgroupId=com.alibaba.webx -DartifactId=tutorial1 -Dversion=1.0-SNAPSHOT -Dpackage=com.alibaba.webx.tutorial1 -DarchetypeArtifactId=archetype-webx-quickstart -DarchetypeGroupId=com.alibaba.citrus.sample -DarchetypeVersion=1.8 -DinteractiveMode=false

IDE開發：

    1. 建立Maven工程，進入頁面後選擇add archetype    2. 添對應的內容：見下圖    > archetypeArtifactId=archetype-webx-quickstart   archetypeGroupId=com.alibaba.citrus.sample     archetypeVersion=1.8                   3.從添加archetype建立新的應用    4.後續的內容和建立普通的應用一樣

2. 運行

mvn jetty:run
localhost:8081訪問樣本網站，部署的時候可以採用Nginx+Tomcat的方式部署，在應用伺服器相關的博文中再介紹。

使用Idea整合式開發環境的，可以直接使用IDE來運行。具體的內容建議看下Maven權威指南和Idea的使用手冊。接下來看下Web給出的樣本程式，窺探下WebX的設計思想，便於我們開發自己的應用。 樣本說明

建立應用後，預設的會提供一個樣本網站。首先看下整個代碼的目錄結構，main目錄下包括了java和webapp兩個子目錄。Java目錄下代碼用於後台邏輯的代碼實現，webapp是網站的根目錄，分別對應代碼中的module和templates。下面看一下，前端和後台是如何?互動的。介紹前，先看下module和templates。 Module

作用:Webx3 作為一個 MVC 架構，由 Module 組件承擔控制器的職責(Controller)。Module 負責接受用戶端資料輸入，執行商務邏輯，響應客戶輸出，以及資料校正，頁面流程式控制制等。
Module 主要分為3種：Action,Screen,Control Screen 為頁面展示或輸出準備資料Model Action 負責接收 Form 提交和資料寫入控制 Control 可嵌套的 Screen 處理器，用於Screen的組裝 screen 職責:響應唯讀功能操作，例如：顯示查詢或查看結果，為此構造必要的資料Model。 運行機制： Webx 中url 一般需要映射到一個 Screen 類進行邏輯處理，一個 Screen典型情境：根據 productId 查看 Product 資訊， 根據orderId 修改 Order 狀態,舉例：http://lcoalhost/product/view_product.htm?productId=100035

public class ViewProduct {     public void execute(@Param(name = "productId") String productId,Context context) {         ProductDO productDO = productAO.find(productId);         context.put("product", productDO);    }  }

Action 職責：處理新增，修改，刪除等資料變更的請求和操作; 約束：通常有表單提交，並且使用 FormService 進行驗證的功能必須使用 Action。 典型情境：例如：提交Offer，修改Member資訊，訂單審批。
舉例：產品-新增產品 http://localhost/view_product.htm?action=ProductAction&event_submit_do_create=true
舉例：產品-修改產品 http://localhost/view_product.htm?action=ProductAction&event_submit_do_update=true

public class ProductAction {     /** * 新增產品 */     public void doCreate(@FormGroup(name = "productForm") ProductVO productVO) {         productAO.create(productVO);     }    /** * 修改產品 */     public void doUpdate(@FormGroup(name = "productForm") ProductVO productVO) {        productAO.update( productVO );     } }

Control 職責：功能同 Screen，但 Control是可重用的 Screen。vm 模板中重用control 寫法, $control.setTemplate(“/product/viewProduct.vm”),注意載入的目錄預設是從control目錄下開始的。 典型情境： 嵌入基本資料框。 開發方式：與 Screen類似, 只不過它放在 control 目錄下。

public class ViewProduct {     public void execute(@Param(name = "productId") String productId,Context context) {         ProductDO productDO = productAO.find(productId);          context.put("product", productDO);    } }

關於Module模組的知識，講完了，估計還有很多東西不清楚。那姑且先記住有這樣的幾塊東西，分別的應用情境就可以了。一些細節的東西在實踐篇裡面講解。 Templates

作用:templates對應於MVC中的View模組。用於介面的渲染，這裡使用了Velocity模板引擎來處理，動態資料和靜態頁面。這裡不講解具體的Velocity模板引擎的知識，只說明templates的結構。
templates也分為三種：layout，screen以及control檔案。 Screen 頁面展示的靜態檔案，動態資料由module下的scrren對象傳入，使用Velocity模板引擎渲染 Control 用於可重用的Scrren顯示, 具體使用時$control.setTemplate (“home:product/viewProduct.vm”) Layout用於頁面配置 Module與Templates互動

現在，已經知道了Module和Templates的作用和應用情境，看一下具體的一個頁面是如何載入的：

例如載入： http://192.168.1.102:8081/?home 樣本程式的首頁

接到請求後，WebX架構按照對應的Pipeline執行相應的代碼，具體的執行流程：
1. 擷取渲染的頁面目標target, 這裡的頁面index.vm。
2. 在webapp的/templates/screen目下，尋找/index.vm模板。
3. 依次尋找screen類（module代碼）：

Index （如果找不到，下一個）Default （如果找不到，下一個, 如果多級的會再尋找上一級的類）TemplateScreen （系統默screen）> 樣本中未提供對應的類，系統會使用預設的TemplateScreen類渲染

4. 執行screen類，並渲染screen模板。

 1) 如果存在layout布局，渲染layout，執行screen類，渲染screen模板 2) 根據target尋找layout模板    layout模板尋找也是按照對應的檔案路徑來尋找，首先是layout/index.vm, 如果沒有找到layout/default.vm。如果存在多級目錄會尋找上一級目錄中的default.vm。如果沒找到會使用common中提供的default.vm檔案。 3) 渲染Layout模板 4) 渲染在layout模板中引用的control(如果有)

大家可以修改下其中的一些檔案，體驗下home目錄載入的流程。知道了WebX頁面的渲染流程，就可以添加自己的頁面了。 小試牛刀

設計自己的網站時，遵循WebX本身設計的思想，頁面驅動和規約大於配置的理念。添加頁面時，首先設計對應頁面的布局，然後添加具體的頁面內容，動態資料通過module傳入。這裡先給一個簡單的樣本：
代碼已上傳http://download.csdn.net/detail/fiboliu/9302219, 運行方法 mvn jetty:run, 訪問路徑：http://localhost:8081/blog/index
網頁Layout

布局的設計，常見的上中下，左中右等方式。這裡給出我們使用的布局方式

這裡的Header和Sidebar其實就是WebX中的Control，Screen對應的就是Screen檔案。Layout下建立對應的布局檔案，見範例程式碼中的/layout/blog/default.vm：

<!DOCTYPE html><html lang="zh-CN"><head>    <!-- Meta, title, CSS, favicons, etc. -->    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <meta name="description" content="WebX Sample">    <meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">    <meta name="author" content="劉傑 <fiboliu@163.com>">    <title>        組件 &middot; Bootstrap v3 中文文檔    </title>    <!-- 新 Bootstrap 核心 CSS 檔案 -->    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">    <!-- 可選的Bootstrap主題檔案（一般不用引入） -->    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">    <script>        var _hmt = _hmt || [];    </script></head><body>    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">        <div class="container">            <!-- header-->            $control.setTemplate("/header.vm")        </div>    </header>    <div class="row">        <div class="container">            <div class="col-md-2">                <!-- left side bar -->                $control.setTemplate("/leftSideBar.vm")            </div>            <div class="col-md-10">                $screen_placeholder            </div>        </div>    </div>    <!-- jQuery檔案。務必在bootstrap.min.js 之前引入 -->    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>    <!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></body></html>

Screen和Control設計

有個布局頁面接下來設計每一個頁面。
header.vm、sidebar.vm contorl頁，以及screen頁面。具體的頁面設計時，可以使用一些前端架構，比如bootstrap。
參考：http://v3.bootcss.com/ header.vm, reference:http://v3.bootcss.com/components/

<nav class="navbar navbar-inverse">  <div class="container-fluid">    <!-- Brand and toggle get grouped for better mobile display -->    <div class="navbar-header">      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">        <span class="sr-only">Toggle navigation</span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>        <span class="icon-bar"></span>      </button>      <a class="navbar-brand" href="#">Brand</a>    </div>    <!-- Collect the nav links, forms, and other content for toggling -->    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">      <ul class="nav navbar-nav">        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>        <li><a href="#">Link</a></li>      </ul>    </div><!-- /.navbar-collapse -->  </div><!-- /.container-fluid --></nav>

leftSideBar.vm

<div class="section">    <div class="row">        <a href="#">分類1</a>        <br>        <a href="#">分類2</a>    </div></div>

設計screen頁面
給一個簡單的首頁介面，只顯示一句歡迎內容。歡迎內容包含待用資料和動態資料。在對應的blog目錄下建立index.vm

<div class="section">    Hello， $name!! <br>    This is my Blog!!</div>

動態資料渲染時通過Velocity模板引擎完成的,這裡的$name變數需要通過對應的Screen Module載入。在Module Screen目錄下建立/blog/Index.java

public class Index {    public void execute(Context context) {           context.put("name", "fiboliu");    }}