Oracle JET and Netbeans.

With NetBeans 8.2 isn´t necessary the old plugin for JET.Now in the IDE you can create a sample app.
We have the next options from “New projects”

newpro.png

Anyway, I think is a better option use a yeoman to cretae a basic app based on a template.
we have differents templates blank,basic, navbar or navdrawer
https://docs.oracle.com/middleware/jet310/jet/developer/GUID-ACB7BD4E-BAAC-4A9E-B52A-6B2933CD222C.htm#GUID-F9B1A1E1-2814-49A0-A59A-0ADAAEFC5E93

To create a aplication you can do

yo oraclejet MyAppNavDrawer –template=navdrawer

Another option is create a hybrid application with this kind of sentence

yo oraclejet:hybrid app –appname=SampleNavBar –template=navbar –platform=android

In this section you can find information about prerequisits: Node,yeoman,grunt,cordova(hybrid)

https://docs.oracle.com/middleware/jet310/jet/developer/GUID-ABE2373F-287F-4C3A-BEBD-02F179F399FD.htm#JETDG115

If we had already been working on previous versions with jet and node I recommend you that you update node and the necessary complements as yeoman.
In my case I gave this error before doing it.
https://community.oracle.com/thread/4029155

Deploy JET App in real Android device

To deploy our JET App in a real device we can use the next grunt sentence

  • serve –platform=android –device

To deploy the application in the phone connected yo PC through USB, is required

Finally you must enable USB Debug and development mode in yout phone.

You can check if your device is detected with

  • Path\to\adb\adb devices

Test your Hybrid App in an Android Emulator

  • Install Cordova
    • npm install -g cordova
  • Install Android Studio and add this environment variables
    • JAVA_HOME:JDK installation
    • ANDROID_HOME:Android SDK installation
    • PATH:add the Android SDK’s tools and platform-tools directories
  • Create your virtual device with Android Studio
    • Tools–>Android–>AVD Manager
  • Check out the API that use your virtual device, e.g if you use Nexus_5X_API_23 you must install API 23
    • Tools–>Android–>SDK Manager

Here is the official doc about JET Hybrid Development

  • To test your App with Netbeans you can use
    • grunt serve –platform=android –destination=Nexus_5X_API_23

nexusemulator

Integrate JET with jQuery UI

In Oracle JET we have a lot of components and we can create composite components.
But sometimes we need integrate components of the third-party libraries. In this post I explain how to integrate jQueryUI to use the components of this library.

  • Add jQueryUI library
    • ‘jqueryui’: ‘libs/jquery-ui-1.12.0/jquery-ui’
  • Add ‘jqueryui’ in require section of main.js
  • Add jQueryUI CSS in index.html
	<link rel="stylesheet" href=" //code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
  • Add jQueryUI component in your view section html
<div data-bind="jqueryUI: {component: 'datepicker', onSelect: dateSelector}">
</div>

Note: For this post I used jQueryUI 1.12 and JET 2.1.0

Oracle JET with font icons

with  Oracle JET is very easy use font icons in our applications.

We just have to do the following

  • download the library, in this case I use fontawesome
  • Copy the entire font-awesome directory into your project.
  • add css in your index.html
    • <link href=”font-awesome-4.6.3/css/font-awesome.min.css” rel=”stylesheet” type=”text/css”/>

And then you can use the styles in your buttons or somewhere

<i class="fa fa-camera-retro"></i> fa-camera-retro

<input type="checkbox" id="buttonIcon4"
data-bind="ojComponent: {
component:'ojButton',
icons: {start:'fa fa-camera-retro',
end: 'oj-fwk-icon-caret-end oj-fwk-icon'},
label: 'Toggle button with two icons'
}"/>

 

Pagination in JET table

if you have a hughe number of rows you can add pagination in your tables with ojPagingControl.

you add it above or below your table in your html viewModule

<div id="paging" data-bind="ojComponent: {component: 'ojPagingControl', data: datasource, pageSize: 2}"/>

 

and in your js file of the Viewmodule

  • add  ‘ojs/ojpagingtabledatasource‘ in the define
  • change the data value in PagingTableDataSource
self.datasource(new oj.PagingTableDataSource(new oj.CollectionTableDataSource(self.DeptCol())));

 

As result you will see as it show below

jetpagination

 

 

Install and configure NodeJS and Bower in Netbeans on Windows10

In this post I explain how to work with projects with bower configuration. We have to configure Netbeans to it can resolve the conflicts in this kind of proyects

  • Install latest version of node.js , I chose the last LTS estable
  • Install Bower through npm of nodejs, bower is a node module
    • npm install -g bower from node command prompt
  • Configure the paths in NetBeans,Tools-Options-HTML 5
    • bower.cmd
    • node.exe and npm.cmd
  • Bower uses git so GIT is a requirement.
  • Add entries in PATH variable to node and git
  • Restart machine

Finally you can open Netbeans an right click your project, choose Resolve project problems and Resolve the Bower problem