Oracle JET 開發分為 Web 應用程序開發和移動應用程序開發(WebApp)。
Oracle JET Web 應用程序開發入門:
使用方法三種:
- 使用 Oracle JET Yeoman 生成器(手腳架生成)
- 使用 Oracle JET zip(包含 Oracle JET 和第三方庫,CSS 和 SCSS 文件以及 RequireJS 引導文件的壓縮包)
- 將 Oracle JET 添加到現有的 JavaScript 應用程序
這里介紹使用 Yeoman 使用 Oracle JET。(在命令提示符下)
前期准備:
1.安裝 Yeoman。 npm install -g yo
2.安裝 Grunt(用於構建和運行)。 npm install -g grunt-cli
3.安裝 Oracle JET Yeoman Generator。 npm install -g generator-oraclejet
創建 Web 應用程序:
Oracle JET 提供了三種 Web 模板。
三種模板都提供了響應式布局。可以以模板為基礎修改你需要的內容。
另外有三種像移動應用程序的模板。
選擇一個模板創建 Web :
1.創建模板。 yo oraclejet [directory] [--template={template-name:[web|hybrid]|template-url|template-file}] [--help]
參數: directory 指定的目錄文件夾,若未指定,則在當前文件夾創建。若指定目錄不存在,則自動創建。
template 用於應用程序的模板。可輸入提供的六個模板的其中一個名字。輸入 basic 、navbar 或 navbardrawer 默認為 web。需要使用混合型則需正確寫入如:basic:hybrid 。
template-url 、template-file 當你需要引入其他鏈接上的模板或本地模板時使用。
help 顯示 oraclejet Yeoman Generator 用法和選項等幫助。
舉例使用:輸入命令 yo oraclejet app --template=navbar
2.創建完成。
創建完成后,將會在你的項目中有類似結構
文件介紹:
- node_modules 包含工具框架使用的 Node.js 模塊。
- scripts 包含 Grunt 的 oraclejet-build.js 和 oraclejet-serve.js 文件。
- src 包含網頁內容 CSS 和 JS
- oraclejetconfig.json 文件默認鏈接。
3.使用 Grunt 構建 Web 應用程序。(可跳過此步驟)
使用 grunt build 可以在 Web 發布到瀏覽器之前構建 Web 開發版本。 (注意,命令符需要進入根目錄,如上例創建了 app 文件夾,則需要進入 app ,再執行 grunt 命令)
grunt build [--theme=themename[:android|ios|web|windows] --themes=theme1,theme2,... --no-sass]
參數:theme 用於應用程序的主題,默認alta:web,可以指定混合移動主題(alta:android,alta:ios,alta:windows)。另外可以使用自定義主題。
themes 如果沒有 --theme 指定主題,則使用 --themes 第一個元素作為默認主題。
no-sass 當使用自定義sass主題時,禁止構建時編譯sass。
4.使用 Grunt 服務 Web。
使用 Grunt serve 可以在本地 Web 服務器中運行 Web 應用程序進行測試和調試。默認情況下,啟用實時重新加載選項。更改代碼可以立即反應到瀏覽器中,方便調試。
grunt serve [--server-port=server-port-number --livereload-port=live-reload-port-number --no-livereload --no-sass --no-build --theme=themename[:android|ios|web|windows] --themes=theme1,theme2,...]
參數:server-port 服務器端口號。未指定為8000。
livereload-port 實時重新加載端口號。未指定為35729。
no-livereload 禁用實時重新加載。
no-build 禁止構建。(已構建)
其余同 grunt build
5.執行服務后即可在瀏覽器中查看模板。
6.在編寫網頁中使用sass的方法:
1)在根目錄中,輸入命令添加sass
yo oraclejet:add-sass
2)添加主題文件
yo oraclejet:add-theme themeName
舉例:
3)grunt build --theme=themeName
4)grunt serve --theme=themeName
注意:必須指定theme,否則以默認主題執行grunt。