Oracle JET入门Tutorial教程

Oracle 前端之家
前端之家收集整理的这篇文章主要介绍了Oracle JET入门Tutorial教程，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

This document provides a step-by-step set of instructions guiding you through the process of getting started with theOracle JavaScript Extension Toolkit (JET). JET empowers developers by providing a modular toolkit based on modern JavaScript,CSS3,and HTML5 design and development principles.

Contents

To complete this tutorial,you will need the following resources.

Software or Resource Version required
NetBeans IDE,the HTML5/JavaScript Bundle 8.1

Notes:

  • This document assumes you have some basic knowledge of,or programming experience with HTML,CSS,and JavaScript.
  • Knowledge of the JavaScript frameworksKnockoutandRequireis helpful for working through this tutorial,though not mandatory. However,these two popular open source JavaScript libraries play a central role in JET. Hence,the more you are familiar with them,the easier will be your journey into JET.
  • It is helpful to install theChrome Connector Plugin for NetBeansinto the Chrome browser. Using the Chrome browser,together with the plugin,with NetBeans IDE 8.1 adds a number of handy features,such as automatic refresh of the browser when you save a file in NetBeans IDE,as well as the possibility to explore the live DOM from within NetBeans IDE.
  • To use the same look and feel in NetBeans IDE as used in this tutorial,install theDarcula LAF for NetBeans,which is also available in the Plugin Manager,under Tools | Plugins.

Setting Up

In this exercise you set up NetBeans IDE 8.1,as well as the base distribution of Oracle JET.

@H_403_66@

Installing the Oracle JET Support Plugin

In NetBeans IDE 8.1,go toTools | Pluginsand install the Oracle JET Support plugin.

This plugin gives you code completion in the HTML editor,together with documentation,for the JET components,such as those you will use later in this document. It also provides complete project templates as the basis of your JET applications.

Once the above plugin is installed in NetBeans IDE 8.1,you will have a number of new features in NetBeans IDE 8.1 that simplify development with Oracle JET and that are used in varIoUs parts of this tutorial.

@H_403_66@

Setting Up the Oracle JET Base Distribution

The Oracle JET Base Distribution provides all the JavaScript libraries and CSS stylesheets that provide the absolute minimum starting point of creating JET applications. In this section,you set up the Oracle JET Base Distribution in the IDE as the basis of a new HTML5/JavaScript application.

  1. In NetBeans IDE 8.1,select theHTML5/JavaScriptcategory and then selectOracle JET Base Distribution,as shown below.

    Click Next.


    Type the name of the application,such asCustomerVisualizer,and select a location to store it,as shown below.



    ClickFinishto complete the wizard.

  2. When you click Finish,the IDE creates the project,which might take a moment,since several JavaScript libraries are included in the ZIP file. When the unzip process is complete,the IDE displays a node for the project in the Projects window.

You now have a new HTML5/JavaScript project created from the Oracle JET Base Distribution.

Spend some time exploring the project structure of the application. For example,look injs/libsand you will see the JavaScript libraries that constitute Oracle JET. After looking through the project structure,continue with the steps that follow to configure the project.

@H_403_66@

Configuring the Oracle JET Base Distribution

