Thursday Mar 03, 2016

Docker Hub in NetBeans IDE

Rather than exploring Docker Hub on-line, you're able to make use of the Docker integration in NetBeans IDE. This is not in NetBeans IDE 8.1, instead use a development build for the next release. The Docker node is available in the Services window:

Many features are available after you right-click on the Docker node hierarchy:


For example, when you use the Pull command, you can search for Docker images, such as Docker images for NetBeans IDE:

More plans for Docker in NetBeans IDE are here: http://wiki.netbeans.org/Docker

Wednesday Mar 02, 2016

Yo OracleJET in NetBeans IDE 8.1

A simple plugin for NetBeans IDE 8.1 for those of us who like doing everything in NetBeans IDE 8.1, i.e., instead of using Yeoman on the command line, this lets you delegate the Yeoman task to NetBeans IDE:

Notice that both "blank" and "basic" are supported, i.e., the first generates the Oracle JET Base Distribution, while the second generates the Oracle JET Quick Start application.

Yeoman must be configured: 

The plugin is a work in progress. For example, currently, at the end of the process, even though the application is generated correctly and automatically opened, an error is thrown.

The source code is here, please fork and improve:

https://github.com/GeertjanWielenga/YoOracleJET

Note: The approach I took in YoNetBeans was wrong, I have a different way of achieving something similar now, and will be rewriting that plugin a bit soon.

Monday Feb 29, 2016

Oracle JET is Open Source!

From today, Oracle JET is on GitHub:

https://github.com/oracle/oraclejet

Quick summary: 

The full article shown above is here: https://jaxenter.com/open-sourced-oracle-jet-124350.html

Thursday Feb 25, 2016

Simple JSON and Oracle JET Example (Part 2)

Let's take the starting point from yesterday and use the absolute bare minimum of Oracle JET's "Common Model" functional pattern.

To understand the idea behind the Oracle JET Common Model, think of it is an implementation of Martin Fowler's "Active Record" pattern, while its syntax is that of Backbone.Model and Backbone.Collection in Backbone.js. For background reading on the Oracle JET Common Model, see the Oracle JET Cookbook section on Common Model and the Using the Oracle JET Common Model and Collection Framework section in the Oracle JET Developer Guide. Best of all, take a look at the JsDoc for oj.Model and oj.Collection.

Clearly, heaps of references to get you going. A complete scenario, in addition to that found in the Oracle JET Cookbook, is provided in Kenneth Lange's excellent Create a Web App with Oracle JET blog entry. The code below is an extract from that blog entry. The aim below is to (1) present the simplest imaginable usage of the Oracle JET Common Model and (2) mirror the result of yesterday's blog entry, i.e., the result will be identical in terms of what the user sees, though the code will be structured via the Active Record pattern.

  1. We'll start by assuming you've set up an Oracle JET application, as described here. We'll be creating a new JavaScript file named 'MovieFactory.js', in the same folder as where 'main.js' is found. It will define a model and a collection for performing CRUD actions on movies. In a new Oracle JET module, defined by 'home.js' and 'home.html', we'll create the code that begins to use the model and collection defined in the factory. 

  2. Here's the content of 'Moviefactory.js'. To understand it, read the references above, starting with the link to Martin Fowler and to the documentation from Backbone.
    define(['ojs/ojcore'], function (oj) {
        var MovieFactory = {
            resourceUrl: 'http://movieapp-sitepointdemos.rhcloud.com/api/movies',
            // Create a single movie instance:
            createMovieModel: function () {
                var Movie = oj.Model.extend({
                    urlRoot: this.resourceUrl, 
                    idAttribute: "_id"
                });
                return new Movie();
            },
            // Create a movie collection:
            createMovieCollection: function () {
                var Movies = oj.Collection.extend({
                    url: this.resourceUrl, 
                    model: this.createMovieModel()
                });
                return new Movies();
            }
        };
        return MovieFactory;
    });
  3. Now, in 'home.js', let's make use of the oj.Collection that you see in the code above and notice that you're loading 'Moviefactory' via the define block, so that you can reference its collection:
    define(['ojs/ojcore', 'knockout', 'MovieFactory', 'ojs/ojmodel', 'ojs/ojtable'],
    function (oj, ko, MovieFactory) {
        var viewModel = {
            movieCollection: MovieFactory.createMovieCollection(),
            dataSource: ko.observable(),
            // Called each time the view is shown to the user:
            initialize: function () {
                this.dataSource(new oj.CollectionTableDataSource(this.movieCollection));
                this.movieCollection.fetch();
            }
        };
        return viewModel;
    });
  4. In 'home.html', the code is unchanged from yesterday, it is exactly the same, i.e., this:
    <table data-bind="ojComponent: {
        component: 'ojTable', 
            data: dataSource,
            columns: [
                {headerText: 'Director', field: 'director'},
                {headerText: 'Title', field: 'title'},
                {headerText: 'Genre', field: 'genre'},
                {headerText: 'Year', field: 'releaseYear'}
            ]}">
    </table>

