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/

Thursday Feb 04, 2016

Darcula for NetBeans Platform Applications

Any NetBeans Platform application, not only NetBeans IDE, can benefit from the Darcula LAF for NetBeans IDE.

http://plugins.netbeans.org/plugin/62424/darcula-laf-for-netbeans

Here's the standard NetBeans Platform application that you get from the New Project wizard, with the plugin installed:

You'll find that the plugin also installs a tab in the Options window for configuring the LAF:

There are different strategies for installing the plugin into your application. E.g., you can include the plugin source code as a module in your sources or you can let your users install it as a plugin from your Update Center. 

Wednesday Feb 03, 2016

Spring Boot Scenario with NetBeans IDE

Today Spring Boot guru Josh Long (@starbuxman) sent me a helpful scenario for getting started with Spring Boot. I've finetuned and translated some aspects to make everything work smoothly in NetBeans IDE.

So, let's get started. Go to http://start.spring.io, click "Switch to the full version", and choose the 'H2', 'web', 'JPA', and 'REST Repositories' checkboxes. Alternatively, you can use the auto completing drop down on the right. You'll get a JAR-based Maven project. Instead, make sure where it says "Packaging" to select "War", as shown below.



Click "Generate Project" at the bottom of the page, which by default will give you a ZIP file named "demo.zip" on disk.

No need to unzip that ZIP file or to go through any kind of complex import process to get the project it contains into NetBeans IDE. Instead, go here:


As can be seen above, go to File | Import Project | From ZIP and then browse to the "demo.zip" file. Click "Import" and NetBeans will unzip your file, open the Maven project, and display it in NetBeans IDE. If some/all of the dependencies have not been downloaded by Maven, you'll see various project problems and errors, which you can solve by right-clicking the project and choosing Build. That will download the Maven dependencies and at the end the project should look nice and neat, as follows:



All the coding we will do from this point onwards will be done in the "DemoApplication.java" file that you see in the "com.example" package above. The import statements we'll need are as follows:

import java.util.Collection;
import java.util.stream.Stream;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.CommandLineRunner;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.data.annotation.Id;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.repository.query.Param;
import org.springframework.data.rest.core.annotation.RepositoryRestResource;
import org.springframework.data.rest.core.annotation.RestResource;
import org.springframework.stereotype.Component;

Add each class below beneath the previously existing class in the file. In other words, all the code we'll be working on will be within the same Java source file.

Start by adding a simple JPA entity:

@Entity
class Reservation {
    @Id
    @GeneratedValue
    private Long id;
    private String reservationName;
    public Long getId() {
        return id;
    }
    public String getReservationName() {
        return reservationName;
    }
    public Reservation(String reservationName) {
        this.reservationName = reservationName;
    }
    public Reservation() {
    }
    @Override
    public String toString() {
        return "Reservation{" + "id=" + id + ", reservationName=" + reservationName + '}';
    }
}

Next, we need some way to handle persistence logic, therefore add the following below the previous code in the file, to create a Spring Data JPA repository:

@RepositoryRestResource
interface ReservationRepository extends JpaRepository {
    @RestResource(path = "by-name")
    Collection findByReservationName(@Param("rn") String rn);
}

Finally, again below the previous code in the same file, you'll need to insert some simple sample data, so create a component that gets called on application startup:

@Component
class DummyCLR implements CommandLineRunner {
    @Autowired
    private ReservationRepository repository;
    @Override
    public void run(String... args) throws Exception {
        Stream.of("Josh", "Geertjan", "Pieter").forEach(x -> 
           repository.save(new Reservation(x)));
        repository.findAll().forEach(System.out::println);
    }
}

Now let's run the application, using this tip to do so, which will run the embedded Tomcat provided by Spring Boot and deploy the application to it, correctly running the code from the "public static void main" entry point of the application. We'll be circumventing the NetBeans approach to deploying applications completely and making use of the corresponding features provided by Spring Boot instead.