In this section,you prepare your JET application for a first deployment. For example,you include the CSS stylesheet and reference the JavaScript file that initializes the application.

  1. Create a newindex.htmlfile in the project root,by going to the New File dialog (Ctrl-N) and then selectingHTML Filein theHTML5/JavaScriptcategory.

  2. Fromjs/libs/oj,copy themain-template.jsfile,shown below:



    Paste the file into thejsfolder and rename itmain.js,as shown below:


  3. Open theindex.htmlfile and drag thejs/libs/require.jsfile above the closing HEAD element. You should now see this:

    <!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <Meta charset="UTF-8">
        <Meta name="viewport" content="width=device-width,initial-scale=1.0">
        <script src="js/libs/require/require.js" type="text/javascript"></script>
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

    In the SCRIPT element,set thedata-mainattribute to point to yourmain.jsfile,as shown below:

    <script data-main="js/main" src="js/libs/require/require.js" type="text/javascript"></script>

    Note:Thedata-mainattribute is a special attribute thatRequire.jswill check to start script loading. Read more about ithere on the Require.js site.

  4. In thecssfolder,notice a variety of CSS stylesheets are included. Drag and dropoj-alta-min.css,shown below,beneath the SCRIPT element you added in the prevIoUs step.



    You should now see this:

    <link href="css/libs/oj/v1.1.2/alta/oj-alta-min.css" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

    Note:Make sure the version number above matches the version you are using,i.e.,do not copy and past the above without checking that the version number is correct.

  5. Create a rootviewmodel(more on Knockout ViewModels here) in therequireblock within themain.jsfile,as shown below:

    require(['ojs/ojcore','knockout','jquery','ojs/ojknockout','ojs/ojbutton','ojs/ojtoolbar','ojs/ojmenu'],function (oj,ko,$)
        {
            function Demoviewmodel() {
            }
            $(document).ready(
                    function ()
                    {
                        ko.applyBindings(new Demoviewmodel());
                    }
            );
        }
);

    Note:Typevmand press TAB and the root viewmodel shown above will be created for you.

You can now run the application and you should see the "TODO write content" message from theindex.htmlfile in the browser.

Creating a First Module

In this exercise you will configure your application to benefit from the modularity features provided by JET. Then you will create your first JET module and load it into the application.

  1. Addojs/ojmoduleto therequireblock in themain.jsfile.
    Note:'ojs/ojmodule',is the JET module responsible for managing the loading of modules into your application.

  2. Create a folderjs/viewModels,where you will create the JavaScript side of your JET modules,andjs/views,where you will create the HTML side of your JET modules:


  3. Right-click on thejs/viewModelsfolder and go toNew | Other. The New File dialog opens,showing templates for creating JET modules,as shown below:



    Select "Empty JET Module",as shown above,and click Next. Type the name of the JET module,which by convention starts with a lowecase letter,such ashome,shown below:



    Click Finish. Notice thathome.jsis created injs/viewModelsand thathome.htmlis created injs/views,as shown below:


  4. Open the two files that have been created. The JavaScript file is adefineblock,using Require.js syntax,as shown below:

    /**
 * home module
 */
define(['ojs/ojcore','knockout'
],ko) {
    /**
     * The view model for the main content view template
     */
    function homeContentViewModel() {
        var self = this;
    }

    return homeContentViewModel;
});

    The HTML file has the following content:

    <h1>home</h1>
  5. Load the JET module into theindex.htmlfile,as shown in bold below:
    <div data-bind="ojModule: {name: 'home'}"></div>
    </body>
</html>

You can now run the application and you should see the "home" message from thehomemodule in the browser.

Congratulations! Your application is configured correctly and you have created and loaded your first module.

Using JET Components

In this section,you learn about a variety of different ways of creating JET components.

Creating Additional JET Modules

Using the steps described inCreating a First Module,create some more empty JET modules. Use the "Empty JET Module" wizard,as well as the "Knockout JET Module" wizard:



Compare the code between the two. In the latter case,you will see theHello World sample code from the Knockout.js documentation site.

In each case,you will need the following when creating a new JET module:

  • A JavaScript file that provides adefineblock,injs/viewmodels.
  • An HTML file that has the same name as the JavaScript file,injs/views.
  • A reference inindex.html,to load the JET module.

Experiment by creating multiple empty JET modules,e.g.,afootermodule and aheadermodule.

@H_403_66@

Using the JET Cookbook

