Oracle JET Components Demo Using Cookbook in Jdeveloper

In this post, I am sharing how can we use Oracle JET Cookbook to understand basic UI components and How can we copy and use code from the cookbook. Here I am using JDeveloper 12.1.3 to create Oracle JET Components Demo Application.

In the previous post, I have explained about creating a JET application using JDeveloper. Here I am using the same application to show the JET components demo. Oracle JET cookbook has many recipes that we can try in our application to learn more about coding patterns and toolkit structure.

Here you can access Oracle JET Cookbook

Now open your NavDrawer JET application in JDeveloper, Run it and you can see the Dashboard page opened in the browser

You can see that this page tells the path of the file to edit in case you want to update its content

In JDeveloper select Project navigate to Web Content --> js and expand views and viewModels folder, Here you can see various HTML files and their corresponding javascript files. In this post, I am using the dashboard module for showing the JET components demo.

Now open dashboard.html and dashboard.js file in the editor. We'll work in these two files to learn about various JET components

oj-input-text (Input Text) Component

Goto Oracle JET Cookbook and navigate to input text demo page

Copy this code from demo.html

and paste in dashboard.html, you can see that this piece of code contains HTML tag for showing a label, an input text and its value in the span element

1. <oj-label for="text-input">oj-input-text component</oj-label>
2. <oj-input-text id="text-input" value="{{value}}"></oj-input-text>
4. <br/><br/>
6. <span class="oj-label">Current component value is: </span>
7. <span data-bind="text: value"></span>

Now we need to set the value of this input text component in the dashboard.js file, So copy this line

