【視頻教程】一步步將AppBox升級到Pro版

標籤：fine   分享   .com   部分   src   mon   客戶   alt   右鍵   

本系列教程分為上中下三部分，通過視頻的形式講解如何將基於FineUI（開源版）的AppBox v6.0一步一步升級FineUIPro（基礎版）。

【視頻教程】一步步將AppBox升級到Pro版（上）
主講：三石
時間長度：12分鐘
下載：免費下載：https://pan.baidu.com/s/1pM8mIqJ   密碼: m7na

本課程的目標是將AppBox引用的FineUI（開源版）升級為FineUIPro（基礎版），並將項目運行起來。
主要由如下內容組成：

• 運行AppBox v6.0
• 在檔案名稱和項目工程中的進行字串替換：AppBox->AppBoxPro
• VS開啟項目工程，進行字串替換：AppBox->AppBoxPro, FineUI->FineUIPro
• 刪除FineUI（開源版）的程式集引用，刪除extjs目錄
• 引用FineUIPro程式集
• 修改資料庫初始化資料，將Nuptune改為Cupertino
• 在Web.config中添加表單驗證例外（res.axd）
• 在項目中刪除所有的jquery引用（FineUIPro已經內建jQuery庫）
• 完成

本課程開始前的頁面：


本課程完成後的頁面：



【視頻教程】一步步將AppBox升級到Pro版（中）
主講：三石
時間長度：35分鐘
下載：免費（將於2018-01-22 10:30開放下載）

本課程的目標是將主架構頁修改為官網樣本首頁的樣式，增加主題選擇表單，增加頁面頂部的登入頭像和下拉式功能表。
主要由如下內容組成：

• 拷貝FineUIPro官網樣本中的res/images和res/themes目錄
• 拷貝官網樣本common/themes.aspx頁面
• 修改配置頁面，增加TriggerBox和Window控制項
• 註冊TriggerBox的用戶端點擊事件，開啟表單並傳入selected參數
• 修改themes.aspx頁面，接受selected參數並選中相應的主題
• 點擊主題表徵圖時，調用配置頁面的之定義函數，並傳入選中的主題名稱
• 修改PageBase中設定主題的代碼，增加對自訂佈景主題和內建主題的判斷
• 修改架構頁，將RegionPanel修改為普通的Panel，並增加Layout=Region布局
• 將架構頁頂部的Region->Content結構修改為：ContentPanel
• 將原來Toolbar中的協助和退出按鈕放到頂部面板中：Button->Menu->MenuButton
• 將原來中間地區的Panel->TabStrip簡化為：TabStrip
• 為三個地區面板增加相應的CssClass
• 為TabStrip增加兩個工具表徵圖，分別是重新整理和最大化
• 完成

本課程完成後的頁面：



【視頻教程】一步步將AppBox升級到Pro版（下）
主講：三石
時間長度：25分鐘
下載：請先加入【三石和他的朋友們】知識星球（將於2018-01-22 10:30在星球內下載）

本課程的目標是對所有的頁面進行錯誤修正，主要錯誤集中在對Extjs指令碼的調用，我們會詳細講解如何查詢FineUIPro的用戶端文檔並完成更新。
主要由如下內容組成：

• 使用者編輯頁面選擇角色，使用cblRole.getValue()就可以方便的擷取複選框列表的選中值
• 使用者編輯頁面選擇部門，原來grid1.getSelectionModel().getSelection()可以簡化為grid1.getSelectedRow(true)
• 角色許可權管理頁面，原來$(grid1.el.dom)簡化為grid1.el，右鍵快顯功能表也有調整
• 菜單編輯頁面，簡化iconList.f_getSelectedValues()[0]簡化為iconList.getValue()
• ......

本課程中部分修正：

 

如何加入【三石和他的朋友們】知識星球？
開啟掃描二維碼後，付費加入：


加入後，您就可以擷取如下資源：

• AppBox_v6.0_全部原始碼（基於FineUI開源版）
• 一步步將AppBox升級到Pro版（全部視頻教程）
• AppBoxPro_v4.1_全部原始碼（基於FineUIPro基礎版）

註：以上紅色資源將於 2018-01-22 10:30 在星球內下載。


詳細介紹：http://fineui.com/bbs/forum.php?mod=viewthread&tid=21482

【視頻教程】一步步將AppBox升級到Pro版