在ide的模塊節點下新建一個文件，此目錄下的文件默認為xwl模塊文件
每個模塊文件都具有module根節點，該節點定義了整個模塊的屬性
在model根節點下建立viewport
viewport表示整個頁面的顯示視口，相當於HTML中的<body></body>
在viewport下建立grid
grid相當於HTML中的<table></table>
把viewport的layout屬性設置為fit
在grid下建立store
store封裝了客戶端的數據模型，可以通過設置url屬性來讀取后台的數據，設置autoLoad屬性為true使store自動加載url指向的數據
(把store建立在viewport下面是無法顯示的)
url這里我填寫的是另一個模塊的路徑（將模塊拖動到url位置上WebBuilder會自動補全）
另一個模塊是用來提供數據源的，在module根節點下建立dataprovider，在sql屬性里書寫sql語句即可
dataprovider是數據庫輸出控件，用於把數據庫數據轉換為指定格式的內容。
該控件的原理為使用query獲取數據，然后把query查詢到的數據轉換為指定格式的數據，最后默認立即把轉換后的數據輸出到客戶端。
原來的模塊文件視圖如下
此時運行便可見效果
但是這里的列名都是數據庫本身的字段名，想要修改就需要用到另一個控件了
將array控件拖到grid下，並把itemId屬性改為 columns （一定要是columns，grid通過columns這個屬性來配置它的列）
在array控件下建立column控件，每個column對應數據庫表的一列
column控件主要修改三個屬性
dataIndex 對應的數據庫的字段
itemId id，可以不修改，一般設置為字段名
text 頁面上要顯示的列名
如COMPANY_ID字段
建立其余4列,修改對應的三個屬性
運行
如果要條件查詢的話，修改數據源的sql語句
select * from wb_company where (company_id = {?COMPANY_ID?} or {?COMPANY_ID?} is null) and (COUNTRY = {?COUNTRY?} OR {?COUNTRY?} IS NULL)
根據公司ID和國家來查詢
在grid下建立toolbar
toolbar相當於HTML中的<lable></label>
在toolbar下建立text
text相當於HTML中的<input />
設置text的filedlabel屬性分別為公司ID、國家
設置lableAlign為right
繼續在tbar下建立button,設置相應屬性
這樣頁面就完成了，運行如圖
給搜索按鈕添加點擊事件，在searchBtn的click事件里書寫js代碼
運行，輸入參數，點擊搜索即可
