Docker and VirtualBox in Windows 10 Anniversary Update

Recently I installed the last version of Docker, with native support to Windows 10.
This version doesn’t need VBox to work but I have some vbox machines in my SO for other things/tasks/projects. The problem was those vboxs can’t run now.

I had this message: “VT-x is not available (VERR_VMX_NO_VMX)”

I try to disable Hyper-V in “Programs and Features” but it didn’t work

Finally the workaroud was to run bcdedit as admin and set hypervisorlaunchtype off

  • C:\WINDOWS\system32>bcdedit
  • bcdedit /set hypervisorlaunchtype off
    Reboot the SO and now run VirtualBox.  To turn Hyper-V on:
  • bcdedit /set hypervisorlaunchtype auto

Export excel with more 65K rows in ADF

When you work with a hugh number of rows with the af:exportCollectionActionListener you have a limitation about the number of rows.

This limitation is because file format.(xls). It is the maximum number of rows for the Excel 97-2003 . With xlsx format the maximum is 1M

As workaround you can build a custom export with POI or use ADF DI, a good option that I wrote about it time ago and the product has a good evolution

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