Tuesday Dec 29, 2015

SCADA System on the NetBeans Platform

Zapli SCADA is developed by Apli in Bratislava, Slovakia, on NetBeans Platform 8.1.

The application is a client-server, with an unlimited number of clients. The primary communication protocol used to communicate with PLCs is Bacnet/IP, though the system can support many other protocols too. The big advantage of this system over classical black box SCADA systems is the full accessibility of the source code for each component, so that the features of the system are constrained only by the limits in terms of knowledge and skill of the developer team. Interesting features include the fact that the system is able to generate alarms by means of a speech synthesizer. Moreover, you can write code for individual SCADA screens at runtime and all changes are immediately applied to the connected clients.

Zapli SCADA is used by Veolia energy in the energy district system of Petrzalka, which is the largest city district in Slovakia. The system is connected to more than 200 PLCs of various brands, with a total number of measurement points of more than 23 000, while these numbers grow as more locations are connected. Zapli SCADA is currently installed at a nuclear power plant and is used in a system for the disposal of nuclear waste.

Generally, SCADA is designed primarily for use with recurring technological units, such as boiler rooms and heat transfer stations. Unlike other conventional SCADA systems, Zapli SCADA doesn’t statically define point names in graphical sections. Instead, it uses a system of dynamic filters. By maintaining customized nomenclature it is possible to use the same graphical technology for multiple technological units, saving time and money. A built-in graphical editor is included, as well as the ability to distribute new features to clients without their needing to re-install or restart the application.

Monday Dec 28, 2015

Underwater Vehicle Design & Control on the NetBeans Platform

VCT specializes in underwater vehicle design and control. The organization has been serving the US Navy market since 1993 with hydrodynamic analysis and design expertise on towed systems, torpedoes, swimmer delivery vehicles, unmanned underwater vehicles, underwater gliders, and submarines. 

The NetBeans Platform is the basis of the VCT software. 

The VCT Data Review Tool provides quick processing and visualization of all VCT vehicle data:

The VCT Operator Console provides the user interface for all VCT vehicles: 

For more details, go here: http://www.vctinc.com

For a similar story, go here: https://blogs.oracle.com/geertjan/entry/netbeans_software_for_explosive_ordnance

Wednesday Dec 23, 2015

Mobile Advertizing Client on the NetBeans Platform

Adsperity is a platform for creating mobile advertizing.

To help its users, Adsperity has a "robust desktop client that puts everything you need to create ads right at the tip of your mouse. Just drag and drop the campaign assets you already have into the client to create your ads. The client automatically creates all necessary coding so all you have to worry about is getting your message right."

The robust desktop client is clearly created on the NetBeans Platform, making use of its Window System, Visual Library, and much more:

Sometimes the question is asked whether the NetBeans Platform is only used in back office scenarios, i.e., whether there are use cases for the NetBeans Platform where it is the basis of applications used by non-technical end users, rather than experts, programmers, or internal staff. Well, the above is one example.

Tuesday Dec 22, 2015

Hong Kong Trading & Settlement Systems on the NetBeans Platform

Wise Information Service Engineering Ltd. is engaged in the development and service provision of financial related application solutions.

The primary products are trading and settlement systems of financial products which are targeted for brokerage firms in Hong Kong.

The existing trading and settlement systems are used to streamline operations of financial institutions and can cover the whole lifecycle of trading and settlement processes from order placing, risk management, and settlement to compliance.

The NetBeans Platform is used to develop the client side GUI of the stock trading platform, named "WiseTrade". The NetBeans Platform helps primarily because it is easy to save UI layout settings without needing extra code. 

Screenshots:

Similar applications on the NetBeans Platform: https://platform.netbeans.org/screenshots.html#financial

Monday Dec 21, 2015

Preview: Multicursor Selection in NetBeans IDE (Part 2)

In Part 1, I mentioned we're working on multi-cursor selection (also known as "multi caret support"). Now, you too, can try it!

Watch the screencast, a quick 5 minutes, as an introduction:

Go here, as explained above, to try it too:

http://deadlock.netbeans.org/job/NB-for-editor_multi_caret/lastSuccessfulBuild/artifact/dist/zip/

Details:

http://wiki.netbeans.org/EditorPlan82#Multiple_Caret_Editing

This is great work done over a long period by NetBeans engineers Ralph Ruijs and Miloslav Metelka. 