To do this, right-click the project, click Properties, and rewrite the "Execute Goals" field of the "Run project" action from "package" to "org.springframework.boot:spring-boot-maven-plugin:1.3.2.RELEASE:run", as shown below:


Now, whenever you press F6, you'll be deploying the application to the embedded Tomcat, which you'll also be starting up. In the Output window (Ctrl-4), you can stop the process, i.e., shutdown the embedded Tomcat and undeploy the application.

Run the application via F6 or by choosing "Run" on the project or in the toolbar, which will end up showing you the reservations in the Output window:



Also, when you open your browser to "http://localhost:8080/repositories" you'll see the REST API stood up for you based on your data set, which will initially show an error. "OK," says Josh, at this point. "This is all well and good but let's get serious! This uses an embedded in-memory DB! And there are no operational features. This isn't ready for production! How do you see things like the health of the app? metrics?"

Right-click the "Dependencies" node in the project, choose "Add Dependency", and add "spring-boot-starter-actuator":

After you click "Add" above, the dependency will be added to the POM. Actually, no version should be required since its dependency is managed by Maven in the parent POM. Now, if you restart, i.e., end the process and restart it, you should now be able to hit URLs like the following: localhost:8080/, /reservations, /reservations/1, /reservations/2, etc.:

You should also be able to visit /metrics and /health. "Not bad," says Josh. "Info on the state of the app."


The above instructions are all the basics needed for getting started with Spring Boot. More in follow up blog entries soon.

Monday Feb 01, 2016

Diffing Couchbase Buckets

Now Couchbase buckets can be queried and diffed. Click to enlarge the screenshot to get a full view of it:

Sunday Jan 31, 2016

Couchbase Bucket Hierarchy in NetBeans IDE

See below the current status of the Couchbase integration that is a work in progress. Now arbitrary buckets can be expanded and data can be viewed:

All these are indexed columns. Next step is to show non-indexed columns and enable them to be indexed. Also a GUI for simple queries will be added, before adding an editor of some kind for full blown querying of the data.

Saturday Jan 30, 2016

IBM WAS Liberty Profile and NetBeans IDE (Part 2)

Following on from part 1, the basic infrastructure of the support for IBM WAS Liberty Profile has been set up, e.g., look in the Servers node and notice the WebSphere Liberty node below:

Other parts are ready too, e.g., the wizard for configuring the server and the dialog for customizing it afterwards.

All the code is here:

https://github.com/tjmcmanus/NetbeansLibertyPlugin

Friday Jan 29, 2016

Moving Along Fast with Couchbase and NetBeans IDE

With Arun and Eben from Couchbase, I've started a series of webcasts focused on creating integration of Couchbase into NetBeans IDE. Today we recorded the 2nd part, to be released soon by Arun.

The main feature of part 2 is that we now have the Couchbase server set up on my laptop. We moved the NetBeans plugin from Ant to Maven and all the source code is checked into the GitHub repo:

https://github.com/arun-gupta/couchbase-netbeans-plugin

I've moved on a little bit further in preparation for the 3rd part of the series... as you can see below, i.e., the start of the node hierarchy has been extended a bit: 

So... if you want to learn about the Nodes API in the NetBeans Platform and how to leverage it in your own plugins for NetBeans IDE, as well as in your own modular Java desktop applications, follow the series of cool webcasts with many thanks in particular to Arun.

Thursday Jan 28, 2016

Space, Aeronautics, Defense, and Nuclear Research on the NetBeans Platform

SYCLONE by Clemessy is a modular solution for SCADA and real-time command/control systems. It provides a graphical display, graphical sequence editor, and a real-time sequence executor. The modular design allows it to be used in projects of all types, from touch panels in hardened cabinets for processes with no real-time needs, to control and measuring systems for commercIal and military launchers and boosters.

The SYCLONE Project Editor, shown above, is built on top of the NetBeans Platform. It provides a GUI Designer that is able to animate symbols based on process state, a script editor, and a general configuration editor.

