NetBeans 73 NewAndNoteworthy

Revision as of 16:10, 31 January 2013 by Pjiricka (Talk | contribs)

Contents

HTML5 Application Project

NetBeans 7.3 introduces a new project type optimized for developing client web applications. Client web application are written using HTML5/CSS3/JavaScript.

Project Creation

This new project type can be found in New Project wizard in "HTML/JavaScript" category:

Image:Html5project-a1.png

The wizard allows to create an empty project or utilize one of public online templates:

Image:Html5project-a2.png

Similarly a JavaScript files for many libraries and frameworks can be downloaded from public CDNs:

Image:Html5project-a3.png

Project Layout

Once the project is created it will contain Site Root (that is your project sources), Unit Tests (your JavaScript unit tests which are located separately from production sources) and Configuration Files (misc configuration files, for example to run your unit tests):

Image:Html5project-a4.png

Project Execution

Created project can be run in one of the browsers:

Image:Html5project-a5.png

The external Chrome with NetBeans integration browser and Embedded WebKit browser are tighly integrated with the IDE and enable to run JavaScript debugger, instant CSS styling, reload files in browser upon Save and other features which will be described in detail following chapters. When project is run in external Chrome with NetBeans integration the Chrome notifies you that page is being debugged by NetBeans:

Image:A10.png

Unfortunately the Chrome does not allow to hide the notification - closing it disconnects the NetBeans from the browser.

The execution can be further customize via project properties. By default all files are open via internal lightweight webserver:

Image:Html5project-a6.png

Unit Testing

In order to run JavaScript unit tests the js-test-driver server needs to be configured:

Image:Html5project-a7.png

and running/debugging JavaScipt unit tests is not different from other languages:

Image:Html5project-a8.png

Templating

HTML5 Application project can be turned into a template for new projects. Simply right click project's node and 'Save As Template' it and later user the template from New Project wizard:

Image:Html5project-a9.png

HTML5 Sample Applications

Several sample HTML5 applications can be opened directly from the New Project wizard. Some of these are included in NetBeans directly, others are downloaded from GitHub on the fly.

Image:Easel_Samples.png

CSS Styling

When you execute a project or a file then the following views are opened by default.

  • HTML View in Navigator - displays the structure (DOM tree) of the page
  • Web Browser (embedded or external) - renders the page itself
  • CSS Styles view - provides information about CSS styles
  • Rule Editor - allows editing of CSS rules

Image:CSSStyling.png

See more information about each view below.

HTML View in Navigator

HTML View shows the DOM tree of the executed page.

The view shows not only elements present in source of the page but also all dynamic modifications done by JavaScript.

Image:HTMLView.png

Web Browser

When you execute a page then the page is opened in a browser pane and you can interact with it as you are used to. When you want to select an element for styling purposes you can either do so in Navigator or you can switch the browser into Select Mode and select the element in the browser directly.

Embedded Browser

Select Mode

You can switch the Select Mode on/off using the toolbar button or Ctrl+Shift+S shortcut.

Image:SelectModeEmbedded.png‎

Resizing and Zooming

You can check how the executed page would look on devices with a different resolution.

Image:ResizingEmbedded.png‎

Chrome

NetBeans IDE is bundled with a Chrome extension that provides a smooth interaction between NetBeans IDE and Chrome.

Select Mode

You can switch the Select Mode on/off using the context menu, Ctrl+Shift+S shortcut or using the popup that is displayed by clicking on a NetBeans cube in the address bar.

Image:SelectModeChrome.png‎

Browser Window Dimensions

Chrome extension allows to resize browser window to the specific dimensions.

Image:Chrome-ext-resize-01.png

These dimensions can be easily customized.

Image:Chrome-ext-resize-02.png

CSS Styles

CSS Styles view shows style information related to the executed page or selection.

Document section of CSS Styles view shows all stylesheets used by the executed page. The list of the displayed rules can be filtered using the field at the top.

Image:CSSStylesDocument.png‎

Selection section of CSS Styles view shows a summary of CSS rules affecting the selected element. Each row of the Styles table shows the selector of a rule and the name of the element from which this rule is inherited by the selected element. Property Summary provides list of all CSS properties modified by these rules.

Image:CSSStylesSelection.png‎

You can use Go to Source action (or double-click) on any rule or property in CSS Styles view to jump to the corresponding source code.

Rule Editor

When you select a rule in CSS Styles view (or when you place a caret into a rule in a .css file) then Rule Editor displays details of the rule and allows you to edit it.