Saturday Dec 19, 2015

Oracle JET Enhancements for NetBeans IDE

I've been doing quite a bit of work, in many different ways, with Oracle JET (http://oraclejet.org) over the past months, at quite a lot of conferences, meetups, and on-line things, etc.

And, in doing so, I've been focusing a lot on doing code demos, i.e., live coding, with NetBeans IDE, showing how to set up Oracle JET applications, how to create modular Oracle JET applications, how to integrate Oracle JET components from the on-line Cookbook, etc.

NetBeans IDE clearly provides a range of helpful features to simplify working with Oracle JET. Nevertheless, it can always be better.

Here are issues I have filed over the past few days to make NetBeans IDE even better for developers using Oracle JET:

These are mostly pretty small enhancements, all quite doable. Does anyone out there getting familiar with Oracle JET see other areas in NetBeans IDE where its support could be even better?

Go here to file your enhancement requests, a special category for Oracle JET enhancements and bugs in NetBeans Bugzilla:

https://netbeans.org/bugzilla/enter_bug.cgi?product=javascript&component=OJET

Friday Dec 18, 2015

Oracle WebLogic Server in the Cloud with NetBeans IDE

Today my colleague Frank Brink introduced me to Oracle WebLogic Server in the Oracle Cloud, while I introduced him to NetBeans IDE.

Here you see in the Services window that I have made a connection to the server, which is made available by the Oracle Java Cloud Service. We also deployed two applications to the server in the Cloud, the ones highlighted below, from NetBeans IDE, while the others below were already there:

The view in NetBeans above is an accurate reflection of the deployed apps, which I can see in the browser, by looking at the Administration Console of Oracle WebLogic Server in the Cloud:

However, there are 4 managed server instances, while from NetBeans IDE you're not able to see or select them. I.e., NetBeans IDE needs to have an extra subnode within the server's node in the Services window to show the server instances, as well as the possibility to select the one you want to deploy to:

In the absence of the above functionality, applications deployed from NetBeans IDE are always deployed to the first instance, which can inconveniently end up being an administration instance, as you can see below:

However, after deployment, you can reconfigure the instance to which an application is deployed, i.e., you can correct deployment so that the correct instance is used.

Nevertheless, NetBeans IDE needs to have more finegrained support for server instances, as outlined above, and I'll be making an issue about this soon.

Wednesday Dec 16, 2015

YouTube: Using the Base Distribution of Oracle JET

I've found it really handy to start with the base distribution of Oracle JET, rather than the quick start basic template. I did this demo last night at Transfer Solutions, as reported yesterday. Here's how:

Tuesday Dec 15, 2015

Oracle JET at Transfer Solutions

I did an overview this evening of Oracle JET, at Oracle partner Transfer Solutions in Leerdam, the Netherlands.

Staff from Transfer Solutions attended, as well as developers and consultants from several other organizations. 

I did several demos, all using NetBeans IDE 8.1, while showing off all the cool NetBeans features for Require, Knockout, and JET, as well as the NetBeans Connector plugin for Chrome. My approach, I've done this kind of overview a few times now, is to first demonstrate Require, then demonstrate Knockout, then demonstrate responsive JavaScript... and only then demonstrate JET itself. In this way, the key pieces are introduced, enabling the point to be made that JET is a very thin layer of JavaScript components, and a few other handy techniques and solutions, on top of a set of well established open source libraries. I also spent a lot of time going through all of the many resources, examples, cookbook snippets, etc etc etc, offered by the Oracle JET website.

Speaking to attendees during and after the session—who had never seen Oracle JET in action before—what's especially appreciated about Oracle JET is that it is based on existing solutions, rather than re-inventing the wheel, as well as the nice architecture/structure that Oracle JET gives you out of the box. A true enterprise solution in the JavaScript jungle. 

Here's the slides:

http://www.slideshare.net/GeertjanWielenga/oracle-jet-enterpriseready-javascript-toolkit

And... good news. Transfer Solutions is offering a course on Oracle JET. The first course offered on Oracle JET, in the world, I believe:

(I blocked out the discount code above, since it's only for those who attended the session!) 

It was a good evening, hoping to be there again soon, as well as anywhere else where there's interest in this new JavaScript toolkit.

Thursday Dec 10, 2015

Farewell to Space Consuming Weird Tabs (Part 2)

Hermien Pellissier recently left a comment in a popular blog entry of mine from 2006 entitled "Farewell to Space Consuming Weird Tabs":

"I had trouble getting this to work with Java 8 too. So I decided to debug, and suddenly it just worked. This meant that it had to be a timing issue, quite possibly related to module load order. The solution that works for me as my code stands right now, is to add a Thread.sleep(500); before the UIManager.put() call."

I tried this today, since I've been having trouble as well since NetBeans IDE 8.1, which kind of makes sense since several internal changes have taken place within the NetBeans Platform for the NetBeans IDE 8.1 release (these changes have almost no impact, mainly focused on splitting up modules in new ways, rather than actual NetBeans API changes).

It didn't completely do the trick for me. Below is what's needed, as far as I can see. The @OnShowing is applicable for the first time the application starts up, i.e., with a fresh user directory. The @OnStart, together with the brief sleep, is what's needed for subsequent startups, i.e., at this point one or more TopComponents may already be open in the "editor" position and the @OnShowing will not be called anymore for those TopComponents, since they're already showing. Therefore, the @OnStart is needed, with the sleep (thanks Hermien), to ensure that the code is run again, thus hiding the tabs for those TopComponents that have already been opened.

import static java.lang.Thread.sleep;
import javax.swing.UIManager;
import org.openide.modules.OnStart;
import org.openide.windows.OnShowing;

@OnShowing
@OnStart
public class ModuleInstall implements Runnable {

    @Override
    public void run() {
        try {
            sleep(500);
        } catch (InterruptedException ex) {
        }
        UIManager.put("EditorTabDisplayerUI", "org.aa.core.NoTabsTabDisplayerUI");
    }

}

The complete sample is here:

https://github.com/GeertjanWielenga/AwesomeApp

How to use it: Git the sample, open into NetBeans IDE 8.1, run the application, go to Window | Web | Web Browser. The Web Browser should open, without showing a tab, since it opens in the "editor" position. Then leave the Web Browser open and close the application, don't clean it, i.e., don't remove the 'build' folder, which contains the user directory including the setting that the Web Browser should automatically be reopened by the NetBeans Platform because you didn't close it before closing the application; simply run it again and notice that the Web Browser is automatically opened, i.e., restored to how you had it when the application closed, while noticing especially that the Web Browser doesn't show a tab after the restart of the application. If you leave comments here saying "this doesn't work for me" and I find out you haven't got hold of the above app and actually tried it out, i.e., using my app, not yours, but mine first, I'll be very sad. Not angry, just really sad. Don't make me sad. Just actually git the sample, run it, confirm that it works there, and only then try to apply this solution to your own applications.

Wednesday Dec 09, 2015

Mona Lisa: Communication Sample for NetBeans Platform Developers

"Mona Lisa" is an example application created during a recent NetBeans Platform course at a company in Leipzig, Germany. It simulates aspects of an application being developed at that company. (That's one of the benefits of taking a NetBeans Platform course: small custom applications are developed by the trainers to help you work out parts of your own applications on the NetBeans Platform.)

Above you can see multiple windows are open. In the editor mode, multiple different images have been sliced up (the basis of that logic is here in this blog).

  • The navigator in the right side of the application keeps track of the currently active window and displays a node hierarchy built from the puzzle pieces in the currently active window.

  • When a puzzle piece is hovered over, the navigator correctly shows the matching node.

  • When a node is selected, the currently active window correctly shows the matching puzzle piece.

The communication above works correctly though there may still be some problems. I will make a YouTube screencast soon to explain how everything works.

Here is where anyone is freely able to access the above on GitHub:

https://github.com/GeertjanWielenga/MonaLisa.git

How to use it? Download the sources from the above location, open into NetBeans IDE 8.1, run the application, go to File | Open Image, selected one or more images, each image will be sliced up and opened into a dedicated window; then go to Window | PuzzleNavigator to open the navigator. Select a node, hover over a puzzle piece, and the related node or puzzle piece will be highlighted.

Requests to change/add new functionality are more than welcome.

Tuesday Dec 08, 2015

Oracle JET and DukeScript at Amsterdam University of Applied Sciences

At Amsterdam University of Applied Sciences, last week, where Ralph Ruijs (from the NetBeans Team, with his NetCAT wearing back to the camera in the pic below) teaches software development, I presented Oracle JET and DukeScript last week.

The slides: http://www.slideshare.net/GeertjanWielenga/surviving-life-in-the-javascript-ecosystem

Monday Dec 07, 2015

Part 5: Using Default Configurations with Oracle JET

In this series, as well as in the "Oracle JET QuickStart Basic Template", there's a "main.js" file providing the Require.js main entry point, including this content:

oj.ModuleBinding.defaults.modelPath = 'modules/';
oj.ModuleBinding.defaults.viewPath = 'text!../templates/';
oj.ModuleBinding.defaults.viewSuffix = '.tmpl.html';

Usage of the above requires the "ojs/ojmodule" component from Oracle JET and enables you to specify the location of the JavaScript files and HTML files, as well as the suffix of the HTML files. The above is an abbreviated Oracle JET format of standard functionality provided by Require.js, e.g., for the "text!" syntax that you see above, take a look at the Require.js Text plugin.

The above specific configurations entail that your custom Oracle JET modules will be split, JavaScript files being found in the "modules" folder and the HTML files being found in the "templates" folder, with "tmpl" as the suffix of those HTML files, as shown below:

However, what's the point of conventions if you end up overriding them? Soon the QuickStart Basic Template will start using the default configuration settings, which means that the settings above will not be needed.

http://www.oracle.com/webfolder/technetwork/jet/jsdocs/oj.ModuleBinding.html

Go to the above link and you'll see the default location for the ojModule framework paths, which are "js/views" and "js/viewModels".  The default viewSuffix is just ".html" as well.  

If you place all your templates and JavaScript files in those appropriate directories, and name the templates with just .html instead of .tmpl.html, then you don't have to do any of those three lines with which this blog entry started.

The above is how this series, and all blog entries and other documentation I will be writing, will be structured from this point onwards. 

Saturday Dec 05, 2015

Part 4: Routing with Oracle JET

The next topic to look at, following on from part 1, part 2, and part 3, is routing. Oracle JET comes with its own comprehensive and well-documented routing solution, as well as comprehensive and well-documented integration with the popular Crossroads routing library.

Especially when you're creating a single page application, it is useful to have a built-in solution for navigating from page to page, and for enabling the 'back' and 'forward' buttons in the browser to work as the user would expect. That's what the topics of 'routing' and 'history' are all about and Oracle JET has built-in solutions for this, which are very well documented at the links above, within the freely available on-line Oracle JET Cookbook.

There are really a whole range of different finely tuned routing solutions available for Oracle JET. In this part of the series, we're going to use the query parameter URL adapter (read that section to understand the below), as can be seen in the screenshot below, when you look at the URL:

This is exactly how it is done in the "QuickStart Basic Template", so all we're doing below is transferring that code to the "Base Template" example we've been building on in this series of articles about Oracle JET.

The URL can be shown in different ways, i.e., if you're not using the query parameter URL adapter, you'd see this instead of the above:

Let's get started working with routing in Oracle JET. 

  1. Start by rewriting the function in "main.js" to the following:
    require([
        'ojs/ojcore', 'knockout', 
        'jquery', 'ojs/ojknockout', 
        'ojs/ojbutton', 'ojs/ojtoolbar', 
        'ojs/ojrouter',
        'ojs/ojmodule','ojs/ojmenu'], 
            function (oj, ko, $) 
            {
                oj.ModuleBinding.defaults.modelPath = 'modules/';
                oj.ModuleBinding.defaults.viewPath = 'text!../templates/';
                oj.ModuleBinding.defaults.viewSuffix = '.tmpl.html';
                
                var router = oj.Router.rootInstance;
                router.configure({
                    'home': {label: 'Home', isDefault: true},
                    'projects': {label: 'Projects'},
                    'about': {label: 'About'}
                });
    
                function RootViewModel() {
                    var self = this;
                    self.router = router;
                    self.optionChangeHandler = function (event, data) {
                        if (data.value === undefined) {
                            data.value = 'home';
                        }
                        // Only go for user action events
                        if ('ojAppNav2' === 
                                event.target.id && 
                                event.originalEvent) {
                            self.router.go(data.value);
                        }
                    };
                }
                oj.Router.defaults['urlAdapter'] 
                        = new oj.Router.urlParamAdapter();
                oj.Router.sync().then(
                        function () {
                            //bind your ViewModel for the content 
                            //of the whole page body.
                            ko.applyBindings(
                                    new RootViewModel(), 
                            document.getElementById('globalBody'));
                            $('#globalBody').show();
                        },
                        function (error) {
                            oj.Logger.error(
                                    'Error in root start: ' + 
                                    error.message);
                        });
            }
    );

  2. Now use "router.stateID()" in the "index.html" file (highlighted in bold below) to enable the router to control the loading of the JavaScript module when the user clicks in the "ojNavigationList" component:
    <body>
        <div id="globalBody" style="display: none">
            <div id="appDrawer" class="oj-offcanvas-start">
                <div 
                    data-bind="ojModule: {
                    name: 'header', 
                    viewName: 'demoAppHeaderOffCanvasTemplate'}">
    
                </div>
            </div>
            <header data-bind="ojModule: { name: 'header'}"></header>
            <div class="oj-row">
                <div class="oj-xl-9 oj-lg-9 oj-sm-12 oj-col"> 
                    <div data-bind="ojModule: { name: router.stateId()}"></div>
                </div>
            </div>
        </div>
    </body>

  3. In "header.tmp.html" and in "demoAppHeaderOffCanvasTemplate.tmpl", use "optionChange: $root.optionChangeHandler" in the "ojNavigationList" component to refer to the change handler that you set up when you created the router in the "main.js" file. For example:
    <div id="ojAppNav2" 
         data-bind="ojComponent: {component: 'ojNavigationList', 
            drillMode: 'collapsible', 
            data: $data.dataSource,
            optionChange: $parent.optionChangeHandler,
            item: { template: 'app_nav_template' }
            }" 
         >
    </div>

  4. Finally, in "header.js" make sure you set the "id" attribute of the content of the "datasource" property, as shown below:
    var appNavData = [
        {name: 'Home', id: 'home'},
        {name: 'Projects', id: 'projects'},
        {name: 'About', id: 'about'}
    ];
    self.dataSource = 
            new oj.ArrayTableDataSource(
                    appNavData, 
                    {idAttribute: 'id'});
And that's the basic procedure for hooking up a routing mechanism into your application, which in this case means integrating a router into the "ojNavigationList" component, via its "optionChange" attribute.

Friday Dec 04, 2015

Part 3: Responsive Navigation with Oracle JET

Taking yesterday's blog entry as a starting point, where you learned how to create a modular Oracle JET application, let's continue by looking at responsive design using the ojNavigationList component together with the Offcanvas component.

What we want to achieve here is that when the resolution is large, a navigation list should appear along the top right, which below consists of "Home", "Projects", and "About":

However, when the resolution is narrow, i.e., for display on mobile devices, we want the navigation list to turn into a button in the top left, shown in the first screenshot below, which, when clicked, should expand to the navigation list shown in the second screenshot below:

When the resolution enlarges again, the button and the navigation list shown in the two screenshots above should disappear and everything should magically return to the navigation list shown in the first screenshot, i.e., the screenshot above the two mobile-oriented screenshots.

The above is a typical business requirement for a browser-based application and Oracle JET provides everything you need to achieve the above.

Here are new/changed files that we'll be working with in this blog entry, building on from yesterday:

To get to the above point, let's start with the "header" module that you see above, consisting as always of a JavaScript file with a matching HTML file, after which we'll hook it into the "index.html" file.

  1. Create the "header.js" file, in the "js/modules" folder:
    define(['knockout',
        'ojs/ojcore', 
        'ojs/ojknockout', 
        'ojs/ojnavigationlist', 
        'ojs/ojoffcanvas', 
        'ojs/ojdatacollection-common' 
    ], function (ko, oj) {
        function HeaderViewModel() {
            var self = this;
            self.offScreenButtonIconClass = "oj-fwk-icon oj-fwk-icon-hamburger";
            self.appDrawer =
                {
                    "edge": "start",
                    "displayMode": "push",
                    "selector": "#appDrawer",
                    "selection": "selectedItem"
                };
            var appNavData = [{name: 'Home'},{name: 'Projects'},{name: 'About'}];
            self.dataSource = 
                new oj.ArrayTableDataSource(appNavData, {idAttribute: 'id'});
            self.toggleAppDrawer = function ()
            {
                return oj.OffcanvasUtils.toggle(self.appDrawer);
            };
            //
            // Close off-screen content once window becomes larger.
            //
            var query = window.matchMedia("(min-width: 39.375rem)");
            var mqListener = function (event)
            {
                oj.OffcanvasUtils.close(self.appDrawer);
            };
            query.addListener(mqListener);
        }
        return HeaderViewModel;
    });

    There's several aspects to be aware of above. For example, notice how the data is loaded and also the OffcanvasUtils usage.

  2. Create the "header.html" file in the "templates" folder:
    <div class="demo-appheader">
        <div class="oj-row demo-appheader-classic">
            <div class="oj-col demo-appheader-col">
                <div class="oj-row">
                    <div class="demo-off-canvas-toggle demo-appheader-toggle-button">
                        <button class='oj-button-half-chrome demo-appheader-toggle-button'
                                data-bind="click:toggleAppDrawer,
    			     ojComponent: {component:'ojButton', 
                                        display: 'icons', 
                                        icons: {start: offScreenButtonIconClass}} ">
                        </button>
                    </div>
                    <div>
                        <div id="ojAppNav2" class="demo-appheader-nav 
                             oj-lg-condense 
                             oj-lg-justify-content-center 
                             oj-xl-condense 
                             oj-xl-justify-content-flex-end" 
                             data-bind="ojComponent: {component: 'ojNavigationList', 
                                  drillMode: 'none', 
                                  edge: 'top', 
                                  selection: null,
                                  data: dataSource,
                                  item: { template: 'app_nav_template' }
                                  }">
                        </div>
                    </div>
                </div> <!-- oj-row -->
            </div> <!-- oj-col -->
        </div> <!-- oj-row -->
    </div> <!-- demo-appheader -->
    <script type="text/html" id="app_nav_template">
        <li>
            <a href="#">
                <!-- ko text: $data['name'] --> <!--/ko-->
            </a>
        </li>    
    </script>

    In the above, the important bits are ojButton, ojNavigationList, and the navigation template that renders the text in the navigation list.

  3. Next, create "demoAppHeaderOffCanvasTemplate.tmpl.html" file in the "templates" folder. Automatically, you'll switch to this ojNavigationList, which has its "drillMode" set to "collapsible", whereas the rest of it is the same as the above.        
    <div id="ojAppNav2" 
         data-bind="ojComponent: {component: 'ojNavigationList', 
            drillMode: 'collapsible', 
            data: $data.dataSource,
            item: { template: 'app_nav_template' }
            }" 
         >
    </div>
  4. Finally, let's hook the above together into the "index.html" file. Rewrite the content of the "body" element, from yesterday, to the below:
    <body>
        <div id="appDrawer" class="oj-offcanvas-start">
            <div data-bind="ojModule: {
                        name: 'header', 
                        viewName: 'demoAppHeaderOffCanvasTemplate'}">
    
            </div>
        </div>
        <header data-bind="ojModule: { name: 'header'}"></header>
        <div class="oj-row">
            <div class="oj-xl-9 oj-lg-9 oj-sm-12 oj-col"> 
                <div data-bind="ojModule: { name: 'home'}"></div>
            </div>
        </div>
    </body>

    In the above, notice "demoAppHeaderOffCanvasTemplate", which references the file you created in step 3 above, which is what will be shown in the Offcanvas component.

That's it. Read the above code carefully, cross-reference it with the information in the Oracle JET Cookbook, and you'll be on your way creating a typical feature in responsive browser-based applications.

A related topic is routing, which is also provided for by Oracle JET, which we'll look at next time. 

Thursday Dec 03, 2015

Part 2: Modular Development with Oracle JET

Starting from yesterday's blog entry, which introduced the Oracle JET Base Distribution, let's learn how to do modular development with Oracle JET. After all, the promise of Oracle JET is enterprise-ready features, including modularity. If you're familiar with Knockout.js and Require.js, modular development with Oracle JET is a piece of cake.

Take the app that you ended up with at the end of yesterday's blog entry. Add a JavaScript file named "home.js" in a new folder "js/modules". Add an HTML file named "home.tmpl.html" in a new folder "templates". In this blog entry, we'll be working with the two new files that you have now created, as well as with the "main.js" file and the "index.html" file. These files are highlighted below and are the only files you'll be working with in this blog entry, in which you'll get familiar with modularity in Oracle JET.

Start by watching this YouTube clip I made earlier this year, which introduces component-based development in Knockout.js:

https://www.youtube.com/watch?v=C_z_wN-BGIw

OK, with the above basis, what we're going to end up doing in the "index.html" is this:

<div data-bind="ojModule: { name: 'home'}"></div>