That's it. Open the app in the browser and you'll see precisely the same as yesterday. We'll build out from here in subsequent blog entries.

Wednesday Feb 24, 2016

Simple JSON and Oracle JET Example (Part 1)

Here's my JSON:

http://movieapp-sitepointdemos.rhcloud.com/api/movies

Here's how to consume it in a JET module. First, the JavaScript side:

define(['ojs/ojcore', 'knockout', 'ojs/ojtable'
], function (oj, ko) {
    function homeContentViewModel() {
        var self = this;
        self.data = ko.observableArray();
        $.getJSON("http://movieapp-sitepointdemos.rhcloud.com/api/movies").
                then(function (movies) {
                    $.each(movies, function () {
                        self.data.push({
                            title: this.title,
                            director: this.director,
                            releaseYear: this.releaseYear,
                            genre: this.genre
                        });
                    });
                });
        self.dataSource = new oj.ArrayTableDataSource(
                self.data, 
                {idAttribute: 'title'}
        );
    }
    return homeContentViewModel;
});

And here's the HTML side:

<table data-bind="ojComponent: {component: 'ojTable', 
            data: dataSource,
            columns: [
                {headerText: 'Director', field: 'director'},
                {headerText: 'Title', field: 'title'},
                {headerText: 'Genre', field: 'genre'},
                {headerText: 'Year', field: 'releaseYear'}
            ]
        }">
</table>

Tuesday Feb 23, 2016

Solved: "NetBeans Connector is debugging this browser"

During DOAG DevCamp in Bonn, Germany, I've learned at least one concretely useful thing. Enno Schulte showed me how to enable silent debugging in Chrome, so that the yellow horizontal bar along the top of the browser is removed:

Pressing Cancel means stopping the connector. However, enable silent debugging, as shown above, and the connector will continue working, after a restart, without showing the yellow horizontal bar. 

Monday Feb 22, 2016

ojTable and ojTree in an Oracle JET Application

The City Info app I've been working on is great for showcasing a range of JET components. Below, notice the ojTable and ojTree on the left side of the application:

The interesting thing is that each is provided by a distinct JET module, i.e., "cityTable" and "cityTree", which you see here:

The HTML side of the "ojTable" is like this: 

<h1>City Table View</h1>
<table
    data-bind="ojComponent: {component: 'ojTable',
            beforecurrentrow: currentRowListener,    
            data: datasource,
            columns: [
                {headerText: 'City', field: 'city'},
                {headerText: 'Country', field: 'country'}
            ]}">
</table>

The HTML side of the "ojTree" is like this:

<h1>City Tree View</h1>
<div data-bind="ojComponent: {component: 'ojTree', 
    before: currentRowListener, 
    data: datasource
}">
</div>

Does anyone know of a JSON file that contains all the cities/countries of the world? That would be a useful basis in terms of the data for this application.

