Monday May 02, 2016

New: SQL Profiler in NetBeans IDE

Imagine being able to profile your SQL queries! Anyone developing applications making use of a database backend would be able to quickly and clearly see which SQL query is causing the most contention within an application. Furthermore, if thread dumps and heap dumps could be made, it would allow for easy comparisons and be able to provide detailed information on the underlying SQL invocations.

Well... here it is, a new extension to the already awesome NetBeans Profiler, enabling you to analyze your SQL queries for the first time:

Read all about it in NetBeans Dream Team member Josh Juneau's blog, here:

http://jj-blogger.blogspot.nl/2016/05/netbeans-sql-profiler-take-it-for-spin.html

Saturday Apr 30, 2016

10 Things Learned During GIDS 2016

Here are 10 things I learned during the Great Indian Developer Summit (GIDS) 2016, an awesome conference in Bangalore and Pune, in no particular order:

  1. Heat Waves. Not a problem at all if you spend 100% of the time in a taxi, hotel, or conference center.

  2. Rikshas. Awesome way to see the lesser known sights of Bangalore when it turns out the driver has had no idea whatsoever where your hotel is located for the past hour of a trip that should have taken 10 minutes.

  3. Kabaddi. The existence thereof. The explanation for understanding it begins with, "You know musical chairs? Well, Kabaddi is nothing like musical chairs."

  4. Kraken.js. The existence thereof. More generally, completely new and unexpected insights about open source work being done at PayPal.

  5. Douglas Crockford is Full of Pithy Wisdom. For example, I picked up from him the insight that "sometimes you want the gorilla, but you also get the banana it is holding and the jungle it lives in". He was referring to JavaScript, though the Gorilla Principle could relate to other fields as well. Here's something else he said that was awesome: "We've got to do better than JavaScript, at least for our kids. We'll initially reject that language, though."

  6. NetBeans Community. How great it is. Gaurav Gupta, Tushar Joshi, Aatul Palandurkar, Abhideep Chakravarty, Rajmahendra Hegde, and others. Thanks for the great time and warmth! They all presented something (e.g., NetCAT, the NetBeans Dream Team, their own NetBeans plugins), either during NetBeans Day in Hyderabad or GIDS in Bangalore or Pune. Lots of enthusiasm for NetBeans in India.

  7. Speed vs. Distance. From the JCP, Heather VanCura's awesome insight: "'If you want to go fast, go alone. If you want to go far, go together." From Red Hat, in a great keynote by Bob McWhirter: "Innovation can occur without radical change. Java is not dead but mature," (to very loud cheers from his audience).

  8. iText is Inspiring. Did an interview with Bruno from iText right at the start of my India trip and learned that iText is expanding beyond PDF, has merged with a South Korean company, and continues to fight the good fight of open source, while championing Java and related technologies.

  9. Oracle JET. Real potential—the wild and crazy world of enterprise JavaScript is crying out for a logical structure of application architectures and out-of-the-box components and techniques. Free and open source technologies rule and, just like Kraken.js by PayPal, Oracle JET by Oracle is a sign of the growing synergy around the JavaScript ecosystem. When large enterprises start investing in an ecosystem, you better simply believe that it should be taken seriously.

  10. English-Language Movies on Indian TV. All the English-language movies on Indian TV are about disasters—i.e., Titanic, Predators, Jurassic Park (which I watched about four different times, at different stages), etc, etc. Big evil aliens or big evil water, basically.

No worries, though, learned quite a bit more than that, though the above will stick with me longest. Something else—as always, hanging out with the other speakers was brilliant and I met many new experts, while reacquainting myself with a whole bunch of others. Great times with Raju Gandhi, Heather VanCura, Scott Davis, Jeff Scott Brown, Pratik Patel, Simon Ritter, Reza Rahman, and many others.

Thanks all again, especially the organizers for taking such good care of us, for the great time and will be back when I can!

Wednesday Apr 27, 2016

Energy & Carbon Reduction Management with Java and the NetBeans Platform

Minibems (go here and go here for details) by ZERO is a holistic control and monitoring platform that delivers significant energy and carbon reduction in complex heat network environments. Minibems is an energy management system that monitors and controls your heat network to reduce cost, improve efficiency, and increase ease of management. Minibems is the result of three years of intensive research, development, and testing, as well as over £600,000 of investment from DECC and Innovate UK, representing a huge leap forward in HIU technology. 

WSS-Monitor is the tool used by the ZERO support team, installers, and developers to remotely monitor, update, and manage the installed Minibems systems. It is based on the NetBeans Platform, the Darcula Look & Feel plugin, the Java WebSocket library, and the JFreeChart library.

Screenshot: 

Tuesday Apr 26, 2016

Flexbox and Oracle JET (Part 2)

Following on from part 1, we're going to look at the CSS classes "oj-flex" and "oj-flex-item".

Here is the official documentation where you will see these CSS classes defined:

http://www.oracle.com/webfolder/technetwork/jet/stylingdoc.html

Also, the JET Developer's Guide also contains additional information about Oracle JET's flex layout and grid systems in the Designing Responsive Applications chapter at:

http://docs.oracle.com/middleware/jet201/jet/developer/GUID-67956274-4056-4D54-8BC7-18942DA7338A.htm#JETDG263

You might find the topics describing Oracle JET's use of media queries, flex layouts, and the grid system helpful in the above chapter.  

Spot "oj-flex" and "oj-flex-item" in the screenshot below, which is a slightly tweaked part of "index.html" in the "Oracle JET Quick Start Basic":

Here, in bold, is where they are: 

<div class="oj-web-applayout-max-width oj-web-applayout-content">
  <div class="oj-flex">
    <div class="oj-lg-9 oj-sm-12 oj-flex-item oj-flex">
      <div id="mainContent" role="main" class="oj-panel oj-margin oj-flex-item"
           data-bind="ojModule: router.moduleConfig">
      </div>
    </div>
    <div class="oj-lg-3 oj-sm-12 oj-flex-item">
      <div id="complementaryContent" role="complementary" class="oj-panel oj-margin oj-flex-item"
           data-bind="ojModule: {viewName: 'compContent'}">
      </div>
    </div>
  </div>