Notice that the name of the module declared in the "index.html" matches the name of the HTML file, as well as the name of the JavaScript file. Convention over configuration, hurray. Look again at the YouTube clip above and notice how closely the syntax of an Oracle JET module matches that of a Knockout component.

Ultimately, in your "index.html", you'll be able to divide up your page very cleanly, something like this, for example:

<div class="oj-xl-3 oj-lg-3 oj-sm-12 oj-col">
    <header data-bind="ojModule: { name: 'header'}"></header>
</div>
<div class="oj-xl-6 oj-lg-9 oj-sm-12 oj-col"> 
    <div data-bind="ojModule: { name: 'home'}"></div>
</div>
<div class="oj-xl-3 oj-sm-12 oj-col"> 
    <footer data-bind="ojModule: { name: 'footer'}"></footer>
</div>

Note: The "header" and "footer" HTML elements above are part of the new semantic elements in HTML5, which help to make your HTML more readable.

OK, let's get started. Take the following steps:

  1. At the end of your "main.js" file, you have an empty placeholder function, which receives three variables. Fill out that function as follows:
    function (oj, ko, $)
    {
        oj.ModuleBinding.defaults.modelPath = 'modules/';
        oj.ModuleBinding.defaults.viewPath = 'text!../templates/';
        oj.ModuleBinding.defaults.viewSuffix = '.tmpl.html';
        function RootViewModel() {
        }
        $(document).ready(
            function ()
            {
                ko.applyBindings(new RootViewModel());
            }
        );
    }

    To understand the above, read Using Knockout.js Templates and the ojModule Binding and Namespace: ModuleBinding.

    What you've done above is specify the location of the modules, i.e., the JavaScript files and their matching HTML views, as well as the suffix of the views. Notice that they point to the folders you created earlier. Automatically, the modules you define will be loaded on demand, i.e., when they are used, into your application. (And what's that "text!" syntax all about? Well, that's simply the requirejs/text plugin, also used in an earlier blog entry of mine here.)

    The "RootViewModel" is a dummy ViewModel, a placeholder for more code, and needed to initialize the application here.

  2. Now let's add some content to the "home" module that you've created. Put this into "home.js":
    define(['ojs/ojcore' ,'knockout'
       ], function(oj, ko) {
                function homeContentViewModel() {
                    var self = this;
                    self.something = ko.observable("Hello World");
                }
       return homeContentViewModel;
    });

    And here's a simple HTML view, for "home.html":

    <h1>Home Content Area</h1>
    <div data-bind="text: something"></div>