Saturday Feb 20, 2016

Dashboard Applications with JavaScript & Oracle JET

When you're faced with a new technology, even with a new technology that's basically a bundling of existing techniques and solutions such as in this case Oracle JET, an initial question to ask is: "What's its sweet spot?"

To me, in the case of Oracle JET, a clear sweet spot is browser-based dashboard applications, whether for the desktop browser or on mobile devices. Over the last few days of assembling a variety of Google search technologies into a single application, I can't imagine a more sensible way of doing so in JavaScript than to combine the strengths of Knockout and Require, together with the out-of-the-box architecture and components made available by Oracle JET.

Here's where the application is right now in terms of its user interface: 

Each segment you see above is provided by a different JET module, while the list and the chart are both JET components.

Creating a dashboard/monitoring application for the browser? Try Oracle JET. It's a good fit for your needs. 

Friday Feb 19, 2016

City Info with Oracle JET

The weather app from yesterday is expanding to something bigger today:

Included above is a dynamic/animated line map, as described here, which is part of the cool Oracle JET Data Visualizations

Notice the really neat organization of the code. Modularity is brilliant: 

Oracle JET really simplifies the structuring of enterprise JavaScript applications.

Thursday Feb 18, 2016

Simple Weather, Google Maps, and Oracle JET

My first semi useful Oracle JET application is... drum roll... a combination of Herman Brunnekreef's Google Map integration combined with my own exploration of simpleWeather.js:

The two sections above are both JET modules, integrated into a single page application, thanks to the helpful features provided out of the box by Oracle JET. 

I'll make a YouTube screencast soon to show how it works, all really very simple. 

Wednesday Feb 17, 2016

Trip Report: NetBeans Day Netherlands 2016

NetBeans Day turned out to be pretty cool in the Netherlands today. Learning from last year, the decision was made to focus more on workshops than on (passive) sessions, i.e., more active learning than sitting and listening to a variety of sessions.

So, after the introductory NetBeans status update, including a demo of the upcoming multicaret support by NetBeans engineer Ralph Ruijs, and yet another exciting Adam Bien keynote on microservices (and how Java EE is perfect for doing microservices), there were a series of workshops—about the NetBeans Platform, on Oracle JET, and on DukeScript. Unfortunately, Timon didn't make it, so there wasn't a workshop on progranming drones with your own code!

Attendees came from all over the place, including several from Germany and even one from Belgium and Italy. There were several students, from technical colleges in Amsterdam, Utrecht, and Venlo. Many attended especially to get hands on experience with Oracle JET and this is the workshop instructions that were used during the Oracle JET workshop:

https://netbeans.org/kb/docs/webclient/ojet-gettingstarted.html

Many thanks to PiDome for hosting the registration form for the event, to Blue4IT for sponsoring the t-shirts, and to Oracle for providing the location, the food, and the drinks!

Here are some photos taken during the event:

The next NetBeans Day will be in Munich, Germany, on March 31!

Tuesday Feb 16, 2016

New: "Getting Started with Oracle JET Applications"

Here's a brand new document created for workshops relating to Oracle JET. Try it out and let me know how you get on with it!

Click above or here's the direct link to it:

https://netbeans.org/kb/docs/webclient/ojet-gettingstarted.html

Spreading the word about JET yourself? Please do feel free to use the above in any way you like! 

Sunday Feb 14, 2016

Enhanced Binding Syntax for Oracle JET

In the previous blog entry, we met "knockout-postbox". Next, let's take a look at "knockout-punches", which gives you new ways of expressing your Knockout bindings.

For example, instead of expressing your "text" bindings like this...

<span data-bind="text: id"></span>
<span data-bind="text: name"></span>

...you'll be able to express them like this, using "handlebar expressions":

<p>{{id}} {{name}}</p>