</div>

Now that you have spotted the places where "oj-flex" and "oj-flex-item" are used, let's hone in on one specific section, shown in bold below:

<div class="oj-web-applayout-max-width oj-web-applayout-content">
  <div class="oj-flex">
    <div class="oj-lg-9 oj-sm-12 oj-flex-item oj-flex">
      <div id="mainContent" role="main" class="oj-panel oj-margin oj-flex-item"
           data-bind="ojModule: router.moduleConfig">
      </div>
    </div>
    <div class="oj-lg-3 oj-sm-12 oj-flex-item">
      <div id="complementaryContent" role="complementary" class="oj-panel oj-margin oj-flex-item"
           data-bind="ojModule: {viewName: 'compContent'}">
      </div>
    </div>
  </div> 
</div> 

The above segment in bold is the place where the main content will be found. In the first line in bold above, notice the "oj-flex", which is set on the "div" that the main content modules will be put into. Anytime you have a container, inside that container you can nest in items. If you want to make something not only be an item within a container, via "oj-flex-item", but the start of a new container, then just add "oj-flex" along with "oj-flex-item".

Let's now take the view of the "people" module, i.e., "people.html", to experiment with "oj-flex" and "oj-flex-item". Go to people.html" and let's build something up from scratch. The first thing to think about is: "How many rows do I want?" If you think about rows first, or about how many vertical containers, that's the best way to start working with Flex Layout. Then, you can adjust items inside of those rows, i.e., these are the Flexbox containers, as you go along.

In "people.html", let's start simply like this:

<h1>People Layout</h1>
<div class="oj-flex-item">
</div>

Right now, what we've got is one "div", which has been set as an "oj-flex-item". It has nothing in it and you can't tell that it's there when you look in the page, which will just be blank, aside from the "h1" content. A good tip when doing layouting with Flex Layout, i.e., at least during development, is to add an "oj-panel":

<h1>People Layout</h1>
<div class="oj-flex-item oj-panel">
</div> 

In the browser, you now see a little border, and you can tell where things are at, roughly:

Therefore, the "oj-panel" is very useful when laying things out, to see where the containers and items are fitting within the page, regardless of whether you ultimately want to use "oj-panel" in the actual release of your product. It enables you to see what the padding is, while you can also use different colors in the background by using different alternate panels, too.

If that is our first row, let's put that in there: 

<h1>People Layout</h1>
<div class="oj-flex-item oj-panel"> 
   first row
</div>

Of course, the above will have this result:

Then copy that and put in a few of them, as follows: 

<h1>People Layout</h1>

<div class="oj-flex-item oj-panel">
    first row
</div>
<div class="oj-flex-item oj-panel">
    second row
</div>
<div class="oj-flex-item oj-panel">
    third row
</div>

From this point, let's just focus on the rendering of the "people.html", i.e., in this screenshot that's all you see, without all the content around it:

As you can see, the items are stacking up, they're looking OK, though they definitely don't have the padding around them that we would like, according to the Oracle Alta UI. Let's add a margin to each item, as follows:

<h1>People Layout</h1>

<div class="oj-flex-item oj-panel oj-margin">
    first row
</div>
<div class="oj-flex-item oj-panel oj-margin">
    second row
</div>
<div class="oj-flex-item oj-panel oj-margin">
    third row
</div>

Now we have some padding in there:

That's the default that "oj-margin" gives us, from the Oracle Alta UI spec. Rather than overriding it, if needed, the better approach is to create your own CSS margin class, since the various Oracle JET components also make use of "oj-margin" and hence if you change "oj-margin" itself, you may end up with unintended side effects.

Where we are now is that we have three "oj-flex-items", which are all contained by the "oj-flex" container in "index.html". Now, let's say that in the second row, i.e., the second "oj-flex-item", we want to put three or four other items:

Getting to the above point is as simple as nesting new "oj-flex-items", like this, i.e., below, only the items in bold have been added: 

<h1>People Layout</h1>

<div class="oj-flex-item oj-panel oj-margin">
    first row
</div>
<div class="oj-flex-item oj-panel oj-margin">
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 1
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 2
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 3
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 4
    </div>
</div>
<div class="oj-flex-item oj-panel oj-margin">
    third row
</div>

However, probably you don't need that whole border along the outside of the second level items. And maybe you want them to be side-by-side, instead. Right now, we have an "oj-flex-item", which contains other instances of "oj-flex-item". Since they're all "items", they're still children of the "container" item in the "index.html" page. Really, what you would like is for the second level items to be items for the "div" element that contains them. Therefore, let's add in an "oj-flex", which will turn that "div" element into a container:

<div class="oj-flex oj-flex-item oj-panel oj-margin">
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 1
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 2
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 3
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 4
    </div>
</div>

The above is the only change I have made and now I have the following layout:

Once you set a "div" as being a container, you enable it to control its own content. By default, containers flow in a row, as you can see above. The "flex-direction" property is, by default, set to "row". You can set that to "column", instead, as will be shown later in this article, as well as "reverse row" and "reverse column". The reverse classes probably might mess things up for RTL languages, which Oracle JET automatically incorporates. You can also mess with the order, overriding the DOM order, which might cause conflicts with accessibility requirements and RTL language support, though. Be aware that this flexibility exists, if needed, as well as the problems that might occur.

If you remove "oj-panel" and "oj-margin" from that "div" element, you will have a layout like this:

The inner items are now all in a row, without a panel around them. Once you set up a container, by default, the items inside it are going to resize to fit the container. So, if you remove one of the inner items, in "people.html", you will automatically have the resize effect and the result will be as follows:

Automatically, the inner items stretch across and take up the space in order to position the three items equally.

Let's now go a step further and add inner items to the third "div", after making that "div" a container, while removing its panel and margin. We'll also put back the fourth inner item in the second "div", as a starting point:

<h1>People Layout</h1>

<div class="oj-flex-item oj-panel oj-margin">
    first row
</div>
<div class="oj-flex oj-flex-item">
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 1
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 2
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 3
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 4
    </div>
</div>
<div class="oj-flex oj-flex-item">
    <div class="oj-flex-item oj-panel oj-margin">
        3 - 1
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        3 - 2
    </div>
</div>

The result is as follows:

There are now 4 columns in the middle and 2 across the bottom. As you resize this, the rows are maintained, becoming smaller and smaller as you make the browser smaller:

However, let's say that we want the items in the second row to stack as we move smaller, i.e., as we get to a phone-size resolution. Since items inherit from their container, we'll use the "flex-direction" property, mentioned earlier, to switch from the default "row" direction to "column", when the resolution is "small", i.e., on mobile devices. Take note of the addition below, in bold:

<div class="oj-sm-flex-direction-column oj-flex oj-flex-item">
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 1
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 2
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 3
    </div>
    <div class="oj-flex-item oj-panel oj-margin">
        2 - 4
    </div>
</div>

The above causes a problem immediately because even when you're not in a small resolution, the rows are now columns, while we only wanted that for small resolutions. Be aware that when you use these resolution-related breakpoints, the related CSS classes work from whatever size you tell them on up. In this particular case, we're telling the items in a container to be small, and on up. When I look in my page, of course it's going to drop into a columnar layout, even on large and extra large.

If we only want the columnar direction on small, there are classes for small only, notice the difference below:

<div class="oj-sm-only-flex-direction-column oj-flex oj-flex-item"> 

And now, only when the resolution is small, will you see the columnar layout:

Also notice that the container below the one we've been working with is still making use of the default "row" direction.

More will come in the next part of this series, with an increasing focus on overriding default behavior, though the above should give a clear overview of the usage and advantages of Flexbox in Oracle JET. Many thanks to JB Brock for all the info above.

Monday Apr 25, 2016

Flexbox and Oracle JET (Part 1)

CSS Flexible Box Layout Module Level 1, a.k.a. Flexbox, is a new layout mode in CSS3, and is the recommended strategy for doing CSS layouting in Oracle JET applications. Here is the Oracle JET Cookbook item on Flex Layout in Oracle JET 2.0:

http://www.oracle.com/webfolder/technetwork/jet/uiComponents-flex-basics.html

Also take a look at the right column on the page above, where you'll find a heap of options to finetune the basic scenario. 

Flex Layout is the latest version of responsive CSS layout that is available starting in Oracle JET 2.0 and above, i.e., Oracle JET 2.0.1 is the most recent release of Oracle JET. The Cookbook lists quite a lot of options that Oracle JET provides, which are helper classes on top of Flexbox. All of the Flex Layout support in Oracle JET really just follows Flexbox itself. To that end, if you want to learn more about Flexbox, understand its background and functionality and things like that, you're recommend to read this:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

You'll learn about the background of Flexbox, as well as its terminology, from the above. The main two things that you need to know is that you'll be dealing with a "container" and then "items", which are inside a container. As long as you bear in mind that you're nesting items within containers, where some items may themselves be containers for other items, that's the main paradigm to get a handle on.

Let's take a look at some examples now. If you use the "Oracle JET Quick Start Basic", your user interface looks as follows:

The above three areas, i.e., Navigation, Main Content Area, and Complementary, are defined like this in the "index.html" file:

And here it is as copyable raw text:

<div class="oj-web-applayout-max-width oj-web-applayout-content">
  <div class="oj-flex">
    <div class="oj-xl-3 oj-lg-3 oj-sm-12 oj-flex-item oj-flex">
      <div id="navigationContent" role="navigation" class="oj-panel oj-margin oj-flex-item"
        data-bind="ojModule: {viewName: 'navContent'}">
      </div>
    </div>
    <div class="oj-xl-6 oj-lg-9 oj-sm-12 oj-flex-item oj-flex">
      <div id="mainContent" role="main" class="oj-panel oj-margin oj-flex-item"
        data-bind="ojModule: router.moduleConfig">
      </div>
    </div>
    <div class="oj-xl-3 oj-sm-12 oj-flex-item oj-flex">
      <div id="complementaryContent" role="complementary" class="oj-panel oj-margin oj-flex-item"
      data-bind="ojModule: {viewName: 'compContent'}">
      </div>
    </div>
  </div>
</div>

Now, let's say we want to modify the layout so that the navigation is not shown, while the main content area takes up that extra space left by the absent navigation area:

To do this, comment out the navigation section and tweak the numbering of the main content area section. The changes are in bold below

<div class="oj-web-applayout-max-width oj-web-applayout-content">
  <div class="oj-flex">
    <!--<div class="oj-xl-3 oj-lg-3 oj-sm-12 oj-flex-item oj-flex">
      <div id="navigationContent" role="navigation" class="oj-panel oj-margin oj-flex-item"
        data-bind="ojModule: {viewName: 'navContent'}">
      </div>
    </div>-->
    <div class="oj-xl-9 oj-lg-12 oj-sm-12 oj-flex-item oj-flex">
      <div id="mainContent" role="main" class="oj-panel oj-margin oj-flex-item"
        data-bind="ojModule: router.moduleConfig">
      </div>
    </div>
    <div class="oj-xl-3 oj-sm-12 oj-flex-item oj-flex">
      <div id="complementaryContent" role="complementary" class="oj-panel oj-margin oj-flex-item"
      data-bind="ojModule: {viewName: 'compContent'}">
      </div>
    </div>
  </div>
</div>

The column classes work in conjunction with the Flex Layout. Read all about them here:

http://www.oracle.com/webfolder/technetwork/jet/stylingdoc.html

Media query device relationships roughly align with the following:

  • sm = handheld device (phone)
  • md = iPad portrait mode
  • lg = iPad landscape
  • xl = desktop (larger than 1024px width)

When a size is used, it means that size and up. That's a key concept to get an understanding of. This is how all CSS-based grid systems work, by the way. Even Twitter Bootstrap works this way.