The organization using and developing this application is located in France. SYCLONE is used in Space, Aeronautics, Defense, and Nuclear Research projects.

Wednesday Jan 27, 2016

IBM WAS Liberty Profile and NetBeans IDE (Part 1)

I had a meeting with several developers the other day, some from IBM, about the need to create support for the IBM WAS Liberty Profile in NetBeans IDE. From their side, the feeling was that developers have been asking for this for some time and it would be great if there were to be a plugin for NetBeans IDE users who want to work with IBM WAS Liberty Profile.

So, we've set up a GitHub repo and are working from two ends. From the NetBeans end, we're providing a generic plugin infrastructure for hooking into IBM WAS Liberty Profile commands. From the other end, i.e., IBM and others involved with the relevant knowledge, utility methods are being provided for interacting with commands such as start, stop, debug, etc, to interoperate from NetBeans with the IBM WAS Liberty Profile.

Informally, various resources are being provided for this work from various ends, for asking questions, for testing, etc.

Here's the related NetBeans issue:

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

And here's the GitHub repo where all the work will be done:

https://github.com/tjmcmanus/NetbeansLibertyPlugin

Monday Jan 25, 2016

Before Using the Oracle JET Cookbook...

When you're creating a modular application with Oracle JET and you're copying/pasting from the helpful on-line Oracle JET Cookbook, you'll run into a few issues initially.

The JavaScript snippets in the cookbook assume that you're not creating a modular application, i.e., they're not in "define" blocks, but in "require" blocks. My feeling is we should rewrite those snippets so that they're in "define" blocks, since that's how most Oracle JET users will be using them.

My colleague Paul Thaden has written a great blog entry on this point and I highly recommend it, especially when you're getting started with Oracle JET and its on-line cookbook: 

http://likeahouseafire.com/2016/01/20/pouring-jet-cookbook-into-quickstart

Thanks, Paul! 

Friday Jan 22, 2016

React.js and NetBeans IDE (Part 2)

Continuing from part 1 (almost a year later), I'm creating a simple plugin for NetBeans IDE to support React. Here's where it is found, anyone can join in:

https://github.com/GeertjanWielenga/React.js

Here's how it looks right now:

What the plugin is focused on is JSX editor support and compilation of JSX files to JavaScript.

I've been looking for a JSX tokenizer and grammar definition, e.g., via ANTLR. Not found one yet. Right now, reusing the JavaScript editor. Also, hardcoded (at the moment) is my path to JSX, working on an extension to the Options window to enable the user to set that. In the Project Properties dialog, there's a React section, where the "--watch" command of JSX is kicked off whenever a JSX file is saved.

Thursday Jan 21, 2016

ProjectCustomizer/NodeFactory Combination

Here's a handy NetBeans API sample, useful for NetBeans plugin developers, as well as anyone working with node hierarchies on the NetBeans Platform:

https://github.com/GeertjanWielenga/PeterProjectCustomizerNodeFactory

When you check out the repository above and run the module into NetBeans IDE... and you then create a Java SE application, for example this:

...and you then go to the Project Properties dialog of the project, you will see usage of the ProjectCustomizer.CompositeCategoryProvider class, a simple panel with a checkbox:

When you click "Show my node" and then OK, you will see you have a new node created in your node hierarchy, thanks to an implementation of the NodeFactory class:

When you go back to the Project Properties dialog and uncheck the checkbox, and you then click OK, you will find that the "Special" node is removed.

In the ProjectCustomizer, a project preference is set to a key/value combination, to which the NodeFactory is listening for changes. When a change is detected, the Node hierarchy recreates itself with/without the special Node.

The above scenario is a bit tricky and can be useful in many situations, such as when you're extending NetBeans IDE with a plugin for some technology that needs to be configured per project, after which the project logical view needs to be updated with data relating to the configured technology.

Thanks to Peter Nabbefeld for requesting code for this scenario and to Neil C. Smith for making an important suggestion relating to the ChangeListener of the NodeList.

Wednesday Jan 20, 2016