By the way, if you type 'exp' (without the quotes) in the HTML editor in NetBeans, and then press the TAB key, you should see that the 'exp' is turned into '{{}}', with the cursor in the middle, which is a small feature we created in NetBeans IDE to help Angular users. And now it turns out it's useful for Knockout users, and Oracle JET users, as well!

To set everything up, take similar steps as described previously, i.e., go to the Properties window of your application and this time use the Bower integration to install "knockout.punches", as shown below:

I tweaked the downloaded "knockout.punches" folder a bit, so that it has the same naming format as "knockout-postbox", i.e., I changed the folder name to "knockout-punches", as you can see below:

After that, I opened "main.js" and added "knockout-punches" to the "requirejs.config" section, right beneath "knockout-postbox".

'knockout-punches': 'libs/knockout-punches/knockout-punches',

Then, as described in the documentation, I enabled "knockout-punches", as shown below in bold, in the "require" block, i.e., in the entry point of the application:

require([
    'ojs/ojcore',
    'knockout',
    'jquery',
    'ojs/ojknockout',
    'knockout-punches',
    'ojs/ojmodule'],
        function (oj, ko, $)
        {
            function RootViewModel() {
                ko.punches.enableAll();
            }
            $(document).ready(
                    function ()
                    {
                        ko.applyBindings(
                                new RootViewModel(),
                                document.getElementById('mainContent'));
                    }
            );
        }
);

That's all you need to do. Now you can experiment with the various features of "knockout-punches" and choose the syntax styles that match your taste and needs.

Saturday Feb 13, 2016

Intermodular Communication in Oracle JET (Part 3)

In this part, continuing from the same theme introduced in part 1 and part 2, we're going to implement yet another approach to intermodular communication by applying the solution published earlier today by Lukas Jellema from AMIS, using knockout-postbox

To get started, we'll use Bower to download "knockout-postbox" into our application. If you don't have a 'bower.json' and '.bowerrc', go to the New File dialog and create those files. In '.bowerrc', point to the directory where the other libraries are already found, i.e., "public_html/js/libs", so that "knockout-postbox" will be placed in the central library location within your application.

Right-click the project, choose Properties, and use the Bower tab to install "knockout-postbox", as shown below:

In the "requirejs.config" section in "main.js", refer to the path of "knockout-postbox":

'knockout-postbox': 'libs/knockout-postbox/build/knockout-postbox',

Now you can publish/subscribe. For example, here's an "ojTable" (for details on the table below, see this earlier blog entry), notice the bits in bold:

define(['ojs/ojcore', 'knockout', 'ojs/ojtable', 'knockout-postbox'
], function (oj, ko) {
    function dataContentViewModel() {
        var self = this;
        var depts = [
            {id: 10, name: 'Administration', manager: 'Tom'},
            {id: 20, name: 'Marketing', manager: 'Dick'},
            {id: 30, name: 'Purchasing', manager: 'Harry'}
        ];
        self.datasource = new oj.ArrayTableDataSource(depts);
        self.deptRowListener = function (event, ui) {
            var newCurrentRow = ui.currentRow;
            self.datasource.at(newCurrentRow['rowIndex']).
                    then(function (rowObj) {
                        var obj = rowObj['data'];
                        ko.postbox.publish("departmentSelection", 
                            {   'id': obj.id, 
                                'name': obj.name
                            });
                    });
        };
    }
    return dataContentViewModel;
});

And here's a second module, where we're subscribed to the same topic, i.e., "departmentSelection", and thus able to be notified of changes, which can then be rendered in the view:

define(['ojs/ojcore', 'knockout', 'knockout-postbox'
], function (oj, ko) {
    function responseContentViewModel() {
        var self = this;
        self.id = ko.observable();
        self.name = ko.observable();
        ko.postbox.subscribe("departmentSelection", function (newValue) {
            self.id(newValue.id);
            self.name(newValue.name);
        });
    }
    return responseContentViewModel;
});

A very nice solution, thanks Lukas for investigating this and introducing it to the context of Oracle JET.

Friday Feb 12, 2016

Intermodular Communication in Oracle JET (Part 2)

In the previous blog entry, you were shown how to create and access global variables in Oracle JET. The global variables were defined in the root viewModel, i.e., within 'main.js' and accessed from HTML files via the $root (which could also be $parent) variable. In this blog entry, let's suppose that you need to get hold of those root variables from within the JavaScript side of your JET module instead.

To get started,  you are going to need to add a containing DIV element around your two ojModule bound DIVs, while making sure you give it an ID:

<div id="mainContent">
    <div id="homeContent" data-bind="ojModule: {name: 'home'}"></div>
    <div id="responseContent" data-bind="ojModule: {name: 'response'}"></div>
</div>
"By the way, you should never have a DIV without an ID," JB Brock tells me. "It's an accessibility pitfall if you do."

Next, in main.js, you should always "applyBindings" to a specific DOM element. The way I had it before, it's a global binding, and you would run into nested binding errors if you tried to do any other applyBindings in that same page. The change is as follows:

$(document).ready(
    function ()
    {
        ko.applyBindings(
                new RootViewModel(), 
                document.getElementById('mainContent'));
    }
);

Everything has been set up correctly and now you can access the root viewModel as follows:

ko.dataFor(document.getElementById('mainContent')

For example, here is the above syntax in "response.js":

define(['ojs/ojcore', 'knockout'
], function (oj, ko) {
    function responseContentViewModel() {
        var self = this;
        var rootViewModel = ko.dataFor(document.getElementById('mainContent'));
        self.userName = rootViewModel.userName;
        self.userCity = rootViewModel.userCity;
        self.userState = rootViewModel.userState;
    }
    return responseContentViewModel;
});

And now, instead of needing to refer to $root in your HTML view, you can use the properties defined above in the JavaScript side of your JET module:

<h2>User Details</h2>
<p>Name: <span data-bind="text: userName"></span></p>
<p>City: <span data-bind="text: userCity"></span></p>
<p>State: <span data-bind="text: userState"></span></p> 

When the global variables change, thanks to the user inputting new values in "home.html", the "response.html" will automatically be updated.

An extra tip, which works too, is that if you have ID's on the ojModule binding DIVs, you are able to get the data in each of those JET modules as well. That means you have true cross modular communication, without the root intermediary, like this in "response.js":

ko.dataFor(document.getElementById('homeContent'))

Further reading on "ko.dataFor" (and the related "ko.contextFor"):

http://knockoutjs.com/documentation/unobtrusive-event-handling.html

Thursday Feb 11, 2016

Intermodular Communication in Oracle JET (Part 1)

A few days ago I did a session on Oracle JET for a group of about 80 attendees, members of "Oracle Group Holland", and I met Herman Brunnekreef from Whitehorses in the Netherlands. He's been doing some great blogging on Oracle JET. He asked me about communication between modules in Oracle JET, i.e., how that can be implemented.

JB Brock has provided a few pointers about this in the Oracle JET forum and today I created a small example to show one aspect of this. Here below you see a single page application in the browser, which is built up from two separate HTML files:

Here's the "index.html", showing that Oracle JET is going to load two HTML files (there's no JavaScript backing those HTML files, hence I am using "viewName" instead of "name" below):

<body>
    <div data-bind="ojModule: { viewName: 'home'}"></div>
    <div data-bind="ojModule: { viewName: 'response'}"></div>
</body>

In the "require" block, i.e., in "main.js", I have defined some observables that I want to be available globally, i.e., to all my modules:

require([
    'ojs/ojcore',
    'knockout',
    'jquery',
    'ojs/ojknockout',
    'ojs/ojmodule'],
        function (oj, ko, $)
        {
            function RootViewModel() {
                var self = this;
                self.userName = ko.observable();
                self.userCity = ko.observable();
                self.userState = ko.observable();
            }
            $(document).ready(
                    function ()
                    {
                        ko.applyBindings(new RootViewModel());
                    }
            );
        }
);