Image:RuleEditor.png‎

Note that any modification of a CSS file is reflected in the executed page immediately.


JavaScript Editor

The JavaScript Editor was rewritten. The new editor brings many improvements and features that ware not in the previous one.

  • The coloring schema was changed and improved.
  • New formatter with many options
  • Model based code completion - new the code completion should be more clever, suggestions should more fit what you need.
  • Supporting ScriptDoc, ExtDoc and JsDoc in version 2.
  • Better occurrence support, also in the documentation.
  • Better supporting for JQuery
  • Recognizing JavaScript patterns
  • Core signature files updated to EcmaScript 5.1
Plenty of Code Templates and possibility to define custom Code Templates separately for JavaScript source and documentation (block, doc comments)
box
Brand new formatter with lot of options including indentation, spaces and wrapping.
Indentation
Spaces
Wrapping
code completion improvements - completion per documentation tool, CC entry templates
box
mark occurences within documentation for names and declared types
box
box
instant rename on found occurences
box
comments generation for the JavaScript functions, variables, objects, properties Before:
box
After:
box

JavaScript Debugger

NetBeans 7.3 includes a new JavaScript debugger, which works with either Chrome or the Embedded WebKit browser. The debugger is launched automatically when running a HTML5 Application or its unit tests, and all the debugger views are open by default as minimized. The debugger views are:

  • Breakpoints
  • Call Stack
  • Variables
  • Browser Log

Image:BreakpointsWindow.png

The debugger supports debugging both local files that are included in the HTML5 Application, as well as remote JavaScript files that are linked to the application, but are not included in its sources.

Let's now discuss the individual features of the JavaScript debugger.

Breakpoints

The debugger supports several kinds of breakpoint:

  • Line breakpoints
  • DOM Breakpoints
  • Event Breakpoints
  • XMLHttpRequest Breakpoints

New breakpoints can be set using the Debug -> New Breakpoint... menu item.

Line Breakpoints

Line breakpoints are triggered when the script reaches a particular code line.

Image:LineBreakpoints.png

DOM Breakpoints

DOM breakpoints are triggered when there is a change to a particular DOM node.

Image:NewDOMBreakpoint.png

Besides the New Breakpoint dialog, DOM breakpoints can also be set in the popup menu of the Navigator window for HTML files.

Image:DOM_BP_in_Navigator_Popup.png

Event Breakpoints

Event breakpoints are triggered when particular events in the page happen.

Image:NewEventsBreakpoint.png

XMLHttpRequest Breakpoints

XMLHttpRequest breakpoints are hit when network communication using XMLHttpRequest is performed.

Image:NewXHRBreakpoint.png

Breakpoints deactivation

Breakpoints can be disabled either on a case-by-case basis, or deactivated quickly all at once. This is managed in the Breakpoints window, and reflected in the editor.

Image:DeactivateBreakpoints.png

Image:DeactivatedBreakpointsInEditor.png

Call Stack

Call stack displays the current execution stack of a JavaScript program. Call Stack window has three context actions: "Make Current" (which changes the current frame in which variables are evaluated), "Go to Source" and "Copy Stack" (which copies the stack trace to Clipboard).

Image:CallStack.png

Evaluating Variables and Expressions

Variables that are valid in the current scope can be inspected in the Variables window.

Next, it is possible to evaluate arbitrary expressions using the Debug -> Evaluate Expression... menu item. An evaluator window is opened in bottom editor area and evaluation result is visible in Variables window.

Image:EvaluatorMenu.png

Another way to evaluate values of variables is using the debugger tooltip, which has an expandable tree structure.

Image:ExpTooltip.png

Browser Log

The Browser Log shows all exceptions, errors, warnings, etc. as they happen in browser.

Image:Browserlog.png


REST service consumption

NB allows to choose RESTful web service from the existing Web project ( REST as a Java code ) and generate JS client for it.

REST JS client wizard

The generated code requires Backbone.js library so in case the library is already in the project it will be included in the final html with its dependencies. Otherwise user is able to choose local Backbone usage via wizard checkbox. The wizard contains two steps and the second is optional: html file generation could be skipped. It is possible to generate some skeleton code ( without UI with further manual code customization ) and code based on some table grid UI ( tablesorter jQuery plugin ).

Image:RESTWizard.png

Backbone based REST client generation

The result of the wizard is generated JS code and (optionally) HTML file which has a skeleton which gives an idea to the user how the code could be customized. If REST service has an interface around of data collection and Tablesorter UI has been chosen then generated code will be adopted to use it with Tablesorter jQuery plugin. The REST data is rendered as a table grid in the latter case.

