X

Geertjan's Blog

  • January 7, 2016

HTML Palette for Oracle JET Users

Geertjan Wielenga
Product Manager

Here's a super handy tip for anyone using Oracle JET (http://oraclejet.org) or, in fact, anyone doing anything at all with HTML in NetBeans IDE. But, since I am convinced Oracle JET is pretty awesome, I'll focus in particular on Oracle JET components here.

Let's take this scenario as a starting point, i.e., you're in the process of creating a modular Oracle JET application. Right now, you've opened the "home.html" document and you press Ctrl-Space. That brings up the code completion box for HTML files, which by default shows the content shown in the screenshot:


Of course, Oracle JET comes with its own set of HTML components. For example, from the Oracle JET Cookbook, you can see that a basic 'ojChart' component is expressed as follows, within a DIV element:

<div id="areaChart" data-bind="ojComponent: {
component: 'ojChart',
type: 'area',
series: areaSeriesValue,
groups: areaGroupsValue,
animationOnDisplay: 'auto',
animationOnDataChange: 'auto',
orientation: orientationValue,
stack: stackValue,
hoverBehavior: 'dim'
}"
style="max-width:500px;width:100%;height:350px;">
</div>

Wouldn't it be handy if you could press Ctrl-Space... and then see the 'ojChart' component provided there, exactly the same way as other HTML components are provided, which you can then press Enter on, which will cause the IDE to create the complete DIV element shown above? You'd never need to cut and paste it from the Oracle JET Cookbook again.

Something like this:

How to achieve the above yourself? The key to all of this is that whatever is found in the HTML Palette is automatically made available in the code completion box for HTML files. That's pretty cool and so all we now need to do is get out snippet into the HTML Palette.

Take the following steps:

  1. Open an HTML file and then open the HTML Palette (Ctrl-Shift-8).
  2. Right-click in the Palette and click "Create New Category". Name the category "Oracle JET".
  3. From the HTML Editor, drag the snippet into the Oracle JET category in the HTML Palette. The "Add to Palette" dialog appears. At least enter a name. Optionally, provide a tooltip and icons. Click Add to Palette.

Now your Oracle JET component is in the HTML Palette. You can drag it from there into the HTML Editor. You can also press Ctrl-Space and then the code completion box opens, which now includes your Oracle JET component.

But... best of all is that you can start typing the first few letters of the name of your code snippet and then press Ctrl-Space and you'll be able to click Enter on the item and very quickly have generated for you the HTML content you need:

Note: I have created an issue to have the Oracle JET components included in the palette by default:

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

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.