Oracle JET 起步

標籤：git   ica   query   body   ted   demo   apache   成功   sass   

 初識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

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

• 好看，安全的UI組件在Oracle的新的Alta UI(新的雲以及新一代軟體的介面)
• 支援協助工具功能（螢幕助讀程式等）
• 支援國際化

 

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

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

 

• 基於模版建立應用

基於模版建立一個典型的行動裝置 App的步驟(前兩步是需要安裝包,第一次需要運行,以後不需要)

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-URLsystemProp.http.proxyPort=80systemProp.https.proxyHost=proxy-server-URLsystemProp.https.proxyPort=80

 

• 整合式開發環境

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

 

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

 

 

字型設定可以選擇Darcula LAF for NetBeans

 

 

 基於模版建立新項目

 

 

 

 

 

 

 

產生的基本架構

 

運行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; });

 

運行可見

 

Oracle JET 起步