And now you can use the single HTML element shown earlier, in your "index.html" file.

Tip: Read the free Developing Applications with Oracle JET.

Wednesday Dec 02, 2015

Part 1: Starting with the Oracle JET Base Distribution

Normally, when you start with Oracle JET, you use the "QuickStart Basic Starter Template". That's also bundled into the Oracle JET plugin for NetBeans IDE and is the way most people begin with Oracle JET.

But there's a simpler starting point to explore. When you're on the Oracle JET Downloads page, take note of the first item in the list, "Base Distribution", as can be seen below:

When you download that ZIP file, you get no sample at all. Instead, you simply get folders named 'css', 'js', and 'scss'. These folders contain the open source libraries making up JET, the JET components, and the JET stylesheets.

The Base Distribution might be a simpler way to get started with JET than to use the "QuickStart Basic Starter Template".

Here's how to start using the Base Distribution:

  1. In NetBeans IDE, go to File | New Project. Choose HTML5/JavaScript in "Categories". Choose "HTML5/JS Application" in "Projects". Click Next. Give your project a name, e.g., "MyApp". Click Next. In "Select Template", browse to the ZIP file you downloaded above, containing the Base Distribution: 



    Click Next. Uncheck everything, unless you're going to be using Gulp, Grunt, etc. Though you can change your mind later and add those files as needed.

  2. When you click Finish above, the ZIP file will be unzipped. This may take a few minutes because there's a lot of unzipping to do, since there are several libraries involved, e.g., Knockout, Require, JQuery, that all need to be unzipped. Then you'll have this:



  3. Now, here's a really cool thing. Go to the "js/libs/oj/v1.1.2" folder and you'll find a file named "main-template.js".



    It is a fully configured RequireJS configuration file, good to go out of the box. Copy it into the "js" folder and name it "main.js".

  4. Next, let's set up our "index.html" file. Expand the "css/libs/oj/v1.1.2/alta" folder. There you'll find the "oj-alta-min.css" file. Drag and drop it below the meta tags near the top of the "index.html" file. Then register your "main.js" file as the entry point for your RequireJS usage:
    <script data-main="js/main" src="js/libs/require/require.js"></script>

    You'll now have this:

    <!DOCTYPE html>
    <html>
        <head>
            <title>TODO supply a title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="css/libs/oj/v1.1.2/alta/oj-alta-min.css" 
                  rel="stylesheet" 
                  type="text/css"/>
            <script data-main="js/main" 
                    src="js/libs/require/require.js">
            </script>
        </head>
        <body>
            <div>TODO write content</div>
        </body>
    </html>
  5. At this point, you can go to the Oracle JET Cookbook and copy/paste content into the "index.html" file and into the "main.js" file. For example, the Pie Chart component can easily be integrated like this. It's a simple beginning. But it's a very clear and effective approach.

    Once you have added some more content, go to File | Export Project in the main menubar and then you'll have a new ZIP file, containing your more extensive template, which you can then use later again as a basis or share with your colleagues as needed.

