首页 技术 正文
技术 2022年11月21日
0 收藏 338 点赞 4,775 浏览 2124 个字

  Oracle JET 开发分为 Web 应用程序开发和移动应用程序开发(WebApp)。

  Oracle JET Web 应用程序开发入门:

  使用方法三种:

  • 使用 Oracle JET Yeoman 生成器(手脚架生成)
  • 使用 Oracle JET zip(包含 Oracle JET 和第三方库,CSS 和 SCSS 文件以及 RequireJS 引导文件的压缩包)
  • 将 Oracle JET 添加到现有的 JavaScript 应用程序

  这里介绍使用 Yeoman 使用 Oracle JET。(在命令提示符下)

  前期准备:

  1.安装 Yeoman。 npm install -g yo

  2.安装 Grunt(用于构建和运行)。 npm install -g grunt-cli

  3.安装 Oracle JET Yeoman Generator。 npm install -g generator-oraclejet

  创建 Web 应用程序:

  Oracle JET 提供了三种 Web 模板。

  Oracle JET(二)Oracle JET使用

  三种模板都提供了响应式布局。可以以模板为基础修改你需要的内容。

  另外有三种像移动应用程序的模板。

  Oracle JET(二)Oracle JET使用

  选择一个模板创建 Web :

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

    参数: directory 指定的目录文件夹,若未指定,则在当前文件夹创建。若指定目录不存在,则自动创建。

        template 用于应用程序的模板。可输入提供的六个模板的其中一个名字。输入 basic 、navbar 或 navbardrawer 默认为 web。需要使用混合型则需正确写入如:basic:hybrid 。

        template-url 、template-file 当你需要引入其他链接上的模板或本地模板时使用。

        help 显示 oraclejet Yeoman Generator 用法和选项等帮助。

    举例使用:输入命令 yo oraclejet app –template=navbar

  Oracle JET(二)Oracle JET使用

  2.创建完成。

  Oracle JET(二)Oracle JET使用

  创建完成后,将会在你的项目中有类似结构

  Oracle JET(二)Oracle JET使用

  文件介绍:

  • node_modules 包含工具框架使用的 Node.js 模块。
  • scripts 包含 Grunt 的 oraclejet-build.js 和 oraclejet-serve.js 文件。
  • src 包含网页内容 CSS 和 JS
  • oraclejetconfig.json 文件默认链接。

  3.使用 Grunt 构建 Web 应用程序。(可跳过此步骤)

  使用 grunt build 可以在 Web 发布到浏览器之前构建 Web 开发版本。 (注意,命令符需要进入根目录,如上例创建了 app 文件夹,则需要进入 app ,再执行 grunt 命令)

  grunt build [--theme=themename[:android|ios|web|windows] --themes=theme1,theme2,... --no-sass]

    参数:theme 用于应用程序的主题,默认alta:web,可以指定混合移动主题(alta:android,alta:ios,alta:windows)。另外可以使用自定义主题。

       themes 如果没有 –theme 指定主题,则使用 –themes 第一个元素作为默认主题。

       no-sass 当使用自定义sass主题时,禁止构建时编译sass。

  Oracle JET(二)Oracle JET使用

  4.使用 Grunt 服务 Web。

  使用 Grunt serve 可以在本地 Web 服务器中运行 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

  Oracle JET(二)Oracle JET使用

  5.执行服务后即可在浏览器中查看模板。

  Oracle JET(二)Oracle JET使用

  6.在编写网页中使用sass的方法:

  1)在根目录中,输入命令添加sass

    yo oraclejet:add-sass

  2)添加主题文件

    yo oraclejet:add-theme themeName

  举例:

  Oracle JET(二)Oracle JET使用

  Oracle JET(二)Oracle JET使用

  3)grunt build –theme=themeName

  4)grunt serve –theme=themeName

  注意:必须指定theme,否则以默认主题执行grunt。

  

  

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,082
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,557
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,406
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,179
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,815
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,898