and paste in the dashboard.js file under var self = this; line and don't forget to add input text declaration (ojs/ojinputtext) in define block otherwise it'll not appear on the page

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojinputtext'], function (oj, ko, $) {
6. function DashboardViewModel() {
7. var self = this;
9. this.value = ko.observable("Green");
10. .
11. .
12. .

Here you can see that Knockout js object ko is setting the value of the JET input text component, Now run and check the application

oj-select-one (Select One Choice) Component

Goto Oracle JET Cookbook and navigate to select one choice demo page

Copy code from demo.html and paste in the dashboard.html, Here goes the code of dashboard.html

1. <div class="oj-hybrid-padding">
2. <h1>Dashboard Content Area</h1>
3. <div>
4. <oj-label for="basicSelect">Select One</oj-label>
6. <oj-select-one id="basicSelect" value="{{val}}" style="max-width:20em">
7. <oj-option value="IE">Internet Explorer</oj-option>
8. <oj-option value="FF">Firefox</oj-option>
9. <oj-option value="CH">Chrome</oj-option>
10. <oj-option value="OP">Opera</oj-option>
11. <oj-option value="SA">Safari</oj-option>
12. </oj-select-one>
14. <br/>
16. <oj-label for="curr-value">Current selected value is</oj-label>
18. <span id="curr-value">
19. <oj-bind-text value="[[val]]"></oj-bind-text></span>
20. </div>
21. </div>

You can understand from the above code that a select one choice and its items are defined using JET HTML tags, Now set the initial value of this component in the dashboard.js file and don't forget to add select one choice declaration (ojs/ojselectcombobox) in define block

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojselectcombobox'], function (oj, ko, $) {
6. function DashboardViewModel() {
7. var self = this;
9. this.val = ko.observable("CH");
10. .
11. .

Run and check application, You can see a select one choice rendered on the page and its value is set using val variable

oj-radioset (Radio Button Group) Component

Goto Oracle JET Cookbook and navigate to radio set demo page

Copy entire form from demo.html and paste in the dashboard.html page, this form contains a radio set and an additional button that changes the value of radio set. Here you'll also learn about button action.

1. <div class="oj-hybrid-padding">
2. <h1>Dashboard Content Area</h1>
3. <div id="formId" class="oj-form">
4. <oj-label id="mainlabelid">Colors</oj-label>
6. <!-- You need to set the labelled-by attribute
7. to make this accessible.
8. role="radiogroup" is set for you by oj-radioset. -->
10. <oj-radioset id="radiosetBasicDemoId" labelled-by="mainlabelid" value="{{currentColor}}">
11. <!-- This is an example of how to use oj-bind-for-each, along with oj-bind-text to
12. iterate over an array of objects-->
13. <oj-bind-for-each data="[[colorOptions]]">
14. <template>
15. <oj-option id="[[$current.data.id]]" value="[[$current.data.value]]">
16. <oj-bind-text value="[[$current.data.color]]"></oj-bind-text>
17. </oj-option>
18. </template>
19. </oj-bind-for-each>
20. </oj-radioset>
22. <br/>
24. <span>Current component value is: </span>
26. <span id="curr-value" data-bind="text: currentColor"></span>
28. <br/>
30. <br/>
31. <div id='buttons-container'>
32. <oj-button id='inputButton4' on-oj-action='[[setModelCurrentColorToBlue]]'>Set model currentColor to blue</oj-button>
33. </div>
34. </div>
35. </div>

Now use this code in the dashboard.js file, that populates radio set from an observable array and a method that is called on button click. Focus on the variable names and you'll understand how they are referenced from UI components.

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojradioset', 'ojs/ojbutton', 'ojs/ojlabel'], function (oj, ko, $) {
6. function DashboardViewModel() {
7. var self = this;
8. // this variable keeps track of the currentColor.
9. // It's a Knockout observable which
10. // means it is a two-way binding.
11. self.currentColor = ko.observable("red");
13. //Array that populates Radio Set
14. self.colorOptions = ko.observableArray([
15. {id : "blueopt", value : "blue", color : "Blue"},
16. {id : "greenopt", value : "green", color : "Green"},
17. {id : "redopt", value : "red", color : "Red"},
18. {id : "limeopt", value : "lime", color : "Lime"},
19. {id : "aquaopt", value : "aqua", color : "Aqua"},]);
21. //Method that is called on button click
22. self.setModelCurrentColorToBlue = function () {
23. alert("Set model currentColor to blue.");
24. self.currentColor("blue");
25. return true;
26. }
27. .
28. .
29. .

Now run the application and check button functionality.

oj-table (JET table) Component

Goto Oracle JET Cookbook and navigate to JET table demo page

Read the recipe carefully and try to understand the code, Here JET table is populated using ArrayDataProvider. Here goes the code for dashboard.html

1. <oj-table id='table' aria-label='Departments Table'
2. data='[[dataprovider]]'
3. selection-mode='{"row": "multiple", "column": "multiple"}'
4. dnd='{"reorder": {"columns": "enabled"}}'
5. scroll-policy='loadMoreOnScroll'
6. scroll-policy-options='{"fetchSize": 10}'
7. columns='[{"headerText": "Department Id",
8. "field": "DepartmentId",
9. "headerClassName": "oj-sm-only-hide",
10. "className": "oj-sm-only-hide",
11. "resizable": "enabled"},
12. {"headerText": "Department Name",
13. "field": "DepartmentName",
14. "resizable": "enabled"},
15. {"headerText": "Location Id",
16. "field": "LocationId",
17. "headerClassName": "oj-sm-only-hide",
18. "className": "oj-sm-only-hide",
19. "resizable": "enabled"},
20. {"headerText": "Manager Id",
21. "field": "ManagerId",
22. "resizable": "enabled"}]'
23. style='width: 100%; height: 300px;'>
24. </oj-table>

and dashboard.js code goes like this, Here deptArray is passed in ArrayDataProvider to populate data in the JET table.

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery','ojs/ojarraydataprovider','ojs/ojknockout','ojs/ojtable'],
5. function (oj, ko, $, ArrayDataProvider) {
7. function DashboardViewModel() {
8. var self = this;
10. var deptArray = [
11. {DepartmentId: 3, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
12. {DepartmentId: 5, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
13. {DepartmentId: 10, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
14. {DepartmentId: 20, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
15. {DepartmentId: 30, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
16. {DepartmentId: 40, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
17. {DepartmentId: 50, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
18. {DepartmentId: 60, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
19. {DepartmentId: 70, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
20. {DepartmentId: 80, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
21. {DepartmentId: 90, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
22. {DepartmentId: 100, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
23. {DepartmentId: 110, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
24. {DepartmentId: 120, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
25. {DepartmentId: 130, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300},
26. {DepartmentId: 1001, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
27. {DepartmentId: 1009, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
28. {DepartmentId: 1011, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
29. {DepartmentId: 2011, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
30. {DepartmentId: 3011, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
31. {DepartmentId: 4011, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
32. {DepartmentId: 5011, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
33. {DepartmentId: 6011, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
34. {DepartmentId: 7011, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
35. {DepartmentId: 8011, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
36. {DepartmentId: 9011, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
37. {DepartmentId: 10011, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
38. {DepartmentId: 11011, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
39. {DepartmentId: 12011, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
40. {DepartmentId: 13011, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300},
41. {DepartmentId: 14011, DepartmentName: 'ADFPM 1001 neverending', LocationId: 200, ManagerId: 300},
42. {DepartmentId: 15011, DepartmentName: 'BB', LocationId: 200, ManagerId: 300},
43. {DepartmentId: 21022, DepartmentName: 'Administration', LocationId: 200, ManagerId: 300},
44. {DepartmentId: 22022, DepartmentName: 'Marketing', LocationId: 200, ManagerId: 300},
45. {DepartmentId: 23022, DepartmentName: 'Purchasing', LocationId: 200, ManagerId: 300},
46. {DepartmentId: 24022, DepartmentName: 'Human Resources1', LocationId: 200, ManagerId: 300},
47. {DepartmentId: 25022, DepartmentName: 'Administration2', LocationId: 200, ManagerId: 300},
48. {DepartmentId: 26022, DepartmentName: 'Marketing3', LocationId: 200, ManagerId: 300},
49. {DepartmentId: 27022, DepartmentName: 'Purchasing4', LocationId: 200, ManagerId: 300},
50. {DepartmentId: 28022, DepartmentName: 'Human Resources5', LocationId: 200, ManagerId: 300},
51. {DepartmentId: 29022, DepartmentName: 'Human Resources11', LocationId: 200, ManagerId: 300},
52. {DepartmentId: 310022, DepartmentName: 'Administration12', LocationId: 200, ManagerId: 300},
53. {DepartmentId: 311022, DepartmentName: 'Marketing13', LocationId: 200, ManagerId: 300},
54. {DepartmentId: 312022, DepartmentName: 'Purchasing14', LocationId: 200, ManagerId: 300},
55. {DepartmentId: 313022, DepartmentName: 'Human Resources15', LocationId: 200, ManagerId: 300}];
57. self.dataprovider = new ArrayDataProvider(deptArray, {keyAttributes: 'DepartmentId', implicitSort: [{attribute: 'DepartmentId', direction: 'ascending'}]});
58. .
59. .
60. .

Run application and check

oj-data-grid (Data Grid) Component

Goto Oracle JET Cookbook and navigate to data grid demo page

dashboard.html file code

1. <oj-data-grid id="datagrid"
2. style="width:100%;max-width:234px;height:130px"
3. aria-label="Data Grid Cell Based Grid Demo"
4. data="[[dataSource]]">
5. </oj-data-grid>

dashboard.js file code, Here you can see how data array used as grid's data source

1. /*
2. * Your dashboard ViewModel code goes here
3. */
4. define(['ojs/ojcore', 'knockout', 'jquery','ojs/ojknockout','ojs/ojdatagrid', 'ojs/ojarraydatagriddatasource'],
5. function (oj, ko, $, ArrayDataProvider) {
7. function DashboardViewModel() {
8. var self = this;
10. var dataArray = [
11. ['1', '2', '3'],
12. ['4', '5', '6'],
13. ['7', '8', '9']
14. ];
15. self.dataSource = new oj.ArrayDataGridDataSource(dataArray);
16. .
17. .

Run application and check

I'll add some more UI Components Demo in this post later, Keep an eye on this page.

Cheers 🙂 Happy Learning

Getting started with Oracle JET and Jdeveloper

 I am writing some posts about Oracle JET and these posts are my learning experience so if you find any wrong info then let me know. Being an ADF developer I started using JET with JDeveloper instead of Netbeans. This is the first post and here I am sharing how to set up Oracle JET and JDeveloper to work together.

What is Oracle JET (From Docs)-

Oracle JET is targeted at JavaScript developers working on client-side applications. It's a collection of open-source JavaScript libraries along with a set of Oracle contributed JavaScript libraries that make it as simple and efficient as possible to build applications that consume and interact with Oracle products and services, especially Oracle Cloud services.

You can read more about Oracle JET

Now download Oracle JET from Oracle Technology Network - Download Oracle JET, Here I am going to use the NavDrawer template

Creating an Oracle JET Application using Oracle JDeveloper

The first step is to create a custom application in JDeveloper, Here I am using Jdeveloper12.1.3

Enter the project name and select technologies (HTML/CSS/JavaScript) to use in this project

Click on Finish and create the application.

Next is to create a public_html folder in this project, Right-click on the Project --> New --> From Gallery --> General --> Folder, Enter the folder name and click OK

Navigate to the directory where the public_html folder is created and unzip the Oracle JET folder. It'll look like this after extracting the JET bundle (We have downloaded that before)

Now In JDeveloper click on the refresh button and you can see that JET files appear under the Web Content folder

Now right click on index.html and choose Run and you can see running application in your default browser

This is the first post in this series, I'll try to post more about my experience with Oracle JET and JDeveloper.

Cheers 🙂

Send WhatsApp messages from Oracle ADF Application

 Hello Everyone

In this post, I am sharing a method to send WhatsApp messages from Oracle ADF Application using the "WhatsApp Click to Chat" feature as WhatsApp doesn't provide any official API.

Though it's an extremely simple way and we need not write a single line of code, We just need to pass some values in an URL to open WhatsApp Click to Chat console.

Created an ADF Application and a page in the view controller with two text fields and a button in it. It looks like this

and both fields are bonded to the managed bean variables

1. <af:inputText label="Mobile No." id="it1" value="#{viewScope.SendWhatsAppBean.mobileNo}"
2. autoSubmit="true"/>
3. <af:inputText label="Message" id="it2" rows="2" value="#{viewScope.SendWhatsAppBean.message}"
4. autoSubmit="true"/>

and managed bean just contain simple POJO variables

1. package sendwhatsappadf.view.bean;
4. public class SendWhatsAppBean {
5. public SendWhatsAppBean() {
6. }
8. private String mobileNo;
9. private String message;
11. public void setMobileNo(String mobileNo) {
12. this.mobileNo = mobileNo;
13. }
15. public String getMobileNo() {
16. return mobileNo;
17. }
19. public void setMessage(String message) {
20. this.message = message;
21. }
23. public String getMessage() {
24. return message;
25. }
26. }

Next is to know about the browser-based WhatsApp click to chat feature, It makes use of an API URL

https://api.whatsapp.com/send?phone=&text=

Now on button click, we can pass phone number and text message in this URL to open click to chat console and in ADF we can do this using destination property of af:button.

1. <af:button text="Send" id="b1" targetFrame="_blank"
2. destination="https://api.whatsapp.com/send?phone=#{viewScope.SendWhatsAppBean.mobileNo}&amp;text=#{viewScope.SendWhatsAppBean.message}"
3. partialTriggers="it2 it1"/>

In the above XML source, we can see that both values are passed from managed bean variables.

Now run and check the application. Enter mobile no., text message on the page

On click of the Send button, WhatsApp click to chat console is opened in a new browser window.

and this button will open the WhatsApp QR code scanner window, In that window scan QR code with your phone and start sending messages.

Using this method we can pass values from ADF bindings to WhatsApp URL and send messages from ADF application.

Cheers 🙂 Happy Learning