In this section,you learn how easy it is to use the Oracle JET Cookbook,which describes all the JET components,while also providing complete code snippets that you can copy/paste into your JET applications.

  1. Go to the on-lineOracle JET Cookbook.
  2. Browse through the JET components in the Oracle JET Cookbook and get an idea of what's available.
  3. Take a look at theBar Chartcomponent.

  4. In the lower part of the page,copy the content of the HTML Editor into your application,within thehome.htmlfile.

  5. Notice that there is component-specific code-completion,and documentation,press Ctrl-Space withinojChartto see it:

    Similarly,press Ctrl-Space on a property and you will see code completion,too:

    Note:Notice that the properties shown in the code completion are context-sensitive to the currently used Oracle JET component. For example,instead ofojChartabove,use a different component and then press Ctrl-Space over the properties and you will see that only properties that are applicable to the currently used Oracle JET component are shown.

  6. In the Output window (Ctrl-4),notice the error messages,because thehome.jsJavaScript file does not yet define the variables you have referenced in your HTML file,as shown below:

  7. Inhome.js,belowvar self = this;,copy the body of the code in the JS Editor section,near the end of the Bar Chart page.

    /* 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",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'}
];

    Note:Be careful not to copy everything in the JS Editor,because the JS Editor has code in arequireblock,while yourhome.jscontains adefineblock.

  8. To enable the JET Chart component to be loaded into the application,include theojs/ojchartreference in yourdefineblock,in yourhome.jsfile,monospace; color: black;">define(['ojs/ojcore','ojs/ojchart', ],ko) {

  9. Open the application in a browser and you should see the following:


    10. Modify and tweak the page as needed,for example,change the H1 element fromhometo something more meaningful,such asChart Data.

As an exercise,choose some other JET components from the Oracle JET Cookbook and integrate them into your application.

Setting Up Intermodular Communication

You may need to reference properties across different JET modules. There are three different ways to do so,as outlined below.

  1. Use$rootwithin an HTML file to access global variables frommain.js.Details here.
  2. Useko.dataForwithin a JavaScript file to access global variables frommain.js.Details here.
  3. Useknockout-postBoxto set up a loosely coupled publish/subscribe mechanism.Details here.

猜你在找的Oracle相关文章

[Oracle]记一次由sequence引发的enq sv-contention等待事件
数据库版本：11.2.0.4 RAC(1)问题现象从EM里面可以看到，在23号早上8：45~8：55时，数据库...
oracle统计信息的锁定与解锁
（一）问题背景最近在对一个大约200万行数据的表查看执行计划时，发现存在异常，理论上应该...
【转】RMAN删除过期备份或非过期备份
（一）删除备份--DELETE命令用于删除RMAN备份记录及相应的物理文件。当使用RMAN执行备份操...
数据恢复顾问（DRA）
（1）DRA介绍 数据恢复顾问（Data Recovery Advise）是一个诊断和修复数据库的工具，DRA能...
RMAN备份与恢复（一）--认识RMAN
RMAN（Recovery Manager）是Oracle恢复管理器的简称，是集数据库备份（backup）、修复（re...
RMAN备份与恢复（二）--RMAN常用操作学习
（1）连接目标数据库 在RMAN中可以建立与目标数据库或恢复目录数据库的连接。与目标数据库...
ORA-00245问题总结
（1）问题描述 在进行数据库归档备份时（备份归档日志文件和控制文件），有时成功，有时失...
使用RMAN对数据文件进行恢复
（1）备份数据库 在使用RMAN进行数据库恢复之前，先用RMAN进行全库备份 （2）删除数据文件...
Oracle使用fy_recover_data恢复truncate删除的数据
(一)truncate操作概述在生产中，truncate是使用较多的命令，在使用不当的情况下，往往会造...
备份与恢复（四）--RMAN使用恢复目录catalog来保存档案资料库
（一）恢复目录概述RMAN档案资料库用于存储数据库备份、修复以及恢复所需的信息。这些信息...
MySQLMsSQLOracleSqlitePostgre SQLMariadbMongoDBNoSQLHBaseJDBC
undo日志persistent-cmysql-error-postal-codesql-match-almysql-5.6mysql-8.0database-tri安装路径系统错误data_dir丢失文件主从同步sql_mode数据库目录匿名用户character_seID归零数据库位置查询表重复字段查询字段截断日志SUSPECT7391Remote ServeLinked Serve玄学问题登录不上开启远程访问