OracleJET的结构、组件、常用命令和使用讲解

1. oracle jet结构

oracle jet支持 model-view-viewmodel(mvvm)架构设计模式。在 mvvm 中，model 代表应用程序数据，view 是数据的呈现。viewmodel 将模型中的数据公开到视图并维护应用程序的状态。oracle jet框架包括(view层)jet ui compones，jqueryui，hammer，sass，(viewmodel层)knockout js，(model层)jet common model，(busness services层)rest，websocket，以及jet routing system，requirejs。

2. oracle jet的使用

2.1. 使用方式

oracle jet web应用有以下方式：

- 使用 oracle jet yeoman 生成器(手脚架生成)

- 使用 oracle jet zip

- 将 oracle jet 添加到现有的 javascript 应用程序

oracle jet提供了三种web模板(包括桌面端、移动端)：basic, navbar, navdrawer

2.2. 项目创建 

- 使用 oracle jet yeoman 生成器（手脚架生成） 

a.安装 yeoman。 npm install -g yo 

b.安装 grunt（用于构建和运行）。 npm install -g grunt-cli 

c.安装 oracle jet yeoman generator。 npm install -g generator-oraclejet 

d.创建模板。 yo oraclejet [directory] [--template={template-name:[web|hybrid]|template-url|template-file}] [--help] 

e.使用grunt构建web应用程序（可跳过此步骤）grunt build [--theme=themename[:android|ios|web|windows] --themes=theme1,theme2,... --no-sass] 

f.使用 grunt 服务 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

g.在编写网页中使用sass的方法。 

1）在根目录中，输入命令添加sass。yo oraclejet:add-sass 

2）添加主题文件。yo oraclejet:add-theme themename 

3）grunt build –theme=themename 

4）grunt serve –theme=themename 

3. 介绍 

响应式布局 

oracle jet flex布局 

oracle jet 网格布局

4. 常用命令 

uninstall

npm un -g ojet-cli 

npm un -g generator-oraclejet

install

npm install -g @oracle/ojet-cli

create initial project

ojet create –template=navdrawer

build the default project

ojet build

edit the project 

in /src folder, run -build/-serve command will overdiden /web folder.

run a ojet project

npm install 

ojet serve

create component

ojet create component

use component 

1.add element to temp.html 

2.add loader.js path of the element to temp.js

add component attribute 

1.add new attribute to the element sample in temp.html 

2.define the attribute in component.json of the element(ps.the hypehen(-)->camel-case)

active component attribute 

1.add function content to -viewmodel.js.

add jet demo to your component 

1.copy <oj-*></oj-*> of demo.html to -view.html, and remove unused attribute. 

2.add attribute value as: type="[[charttype]]" 

3.copy available code of oj-*.js to -viewmodel.js. 

4.add new variable as:self.charttype = "bar", add * to define. 

5.add * component.json.

data binding 

[[]]:user input from the ui components does not affect the viewmodel. 

{{}}:user input from the ui components is written back into the viewmodel.

knockout: solves the two-way data binding requirement.