So, this...

<div class="oj-xl-3 oj-lg-3 oj-sm-12 oj-flex-item oj-flex">

...means this:

  • for small on up make this div take up 12 columns out of 12 possible (100%, in other words).
  • for large (iPad landscape) and up, override the small and make this div take up 3 columns out of 12 possible.
  • for extra large (desktop) and up, override small and and large and make this div take up 3 columns out of 12 possible.
  • (This doesn't really need to have the xl part in here since it's exactly the same as large.)
  • This div is a flex-item in a parent flex container.
  • This div is a flex container itself, as well.

The above info should give anyone a starting point, more entries coming in this series, i.e., this is the first of a series on Flexbox and Oracle JET. Many thanks to JB Brock for all the info above.

Now continue to part 2...

Sunday Apr 24, 2016

Trip Report: NetBeans Day India 2016

NetBeans Day was held in India yesterday, on Saturday, 23 April, 2016. Hosted by the Hyderabad JUG, the event included a range of topics, including a hands on lab. Here's a view on part of the group, with Rajmahendra Hegde (Hyderabad JUG leader) talking about his favorite NetBeans features, e.g., the tight integration with technologies such as Maven and the many code generation features:

Before lunch, Rajmahendra introduced the event, followed by me—I talked about the history of NetBeans and its unique features, while I also did several demos, where I showed the Maven integration and the Chrome Connector plugin for NetBeans IDE, which you can see in action here, with JUG Hyderabad co-organizer Buddha Jyothiprasad:

After lunch, Gaurav Gupta showed his amazing JPA Modeler tools, which he has been working on for the past 4 years, which includes an MVC 1.0 code generator, while an AngularJS generator is also in the planning. It was great to meet Gaurav after many years of having corresponded about his plugin and also to see him demo all of its amazing features:

In fact, he's created several plugins, all of them really professional, all of them on the NetBeans Plugin Portal:

Next up was Vladimir Kvashin, from Oracle in Russia, who demoed a range of native C++ tools in NetBeans IDE for working with and debugging the Open JDK:

Next, I introduced Oracle JET and did several demos to show how easy it is to use this interesting new JavaScript toolkit, which is open sourced and available on GitHub. And the day ended with an Oracle JET workshop, using these instructions:

Some of the presentations were recorded and can be viewed here:

https://www.youtube.com/playlist?list=PL5vTNaFL-5C7rncQrEeOsv3ZND57kX0nD

From the NetBeans Dream Team, aside from Rajmahendre, Atul Palandurkar was in attendance too, it was great to meet him for the first time! Here you see him talking about NetCAT and about the NetBeans Dream Team:

It was a great event, many thanks to Rajmahendra and the Hyderabad JUG for hosting the first NetBeans Day India, there will be many more in the coming years! 

Saturday Apr 23, 2016

Updated Tutorial: "Getting Started with Oracle JET Applications"

With the release of the 0.91 version of the Oracle JET Support plugin, the related tutorial, "Getting Started with Oracle JET Applications", needed to be updated. Today, during NetBeans Day India, where an Oracle JET workshop was held, several issues were found in the tutorial, which have now all been fixed.

The tutorial has been simplified a lot and many glitches have been fixed. 

New to the fun of Oracle JET? Go here to get started knowing everything's been tried, tested, and updated:

Getting Started with Oracle JET Applications

Wednesday Apr 20, 2016

Events Included in Oracle JET Code Completion

A big point of confusion for me, when getting started with Oracle JET, was that I didn't realize there were 'events', as well as 'properties', for each Oracle JET component. That was because the events were not included in the code completion of each of the components.

Now, since the latest release of the Oracle JET Support plugin, events are included, too. And they have a different icon to distinguish them from the properties in code completion. For example, here's the code completion for ojTable, where the elusive 'beforeCurrentRow' is included, as well as all the other events applicable to ojTable:

That's really helpful, I think! 

Tuesday Apr 19, 2016

India from Thursday 21 April to 1 May 2016

I'm off to India on Thursday morning, the 21st, arriving late that evening. The main purpose is GIDS, where I'll be speaking on Thursday the 28th in Bangalore and on Saturday the 30th in Pune:

http://www.developermarch.com/developersummit/schedule.html

Also, I'll be in Hyderabad on the 23rd for NetBeans Day India:

http://www.meetup.com/jughyderabad/events/229575675/

When I'm not in Hyderabad or in Pune, I'll be in Bangalore.

Happy to meet up with anyone during the time I'm in India, to chat, or to program, or for dinner or drinks.

Really looking forward to it, it's been several years since I've been in India!

Friday Apr 15, 2016

31 May: (Free) NetBeans Day UK!

Last year we had a great NetBeans Day in the UK, here's the trip report I wrote about it. And here's the announcement of it—29th May: (Free) NetBeans Day UK!.

Around about the same time this year, we'll have another NetBeans Day in the UK, at exactly the same location—the University of Greenwich. Here's the full program, with speakers coming from the UK, France, Germany, the Netherlands, and Tunisia:

  • 10:00 – 10:45 NetBeans Community News (Geertjan Wielenga, Oracle)
  • 10:45 – 11:30 Current State of Java & How to Get Involved (Ben Evans, JClarity, London JUG)
  • 11:30 – 12:15 News from Java EE 8 and Payara (Steve Millidge, Payara)
  • 12:15 – 13:00 Lunch
  • Track 1: Sessions
    • 13:00 – 13:45 Get Started with NetBeans IDE (Georgia Ingham/Mark Stephens, IDR Solutions)
    • 13:45 – 14:30 NetBeans, TypesScript and Angular2 (Karsten Sitterberg, Munster JUG)
    • 14:30 – 15:00 Tea
    • 15:00 – 15:45 Reactive Programming with NetBeans and Java 8 (Stefan Reuter, Munster JUG)
    • 15:45 – 16:30 Strategies for Live Coding Java (Neil C Smith, Praxis LIVE)
  • Track 2: Workshops
    • 13:00 – 14:30 Get Started with Oracle Open Source Solutions for Enterprise JavaScript (Geertjan Wielenga, Oracle, Thomas Kruse, Munster JUG)
    • 14:30 – 15:00 Tea
    • 15:00 – 16:30 Get Started Mixing AngularJS with Java EE (Nebrass Lamouchi, Davidson)
  • 16:30 – 17:00 Raffle, Prizes
  • 17:00 – 21:00 Dinner & Drinks