org.netbeans.spi.project.ui.CustomizerProvider2

How to open the Project Properties dialog for a project, at a specific tab:

@Override
public Action getPreferredAction() {
    return new AbstractAction() {
        @Override
        public void actionPerformed(ActionEvent e) {
            project.getLookup().lookup(CustomizerProvider2.class).showCustomizer("tabName", "subTabName");
        }
    };
}

Tuesday Jan 19, 2016

New Look for NetBeans IDE 8.1 (Part 2)

In part 1, I highlighted Hamit Hasanhocaoglu's excellent work in making the Darcula look and feel available to NetBeans IDE users via a brand new plugin. Click to enlarge the image below:

The great news is that his plugin has now been open sourced and everyone is welcome to contribute further refinements to it:

https://github.com/Revivius/nb-darcula

Take note of all the enthusiasm on the plugin's page, including several people who've offered to get involved in the further development of the plugin:

http://plugins.netbeans.org/plugin/62424/

There are also several ideas for companion editor themes for the Darcula plugin. Mine is described here and works very well for me:

https://blogs.oracle.com/geertjan/entry/setting_up_darcula_in_netbeans

Here's another one, by Fagner Granella:

https://github.com/granella/Netbeans-Darcula-Theme

In v1.1 of the plugin, it became possible to use the "--fontsize" switch in the "netbeans.conf" file. In the initial release, that switch was ignored, so that the default 12 fontsize could not be overridden. I have set that to 15, which works well for me, everything is now very legible and really smooth for my workflow. Also, it's now possible to switch between look and feels, in the Options window, as shown below, which was not possible before v1.1 of the plugin.

In v1.2 of the plugin, which was released today, together with the open sourcing of the plugin, more white lines within NetBeans IDE have been incorporated into the Darcula plugin, which was also part of the v1.1 enhancements. For example, look at the white horizontal line that you can see below the buttons in the top of the Options window. Here is a "before" and then an "after" screenshot.

Several other similar finetunings have taken place and I highly recommend v1.2 to anyone using the plugin already, as well as to those who have yet to get started with it. 

Many thanks again Hamit Hasanhocaoglu. This is a truly fantastic contribution, and completely unexpected, to the NetBeans community.

I am extremely happy to be actively using this plugin, it's really awesome in every way. 

Monday Jan 18, 2016

Components in Angular 2, Knockout, and Oracle JET

When you're learning something new, you sometimes are reminded of other things you've learned, in other domains. For example, when I look at Angular 2 components, such as this one for example...


...then I am reminded of the syntax used by Knockout for expressing components:

Obviously, there are differences. For example, the Angular 2 component is expressed in TypeScript, while the Knockout component is expressed in JavaScript, though TypeScript could also be used (and also see this).

Once a component is declared, this is how it is used in Angular 2:

<greetingForm>Loading...</greetingForm>

There is a similar syntax for using Knockout components, though this is the more recommended approach:

<div data-bind="component: {name: 'greetingForm', 
   params: {first: 'Planet', last: 'World' }}">
</div>

You could initialize the variables in various ways, above you see how it could be done via the component binding in Knockout. You could also use the "placeholder" attribute of the "input" elements or you could initialize the variables directly in your code.

Also, in both cases, instead of writing the HTML template directly in the JavaScript/TypeScript code, you can reference an HTML file, where you could have more complex HTML content, while making it possible to use HTML editors and similar tools.

In the case of Angular 2, there's more going on, since SystemJS is used, giving you a global System object, with a number of static methods, so that the usage of the "greetingForm" element above is slightly more involved, i.e., this is how the "greetingForm.js" is loaded into the "index.html" file, in order for the "greetingForm" component to be used:

<greetingForm>Loading...</greetingForm>
<script>
    System.config({
        transpiler: 'typescript',
        typescriptOptions: {emitDecoratorMetadata: true},
        packages: {app: {defaultExtension: 'ts'}}
    });
    System.import('app/greetingForm').then(null, console.error.bind(console));;
</script>

