ExtJs & Lk web template5e6 (1hr)
54
-
Upload
- -
Category
Technology
-
view
125 -
download
2
Transcript of ExtJs & Lk web template5e6 (1hr)
● My Blogs for ExtJs : http://extjscanred.blogspot.tw/
● 認證：MCDBA、MCSD、MCSA、
MCST、SCJP、TCSE● 語言：C#.Net , Java , PHP
Android , Nodejs Phyton , Ruby , Javascript JQuery , ExtJs , Echarts , Sencha Touch , Lotus Script
● 資料庫：Oracle , MSSQL, PostgreSQL MYSQL , MongoDB , Hadoop
會紅簡介
在漫長的代碼發開過程中，我一直在尋找一種可以達到快速開發的方式，一個有規範的發展行為。想想之前我們要學會一個網頁應用程式時，我要同時具備能力HTML4（5） , CSS , Javascript , 後臺能力（C# , Java , Php） 等能力以及美工，並且在為了更好的互動又出現各種Javascript Library （Pure ，Bootstarp ，kendo UI，Semantic UI ...etc）眾所階知的JQuery是最火紅的。但我們為什麼選擇Sencha ExtJs呢?
起源：
● 很豐富的實用組件
● 不再為CSS苦腦
● 一致的開發方式、一致的操作行為
● 再見了腦人的Url位置（Ext.Direct)● 強大的底層零組件可再置開發
● 較容易轉成Sencha Touch的Web App還可以換成原來App.
● 完整的文檔● 強大的Re Use（今天Demo的重點）
Why choose ExtJs
ExtJs提供非常多元的元件使用。LKWebTemplate透過ExtJs的功能更進一步的達到快速開發應用程式的能力，你有想過10分鐘內可以快速的完成一個網頁功能嗎?如果你希望具有這樣的能力，請後斷續看下去啦。
熟悉Chrome 開發者工具
LKWebTemplate(專為ExtJs開發人員製作
的開發範本)
Sublime Text & Html-Css-Js pretty plug-in
Sublime 程式範本
好的ExtJs 開發環境---讓您在開發時事半功倍
http://examples.sencha.com/extjs/
ExtJs 6 Demo .
Agenda1.環境/設定
2.建立Web專案By LKWebTemplate
3.根目錄 / 架構說明
4.Your First Web Site using LKWebTemplate
5.建立您的 Design & Model (設計模形)
6.使用 sublime 建立查詢頁面/維護功能
7.新功能說明
8.Q&A
環境/設定
1.Download LKWebTemplate.zip
2.Download Sublime Developer Tool (Option)
3.Download Sublime Sinppet (Option)
LKWebTemplate 5E6 For C#.net
LKWebTemplate 5E6 支援VS2008~2015版。仍需要其他版本可自行昇級然後再製
成範本專案。
Framework 4.5.1
建立網站專案
根目錄說明
refDll:
為此專案的所有參考使用的dll動態鏈結檔
refDll/GenCode/Gendcode.exe:
為程式產生器的輔助工具，用途為將
Design的操作模式轉成執行程式碼(Model)
lib:
專案的核心程式將存放於此。
如資料庫操作/系統參數配置設計/擴展功能
Configs:
系統參數共5個，分別為
DataBase、SMTP、UserInfo、Paramter、DirectAuth
direct???:
Ext.Direct所使用到的服務清單。
js:
所有第三方來源的原JS 和
系統需求的JS設定檔案。
pageJs:
系統自行開發的JS元件。
admin ： 所有管理後台的主程式區
lib/Controller目錄說明Design ：
資料表設計圖，這是程式產生器用來產
生程式的依據圖。此目錄檔案僅在程式
建立初期時使用，而以可在專案中移除
Model ：
為程式產生器的Output結果。
lib/Controller目錄說明1個Design產出1個Model，而Model的
命名方式如下
BasicModel.cs不要自行修改(因重新產
生程式碼時將可能被覆寫)
[email protected] 可自行修改(可以有多個)
LKWebTemplate的資料庫初始化功能initDataBase/step.aspx
設定你的web site的共用環境變量
LKTemplate 實作出來的網站應用
系統自帶的錯誤訊息處理功能
Webclome to Extjs...
Session VS DBSession
SessionHelper中不同的慨念
Devices
IS
File & FileInfo● ns.lib.util.File.save(man,ref request,fileId,saveFolder[])
Lan 語言的支持
不同于.net的語言支持的慨念.
在js有Message打頭的字眼,既是語言設定檔案.
為什麼我要如此設計???
1.LAN的支持必須同時支援 C#(後台) 與 Client(前台)
2.LAN的變動性高
使用ExtJs建立使用者操作介面
Demo
建立一個可以不斷複用的計算機
用到的ExtJs Function
1.Ext.onReady (程式進入點)
2.Ext.define(...) (我要一個框)
3.Ext.create(...) (屬性)
4.up , down(‘#ItemId’)
5.事件相關
on
fireEvent
6.其他ItemId , show (showAt), close , Ext.ns(動態加載就靠他)
完成品
LK&Ext.Direct運行原理說明
Ext.Direct
LK & Ext.Direct 的運行原理
Aspx頁面
Proxy.ashx
Router.ashx
反射DirectMethod
Ext.Direct
MasterPage
MasterPage
LKWebTemplate 演進過程
Roadmap
3 4 54
Roadmap
6 6 ?6
WebAppWebDesktop
WebDesktopSencha Touch
Sencha Touch
01.Cross Post (跨域提交) DirectAuth.xml 說明 / Demo
02.系統初始化工具
03.安全提昇(2.4)
04.身份認證中心功能(2.4)
05.Easy Share Direct Service
06.Proxy中的Proxy(2.4)
07.人員/公司資料”偽Cluster”
08.Support Sync AD Data.(2.4)09.Easy Gen Code … etc.(3.0)
10. Cluster 心跳器(3.0)
11. 檔案 / 排程中心(3.0)
12. ExtJs 6.2(3.0)
13. Web Desgin Data Model
14. Turnning(3.0)
什麼時侯換我上場
在這樣下去是不行的…還要更快速,支援更多
8.ExtJs 相關參考
http://extjscanred.blogspot.tw/
