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

Color lines in ADF charts

If you want change the color of lines in a dvt:lineChart because you don’t like the default colors of each chartDataItem. You can use a chartSeriesStyle inside seriesStamp.

I show a example below

       <dvt:lineChart id="lc1" var="row" value="#{bindings.vo.collectionModel}"
contentDelivery="immediate" styleClass="AFStretchWidth" zoomAndScroll="live"
dataSelection="single" title="demo">
<f:facet name="dataStamp">
<af:group id="g1">
<dvt:chartDataItem id="di1" value="#{row.value1}" group="#{row.group}" series="custom1"/>
<dvt:chartDataItem id="di2" value="#{row.value2}" group="#{row.group}" series="custom2" />

</af:group>
</f:facet>
<f:facet name="seriesStamp">
<af:group id="g2">
<dvt:chartSeriesStyle id="css2" series="custom1" color="#ff2121" lineStyle="solid" />
<dvt:chartSeriesStyle id="css3" series="custom2" color="#f2c779" lineStyle="solid"/>
</af:group>
</f:facet>
</dvt:lineChart>

Frozen columns in table

The last week someone asked on the OTN forum how to freeze some columns in a af:table.

If you have a af:table inside a af:panelcollection you have a freeze property, but this one is managed by the user.

Another way it’s make use of frozen property in af:cloumns. In this way we can configure the frozen columns based in our rules by code.

Here you can see a sample with two first columns frozen frozencolums

History of Oracle JDeveloper and Oracle ADF Releases

In this link you can review the information about all JDeveloper releases.

The first release JDeveloper 1.0 was in 1998!
After 18 years ADF has evolved and in View layer we had had UIX-JSP,Swing,Faces and now ADF Faces with MAF. But the core of ADF BC is similar arround big concepts like AMs,VOs,EOs,ViewLinks,Associations,…

I think that this is one of the main features in this framework, that protect you from UI technology changes and this is important in a big company or big projects