为爱向前冲豹哥,魅力研习社21,cx289航班
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.
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Oracle字符串函数length、upper、lower、initcap、 concat、instr、replace
我要评论
网友评论