Oracle JET 起步

 

  

 

• Oracle JET介紹

Oracle JET是一個用於經驗豐富的JavaScript開發人員構建客戶端的基於JavaScript的應用程序的工具包。(抱歉本人對JavaScript絕對是從零開始)

Oracle說：在使用Oracle JET成功開發應用程序之前，您應該熟悉JET框架使用的第三方庫和技術。(同樣本人也是小白),該列表包含：

• JQuery
• JQuery UI
• Knockout
• JavaScript
• CSS
• HTML5
• SASS
• Apache Cordova (if you want mobile)
• Bower
• Grunt
• Node.js
• Git
• Yeoman

整體架構如下:

 

這里非常有必要解釋一下比較核心的庫的作用

• RequireJS 主要負責整個框架的模塊構建和資源管理
• JQueryUI主要處理widget組件，所有的JET UI的組件都被封裝成JQueryUI widget
• Knockout主要負責界面中數據的綁定
• Hammer處理手勢和觸摸的操作
• SASS類似於CSS定義展現格式
• Routing System主要是處理頁面之間的跳轉，類似於jsf pageflow(我理解)

您會注意到，這基於所有現有的語言，技術和開源工具。除此之外，Oracle還添加了一些他們覺得為構建企業JavaScript應用程序所必需的東西：

• 好看，安全的UI組件(Oracle的新的Alta UI)(新的雲以及新一代軟件的界面)
• 支持輔助功能（屏幕閱讀器等）
• 支持國際化

 

 好了,開始學習非常簡單,可以根據官方網站,同時提供了非常好的Cookbook

http://www.oracle.com/webfolder/technetwork/jet/globalGetStarted.html

 

• 基於模版創建應用

先安裝所需要的Package

npm -g install yo bower grunt-cli
npm -g install generator-oraclejet

 

基於模版,三步創建一個典型的移動應用

 yo oraclejet:hybrid --appName=JETMobileDemo --template=navBar --platforms=android

 

grunt build:dev --platform=android

 

grunt serve --platform=android --destination=device

 

如果在瀏覽器上運行

grunt serve --platform=android --destination=browser

 

各個模版樣式如下

 

 

在基於template生成應用的過程中會需要連接到網上去下載,如果是通過代理出去的,需要在HOME/.gradle目錄下創建gradle.properties文件

systemProp.http.proxyHost=proxy-server-URL systemProp.http.proxyPort=80 systemProp.https.proxyHost=proxy-server-URL systemProp.https.proxyPort=80

 

• 集成開發環境

下載netbeans.在tools->plugins->Available Plugins中找Oracle JET Support.

  然后在新建項目的HTML5/JavaScript中可以找到,一般我們可以從模版開始嘗試.

 

 字體設置可以選擇Darcula LAF for NetBeans

 

  基於模版建立新項目

 

  

  

  

生成的基本架構

• JET基於MVVM結構,Model是屬於后面的服務提供,通常基於Rest Service,View主要是在js目錄下的views目錄下,負責頁面展現,VM viewmodel主要是js目錄下的viewModels目錄,主要存放和頁面邏輯的js文件,提供頁面所需要的數據以及頁面轉換邏輯.
• Oracle JET component主要包含views中的頁面以及和頁面同名的js邏輯.
• 展現通過對應index.html的main.js腳本.

 

運行index.html

 

 

• 組件應用

訪問Cookbook

http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html,

Oracle提供了很多界面組件腳本的源碼可以直接粘貼過來使用.

 

 修改我們剛生成的應用,注意dashboard.js文件修改成

define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojbutton', 'ojs/ojchart', 'ojs/ojtoolbar'],
function(oj, ko, $)
{
function ChartModel() {
var self = this;

/* toggle button variables */
self.stackValue = ko.observable('off');
self.orientationValue = ko.observable('vertical');

/* chart data */
var barSeries = [{name: "Series 1", items: [42, 34]},
{name: "Series 2", items: [55, 30]},
{name: "Series 3", items: [36, 50]},
{name: "Series 4", items: [22, 46]},
{name: "Series 5", items: [22, 46]}];

var barGroups = ["Group A", "Group B"];

self.barSeriesValue = ko.observableArray(barSeries);
self.barGroupsValue = ko.observableArray(barGroups);

/* toggle buttons*/
self.stackOptions = [
{id: 'unstacked', label: 'unstacked', value: 'off', icon: 'oj-icon demo-bar-unstack'},
{id: 'stacked', label: 'stacked', value: 'on', icon: 'oj-icon demo-bar-stack'}
];
self.orientationOptions = [
{id: 'vertical', label: 'vertical', value: 'vertical', icon: 'oj-icon demo-bar-vert'},
{id: 'horizontal', label: 'horizontal', value: 'horizontal', icon: 'oj-icon demo-bar-horiz'}
];
}

var chartModel = new ChartModel();

return chartModel;
});

 

運行可見

 

怎么樣? 夠簡單吧.