Image:ModelCode.png

Image:HtmlCode.png

Image:RESTResult.png

Embedded Browser

There is a new full-blown embedded browser based on Webkit. The implementation is provided by JavaFX component WebView. JavaFX SDK version 2.2 or better is required.

Image:Browserwindow.png‎

Editor

Clipboard History

Access to last 9 clipboard entries. shortcut: ctrl+shift+D Image:ClipboardHistory.png


Show number of matches in searchbar

Image:searchMatches.png

Breadcrumbs

A new navigation bar shows the current embedding in the editor.

Image:breadcrumbs.png

Clicking on the arrows shows the children like members/methods.

Image:breadcrumbsexpanded.png

Bracket Matching

In the left margin you can now see an extra bracket that shows you how far the block contained in the brackets stretches.

Image:leftmarginbracketoutofsight.png

Out-of-sight brackets will be also displayed in a popup.

(Screenshots from https://blogs.oracle.com/geertjan/entry/lost_in_code)

Copy File Path

A new action to copy file path of file to clipboard has been added to the context menu of a file tab. You can also select files or projects in project/files view, invoke the shortcut and their files paths are copied to clipboard separated by new space. When there are spaces within the path, the copied path will be surrounded by quotation marks.

Shortcut Alt+Shift+L

Image:CopyFilePaths.png

See http://netbeans.org/bugzilla/show_bug.cgi?id=153728 / http://netbeans.org/bugzilla/show_bug.cgi?id=219848

'Go To File'-dialog

Support of line numbers

The file dialog was enhanced to support line numbers. For example 'MyClassObject.java:123' will open the file MyClassObject.java at line 123, if the line number is valid for the file.

See http://netbeans.org/bugzilla/show_bug.cgi?id=217050

Java

Redesign of inspect members and hierarchy

Image:InspectMembersRedesign.gif

See https://blogs.oracle.com/geertjan/entry/netbeans_ide_7_3_easy

Refactoring

Added filters for the Find Usages results.

Image:FuFilters.png

You can filter for

  • read-access, write-access, read-write-access
  • imports
  • comments
  • tests (this allows to filter out results from test-sources)

Export/Import Formatting options

Added option to export/import java formatting and indentation for all languages Image:ExportImport.png

Hints

null Dereference

A new warning that shows places that may cause NullPointException was added:

Image:npe-check.png

Organize Members

A new optional warning checking that class' members follow the selected formatting setting was added, together with a fix for that warning:

Before After
Image:organize-members-before.png Image:organize-members-after.png

"Remove @Override Annotation" hint

Image:removeoverride.png

http://netbeans.org/bugzilla/show_bug.cgi?id=222342

Source Menu Actions

Organize Members and Organize Imports hint are now available as explicit actions in the Source menu:

Image:source-menu.png

Suggestions

Implement Unimplemented Methods

When the caret is on an implemented interface or extended class, an option is given to implement only the methods from the interface or class:

Image:implement-unimplemented.png

Invert If

An option is given to invert the condition of the if statement, together with swapping the then and else section of the statement:

Before After
Image:invert-if-before.png Image:invert-if-after.png

Move initilization to constructor

An option is given to move a field initialization into constructors:

Before After
Image:move-to-initializer-before.png Image:move-to-initializer-after.png

Customizable Method Bodies

Bodies of newly created methods can now be customized in Tools/Templates/Java/Code Snippets:

Image:code-snippets.png

'Go To Type'-Dialog

Support of fully qualified names

Now it supports fully qualified names like

  • java.util.Collection -> finds java.util.Collection, java.util.Collections
  • j.u.col -> finds java.util.Collection, java.util.Collections
  • java.u.AL -> finds java.util.ArrayList, java.util.AbstractList, ...

See http://netbeans.org/bugzilla/show_bug.cgi?id=217187

Highlighting of matching patterns

Matching patterns are highlighted bold

See http://netbeans.org/bugzilla/show_bug.cgi?id=216833

Ant

Bundled Ant upgraded to 1.8.4.

Maven

  • Less memory needed to for Maven projects, in some cases significantly
  • Effective POM editor tab in pom.xml editor
File:effectivepom.png
  • Code Generator for pom.xml files to generate License elements with list of licenses known to the IDE. Added benefit there is automatic license header generation for new files.
  • POM Hint marking blacklisted repositories for deletion from the pom.xml file. Blacklist configurable, with java.net repositories as default value.
  • Introduce property POM hint takes selected text and offers to create a new property or existing one if it covers the selected text. The selection is replaced by property expression.
  • Compile on Save is disabled by default.

Profiler

Sampled memory profiling

  • Memory profiler now provides sampled histograms of live objects imposing virtually no overhead to the profiled app.

File:SampledMemorySnapshot.png

Comparing CPU snapshots

  • CPU snapshots can now be compared the same way as memory snapshots.

File:CompareCpuSnapshots.png

Retained size by class

  • Classes view in HeapWalker now provides cumulative retained sizes per class.

File:RetainedSizeByClass.png

New Attach Settings dialog

  • Attach Wizard has been replaced by a much simpler Attach Settings dialog.

File:AttachSettingsDialog.png

Support for Linux ARM architecture

  • Profiler can now attach to a remote Java application running on a Linux ARM machine.

Java EE

JPA

Stand alone jpql editor is added, you can run your jpql from ide directly instead of running your jpa application, you may need to register connection and database driver on Services tab if connection isn't registered withing Netbeans already and you need to build your application. JPQL Editor support code completion for JPQL keywords and for managed entities, it can provide you SQL representation of your JPQL query if eclipselink or hibernate provider is used or hints what is wrong with your JPQL query.

Image:JPQLEditor1.png Image:JPQLEditor2.png

REST

Jersey based configuration automatically extends project's classpath with Jersey libraries ( with packaging disabled if they are bundled with target JEE server ) and JSON related improvement is implemented ( see issue 209969 ).

PHP

Editor

  • Parsers for Namespaced Annotations (Symfony 2, Doctrine 2, etc.)

File:Namespaced-annotation-parsers.png

File:Gen-methods-1.png File:Gen-methods-2.png File:Gen-methods-3.png

File:Ambig-compar-1.png File:Ambig-compar-2.png

  • Improved Error Hanlding

Project

File:Composer.png

File:NB73-php-poject-problems.png

File:NB73-php-external-commands.png

Smarty

File:Smarty-unpaired-tags-error.png

File:Smarty-tags-matching.png

Twig

File:Twig-cc.png

File:Twig-ano-1.png

File:Twig-ano-2.png

Groovy

  • Groovy 2.0 integration
  • Error-badges in Groovy/Grails projects
  • Groovy support in Java EE projects
  • Groovy JUnit test support
  • Run/Debug/Test/Test Debug actions in groovy file context menu
  • Better editor occurrences highlighting
  • Find Usages and Rename refactoring implemented (for classes, methods, variables)

C/C++

  • Memory usage improvements - requires 2x less memory for big projects
  • Parser speed and scalability improvements
  • Relocatable index - with some setup project index may be kept with project metadata and used even if the project was moved
  • VCS ready projects - major improvement in how projects are stored in VCS
  • Breakpoints grouping (per file, project, type etc.)

JavaFX

FXML / SceneBuilder Support

FXML editor with code completion
  • Implemented code completion for raw .fxml editor
  • Controllers can be generated or existing controllers updated from .fxml file
  • Partial validation with error hints
  • Javascript event handler syntax highlighting and code completion

Project Infrastructure

  • Platform infrastructure updated to support JDK 7u6+ on Windows, Mac, Linux
  • Optimized build infrastructure makes repeated project runs and rebuilds faster
  • Support multiple concurrent runs of the same FX Project
  • Support native deployment introduced in JDK 7u6/FX SDK 2.2
  • Fallback JavaScript-free build infrastructure to support JDKs without scripting engine

Other

  • Insert Code... ->Add Property... now supports JavaFX 2 properties

Platform

Window System

  • UI indication of main toolbar overflow with a new possibility to see the items in a drop down menu rather then being cut and invisible.
  • New action introduced for reopening the recently closed document - File / Open Recent File submenu, and a new shortcut CTRL+ALT+T.
  • There's a new switch in Tools - Options - Miscellaneous - Windows to use native file chooser on Mac OS X.
  • When dragging a window to a new location there's visual indication when document type window will be mixed with non-document windows and vice versa.

Options

Filtering of the contents of Options dialog (Tools / Options) - new search field available in the top right corner of the dialog.

Autoupdate

  • Allow to install locally downloaded OSGi bundles jars in the Download tab in Plugin Manager (Issue 181683)

Output Window

Font and Colors Settings

Installer

  • In the end of installation the IDE the installer will be check Update Centers for possible updates, also JUnit library if the license accepted, will be installed directly during IDE installation.

File:check-for-updates.png

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo