快速模版(社區版本7.0)——創建模版

隨着Ext JS 7的發佈, 快速模版也需要進行升級了。由於社區版只提供現代工具包,因而在新的快速模版,只能使用現代工具包來開發桌面應用程序。不過,不用太過於擔心,因爲現在的現代工具包已經很強大了,用來開發桌面應用程序是一點問題沒有的。如果還執着於支持IE瀏覽器,那還是使用6.2版的快速模版比較合適。在目前Angluar、Vue和React快一統江湖的年代,再考慮兼容IE這樣的事情,筆者覺得有點脫離時代了,所以筆者在未來的實際開發中,也基本是採用現代工具包,不再考慮經典工具包了。

在開始創建項目前,需要熟讀一下Ext JS 7 CE版的文檔,尤其是《Getting Started with Ext JS using npm》這一節。在這一節內,可以找到CE版的註冊地址

註冊完成後,就可根據文檔所描述的,在以下地址登錄CE版:

npm login --registry=https://sencha.myget.org/F/community/npm/ --scope=@sencha

總有不少讀者問我,怎麼下載CE版的框架文件?其實,這些都是GPL版本遺留的問題。在CE版已經不再提供框架文件了,因爲CE版是使用NPM來創建應用程序的,是通過NPM來下載框架文件的,不再需要下載框架文件了。

登錄成功之後,就要使用命令安裝ext-gen:

npm install -g @sencha/ext-gen

如果安裝時出現等待很久沒反應或者返回Not Found錯誤,那就要登錄https://www.myget.org/網站,並修改密碼再試。這裏一定要注意,修改密碼不能通過forget passwrod重置的方式來修改,而必須在myget網站內的配置裏修改。筆者和另外一個Sencha Mvp研究了很久才發現還有這個問題,最終順利安裝ext-gen。都說淚啊!

安裝好ext-gen,最後使用以下命令把@sencha/cmd先安裝了,不然在創建應用程序的時候,又可能因安裝cmd出問題:

npm install -g @sencha/cmd

cmd安裝完成之後,有兩個選擇,使用ext-gen或使用cmd來創建應用程序。如果只是創建單個應用程序或單個通用應用程序,不需要共享模型(model)、存儲(store)等公共類,建議使用ext-gen命令來創建。尤其是單個通用應用程序,使用ext-gen創建基於npm的應用程序,在開發和生成上,比使用cmd創建的方便多了。如果要開發的應用程序多於2個以上,建議使用cmd來創建,這樣,就可以通過cmd先創建一個工作區(workspace)來共享公共類,不需要通過複製粘貼的方式來共享公共類。

不知道是不是因爲npm的原因,使用ext-gen創建的應用程序, 不能引用工作區的類,只能在應用程序的packages文件夾內創建共享包,而這些包需要在另外的應用程序使用時,就得使用複製粘貼的方式來引用,非常的不方便。

爲了演示如何使用工作區,快速模版將使用cmd來創建應用程序。使用cmd創建通用應用程序會使用經典工具包來創建桌面應用程序,並不是快速模版所需要的,因而,只能將桌面和移動應用程序分開來創建。

創建工作區

可使用以下命令創建一個工作區:

sencha gen workspace --path ./workspace

命令執行後,會創建一個名爲workspace的文件夾,並在文件夾內生成.gitignoreworkspace.json兩個文件。其中,.gitignore用來定義git中不需要提交的文件和文件夾的,而workspace.json是工作區的定義文件。

創建應用程序

使用cd命令進入workspace命令,然後使用以下命令創建一個桌面應用程序:

sencha gen app -ext -modern Desktop ./Desktop

將以上命令中的Desktop修改爲Phone,然後執行它創建一個移動應用程序。

創建公共包

應用程序創建以後,還要創建應用程序所需的功能包,這需要使用到以下命令:

Sencha Cmd v7.0.0.40
sencha generate package

This command generates a new Sencha Cmd Package. A package is in many ways like
an application in that it contains any of the following pieces:

  * JavaScript source
  * SASS styles
  * Arbitrary resources

All of these are integrated by a build process using sencha package build.

For example:

    sencha generate package foo

If this command is run from an application directory, the package will be added
automatically to the requires array in the "app.json" file. To avoid this use
the -require switch:

    sencha generate package -require foo

To use this package in other applications (or packages), you just add the name
of the package to the requires array in the "app.json" or "package.json"
file:

    requires: [
        'foo'
    ]

All packages reside in the "./packages" folder of the workspace (which is
often the same folder as your application).


Options
  * --extend, -e - The theme (package) to extend from (For theme type packages on Ext JS 4.2+ only)
  * --framework, -fr - The framework this package will use (i.e., "ext" or "touch")
  * --name, -name - The name of the package to generate
  * --namespace, -names - The namespace of the package to generate
  * --require, -r - Whether to automatically add the generated package to the current app (for non-theme packages only)
  * --theme, -th - The theme (package) this package will use (i.e., "ext-theme-classic", "ext-theme-crisp", "ext-theme-neptune", etc.)
  * --toolkit, -to - The toolkit this theme will use (For theme type packages on Ext JS 6.x+ only)
  * --type, -ty - The type of the package to generate (i.e., "code" or "theme")
    Supported Values:
    * CODE : A library of code
    * EXTENSION : An extension to Sencha Cmd
    * FRAMEWORK : A framework
    * THEME : A user interface theme or skin
    * TEMPLATE : A library of one or more templates
    * TOOLKIT : A library of components / widgets
    * LOCALE : Localization overrides / styling
    * OTHER : Unspecified type


Syntax

    sencha generate package [options] name

依次執行以下命令先創建5個公共包:

sencha gen pack --type CODE --name Common.Data
sencha gen pack --type CODE --name Common.Desktop
sencha gen pack --type CODE --name Common.Phone
sencha gen pack --type CODE --name Common.Shared
sencha gen pack --type CODE --name Locale

執行以上命令後,可在workspace\packages\local文件夾內看到放置5個公共包文件的目錄。這5個包的作用如下:

  • Common.Data:用於定義應用程序所共享的模型和存儲
  • Common.Desktop:用於共享桌面應用程序所需的類和組件
  • Common.Phone:用於共享移動應用程序所需的類和組件
  • Common.Shared: 用於共享桌面應用程序和應對應用程序所需的類和組件
  • Locale: 用於共享本地化文件

由於使用材料主題(theme-material),所有輸入框都只有底部邊框,並不適用於桌面應用程序,因而需要從材料主題派生一個自定義主題來修改邊框等適用於桌面的樣式。

使用以下命令創建一個自定義主題:

sencha gen pack --extend theme-material --type THEME --name ModernDesktopTheme

包創建完成後,可以測試下是否能正確引用包。打開桌面應用程序的app.json文件,把theme修改爲新創建的主題ModernDesktopTheme,在requires中加入Common.DataCommon.DesktopCommon.SharedLocale的引用,然後運行以下命令生成一次應用程序:

sencha app build -dev

如果生成過程順利,沒有錯誤, 說明應用程序和包都已經創建成功了。

源代碼:https://github.com/tianxiaode/qTemplate-ExtJSCE7

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章