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.

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.

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.

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.

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.
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.

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.

Create a newindex.htmlfile in the project root,by going to the New File dialog (Ctrl-N) and then selectingHTML Filein theHTML5/JavaScriptcategory.
Fromjs/libs/oj,copy themain-template.jsfile,shown below:

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

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.

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.
Create a rootviewmodel(more on Knockout ViewModels here) in therequireblock within themain.jsfile,as shown below:
@H_301_216@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.

Addojs/ojmoduleto therequireblock in themain.jsfile.

Note:'ojs/ojmodule',is the JET module responsible for managing the loading of modules into your application.

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:
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:

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>

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.

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.

Go to the on-lineOracle JET Cookbook.
Browse through the JET components in the Oracle JET Cookbook and get an idea of what's available.
Take a look at theBar Chartcomponent.
In the lower part of the page,copy the content of the HTML Editor into your application,within thehome.htmlfile.
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.
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:

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.

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) {
Open the application in a browser and you should see the following:

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.

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

原文链接：https://www.f2er.com/oracle/211520.html