NewAndNoteworthy hidden Easel

(Difference between revisions)
(Project Execution)
Line 207: Line 207:
===Chrome===
===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====
====Browser Window Dimensions====
Line 220: Line 228:
==CSS Styles==
==CSS Styles==
-
TBD
+
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==
==Rule Editor==

Revision as of 08:58, 26 September 2012

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

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

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

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

TBD

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‎

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