Hello and welcome to part 5 of the first of the three weekly lessons about Oracle
JET. In this part, we continue where we left off in part 4. In part 4, we
introduced Knockout. Knockout is a free and open source library that lets you
declaratively define bindings between business logic expressed in JavaScript
and views expressed in HTML5. Like other libraries and technologies, JET supports
the concepts of components, which is the focus of this part of the course.
Generically, components are a powerful, clean way of organizing your UI code
into self-contained reusable chunks. Components provide a development pattern
that is beneficial for large applications, because they simplify
development through clear organization and encapsulation. Components helps to
improve runtime performance by letting you incrementally load your application
code together with related templates and resources, as needed. In the previous part,
you were introduced to Knockout "observables". By using Knockout
observables, you enable Knockout to keep track of changes that you make to
properties, such as, in this case, the “name” property. Any change made to the “name”
property will result in Knockout updating all references to that property. You
can see that, in our previous example, we had three different references to the
“name” property. When the “input” element was used to change the “name” property, all the
references to that “name” property, in the two “span” elements, were updated
automatically, by Knockout, for us. In this part, where we introduce Oracle JET
components, we are going to use an “observableArray” instead. In the previous
part, we used an “observable”, in this part we use an “observableArray”. The
“observableArray” keeps track of a set of data that you can see presented here.
That data is hard-coded inside of our module, in this case, but could come from
some REST endpoint, or some WebSocket, or any external data source.
We are going to use this “observableArray” together with an Oracle JET
component. When we were talking about the "view" in the previous part, we made use of
a construct called a "data-bind". This "data-bind" is an HTML attribute and it comes
from Knockout. Via the "data-bind" attribute, we're able to connect the "name"
property, defined in our "viewModel", to a reference to it inside of our "view" and
you can see that we were using "data-bind" in three different places, to ensure that
three different DOM elements were connected to that same "name" property.
Oracle JET provides an extensive component library based on this same
syntax. Here, for example, we see a chart and here we see another chart. Both
charts make use of that same "observable" that we have defined in our "viewModel".
Here we see the "observableArray", named "datasource",
and we can see that same "observableArray" being used in two different places.
Again we see the "data-bind" attribute and what you should see here is that the
"data-bind" is set to "ojComponent" instead of, as in our previous example, to
"textInput" or to "text". "text" is an attribute of the "span" element, "textInput"
is a special attribute that Knockout provides, and "ojComponent" is a special
attribute that Oracle JET provides on "div" elements. So, we have a "div" element,
we have a "data-bind" attribute, and we are saying that we are binding the "ojChart"
component, so this is one of the Oracle JET components, to the "ojComponent"
attribute that Oracle JET provides for "div" elements. Each Oracle JET component
comes with a set of properties and events and here you see the simplest
possible implementation of the properties of an Oracle
JET chart. "ojChart" has the property "type" and "series". In the first case, we set "type"
to "bar", in the second case we set "type" to "pie" and, in both cases, the data that will
be displayed in the chart is that same "observableArray" that is defined in the
"incidents.js" file, so, in the "viewModel" of this Oracle JET module. When we look
in the browser, we will see two different charts, displaying the same data, but in
different ways: one as a bar chart and one as a pie chart. Here we are in the
browser, we see the bar chart and we see the pie chart. An important detail,
enabling all of this to work, is that we see a reference to "ojChart" in the
"define block" of this "viewModel". In addition to the default references "ojcore",
"knockout", and "jquery", we now also have "ojchart". By loading "ojchart", in
this way, in the "define block", we ensure that the chart is loaded, enabling this
reference to succeed. In summary, the three steps you need to take, whenever
you make use of an Oracle JET component, is to load the relevant component in the
"define block" of the module where you want to use that component; secondly, in
the "viewModel" of your Oracle JET module, make sure to reference all the data and
other properties and events that you want to reference inside of the Oracle
JET component declaration in your "view".
Step 1: reference the component you want to use. Step 2: provide your data in your
properties in JavaScript in the "viewModel". Step 3: declare your Oracle
JET component and refer to the properties, events, and data that you have
set up in your "viewModel". A final point to make on this topic is that, in the
latest releases of Oracle JET, a new syntax has been introduced. Here
can see the new syntax for declaring an Oracle JET chart. Notice that it is much
simpler and more concise than the "data-bind" oriented Knockout mechanism for
declaring Oracle JET charts. Notice also that here we're not using a "div" element
anymore. Instead we're using the custom element
"". For each Oracle JET component, a custom element exists enabling you to
declare Oracle JET components in a concise and natural HTML manner. Please
be aware that, though you may come across the older "data-bind" based syntax for JET
components, in older applications that make use of JET, this approach should be
avoided. In fact, it will be deprecated and removed over time and you should use
only the custom element syntax, which is also used throughout the documentation
and related materials provided by Oracle JET. In this part, you have been
introduced to components and how they are expressed in JET. As always, we
thank you for taking part in the course on JET and look forward to having you
again in the next part.