Out of the box, Knockout doesn't have a module loader. That's because Knockout is a library, while Angular 2 is a framework. Knockout is ONLY focused on two-way data-binding, nothing else. It doesn't come with anything other than that, e.g., no module loader. (And for that reason, a "shoot out" between Angular and Knockout doesn't make any sense at all.) If a module loader is needed, a popular approach is to use RequireJS together with Knockout. Here, for example, is a Knockout component, expressed as a RequireJS module, making use of the requirejs/text protocol to load the HTML template:


And here is the registration of one or more Knockout components, in another RequireJS module, named "initComponents.js":

define([
    'knockout'
],
function (ko) {
    return function initComponents() {
        ko.components.register("greetingForm", {require: 'js/modules/greetingForm'});
    };
});

And then, in the end, in your "require" block, you'd have something like this:

ko.applyBindings(new initComponents());

Then RequireJS would do the module loading for you in your Knockout applications, comparable to what SystemJS does for Angular 2.

When you're using Knockout and RequireJS, you should really consider using Oracle JET, in this context, because it provides some very useful features:

  1. You do not need to register your components.
  2. You do not need to reference your HTML templates.

The above are two interesting approaches that Angular 2 could benefit from, as well.

Firstly, this is how your Knockout component is expressed as a RequireJS module in Oracle JET, take note of the fact that there is no reference to an HTML template here:

Secondly, Oracle JET uses convention-over-configuration to locate modules. Notice below that the JavaScript file is in "js/viewModels", while its view template is in "js/views". And the two files have the same name:

That is all that is needed to be able to use the "greetingForm" module in my Oracle JET application, like this, which means that Oracle JET will look in "js/viewModels" for "greetingForm.js" and in "js/views" for "greetingForm.html":

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

It is easy to override those predefined locations, by the way. But it's really cool that there is such a thing, i.e., "js/viewModels" for business logic and "js/Views" for HTML templates.

Oracle JET will put those two files together and treat them as a module and load them into the application, using Knockout and RequireJS under the hood.

In this blog entry, I've compared the syntax and usage of components in Angular 2, Knockout, and Oracle JET. None of the approaches are necessarily better or worse, it's simply interesting to put them next to each other like this and compare them with each other.

Sunday Jan 17, 2016

Hello World with TypeScript and Angular 2

I wanted to take the next step and move my sample in Hello World with TypeScript and Angular 1.4 to Angular 2. I asked Yakov Fain for help, who is working on a big thick book to be named Angular 2 Development with TypeScript and to be published by Manning.

He sent me the following Angular 2 translations of my Angular 1.4 code. He tells me, as well: "The architecture of Angular 2 is completely different - it's component based and there are no controllers or scopes. The entire app code is loaded with a SystemJS loader. A component is a class annotated with @Component, which includes the HTML fragment (template)." Firstly, here is "app/two_way_binding_greeting.ts", from Yakov:

import {bootstrap} from 'angular2/platform/browser';
import {Component} from 'angular2/core';
@Component({
    selector: 'app',
    template:`<input type='text' placeholder= "Enter first name " [(ngModel)] = "firstName">
              <br><input type='text' placeholder= "Enter last name " [(ngModel)] = "lastName">
              <br>Hello {{firstName}} {{lastName}}`
})
class GreetingComponent {
    firstName: string;
    lastName: string;
}
bootstrap(GreetingComponent);

And here is the "index.html" file that Yakov sent me:

<!DOCTYPE html>
<html>
    <head>
        <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
        <script src="node_modules/typescript/lib/typescript.js"></script>
        <script src="node_modules/systemjs/dist/system.src.js"></script>
        <script src="node_modules/rxjs/bundles/Rx.js"></script>
        <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
        <script src="node_modules/angular2/bundles/http.dev.js"></script>
    </head>
    <body>
    <app>Loading...</app>
    <script>
        System.config({
            transpiler: 'typescript',
            typescriptOptions: {emitDecoratorMetadata: true},
            packages: {app: {defaultExtension: 'ts'}}
        });
        System.import('app/two_way_binding_greeting');
    </script>
