Wednesday May 20, 2015

NetBeans Day Twente

Today NetBeans Day was held in Twente, which is an area in the east of the Netherlands, with a high population of grass and farm animals. The turnout was great, exactly as expected, though the narrow focus on MooTools, while relevant for the audience, limited active participation to cows only:

The photo above was taken during the workshop "JavaScript Developers Are Basically Sheep", which had as a subtitle "Weakly Typed Languages Are For The Birds".

Did you miss NetBeans Day Twente? Not to worry, there's NetBeans Day UK coming up end of this month and NetBeans Day Brazil end of the next!

Monday May 18, 2015

Knockout Simplicity for Bootstrap.css (Part 2)

Continuing the theme from the previous blog entry, here's the current state of my 'menubar' component, i.e., this is all I need to put into an HTML file...

...to get this:

The above is a Bootstrap.css menubar, created from the Knockout component shown above.

The HTML below is the template that styles the menubar, notice that there's JavaScript logic, thanks to Knockout, within the template:

Finally, here's the business logic that connects the template to the component, which receives its parameters from the component:


Sunday May 17, 2015

Knockout Simplicity for Bootstrap.css (Part 1)

Imagine you need to create a menubar for your website:

If you had a choice, which of the two below would you choose as the way to express your menubar?

In both cases, you start by declaring Bootstrap.css:

<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

However, which of the two would you prefer to use, after you have added the stylesheet reference above?

Option 1:

Option 2:


Of course, it's up to you and I won't judge you either way. However, to me, option 2 is much simpler and more expressive. Plus, I can use it in any website where I need a menubar, i.e., it's a simple lightweight generic tag in my HTML ready to be used anytime I need a menubar. It also means I don't need to type all that error-prone HTML code and it is also a lot more readable, as well. It looks a bit like JSON, while option 1 is very heavily loaded with angle brackets and other superfluous noise.

Option 2 is a Knockout component.

It is created like this, in my 'appViewModel.js' file:

ko.components.register("menubar", {require: 'components/menubar/menuBar'});

The above points to a JavaScript file named 'menuBar.js', which has this content:

define([], function () {
    function MenuBarModel(params) {
        self.menus = [];
        for (var key in params) {
            if (key.substring(0, 3)==('tab')) {
                self.menus.push(params[key]);
            }
        }
    }
    return {
        viewModel: MenuBarModel,
        template: {
            require: 'text!components/menubar/menuBar-template.html'
        }
    };
});

Above you see the 'template' binding points to an HTML file, which has this content:

<div class="navbar">
    <div class="navbar-inner">
        <ul class="nav" data-bind="foreach: menus">
            <li data-bind="css:  { active: $data.substring(0,1) == '*' }">
                <a data-bind="attr: { href: $data.substring($data.indexOf('/')+1) }">
                    <span data-bind="text: $data.substring(1,$data.indexOf('/'))"/>
                </a>
            </li>
        </ul>
    </div>
</div>

And now you can make the menubar a lot fancier: http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp

By means of the above, we have a simple syntax to define (1) the active menu, (2) the name of the menu, and (3) the URL that is returned when the menu is clicked. The Knockout 'menubar' component figures all these things out under the hood so that the user of the menubar doesn't have to think about it themselves. They simply specify the values that should be passed into the component and the component parses the value and figures out what to do with it.

The above provides a simple and comprehensive architecture for component-based development with JavaScript.

Friday May 15, 2015

require.config with Knockout in NetBeans

The application structure discussed yesterday is as follows:


Thanks to require.config, here's a significantly cleaned up version of the code discussed yesterday in 'init.js':

require.config({
    baseUrl: './',
    paths: {
        knockout: './bower_components/knockout/dist/knockout',
        text: './bower_components/requirejs-text/text',
        appViewModel : './scripts/appViewModel'
    },
    waitSeconds: 2
});
require(['knockout', 'appViewModel', 'text'], 
   function (ko, appViewModel) {
     ko.applyBindings(new appViewModel());
   }
);

Putting the above together was simplified via the code completion and documentation in NetBeans:

What's also pretty handy is that you can see all the available configurations when you call up code completion before the start of a word within a 'require.config' block:


And here's the 'appViewModel', also significantly cleaned up, thanks to the 'require.config' in the 'init.js' above:

define([
    'knockout',
    'text'
],
function (ko) {
    return function appViewModel() {
        ko.components.register("user", {
            viewModel: function (params) {
                this.firstName = ko.observable(params.firstName);
                this.lastName = ko.observable(params.lastName);
                this.fullName = ko.pureComputed(function () {
                    return this.firstName() + " " + this.lastName();
                }, this);
            },
            template: {require: 
                'text!files/user-template.html'}
        });
    };
});

Again, notice the editor support below, not only syntax coloring, but when you hold down the Ctrl key and move your mouse over the file reference in the 'text' binding, in line 16 below, the reference becomes a hyperlink, which can be clicked to open the related file.


As shown yesterday, the final step of this scenario is to actually make use of the 'user' component in the view, where again NetBeans has helpful code completion to support you:

The application is modulerized and wired together via RequireJS, with its 'data-main' attribute, e.g., in the 'index.html', where the above is found, there is also the below, providing the entry point into the application, which is the 'init.js' file with which this blog entry started:


More on RequireJS (sorry for the poor audio): https://www.youtube.com/watch?v=v4jnTWFihMU

Thursday May 14, 2015

How to Separate HTML Templates in Knockout Apps

A problem with the solution discussed in the recent YouTube clip about component-based Knockout.js development is that you end up with your HTML template embedded in your JavaScript file, as shown below:

From a tooling perspective, the above is suboptimal because you're not able to benefit from code completion and syntax coloring that an HTML editor provides. One approach would be to create an extension to NetBeans that would somehow recognize the above construct as being HTML (i.e., if a "template" binding is encountered, treat everything that follows as HTML), which is doable and something I'll take a look into (using this as a starting point). And here's the initial result of looking into this, i.e., compare the string in the pic above to the string in the pic below; in the lower pic notice the HTML syntax coloring:


However, in a real Knockout application, you're more likely to separate out your HTML into separate files, thus making it possible to hand those HTML files over to your front-end designers, while you continue working separately on the business logic in your JavaScript files.

Starting with this useful article on the Knockout site, I restructured the application discussed in the YouTube clip so that its HTML is now separated out from the JavaScript, which has as an added benefit that all the Knockout support features available out of the box in NetBeans are available to you:

To get to the above point, I followed various articles where 'requirejs' and 'requirejs-text' are described. My application now looks like this:

And here's my 'appViewModel.js', which still has some work to be done to it (which is discussed here), i.e., I need to use 'require.config', which is the next topic I'll be looking at. However, in the meantime, here's how things are set up to get to the above point:

define([
    '../bower_components/knockout/dist/knockout',
    '../bower_components/requirejs-text/text'
],
function (ko) {
    return function appViewModel() {
        ko.components.register("user", {
            viewModel: function (params) {
                this.firstName = ko.observable(params.firstName);
                this.lastName = ko.observable(params.lastName);
                this.fullName = ko.pureComputed(function () {
                    return this.firstName() + " " + this.lastName();
                }, this);
            },
            template: {require: 
                '../../requirejs-text/text!../../../../../files/user-template.html'}
        });
    };
}); 

The rest is the same as here. Finally, as in the YouTube clip, you use the above defined 'user' component in your 'index.html' as follows, again supported by code completion and other Knockout-friendly features in NetBeans:


Wednesday May 13, 2015

YouTube: Component Based Development with Knockout.js

Knockout.js has some extremely handy facilities for doing component based development, as shown in this brand new YouTube screencast:

Tuesday May 12, 2015

Eclipse Recommenders for NetBeans IDE (Part 2)

Following on from part 1 of this series, here's two interesting screenshots to look at:

Above you see Eclipse code recommenders for NetBeans APIs, which is something Andreas Sewe and Marcel Bruch, from the Eclipse code recommenders project, have been working on, together with some NetBeans guys.

Also read Marcel Bruch's tweet on this topic: https://twitter.com/MarcelBruch/status/598187743634706432