It promises to be another great event of fun and networking, while also being a continuation of the many NetBeans Days we've been celebrating over the past years.

Sign up here: http://www.eventbrite.co.uk/e/netbeans-day-uk-2016-tickets-22695970258

Thursday Apr 14, 2016

Trip Report: IoT Tech Day 2016

Today I attended IoT Tech Day 2016 in Utrecht. I don't normally go to hardware conferences, though nowadays everything is "IoT", just like everything is "Cloud", so it seemed a good place to be today.

The turnout was great, I heard the number 1300 at some point, though I don't know for sure. Seemed to be heaps of people though in the keynotes, which were in a great round room setting, with the speaker in the middle:

On a slightly negative note, some people mentioned to me that a lot of the sessions were quite focused on promoting specific companies and solutions rather than being focused on deep content. I don't know to what extent that was true, though there were quite a few slides throughout similar to this:

On the other hand, in those same slide decks there were plenty of generic content that was applicable to anyone. I liked tips such as this one, for anyone getting started with IoT apps:

But the highlight was certainly Wienke from TheThingsNetwork, who shared info about a fantastic startup that's taking the world by storm around providing free connectivity, all over the world:

In fact, that keynote was so interesting that I spent most of the day in the related hands on lab, with instructions here on GitHub.

Some screenshots of the whole toolchain, which would ideally all be integrated into NetBeans IDE:

In the last screenshot above, you see messages coming via the light sensor connected to Arduino.

TheThingsNetwork even gave everyone an Arduino, which you see below together with the IoT Surfboard, which was the focus of the next workshop I attended, by Vinicius and Yara Senger from Brazil:

I have known Yara and Vinicius for many years and they're active in the NetBeans community (the bundle they provide for working with their IoT Surfboard includes installers for NetBeans IDE 8.1):

Their IoT Surfboard is pretty amazing, with heaps of features, which I learned a bit about during the workshop.

It even has a breathelizer, which Vinicius demonstrated after downing most of the beer he's holding here below:

In short, it was a great show and I learned a lot and am really interested in TheThingsNetwork, check it out, really inspiring.

Wednesday Apr 13, 2016

Chart Client Generator for Oracle JET

Now that the REST Client Generator for Oracle JET is working exactly as I'd like, it's time to... work on a JET module generator for charts:

When you click Next above, the idea is that you'll be able to select one of the many Oracle JET charts, as shown below (currently working with a subset of them as a starting point for this generator):

Also, there'll be a way to import your data and then the screenshot you see above will be regenerated and shown within the wizard with all your data in it, i.e., you'll have a preview of your own data within each of the charts, and then be able to choose the chart that's most useful to you.

When you click Next above, you'll be able to specify where the JET module should be created in your project, i.e., where the HTML side and the JavaScript side will be generated by the wizard, as well as how you'd like your data to be connected into your JET module.

Ambitious, yet doable.

Monday Apr 11, 2016

JHipster in NetBeans IDE 8.1

Here's JHipster set up and deployed in NetBeans IDE 8.1:

And with Darcula: 

Now imagine we were to replace Angular in JHipster with Oracle JET. Maybe that would then be called "JETHipster"?

Friday Apr 08, 2016

REST Client Generator for Oracle JET

Let's say you've developed some Java EE RESTful Web Services in NetBeans IDE, which means you have an application that looks like this:

How do you get from the scenario above to an Oracle JET application that consumes those REST resources?

I've updated the Knockout Client Generator today, so that an Oracle JET module is generated from the selected REST resource, get it here:

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

You'll find the generator here:

Click Next and then you can browse to one of the REST resources, from an open project in the IDE:

Click Next. Then specify where the two sides of your JET module will be generated:

Click Finish. You will then get something like this in a newly generated View:

<table id="table"
       data-bind="ojComponent: {
   component: 'ojTable',
      data: datasource,
      columns: [
            {headerText: 'CITY',  field: 'city'},
            {headerText: 'PHONE',  field: 'phone'},
            {headerText: 'NAME',  field: 'name'},
            {headerText: 'ADDRESSLINE2',  field: 'addressline2'},
            {headerText: 'CREDITLIMIT',  field: 'creditLimit'},
            {headerText: 'ADDRESSLINE1',  field: 'addressline1'},
            {headerText: 'STATE',  field: 'state'},
            {headerText: 'FAX',  field: 'fax'},
            {headerText: 'EMAIL',  field: 'email'},
]}">
</table>

And you will get this in a newly generated ViewModel:

define(['ojs/ojcore', 'knockout', 'ojs/ojtable'
], function (oj, ko) {
    function GeneratedContentViewModel() {
        var self = this;
        self.data = ko.observableArray();
        $.getJSON("http://localhost:8080/CustomerBackend/webresources/com.mycompany.customerbackend.customer/").
                then(function (customers) {
                    $.each(customers, function () {
                        self.data.push({
                            city: this.city,
                            phone: this.phone,
                            name: this.name,
                            addressline2: this.addressline2,
                            creditLimit: this.creditLimit,
                            addressline1: this.addressline1,
                            state: this.state,
                            fax: this.fax,
                            email: this.email,
                        });
                    });
                });
        self.datasource = new oj.ArrayTableDataSource(
                self.data,
                {idAttribute: 'id'}
        );

    }
    return GeneratedContentViewModel;
});

Thursday Apr 07, 2016

Knockout Client Generator for RESTful Web Services (Part 2)

Sometime ago I made a Knockout Client Generator for RESTful Web Services. It's been updated for usage in NetBeans IDE 8.1:

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