</body>
</html>

OK, so I took the above and pasted them into the application I had already, i.e., "HelloAngularTS".

Then I looked at all those JavaScript references and asked Yakov whether Angular 2 is available via Bower. He told me that I had to use NPM instead of Bower. Not a problem at all. I added the following dependencies to my "package.json" file:

"dependencies": {
    "angular2": "2.0.0-beta.1",
    "typescript": "^1.5",
    "systemjs": "0.19.16"
}

The above dependencies worked for me when I was on NPM version 1.4.23. Now that I am on version 3.5.3, peer dependencies must be included explicitly:

"dependencies": {
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.13",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "angular2": "2.0.0-beta.1",
    "systemjs": "0.19.7",
    "typescript": "^1.5",
    "zone.js": "0.5.10"
}

Then I saw a small yellow warning triangle on the project, telling me that dependencies I had specified had not been resolved yet, i.e., the "npm install" had to be run to install the dependencies I had declared. So I right-clicked the project and used "Resolve Project Problems" to download the dependencies:

The above results in the below in the Output window:

├── angular2@2.0.0-beta.1 
├── es6-promise@3.0.2 
├── es6-shim@0.33.13 
├── reflect-metadata@0.1.2 
├── rxjs@5.0.0-beta.0 
├─┬ systemjs@0.19.7 
│ ├── es6-module-loader@0.17.10 
│ └── when@3.7.7 
├── typescript@1.7.5  
└── zone.js@0.5.10 

Remember, I had already installed the Everlaw TypeScript plugin, which means that my "two_way_binding_greeting.js" is created for me automatically when I saved the TypeScript file. See the earlier blog entry on this point.

However, I'm not sure I'd like to work with my HTML directly within my TypeScript file. Would be cool if I could refer to an HTML file, instead of having the HTML directly within the TypeScript file. So I used code completion on the @Component annotation and there I saw that in addition to "template", there's also a "templateUrl" property that can be used:

As a result, my TypeScript file now looks as follows, so that the HTML content is in a separate HTML file:

Here's the HTML shown earlier, within the TypeScript file, this time within a separate HTML template file:

That's some weird syntax right there, i.e., that's Angular 2. Let's make the HTML error highlighting less obtrusive, so we can work with our file. For example, like this it's more workable:

To make that change, use the Options window, as shown below, for HTML errors:

Also, notice the helpful error messages that show up whenever I make a typo in the path of my import statements within my TypeScript file:

The Everlaw TypeScript plugin looks for a "tsconfig.json" file, throughout your application. If you don't have an appropriate "tsconfig.json" file, you'll encounter errors like this in your TypeScript file:

So, I created a "tsconfig.json" file directly in the folder where I created my TypeScript file. It has this content and now everything resolves correctly:

{
    "compilerOptions": {
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "declaration": true,
        "module": "commonjs",
        "rootDir": ".",
        "sourceRoot": ".",
        "target": "es5",
        "outDir": ".",
        "moduleResolution": "node"
    }
}

Finally, after taking all the steps above and following the bits of advice throughout this blog entry, you'll have a project structure that looks like this.

Notice that there is still a yellow warning triangle on the project, which is because I ended up putting the Node modules into a different location than NetBeans IDE expects it to be found in. Somewhere I can change that setting, will look into that soon.

Small tip: take a look at the handy Angular 2 documentation when you call up code completion:

When the application opens in the browser, you see this simple form, i.e., the entered first name and last name are mirrored in the greeting message:

In conclusion, as I think I have convincingly shown above, the Everlaw TypeScript plugin for NetBeans IDE is really helpful when you're working with Angular 2 and TypeScript. It looks to me like NetBeans IDE 8.1, by means of the Everlaw TypeScript plugin, has support for Angular 2 and TypeScript.

Hello World with TypeScript and Angular 1.4

