Oracle JET 起步

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

  • 基于模版创建应用

基于模版创建一个典型的移动应用的步骤(前两步是需要安装包,第一次需要运行,以后不需要)


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

基于模版建立新项目

生成的基本架构

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

运行可见

时间： 2024-10-14 05:26:58

Oracle JET 起步的相关文章

Oracle JET Model 数据获取与使用

Oracle JET 应用程序数据可以来自生成 JSON 数据的任何 Web 数据源,例如 REST 服务,服务器发送事件(SSE)或 WebSocket .此外,Oracle JET 还提供了基于 Oracle REST 标准集成 Web 服务数据的特定支持. 关于 Oracle JET Common Model 和 Collection API : oj.Model:表示 REST 服务器等数据服务中的单个记录.(获取JSON数据设定单个数据模型) oj.Collection:表示一组数据记

Oracle JET简单入门（一）Oracle JET介绍

Oracle JET (Oracle Javascript Extension Toolkit)是一款 Oracle 的 JavaScript 拓展工具包.简单来说 Oracle JET 是一个一堆好用的前端工具结合体. Oracle JET 文档链接  http://docs.oracle.com/middleware/jet310/jet/developer/toc.htm Oracle JET支持 Model-View-ViewModel(MVVM)架构设计模式. 在 MVVM 中,Mod

Oracle JET mobile cordove navigator.app对象

在使用 Oracle JET 开发 webapp 时,会使用到 ojrouter ,ojrouter 默认含有历史记录推送功能.在调试 Android 时会发现返回键总是返回到上一次浏览记录(App 中的记录),这在 Android 端使用时是不合理的. 解决方法: 1.在创建 router 时取消默认的历史记录推送功能.文档里没有写明如何取消,该方法有待补充. 2.在使用 router 时调用 go 方法,调用此方法时可以添加参数 go('stateId', {historyUpdate: s

Oracle JET（三）Oracle JET 响应布局

Oracle JET 提供了一系列的 CSS 样式以直接使用. Oracle JET CSS样式链接:http://docs.oracle.com/middleware/jet310/jet/reference-css/index.html 进入主题,在Oracle JET 的样式中提供了响应式布局. 一.Oracle JET Flex布局 要创建Flex布局,首先将 oj-flex 添加到容器中,然后将 oj-flex-item 添加到每个自容器. 例1: <div id="contai

Oracle JET 单页面应用程序Router 使用（上）

单页面应用程序:使用一个进加载一次的网页,如果页面由于用户的交互而改变,则仅绘制更改的页面部分. 要创建单页面应用程序需要使用 oj.Router 的虚拟导航来支持,ojModule 用来响应页面的重新绘制. ojModule 仅用于分离的 view 和 viewMode ,使之与页面通过 Knockout绑定.另外,ojModule 可选,当不使用分离视图与模型时,可直接在元素上响应变化. 1.简单模型: 当选择 Chapter1 或其他时,将显示新内容,并且URL更改以反映用户在页面上当前的

Oracle JET 使用RequireJS第三方工具或库引入

在 Oracle JET 应用程序中使用 RequireJS 添加第三方工具或库. 步骤: 1.如果使用工具框架脚手架,需要一下操作. a.使用 npm 安装你需要的库. npm install my-library --save b.在 script/grunt/config 目录中,在 oraclejet-build.js 中找到 copyCustomLibsToStaging 更新代码. 把注释去掉.并更改: copyCustomLibsToStaging: { fileList: [ {

Java 连oracle 12C 起步

package javaapplication2; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JavaApplication2 { public static void main(String[] args) throws Cla

Java 连oracle 12C 起步_PreparedStatement

package javaapplication2; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.PreparedStatement; public class JavaApplication2 { public static void main(String[] args) th

ORACLE JET BASIC TABLE