The question now is, how to change the generated code so that it works in the context of an Oracle JET application?

OK, here's the generated JavaScript code, within a "define" block, i.e., within the JavaScript side of a JET module: 

define(['ojs/ojcore', 'knockout'
], function (oj, ko) {
    function customerContentViewModel() {
        var self = this;
        self.items = ko.observableArray();
        $.getJSON("http://localhost:8080/CustomerBackend/webresources/com.mycompany.customerbackend.customer/").
                then(function (customers) {
                    $.each(customers, function () {
                        self.items.push({
                            city: ko.observable(this.city),
                            phone: ko.observable(this.phone),
                            name: ko.observable(this.name),
                            addressline2: ko.observable(this.addressline2),
                            creditLimit: ko.observable(this.creditLimit),
                            addressline1: ko.observable(this.addressline1),
                            state: ko.observable(this.state),
                            fax: ko.observable(this.fax),
                            email: ko.observable(this.email),
                        });
                    });
                });
    }
    return customerContentViewModel;
});

Meanwhile, the HTML side is the same as before:

<body>
    <table border="1">
        <thead>
            <tr>
                <th>CITY</th>
                <th>PHONE</th>
                <th>NAME</th>
                <th>ADDRESSLINE2</th>
                <th>CREDITLIMIT</th>
                <th>ADDRESSLINE1</th>
                <th>STATE</th>
                <th>FAX</th>
                <th>EMAIL</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: items">
            <tr>
                <td data-bind="text: city"/>
                <td data-bind="text: phone"/>
                <td data-bind="text: name"/>
                <td data-bind="text: addressline2"/>
                <td data-bind="text: creditLimit"/>
                <td data-bind="text: addressline1"/>
                <td data-bind="text: state"/>
                <td data-bind="text: fax"/>
                <td data-bind="text: email"/>
            </tr>
        </tbody>
    </table>
</body>

I am also working on rewriting the plugin so that it directly generates the above type of code, i.e., JET modules, instead of standard Knockout code. There'll be options for which type of JET component you'd like to use, e.g., a table or a grid, etc, and then the code will be generated using the component of your choice.

Wednesday Apr 06, 2016

New Release of Oracle JET Support Plugin for NetBeans IDE 8.1

Great news—there's a new release of the Oracle JET Support plugin for NetBeans IDE. The plugin is now at version 0.9.1, as shown below in the Plugin Manager (under the Tools menu). If you have an earlier version installed, go to the Updates tab below and you'll be able to install the new release there.

When you've installed the new release of the plugin, you'll see in the New Project dialog (Ctrl-Shift-N) that there's a different project template available in the "HTML5/JavaScript" category. This is the "Oracle JET Base Distribution" project template, i.e., the absolute basic starting point, the one I've been using a lot since it doesn't include all kinds of sample code that can initially be confusing:

In the "Samples" category, you'll find the "Oracle JET QuickStart Basic" project template, which is the same as before, just in a different location, i.e., the correct location, since it is a sample and not an empty project, together with the "Oracle JET Component Interaction Sample", which has been there from the start of the plugin.

When you complete the step-by-step wizard for setting up the "Oracle JET Base Distribution" project template, you'll see this in the Projects window:

In the New File dialog, two new Oracle JET templates are available for the first time, shown below:

The difference between these two templates is that, while both create a JavaScript file and HTML file, the "Empty" module has absolutely minimal content, while the "Knockout" module is the "Hello World" example from the Knockout site. When you click Next for both of these templates, you'll see this:

I.e., notice that now, if "js/viewModels" and "js/views" don't exist, they'll be created for you and a "home.js" will be put in "js/viewModels", while a "home.html" will be put in "js/views":

As always, you need to get "main-template.js" and copy it to "js/main.js":

In "main.js", type "vm" and then press Tab to create your root ViewModel in the require block, i.e., the code template "vm" is part of this plugin. Also add "ojs/ojmodule" to the require block.

Create an "index.html" file in the root folder of the project and reference the RequireJS library, while setting "js/main" as the "data-main", and notice that when you use the "ojModule" data binding to load your "home module, you have code completion and documentation to help you, for the first time. 

As a special bonus, go to the Template Manager, under the Tools menu, you'll be able to edit all the templates used by the New File dialog, including the Oracle JET templates, so that you can use them to generate whatever you like whenever a new Oracle JET module is created via the New File dialog.

Note: All the new features in the Oracle JET Support plugin come from the "SmartTools4OracleJET" plugin, which is now no longer needed. If you have it installed, uninstall it. It will also be removed from the Plugin Manager.

In NetBeans IDE 8.2, scheduled for August this year, the Oracle JET Support plugin will be a standard part of NetBeans IDE, you'll not need to install it yourself, i.e., all of these features will be available out of the box. 

Tuesday Apr 05, 2016

Outages

I've worked in international organizations all my working life, i.e., since 1996. (That's 20 years!) Not just international organizations—really large international organizations. For example, the larger international organizations I have years of experience working for include Compuware, Coca Cola, Sun Microsystems, and currently Oracle, while I've also worked within or for companies of somewhat smaller sizes.

Across the things I've experienced at these various international organizations, especially the largest ones, a few interesting insights stand out quite clearly, though they may be quite unsurprising to many, given what we know collectively about large organizations. And it's all about scale. I've mainly learned that the size of an organization doesn't say anything about how well organized it is nor even what "well organized" means. Smaller organizations can solve problems much more quickly than large ones. At one large international organization, a colleague organized an event in a room next door to the cubicle where he was working in England and needed to get permission to unlock the door of that room at a certain time by interacting with colleagues in Germany. Another colleague I've worked with was told there would be an upgrade to a set of software, which turned out to actually be a complete reinstall of that software, which had a number of unexpected repercussions. The word "upgrade" to one person entails the same thing as "reinstall", while for the other person the two are totally different and have different risks and consequences. A related factor is connected to expectations and planning—e.g., when something is expected to take X amount of time because it is simply an "upgrade", it ends up taking far longer than X, when it turns out it was a "reinstall" of critical software that connects to data that depends on certain systems being in certain locations at certain versions, etc. 

