Twitter, Codebird, and JavaScript

In my "bower.json" file, I have a dependency set like this:

"codebird-js": "2.6.0"

That enables Codebird to be installed.

Next, I went to apps.twitter.com and created a new application, so that I now have a Consumer Key (API Key) and a Consumer Secret (API Secret).

<script type="text/javascript">
    var cb = new Codebird;
    cb.setConsumerKey(
            "replace-with-consumer-key",
            "replace-with-consumer-secret");
    cb.__call(
            "search_tweets",
            "q=NetBeans",
            function (response) {
                var statuses = response.statuses;
                for (var  (more...)

OAuth and Oracle JET

OAuth is an open protocol to allow secure authorization in a simple and standard method from web, mobile, and desktop applications. Oracle JET includes OAuth and there is documentation for the combination in the Oracle JET Developer Guide, in a chapter named Using oj.OAuth in Your Oracle JET Application.

In your "define" block, you need to include "ojs/ojmodel", since that's where the OAuth class is provided. The OAuth class provides the methods you can (more...)

JBoss Data Virtualization with Oracle JET

I met with Cojan van Ballegooijen who is involved with the Red Hat JBoss Data Virtualization project. Read about that here:

http://www.jboss.org/products/datavirt/overview

I'm interested in setting up a scenario where Oracle JET could provide a dashboard on top of a VDB (virtual database).

Here's the steps we took to get started.

  1. We started by downloading the 6.3.0 Beta of JBoss Data Virtualization: http://developers.redhat.com/products/datavirt/download.

  2. After running "java -jar" on the (more...)

Company Presentations on Oracle JET with NetBeans IDE

Today I spent some time with Oracle colleagues in presenting Oracle JET to a company in the Netherlands. The company was using a technology stack that included a front-end technology that needs to be modernized for various reasons and Oracle JET was presented to them as the way to bring the front-end of an application into the modern world of HTML5, CSS3, and JavaScript.

Of course, many small demos were done to make the key (more...)

JSX in NetBeans IDE 8.2

JSX is a XML-like syntax extension to ECMAScript without any defined semantics. Many more details about it can be found here:

https://facebook.github.io/jsx/

JSX is popular in the React community which "recommend[s] using JSX because it is a concise and familiar syntax for defining tree structures with attributes. It's more familiar for casual developers such as designers." Many more details about that can be found here:

https://facebook.github.io/react/docs/jsx-in-depth.html

Many NetBeans IDE (more...)

Gallery Demos for JavaScript: JQuery UI Accordion

Continuing from the first part, let's now move towards modularity via Require and data bindings via Knockout. 

Here is the application:

https://github.com/GeertjanWielenga/GalleriaDemos/tree/master/Galleria2-Knockout/app

The project structure is like this, which looks a lot like the structure of an Oracle JET application, though an Oracle JET template was not the starting point of the below. Instead, I started with a plain ordinary HTML/JavaScript application and built up the structure from there, i.e., as (more...)

Gallery Demos for JavaScript: PrimeUI Galleria

I'm looking at different image gallery components as examples of how to work with them in the context of Oracle JET. Also, these scenarios are example of how to migrate from non-Oracle JET applications to Oracle JET applications.

Here's the first, making use of the PrimeUI Galleria component:

https://github.com/GeertjanWielenga/GalleriaDemos/tree/master/Galleria1-Default/app

The structure of the application is like this: 


Here's how the component looks:

In the "bower.json" file, there is a single dependency:  

"primeui": "4. (more...)

Timeline in Oracle JET

Let's take the "ojTimeline" component from the Oracle JET component library, as described here in the Oracle JET Cookbook, while taking note of the format of the related JSON file here. Then, downloading that file into our Oracle JET application and changing the details in the JSON file, let's recreate the NetBeans Roadmap in Oracle JET, with this result:

Here's the business logic in JavaScript, i.e., the "define" block, including a selection listener:

define(['text!../.. (more...)

Tag Cloud in Oracle JET

Here in the Oracle JET Cookbook the Oracle JET Tag Cloud is described. Here's the JSON file that is used there, which I have put in the "public_html" folder of my project.

What we'll create is the same as in the Cookbook, except we'll parse the JSON file with "JSON.parse" and we'll use a "define" block.


Here's a 'define' block for working with the "ojtagcloud" component:

define(['text!../../socialNetworks.json', 'ojs/ojtagcloud'],
    function (file) {
         (more...)

JQuery UI Datepicker Widget and Oracle JET

The jQuery UI Datepicker is a popular component. Let's integrate it into an Oracle JET application:

For background on this topic, see this YouTube clip by JB Brock:

https://www.youtube.com/watch?v=XcPcaSbaHFg

Take the following steps:

  1. Get the 'datepicker.js', from somewhere. For example, use Bower to add 'jquery-ui' to your project.

  2. In 'main.js', point to the folder where all the 'ui' components are found:
    'jqueryui': 'libs/jquery-ui/ui', 
  3. Reference the CSS file below in your (more...)

Plotting Data on World Maps with Oracle JET

Our requirement is to use Oracle JET to show data on a world map, e.g., the number of employees in our organization working in various countries around the world. Below you see an example—three different ranges represented by colors on the map:

To get to the above point, let's start with the simplest imaginable world map scenario with Oracle JET's built-in maps for ojThematicMap.

Here's the view:

<div id='thematicMap-container'>
    <div id='thematicMap1' data-bind="ojComponent:{
            component:  (more...)

YouTube: Oracle JET, Maps, Java EE, and NetBeans IDE

During JavaOne Latin America, last week, Yolande from OTN did a NightHacking interview with me about Oracle JET.

Here it is, in 10 minutes, covering Oracle JET, Java EE, maps, the ojThematicMap component in Oracle JET, and NetBeans IDE:

Related reading:

Key Promoter Plugin for NetBeans IDE 8.1

I've reworked the Key Promoter plugin a bit.

http://plugins.netbeans.org/plugin/55751/key-promoter

The status bar (assuming you're using NetBeans IDE 8.1 and have installed the plugin for NetBeans IDE 8.1) now displays the keyboard shortcut of the most recently used action. In the screenshot below, notice the green display area in the status bar, i.e., at the bottom of the screenshot below, which is provided by the plugin, displaying info about the (more...)

Integrating iTunes into Oracle JET

Here's a search string for iTunes:

https://itunes.apple.com/us/rss/toppaidapplications/limit=10/genre=6014/json

Let's integrate that into an Oracle JET application, with this result:

After a bit of fiddling with the parsing of the JSON, this is how I built up the table above.

Here's the view:

<table data-bind="ojComponent: {component: 'ojTable',
    data: dataSource,
    columns: [
        {headerText: 'Name', field: 'name'},
        {headerText: 'Price', field: 'price'}
    ]
        }">
</table>

Here's the viewModel: 

define(['ojs/ojcore', 'knockout', 'ojs/ojtable'
], function (oj, ko) {
    function homeContentViewModel()  (more...)

Integrating Brazil into Oracle JET

Using the info from yesterday, it's easy to integrate Brazil into Oracle JET:

To get started, get the brazil-states.geojson file and put it in your project as described yesterday. Below, the file has been renamed to "brazil.json".

Then here's your viewModel:

define(['text!../brazil.json',
        'ojs/ojcore',
        'knockout',
        'ojs/ojthematicmap'],
        function (geo, oj, ko) {
            function mainContentViewModel() {
                var self = this;
                self.mapProvider = {
                    geo: JSON.parse(geo),
                    propertiesKeys: {
                        id: 'name',
                        shortLabel: 'name',
                         (more...)

GeoJSON and Oracle JET Maps

In the latest Oracle JET release notes, you'll find the Oracle JET maps now support GeoJSON. There's even a complete sample in the Oracle JET Cookbook

Let's see how to set that up within an Oracle JET module, rather than via the require block, which is how it is defined in the Oracle JET Cookbook. 

  1. Get the JSON file from the sample above here. Put it into your project structure, somewhere, e. (more...)