And now I can refer to the above variables within my HTML pages. Here's "home.html":

<h2>Entry Form</h2>
<p>Name: <input data-bind="textInput: $root.userName"></input></p>
<p>City: <input data-bind="textInput: $root.userCity"></input></p>
<p>State: <input data-bind="textInput: $root.userState"></input></p>
<hr>

And here's "response.html":

<h2>User Details</h2>
<p>Name: <span data-bind="text: $root.userName"></span></p>
<p>City: <span data-bind="text: $root.userCity"></span></p>
<p>State: <span data-bind="text: $root.userState"></span></p>

The above means that whenever something is typed in "home.html", the global variable defined in "main.js" is updated, while in "response.html" we're hooked into those same global variables, so that the update is automatically received.

Like everything else in Oracle JET, this is nothing new. It's simply how Knockout works. I will be blogging more about this in the coming days to illustrate the other solutions pointed out by JB Brock in the Oracle JET forum.

Continue to part 2...

Wednesday Feb 10, 2016

Synchronizing Node Hierarchy with Editor Document

Arun and I have made a lot of progress with the Couchbase/NetBeans integration. Since the recording of part 3 of the series (which we did during Jfokus in Sweden), in the GitHub repo I've committed a bit of code since yesterday and now double-clicking a value in a bucket will cause NetBeans IDE to find the related statement in the open JSON document. So, below, I am double-clicking on a node in the Couchbase hierarchy and I can then immediately see the matching line in the editor, while if that line was somewhere way down in the document, the document would scroll automatically to that line.

The related code for this is here:

https://github.com/arun-gupta/couchbase-netbeans-plugin/blob/master/src/main/java/org/netbeans/modules/couchbase/value/HighlightMatchingValueAction.java

Next, I need to do it the other way round. I.e., add some kind of listener that will find the matching node when a line is selected in the editor. 

Tuesday Feb 09, 2016

Design of 2nd Edition of NetBeans Community T-Shirt!

The first edition of the NetBeans community t-shirt was announced prior to JavaOne 2015. Since then, more sponsors have joined, and the quality of the graphics has been enhanced, while the t-shirt itself will be better quality too.

The front of the t-shirt will be the same as before.

The back of the t-shirt will be like this, i.e., with several new logos, from Blue4IT, Centigrade, Anderson Software Group, and PiDome:

There's an empty puzzle piece! Could that be waiting for your organization to be added? 

Watch this space to see the announcement of the completed t-shirt! Are you attending NetBeans Day next week, February 17, 2016? You will receive a free NetBeans community t-shirt, thanks to our sponsor Blue4IT!

Many thanks to Sander from Eclectix in Amsterdam, for all the work he's done on this recently. We're planning to make the t-shirt available via the web shop of Eclectix; also watch this space for info about that.

Monday Feb 08, 2016

Smart Tools 4 Oracle JET

I have created a small plugin for NetBeans IDE that adds several helpful features for working with Oracle JET.

For example, you end up with new file templates for creating different kinds of JET modules:

The idea is that you create the folder "js/viewmodels", right-click it, call up the New File dialog, and then choose one of the Oracle JET templates that you see above, which will create a JavaScript file in "js/viewmodels" and matching HTML file in "js/views".

Install it via Tools | Plugins in NetBeans IDE 8.1.

It is also available here:

http://plugins.netbeans.org/plugin/62857/smart-tools-4-oracle-jet

Source code:

https://github.com/GeertjanWielenga/SmartTools4OracleJET

Friday Feb 05, 2016

New Article on NetBeans IDE 8.1 & Node.js

A nice new article on NetBeans IDE 8.1, in particular on its new Node.js features:

The full article is here: http://bandofcoders.com/netbeans-8-1/

About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Categories
  • NetBeans IDE
Archives
« May 2016
SunMonTueWedThuFriSat
1
7
15
18
25
27
28
29
30
31
    
       
Today