Elsewhere, I've been told about engineers fixing a serious problem in the US, while requiring the assistance of colleagues in Europe—of course, there's a time difference and at the end of the day suddenly there weren't responses to e-mails anymore because those on the other end had simply gone home at the end of their working day. Plus, the colleagues in the US had no idea who the colleagues in Europe were, exactly, nor who precisely was responsible for what, nor whether or when something should be escalated on their end, and to whom. Something else I've encountered over the years is that a server crashed and, while one set of colleagues wasn't all that worried because they assumed that surely there'd be a backup for their lost data, another set of colleagues suddenly became aware that the backup data was found on the same server as the original data, i.e., the server that had crashed and in the end turned out to be beyond repair. I've never done research on this, though I'll bet that more single points of failure are found in large organizations than in small ones or, at least, that they have a much more complex impact than in smaller organizations. Together with all this, there are periodic maintenance enhancements that any system must undergo—in each case any number of these kinds of fragilities and mix ups can arise. For example, I've seen scenarios where after a maintenance enhancement a critical data set was mysteriously corrupt—and it was impossible to establish, in a short space of time, whether the data was actually corrupt, whether the maintenance enhancements had caused something to happen, or what exactly the new poisonous element in the system might have been. Something else is that one interacts very sporadically, say once or twice a year, with a team of developers focused on maintenance releases of the internal software you're using, making it difficult to establish any kind of relationship or even overview of who does what where with whom.

When they arise, these kinds of confusions tend to happen in a variety of combinations simultaneously and, whilst establishing causes, you're also trying to get some semblance of normality back to the outside world. Variations of these kinds of problems happen in all kinds of organizations, though they become all the more complex the larger the organization is, the more people are involved, the more geographies, the more timezones, the more language differences, the greater the difference in working within hierarchies, the specifics of specific sub-organizations, and the more differences there are in working style. "There is no excuse for any of this!" you exclaim in exasperation, while not realizing that the closer you get to the problem the more people you'll find agreeing with you and being a magnitude more exasparated than you may even imagine they are. In these kinds of complex scenarios, the cost of changing processes to improve them is greater than the cost of keeping everything the way it is and simply dealing with occasional system failures. 

Despite all that, I still prefer working in large international organizations over small local alternatives. Primarily, I like being able to have a global impact and I enjoy the international interactions. Also, a large international organization is more likely to give you the opportunity of moving around to different projects and travel, if you're doing that kind of work, to other countries to interact with peers and share knowledge, etc. There are definitely pains to operating within these organizations, to yourself as an employee, as well as to the organization's customers, though overall and on balance, it continues to be my preferred way of working and, from the customer point of view, the advantages outweigh everything in the end.

Sunday Apr 03, 2016

Custom Elements & Attributes in HTML in NetBeans IDE

Here I have a custom element and attribute I have created in an HTML file in NetBeans IDE. When I press Alt-Enter or the yellow lightbulb on the left side of the editor, NetBeans offers to create an element, in a file that will be named "customs.json":

When I invoke the above action, the red error underlines are remove, though I can still click the yellow lightbulb or press Alt-Enter for further help:

For example, I'm now also able to declare "abc" as an attribute of element "test", as shown below: 

Notice also that the last item above will open the "customs.json" file for you, so you can take a look at it or tweak it further. Alternatively, switch to the Files window (Ctrl-2) and then you'll find the file in your "nbproject" folder.

In the above scenario, the result is as follows, which also gives you an idea of the structure of this kind of file:

{
    "elements": {
        "test": {
            "attributes": {
                "abc": {}
            }
        }
    },
    "attributes": {}
}

And now your new element is in the code completion box, i.e., when you press Ctrl-Space:

A more complicated scenario:

And here's the "customs.json" for the above:

{
    "elements": {
        "foo": {
            "attributes": {
                "cool": "boolean",
                "id": "id",
                "class": {
                    "type": "css-class",
                    "doc": "http://foo.org/elements/foo"
                }
            },
            "elements": {
                "infoo":{
                }
            }
        },
        "infoo2": {
            "parent" : "foo"
        },
        "infoo3": {
            "parent" : ["infoo", "infoo2"]
        }
    },
    "attributes": {}
}

Take note of the "class" attribute defined above, this is how it looks when I now use code completion:

Also see these:

Saturday Apr 02, 2016

The Code of Most Authentic Technology Evangelism

You may say that technology evangelism is by definition authentic and that it is tautology to make a point of authenticity in this context. I disagree. I've seen plenty of—and been guilt myself of—inauthentic technology evangelism.

I have now been a technology evangelist in various forms since 1996, though increasingly specifically since 2004 when I joined Sun Microsystems and even more specifically since becoming part of Oracle in 2010. I do all the things, plus more, that technology evangelists do—product management, community development, integrating customer feedback with developer tasks, analyzing requirements, competitive analysis, blogging and other social media, conferences, writing, researching, developing samples, keeping my skills up, traveling a lot, interacting with peers and other developers etc etc etc. Recently I saw Josh Marinacci's excellent presentation on developer evangelism here on YouTube, which is well worth watching (this one too), where he references and discusses at the end Guy Kawasaki's 10 principles, which you can see right here. Those are all great points. I totally agree with them.

Looking at my own years of experience, I'd codify my key lessons down to these 5 specific points—which I hereby call Most Authentic Technology Evangelism, which not at all coincidentally has as its initial letters the word MATE. That's the key to authentic technology evangelism—it's all about friendship and bringing people together and just hanging out. 