The above steps I will turn into a YouTube clip soon.

Tuesday Dec 01, 2015

How to Use JavaScript Libraries in Maven Projects

Let's work lay out a structured approach for working with JavaScript libraries in Maven projects. In doing so, I am responding to this question by Brett Ryan in Australia on the NetBeans Users mailing list.

The project discussed below can be found here on GitHub:

https://github.com/GeertjanWielenga/BowerPOM

Here you can see the solution incorporates Bower, together with Maven, i.e., there's a "bower.json" file as well as a "pom.xml" file. In the Bower file you can see that two JavaScript libraries are listed as dependencies:

The ".bowerrc" file is a standard Bower file that specifies the location where the JavaScript libraries will be downloaded. The default provided by the template in the New File dialog in NetBeans IDE 8.1 provides the correct location, shown below:

Both the above files are created via templates in the New File dialog and the default location suggested by the New File dialog puts these files into the same location where the "pom.xml" file is found, that is, the root of the Maven project.

After doing the above, notice the small yellow warning icon on the project icon in the Projects window:

Note: Notice how NetBeans IDE 8.1 shows "Java Dependencies" and "Bower Libraries" in the project view of Java EE Maven projects. That's a really handy feature, being able to see all your dependencies, from the back to the front, in one place, as well as the entry points provided by the RESTful Web Services.

Hover over the icon and notice that NetBeans IDE tells you that the registered JavaScript libraries have not yet been downloaded:

In the Project Properties dialog, notice that you can find JavaScript libraries to be registered by NetBeans IDE in your Bower file:

Right-click on the project node and choose "Bower Install" (or "Resolve Project Problems") and NetBeans IDE will download the JavaScript libraries for you and put them in the location specified in the ".bowerrc" file:

Then drag and drop the JavaScript files you need into the HTML file, as shown below, i.e., you can see the references point to the location specified in your "bower_components" folder, which was created by NetBeans IDE via its usage of Bower:

In this particular example, you have a Java EE application that exposes data from the Sample database and a JavaScript client that consumes and renders the data:

If you're going to play with this specific example, make sure that your application server supports Java EE 7 and that you have started up the Sample database that comes with GlassFish and is shown in the Databases node in NetBeans IDE.

Monday Nov 30, 2015

Preview: Multicursor Selection in NetBeans IDE (Part 1)

It may seem like a small feature, but integrating multicursor selection into an editor that doesn't support it from the beginning is a lot of work.

However, especially since many/most other editors have this feature, many NetBeans users have been asking for this in NetBeans, for many years.

A very rough little preview below, taken with my phone while Ralph, who is working on it, shows it below (no audio):

The plan is that you'll select something, press Alt-Shift, and then select something else, and then where you have selected at that point you'll see your next cursor, etc.

Tuesday Nov 24, 2015

YouTube: Graal VM Multilanguage Shell

Watch a quick screencast showing Christian Humer from Oracle Labs at JavaOne 2015 demonstrating the Graal VM FastR/Ruby/JavaScript interopability by means of the Graal VM Multilanguage Shell:

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

Archives
« February 2016
SunMonTueWedThuFriSat
 
2
6
7
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
     
       
Today