Imagine how much easier it will make learning the NetBeans APIs if the code completion box, as shown above, recommends methods to you based on the API class you're currently coding against? Really useful, indeed.

Watch this space for further development.

Monday May 11, 2015

Selecting Content Between Braces with Ctrl-Shift-[

The question of the day comes from my colleague JB Brock who asks: "Is there some key combination (shortcut) in NetBeans that allows me to jump between an opening brace and closing brace, or even better, the ability to select everything between braces? I'm working in a JSON file and want to select a full object between { } braces.  Just looking to see if there is something that could make my life a little easier as I have 105 of these little sections that I need to strip out."

Here's how to do it. Below, notice that my cursor is on line 6, right before the opening brace, which means that its closing brace is helpfully highlighted so that you know which brace is the current opening brace's closing brace:

Now I press Ctrl-Shift-[ and this is the result:

Now you can press Ctrl-C to copy the selection to the clipboard.

In the next scenario, notice that my cursor is still in line 6, this time on the other side of the opening brace:


When I press Ctrl-Shift-[ in the above scenario, the selection covers everything excluding the opening and closing brace:

Now, again, press Ctrl-C and the content above is on the clipboard.

The above works in any other kind of file, as well, e.g., in Java, JavaScript, HTML, etc., which is precisely why it is great to have an integrated development environment—everything you know from one context has the potential to seamlessly be used in another context.

Thursday May 07, 2015

AspectJ and NetBeans IDE 8.0.2

Here's a very nice YouTube screencast created over the last day or two by Valhalla Data Systems about AspectJ support in NetBeans IDE 8.0.2.

Wednesday May 06, 2015

Spectingular

Spectingular is ING's AngularJS-based framework. Here's a fully automated way of getting started with it.

1. Create a new HTML5 application:

2. Use Bower to add Spectingular:

3. Drag-and-drop Spectingular.js into your index.html file:

That's it. You've added Spectingular to your application. 

Tuesday May 05, 2015

Where are the slides from the NetBeans Days?

NetBeans Days are happening all over the world.

"Oh, really, why aren't they happening in my country?" you ask. "Well, that's because I myself haven't set one up yet!" is how you should answer that question to yourself.

https://github.com/netbeansday

The slides are stored centrally in the above location (more will be added from previous and future NetBeans Days over time) and will be from hereon onwards! 

Monday May 04, 2015

Free New NetBeans Plugin Development Workshops

A start was made at a NetBeans plugin training session with members of the Nagpur JUG in India, as well as others in Pune, over the weekend.

Aatul Palandurkar, who leads the JUG, and who is a NetBeans Dream Team member, set up the session, and took the pic below.

Skype ended up being a bit of a problem and the plan is to have a larger session via Google+, together with the Oracle Technology Network.

If you're interested in free NetBeans plugin development workshops, to integrate your tools, frameworks, and technologies into NetBeans IDE, leave a message here or drop me a mail (at geertjan dot wielenga at oracle dot com). Note that these workshops are specifically focused on extending NetBeans IDE, not on creating your own applications on the NetBeans Platform.

Friday May 01, 2015

Eclipse Recommenders for NetBeans IDE (Part 1)

Wouldn't it be handy to know how other developers have used the Java API that you're learning about? Imagine that you're learning about java.util.List, you invoke code completion in your Java editor, and you see that 31.84% of users of the List class have used iterator() and, most usefully of all, that the most widely used methods on the List class were to be found right at the top of the code completion box, as shown below, in NetBeans IDE? Even if you're not learning about an API, instead you're using it in your daily development work, it's handy to have the most widely used methods of an API listed at the top of the code completion box.

Welcome to the world of Eclipse Code Recommenders.

Marcel Bruch, who leads this project, has a bunch of slides explaining it all here:

http://www.slideshare.net/Microbiotic/eclipse-code-recommenders-majug-2011

The obvious question is how those percentages are calculated. Marcel tells me: "We use example applications from the Eclipse Marketplace, Maven Central, and other public Maven repositories to build recommendation models. There is also a crowdsourcing approach in place where developers share their knowledge how they use these APIs. For companies, we use in-house code repositories like Nexus or VCS like SVN, Git etc."

Right now only JDK classes are available by default, i.e., if you call up code completion on some class that is not in the JDK, you will not get recommendations. I asked Marcel about that, i.e., "How can new libraries be added, right now only JDK libraries are included", and his response: "We're currently setting up co-operation with other companies to support models for other public frameworks. Primary focus will be on Java EE standard classes and Apache libraries."

A related question I had is how come the percentages add up to over 100%. His response: "The percentage says how likely it is that you will call a given method in your code. If you must call two methods, both methods will have 100%. Same with overrides—if you subclass a type and have to override two methods in there, both will have 100%."

If you'd like to try out these concepts in NetBeans IDE, there's an Update Center by Jan Lahoda that you can register in Tools | Plugins to install the plugins that provides this feature:

http://lahoda.info/hudson/job/nb-code-recommenders/lastSuccessfulBuild/artifact/build/updates/updates.xml

On GitHub:

https://github.com/jlahoda/nb-code-recommenders

Thursday Apr 30, 2015

Future Proof NetBeans IDE: Filter Out JavaScript Parser Errors

Yes, it's a crazy, crazy world, with each day so full of JavaScript.

React.js is the cool kid of the hour and, of course, in terms of end-to-end tooling, NetBeans IDE is great. In other words, you can set up your React.js application in seconds (and forget the command line completely), use Bower and NPM with it easily, you can debug it, run it into the browser, interact with it live in the browser, wrap it into a native Android or iOS app via integrated Cordova tooling, deploy to Android and iOS, etc etc etc. And all for free!

However, each of these new JavaScript frameworks comes with their own special (some might say "squirly") addition to the syntax of JavaScript, which breaks the editor, as shown below, i.e., click to enlarge the screenshot and then look at the error marks:

That makes the editor unusable for React.js and for whatever new JavaScript framework pops up over night to claim the "we are the coolest JavaScript framework in town" prize of the moment. Rather than running after each and every framework and providing tools for it and then finding that by the time the tools are released no one cares about the framework anymore, a simple solution is to let the user turn off the error marks in the JavaScript editor:

https://netbeans.org/bugzilla/show_bug.cgi?id=251797

Here's how it works, from the next release onwards, and already in development builds, i.e., not in NetBeans IDE 8.0.2, but in the next release. You'll simply click on one of the yellow lightbulbs and then NetBeans will offer a scope within which the error parsing should be disabled:

Right now, the above will result in the below:

Notice that there are still some error underlines, though everything else has been filtered out, which is being tracked here:

https://netbeans.org/bugzilla/show_bug.cgi?id=252179

Onwards to a future proof NetBeans IDE!

Monday Apr 27, 2015

Less Noisy NetBeans

Especially when you've tuned NetBeans to make it dark, it's helpful to be able to remove as much noise as possible. Spend less than 3 minutes learning how to do this!

Saturday Apr 25, 2015

Seamless Minecraft Forge in NetBeans

Minecraft Forge is a common open source API focused on allowing mods to be created without the need for the source code of Minecraft to be edited. 

Happy to report that Minecraft Forge works seamlessly in NetBeans IDE. Take the following steps:

  1. Download and unzip Forge 1.8 from http://files.minecraftforge.net/maven/net/minecraftforge/forge/1.8-11.14.1.1341/forge-1.8-11.14.1.1341-src.zip

  2. In the folder where you unzipped the above, run "gradlew setupDecompWorkspace --refresh-dependencies".

  3. Start NetBeans IDE (I am using NetBeans IDE 8.0.2). Go to Tools | Plugins and install "Gradle Support".

  4. Go to File | Open Project. Browse to the folder where you unzipped the above, which will now be recognized as a Gradle project. Open the project. Wait a moment for the Gradle plugin in NetBeans IDE to figure out the structure of the Gradle project you have opened.

  5. Right-click the Gradle project and go to Tasks | run | runClient. After a moment, Minecraft starts up!

Illustrative screenshot, click to enlarge it:

Next, you'll want to map the "runClient" task to the "Run Project" command in NetBeans IDE, so that running your mods is as simple as pressing F6. Right-click the project and choose Properties. The Project Properties dialog opens:

Click "Manage Built-In Tasks" above. Now look for "Run" and then type "runClient" in the Tasks field, as shown below:

Click OK. Press F6 (which is mapped by default to "Run Project") and the "runClient" task will be run! 

Congratulations to Attila Kelemen from Hungary, for making such a nice NetBeans plugin for Gradle. 

Now mod away

Friday Apr 24, 2015

Nashorn from the Perspective of the Java EE Developer

What is it that's interesting about Nashorn, which is now built into Java 8, for a Java EE developer?

Adam Bien's response:

First, Nashorn is just JavaScript in Java 8. A very fast one and very well integrated with Java. For a Java EE developer, the first interesting thing is automation. For instance, yesterday I had to find some problems in my log files, so I built a quick parser with Nashorn and Java 8, and it was a very pragmatic solution, it took me 20 minutes, and it was ready to go. Then, you know, deployment, starting servers. You can use Nashorn as a system scripting language, which is very very convenient. This is the most obvious and, I would say, least intrusive usage of Nashorn. Then, of course, you can embed Nashorn into your application. What you gain from that—flexible checks, validation rules, algorithms. It is easier to use Nashorn than to write your own parsers, for instance. And what you can also do, of course, is use Nashorn to start Java. One example would be—I created an integration solution where you can very easily map, via JavaScript, input to output, and be able to read a database and output it to Excel, without recompiling the solution, for instance. Wherever you need flexibility and you don't want to redeploy the application, Nashorn might be the right answer.

From a recent interview by Coman Hamilton (from JAX) with Adam Bien, here on YouTube

Thursday Apr 23, 2015

Porting Knockout.js Examples to DukeScript

I hold this truth to be self-evident—a technology without samples is doomed to failure.

Better still is to have examples that relate to something that your target audience is already familiar with.

In the case of the Knockout.js community, these are the samples that everyone knows:

http://knockoutjs.com/examples

And... here are the DukeScript equivalents, in progress, most are already there, while others are still being worked on:

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

Feel free to clone them, change them, enhance them, and use them as the basis of your own applications. Notice, in particular, that all the coding you'll do is in Java and not in JavaScript! 

Wednesday Apr 22, 2015

New Spring Boot Integration for NetBeans IDE

Aggelos Karalias, one of the attendees at NetBeans Day Greece, has made a brilliant plugin for NetBeans IDE that provides code completion for Spring Boot configuration properties, click to enlarge the screenshot below:

Congrats, Aggelos! (And great to have met you in Greece!) As you can see above, it works perfectly.

I checked out the sources here, built, and installed them:

https://github.com/keevosh/nb-springboot-configuration-support

And then I used this project by Michael Simons, to make the screenshot above:

https://github.com/michael-simons/biking2

Also, this article is useful about Spring Boot and NetBeans, as well as other technologies, such as AngularJS:

http://info.michael-simons.eu/2014/02/20/developing-a-web-application-with-spring-boot-angularjs-and-java-8

Tuesday Apr 21, 2015

Mapping Knockout.js Concepts to Java

Here's a table that should help you when expressing your JavaScript-based Knockout.js applications in Java via DukeScript.

Knockout.js DukeScript Example
Observable property @Property
@Property(name = "itemToAdd", type = String.class)
Observable array property @Property with 'array' attribute
@Property(name = "items", type = String.class, array = true)
Computed property @ComputedProperty
@ComputedProperty
static String fullName(String firstName, String lastName) {
    return firstName + " " + lastName;
}
Function @Function
@Function
static void addItem(Data model) {
    String itemToAdd = model.getItemToAdd();
    List items = model.getItems();
    if (itemToAdd!=null&&itemToAdd.length()>0){
        items.add(itemToAdd);
        model.setItemToAdd("");
    }
}

Want to see the above in action? Watch this new screencast created today:

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
« August 2015
SunMonTueWedThuFriSat
      
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
     
Today