Here are the five principles of Most Authentic Technology Evangelism: 

  1. Transparency is key. Be the ant-marketing-guy. Just be yourself with all your rough edges and imperfections. Don't be too glossy and perfect. Feel free to say: "Look, officially this is the cool thing about product X. I disagree, I think this and this and this is so much cooler!" Also say: "We're in the process of smoothing out the details, there are still some hiccups here and there, though what I am here to show you is what we're working on and where we're going." These kinds of approaches come across really authentically (because they are really authentic) and everyone will be on the edge of their seats, plus if anything goes wrong it's not like you didn't warn them. And never (or, seldom, or sparingly, or never without planning for it) use the word "but" (a harsh, disruptive word), always use the word "though" (a soft, transitional word). Underline your transparency by using words like "Honestly" and "Really" and "What I've found is that...". Despite your personal opinions on various things, try never to be negative in public, nobody likes seeing you sneer, for whatever valid reason you may have. The more passionate you are, the more difficult it is to be relaxed about it, though being relaxed is important, too.

  2. Create a personal layer on top of the official story. Something becomes real when you're enthusiastic about it yourself. Can't convince yourself about the relevance of your product? You're not going to convince anyone else either. Though it goes further than that. No one likes being convinced or preached to or told to do something differently. Instead, if you layer your own personal experiences (which may even be at a slight angle to the official story) on top of the official story and simply talk, without even wanting to be convincing, i.e., you simply want to spend an hour on a stage being enthusiastic, that's when your story will work best. Use slides to provide context and background. Never put a screenshot in your slide if you could simply be doing a demo instead. Always do live coding and always be prepared to abandon a demo and move on if you can see something is crashing and burning. Don't stand by the wreck and don't apologize, just move on, everyone appreciates your attempt at live coding and the longer you try to keep your failing demo alive the more uncomfortable it is for everyone involved. Move on, be enthusiastic, be as technically relevant as possible, keep as much of your audience involved as you can, don't stress when one or two attendees decide they have better things to do, just stay upbeat and enthusiastic always.

  3. Build bridges to other technologies and organizations. The most enjoyable thing about technology evangelism for those who are well suited to it is its diversity. On Monday you're talking to aerospace software developers in a large enterprise, on Tuesday you're at Starbucks with one single person who is the "founder, owner, CTO, CEO, and lead developer" of a startup, on Wednesday you're at a conference, on Thursday you're just hanging out randomly to recover from Monday, Tuesday, and Wednesday, and then on Friday you're writing a detailed step by step tutorial about a cool new open source technology you've discovered that you're sure few people know much about though most people would be extremely interested in if only they knew about it. You can be the one exposing a hidden technology to the world! Every day! You always have a scope within which you're officially working and specific things you're supposed to be achieving, though if you look outside of that scope, and almost ignore it, while keeping it constantly close at hand, you'll achieve all your original aims, plus a whole bunch of extra ones without having put in very much effort at all.

  4. Anticipate and embrace the ups, downs, twists, and turns. Ride the tigers and hold on tight, don't allow yourself to get thrown off at the first bend in the road. Or, the worst bend in the road to get thrown off of is actually not the first or second—it's much much later right before you see the light at the end of the tunnel that you might have mistaken for an oncoming train. Had you stuck around a little bit longer you might have been able to benefit from your hard work.

  5. Stick with your technology for a long, long, long, long, long, long, long, long, long, long, long, long, long time. The worst technology evangelist is one who praises product X today and product Y tomorrow and product Z the next day. (An exception is for meta evangelists who can zoom out and move from product to product while promoting a meta product. These are true gurus and you know who you are!) Rewards await you if you stick with the thing you're enthusiastic about through all the ups and downs and through all the vagaries of everything involved and the thicks and thins of the industry you find yourself in. That entails, however, that the technology you're promoting is one that is diverse and interesting enough to allow you to go down a rabbit hole when the shots are being fired on the surface or scamper back onto the surface when water is being poured into the rabbit hole you've been safely digging into.
That's it! The principles of Most Authentic Technology Evangelism. Honestly, these have been in the back of my mind for quite some time and I've rammed them into this blog entry in the space of about 5 minutes.

Friday Apr 01, 2016

Trip Report: NetBeans Day Germany 2016

NetBeans Day Germany was held yesterday, Thursday, 31 March 2016. There was a big turnout, the event was "sold" (i.e., free) out, with about 100 attending. Here's a view from the first session, a packed out room. The whole event happened at Oracle Germany in Munchen, an excellent location, great facilities, including a great lunch.

In the first session, I went through the history of NetBeans, talked about its unique features, did some demos, and showed the NetBeans roadmap:

Then Adam Bien did an excellent keynote on microservices and Java EE:

Adam showed a bunch of cool things. He did quite a bit of work with Docker in NetBeans IDE, where he showed the creation of new Docker images:

He also showed that he gets the most out of NetBeans! Take a look at the long list of servers he's registered in NetBeans for his daily development needs:

Next up was... Jaroslav Tulach, the founder and original lead architect of NetBeans IDE, who started his keynote with the words, "Yes, NetBeans is my fault!" :-)

Here's his current look and feel:

Jaroslav currently works at Oracle Labs, on Graal/Truffle, which is the "fastest (J)VM on the planet", all the details are on his slide below:

He also showed how to debug from Java to Ruby to JavaScript, via the enhanced debugger created by Oracle Labs in NetBeans IDE:


After a nice lunch break, the room was split in two. In the first track, Toni Epple showed how to use DukeScript to create games comparable to Candy Crush:

In the other track, Johannes Weigend did a great session on Apache Spark and NetBeans IDE, very well attended:

In another session, Oracle JET was the focus, which I introduced in some detail, including several small demos, over the space of 1 1/2 hours:

...while Thomas Kruse, during the same session, included a segment on porting Java Swing applications to Oracle JET:

There were other sessions too, on Angular and TypeScript, together with NetBeans, for example, by Karsten Sitterberg:

Other sessions included a focus on RESTful web services and documentation, by Sebastian Daschner and a session on Oracle's ideas around microservices, by Peter Doschkinow. The event ended with a raffle, followed by a great dinner (in the pic below, everyone is impatiently waiting for the 1st beer)...

...which rounded off a really great day, maybe the best NetBeans Day ever held. Upcoming NetBeans Days include India (April), England (May), and Brazil (June). Many others are being planned too!

About

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

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

Search

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