Wednesday May 27, 2015

Into the Shadow DOM

Shadow DOM is the subtree of DOM elements that the browser can include into the rendering of a document, without it being rendered into the main document DOM tree.

A complex HTML element, of which several have been introduced in HTML5, such as the HTML5 slider (input type "range"), is constructed via shadow DOM elements. In the HTML elements below, you can see the slider is used, because input type is set to "range", though you do not see the shadow DOM elements that will be used to construct the slider.

Would be handy if you had a tool to inspect the shadow DOM elements within the HTML5 slider and other main DOM elements that have shadow DOM elements. And NetBeans IDE 8.0.2 provides no help, either. Here's how the HTML5 slider above looks in the Browser DOM window of NetBeans IDE 8.0.2:

However, here it is again, in the upcoming NetBeans IDE 8.1, which, as you can see below in the Browser DOM window, includes support for the shadow DOM (click to enlarge the screenshot below to see the full context). Compared to the screenshot above, I can now inspect the shadow DOM by expanding the subnodes of the main input DOM element, while being able to see its shadow DOM elements:

When a shadow DOM element is selected in the Browser DOM window, as shown above, the embedded browser (and the Chrome browser) automatically selects it so that you know where you are and you can quickly find the elements in the browser, even when they are shadow DOM elements.

Moreover, as you can see below, you can select an element within the shadow DOM and then style that specific element in the CSS Styles window:

In the above scenario, I can press the Up arrow key over the height property, which is highlighted above, and then magically I will see the slider in the browser increase in size, because the related style is automatically changed for me, enabling easy and quick tweaking of the style applied to the shadow DOM element.

Further reading and references:

Tuesday May 26, 2015

Knockout.js Community Interview: Ryan Niemeyer

NetBeans IDE, over several releases now, has been building up an awesome set of tools for frontend web development with Knockout.js:

And there's also a handy plugin for generating a Knockout frontend for a Java EE backend:

http://plugins.netbeans.org/plugin/55971/knockout-client-generator

These features include a bunch of different things, such as intellisense and documentation within Knockout's data-bind attribute...

...as well as intellisense for the attributes of Knockout components, as shown here:


So, to explore Knockout more broadly, it's time for the NetBeans community to get to know the Knockout community a bit better! To that end, Ryan Niemeyer, one of the active Knockout community members, has kindly responded to some 'getting to know you' questions I recently sent him.

Hi Ryan, thanks for taking the interview, can you tell us a bit about who you are and what you do?

My name is Ryan Niemeyer and I am a web developer who has been in the software industry for over 16 years. I work for a great company called LeanKit (http://leankit.com). We have an awesome product for visualizing workflows and I have the chance to work with many wonderful and talented folks. I work remotely from the Madison, Wisconsin area and live with my wife and two girls (7 and 4). I have been interested and involved with open source projects as well for the last 5 years, which has been a very enjoyable and valuable experience.

How and when did you get involved with Knockout.js?

I have always been interested in templating and data-binding technologies. I did a lot of XML/XSL work years back and the combining data with a description of how to present it (a template) always made a lot of sense to me. Eventually I started working with jQuery and jQuery templates, which I felt was a quite powerful tool at the time.

Finally, in 2010 when Knockout was first released, it just clicked for me right away. Knockout was able to eliminate so much of the spaghetti code normally required to wire up an application. At the time, I did not have a ton of my own problems to solve with Knockout, so I started getting heavily involved in the Knockout forums and answering questions on StackOverflow. Soon after that, Steve Sanderson, the author of Knockout, asked me to join him on the core team.

You have a very active Knockout.js blog—what are your aims with it and what should one expect to find there?

My blog is at www.knockmeout.net. When I started the blog, there wasn’t a lot of information about Knockout available on-line other than from the official site (http://knockoutjs.com). The blog gives me a chance to share some ideas that I have had for solving problems, introduce plugins that I have written, and provide additional background when there are Knockout releases. My posts have been a bit more infrequent lately, as life is busy at the moment, but I certainly intend on keeping the blog going of the long-term.

What do you consider to be the most awesome features of Knockout.js?

I think that Knockout has a very low barrier to entry. It is easy to learn and stays very focused on data-binding and templating concerns. Knockout definitely provides plenty of extensibility points to allow advanced usage, but you can be productive with it right away.

I believe that another great feature of Knockout is that we have worked hard to maintain backwards compatibility and support browsers all the way back to IE6.

There are many other frameworks in the JavaScript ecosystem, what are the strengths/weaknesses of Knockout.js versus others you may have used, e.g., AngularJS?

Tools like Angular and Ember are definitely focused on providing more of a complete out-of-the-box experience for an entire web application, while Knockout stays focused on just the data-binding and templating pieces.

Some like to build their own stack by combining the most appropriate tools for their situation and Knockout can work well with a variety of other libraries.

What are the tools that you've been using with Knockout.js?

Many people can be pretty productive with Knockout in just about any tool. For most uses, it has a pretty low API surface area. I tend to use WebStorm or Sublime Text 3, but have tried a variety editors.

You've seen a bit of the NetBeans tooling via recent blogs—what do you think of them? 

The tooling around Knockout in NetBeans looks very impressive. Having intellisense and even help information is really useful and powerful.

Anything else you'd like to share with the NetBeans community? 

It is an exciting time for web development, as there are so many tools and solutions that are improving each day. I would encourage everyone to add Knockout.js to their list of solutions to evaluate for their web development projects.

Monday May 25, 2015

New: Maltego Training Video for Absolute Beginners

If you've just downloaded Maltego, which is based on the NetBeans Platform, and you're not sure what to do next, you should watch this new introduction video, released this month:

Sunday May 24, 2015

YouTube: Arquallian and NetBeans IDE

Great new screencast, by Thomas Jost, about using NetBeans with Arquallian:

Also see this excellent article from a while ago on the same topic by NetBeans Dream Team member at Red Hat Markus Eisele:

http://blog.eisele.net/2012/01/arquillian-with-netbeans-glassfish.html

Thursday May 21, 2015

Open LaTeX Studio

Open LaTeX Studio is a lightweight LaTeX editor, with LaTeX code syntax highlight, code completion and live preview of the document in edition. It allows generating PDF files from the editor and provides Dropbox support, by allowing to connect the application with the Dropbox account, saving and uploading files to the remote directories and providing version control of the remote files. The application is delivered for the Windows and Linux platforms.

The project is Open source and is developed as a part of the master's thesis of Sebastian Brudziński.

It is built using the NetBeans Platfrorm 8. The code repository is located at:

https://github.com/sebbrudzinski/Open-LaTeX-Studio

and the application website is:

http://sebbrudzinski.github.io/Open-LaTeX-Studio/


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!

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
« May 2015
SunMonTueWedThuFriSat
     
2
3
8
9
10
19
27
28
29
30
31
      
Today