In this blog entry, I want to attempt to put together a simple Angular scenario where the relevance of TypeScript is shown, while using NetBeans IDE 8.1. I have struggled to find complete and correct Angular/TypeScript instructions for a simple scenario anywhere on-line. Most scenarios use earlier versions of Angular, which turn out to not work correctly with Angular 1.4. Of course, as I am sure will be pointed out to me in the comments, I should be using Angular 2. Well, I'll leave that for another day, also because the scenario below works pretty well and it shows a range of handy features from NetBeans IDE 8.1, together with the Everlaw TypeScript plugin for NetBeans IDE.

In the end, we're going to have a project structure that looks as follows: 

Let's get started. 

1. Setting Up. Install TypeScript and make sure the TypeScript compiler works correctly from your command line. Go here to get it. Install the Everlaw TypeScript plugin into NetBeans IDE 8.1. Go here to get it, at the time of writing v1.7.5.1 is the latest release and the one I am using below. 

2. Creating the Application. In NetBeans IDE 8.1, go to File | New Project, choose HTML5/JavaScript | HTML5/JS Application. Click Next. Give your application a name, e.g., "HelloAngularTS". Click Next, don't select anything, i.e., use "No Site Template", and click Next again. Deselect all the checkboxes, except for "Create bower.json". Click Finish.

3. Configuring the Application. Right-click the project and select Properties. In the Bower section, add the latest Angular version, which at the moment is 1.4.8:

In the TypeScript section, click on "Compile on Save", i.e., whenever we save our TypeScript file, the Everlaw TypeScript plugin will pass it to the TypeScript compiler and create/recreate a JavaScript file for us:



4. Using the TypeScript Definition Manager.
Read this article and then install and use the "tsd" command to get a typed Angular and JQuery. I have put them here, as you can see, within the "ts" folder:



5. Creating the HTML and TS Files.
Go to File | New File and create a new TypeScript file named "app":



And now you can use TypeScript with Angular 1.4! Here's a simple example and whenever you save the file, you'll see you have an "app.js" created for you, which you will see is very verbose when you compare it to your simple TypeScript file:



Here's the content of the "index.html" file, for using the "app.js" file created by TypeScript:

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <title>Hello World - Typescript and Angular</title>
        <script src="bower_components/angular/angular.min.js" type="text/javascript"></script>
        <script src="app.js" type="text/javascript"></script>
    </head>
    <body>
        <div ng-controller="GreetingController">
            <div>
                Name: <input type="text" ng-model="firstName" />
                Surname: <input type="text" ng-model="lastName" />
            </div>
            <br/>
            <div>
                <button ng-click="greetMe()">Greet me</button>
            </div>
            <div>
                <h1>{{fullName}}</h1>
            </div>
        </div>
    </body>
</html>

The Everlaw TypeScript plugin for NetBeans IDE is really really really nice. Give it a try with the instructions above and let me know how it works for you!

Saturday Jan 16, 2016

Setting Up Darcula in NetBeans IDE 8.1

The Darcula plugin for NetBeans IDE has been verified by the community, which means you can now go to Tools | Plugins in NetBeans IDE 8.1 and install it directly from there:

Next, let's change the NetBeans editor so that its font and color themes match the Darcula look and feel that the plugin above has installed into the IDE. Go to Tools | Options and in the "Fonts & Colors" tab, select "Norway Today" in the Profile drop-down box, as shown below. That gives us a nice starting point. Let's now customize the Norway Today profile. Go to the Default category of "All Languages" and change the "Background" to "Dark Gray", as shown below.

Switch to the Highlighting subtab, as shown below, and find the "Line Number" category. Set its "Background" to "Dark Gray", too, as shown  below.

Finally, change the font size to whatever you like. For example, I always use "Consolas 18 Bold", as can be seen below. 

The only thing I'd like to do that I haven't figured out is to change the size of the font in menus, etc, to be larger. The default seems to be 12 or 13 and there appears to be no way to change that. Not really a big problem, though. But would be nice to be able to change that.

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
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
     
       
Today