| NetBeans Developing Applications with NetBeans IDE Release 8.0 E50452-06 |
|
|
PDF · Mobi · ePub |
| NetBeans Developing Applications with NetBeans IDE Release 8.0 E50452-06 |
|
|
PDF · Mobi · ePub |
This chapter describes the procedures and tools available for developing HTML5 applications in the NetBeans IDE, including information on creating, running, integrating and debugging your application.
This chapter contains the following sections:
An HTML5 application project is an application that is displayed in a browser on your desktop or a mobile device. An HTML5 application is typically comprised of HTML, CSS and JavaScript files. The JavaScript that is used to manipulate and process objects in the application is generally handled on the client side by the JavaScript engine in the web browser. An HTML5 application is often used as a client that consumes various web services.The IDE provides the following tools to support the development of HTML5 applications and HTML5 in PHP and Java web applications:
Wizards for creating HTML5 applications and files
JavaScript code-completion, debugging and testing
Code inspection using Chrome or bundled WebKit browsers
CSS and CSS preprocessor file editors and styling tools
Wizard to generate JavaScript clients for RESTful web services.
Network Monitor for REST web service calls and WebSocket communication
The IDE also provides tools for packaging HTML5 applications as native mobile applications via Apache Cordova.
The following work flow shows how to work with HTML5 applications.
How to develop an HTML5 application:
Create a new HTML5 Application project in the New Project wizard. See Section 19.3, "Creating an HTML5 Application Project."
Create and edit HTML, JavaScript and CSS files using wizards and the editor.
Specify the target web browser and platform. See Section 19.4, "Running an HTML5 Application."
Run the application and debug the JavaScript.
The IDE provides wizards for creating HTML5 projects and the HTML, CSS and JavaScript files that HTML5 projects typically contain. When you use the New Project wizard to create an HTML5 project you have the option to create the project based on a site template. In the wizard you can specify a site template that is located on your local system or download one of the listed site templates from an online repository.
To create an HTML5 application project:
Choose File > New Project from the main menu.
Select the HTML5 Application project template from the HTML5 category.
Alternatively, select the HTML5 Application with Existing Sources to import an existing project as an HTML5 application.
Click Next.
Specify a site template for the application or select No Site Template to create an empty application that only contains an index.html file. Click Next.
Specify the JavaScript files to add to the project (optional).
Click Finish.
When you click Finish, the IDE creates the project and displays a node for the project in the Projects window.
The IDE includes an HTML5 site template that enables you to easily create a mobile application that is built on the Cordova platform. Cordova enables you to create applications that take advantage of some of the native functionality that is provided on Android and iOS mobile devices. You can create an HTML5 application using the Cordova template or add support for Cordova to your HTML5 application.
You must install Cordova on your local system before you can create a Cordova project. The IDE will prompt you to install Cordova if your Cordova installation is not detected when you create a Cordova application or when you add support for Cordova to an application. You can find the installation instructions and additional details about the platform at the following site.
Note:
The IDE uses Git and NodeJS to work with Cordova. You must properly configure the proxy settings for Git and NodeJS if you are using a proxy.
To develop an application for a mobile platform you must first install the required platform software and the platform must be recognized by the IDE. If you are developing for the Android platform you need to specify the location of the Android SDK on your local system.
Note:
The iOS device and emulator are only available on OS X. The IDE automatically detects the iOS installation details on OS X.
How to register the Android mobile platform with the IDE:
Open the Options window in the IDE.
Click the Mobile Platforms tab in the Miscellaneous category of the Options window.
Type the location of the Android SDK installation or click Browse to locate the installation on your local system.
How to create a new Cordova application:
Choose File > New Project from the main menu.
Select the Cordova Application project template from the HTML5 category. Click Next.
Specify the project name and location.
Click Next in the Site Template panel.
The Cordova Hello World template is already selected.
Specify the JavaScript files to add to the project (optional).
You can modify the JavaScript Files that are included in the project at any time in the JavaScript Files category of the Project Properties window.
Specify the Cordova project configuration details (optional).
You can edit the configuration details at any time in the Cordova category of the Project Properties window.
Click Finish.
How to add Cordova support to an HTML5 application:
Right-click the project node in the Projects window and choose Properties.
Select the Cordova category in the Project Properties window.
Click Create Cordova Resources in the Cordova panel.
After you click Create Cordova Resources, the IDE adds creates a Cordova configuration file in the project and enables two tabs in the Cordova panel where you can specify additional details.
Specify an application ID, name and version for the Cordova application. Click OK.
How to add Cordova plugins to a Cordova application:
Right-click the Cordova application in the Projects window and choose Properties in the popup menu.
Select the Cordova category in the Project Properties window and click the Plugins tab.
Select the Cordova plugin from the list of available plugins and click the right arrow ( > ) to move the plugin to the list of selected plugins. Click OK.
You can incorporate JavaScript and CSS to Java web applications and PHP applications by adding the files to the project. You can also use the Project Properties window to include JavaScript libraries and configure CSS preprocessors that you want to use in the project. You can run the applications on mobile browsers and on Android and iOS devices and emulators and debug JavaScript files. It is not necessary to change the project type of an application or create a new project.
How to add JavaScript libraries to a Java web or PHP application:
Right-click the project node in the Projects window and choose Properties in the popup menu.
Select the JavaScript Files category.
Select the JavaScript libraries that you want to add and click the right arrow button ( > ). Click OK.
An HTML5 application project is typically run in a browser on your desktop or a mobile device. When you run an HTML5 application on your local system for testing or debugging you do not need to compile or deploy the application to a server because the JavaScript engine in the browser generally handles any scripts in the application. To run the application you first specify the browser and then run the application.
You can run an HTML5 application on an emulator for the mobile platform or deploy the application to the mobile device.
When you want to run an HTML5 application or file from the IDE you need to specify the target browser. The IDE enables you to easily select any of the browsers that are installed on your local system or the embedded WebKit browser. If you are developing an application for a mobile device you can choose to run the application in an emulator for the mobile device or deploy directly to a mobile device.
To specify the browser for an HTML5 application:
To specify the target browser for the application, perform one of the following steps:
Select the application in the Projects window and then select the browser from the drop-down list in the Toolbar.
Open the Project Properties window and select the browser in the Run panel of the window.
The list of browsers is organized in a table to help you select the target browser. If you select a browser or device in the top row of the table you can debug the application in the IDE and use other features that are provided when the IDE is integrated with the browser. The table organizes the browsers in the following columns:
The Browsers column displays the web browsers that are available on your local system. When you select a browser in the Browsers column the application will launch in a window in the selected browser when you run the application.
The Mobile Device Browser column displays a list of mobile devices that you can select as the target platform and the browsers that are available on that platform. When you select a browser in the Mobile Device Browser column, the IDE will either run the application in the browser on the selected mobile device or in an emulator for the device.
The Cordova column displays a list of mobile devices that you can select as the target platform. When you select a device in the Cordova column, the IDE will package the project as a native mobile application and deploy the application to the mobile device or emulator. Click Configure Cordova to open the Cordova panel in the Project Properties window.
You must install Apache Cordova on your local machine if you want to specify a target in the Cordova column.
If you want to run an application in a browser on an Android mobile device or in the Android emulator you need to install the Android SDK on your local system and register the location of the Android SDK in the Options window. The iOS device and simulator are only available on OS X.
If you want to debug an HTML5 application or file, or synchronize the IDE with your browser to inspect your code, you should select either Chrome with NetBeans Connector or Embedded WebKit Browser as the target browser.
After you specify the browser, you can run the application in the following ways.
Right-click the project node in the Projects window and choose Run in the popup menu.
Select the application in the Projects window and then click Run in the Toolbar or choose Run > Run Project (F6) in the main menu.
When you run an application, the IDE automatically opens the application in the selected browser or mobile device and opens the Browser Log in the Output window.
If more than one project is open you can specify one of the projects as the Main Project. After you specify the project as the Main Project, the F6 keyboard shortcut will always run the Main Project regardless of the project that is selected in the Projects window.
You can run an HTML file in an HTML5 application in the following ways.
Right-click the HTML file in the Projects window and choose Run File from the popup menu (Shift-F6).
If the HTML file is open in the editor, you can right-click in the file and choose Run File (Shift-F6) from the popup menu or click the Run File button in the Selection tab of the CSS Styles window.
When you run a file, the IDE opens the file in the target browser for the application.
A NetBeans extension is available for the Chrome browser that enables the IDE and the browser to communicate. To integrate the IDE with the Chrome browser, you need to install the NetBeans Connector extension from the Chrome Web Store or install the extension manually. After you install the extension you can perform the following tasks in the Chrome browser:
Use Inspect mode to select and locate elements in your code
Debug JavaScript files
Select various browser sizes from the NetBeans actions menu
Do not close the infobar in the tab in the Chrome browser that informs you that "NetBeans Connector is debugging this tab". Closing the infobar will disconnect the IDE from the Chrome browser. To reconnect the IDE, close the tab where the application was running and re-run the application from the IDE.
Note: You only need to install the extension one time.
After downloading, you can perform the following steps to install the NetBeans extension for the Chrome browser.
To install the NetBeans extension for Chrome:
Right-click an HTML5 project node in the Project Projects window and choose Properties in the popup menu.
Alternatively, you can select a target browser for the project from the drop-down list in the toolbar.
In the Run panel of the Properties window, select Chrome with NetBeans Connector in the server drop-down list. Click OK.
Right-click the HTML5 project node in the Projects window and choose Run.
When you click Run, the IDE opens a dialog that prompts you to install the extension from the Chrome Web Store.
Click Go to Chrome Web Store in the Install Chrome Extension dialog box.
Click Free in the Chrome Web Store to install the extension and confirm that you want to add the NetBeans Connector extension.
After the extension is installed in the Chrome browser, click Re-run Project in the Install Chrome Extension dialog box to open the HTML5 application in the Chrome browser.
You will see an infobar in the tab in the Chrome browser that informs you that "NetBeans Connector is debugging this tab".
If you are unable to connect to the Chrome Web Store you can install the NetBeans Connector extension manually by performing the following steps.
To install the Chrome extension manually:
Open your Chrome browser to chrome://chrome/extensions/.
On your local system, navigate to the NETBEANS_INSTALL/webcommon/modules/lib directory, where NETBEANS_INSTALL is the installation of the IDE.
Drag the NetBeans Connector extension (netbeans-chrome-connector.crx) from the lib directory into the Extensions tab in the Chrome browser window and approve the addition of the extension.
Right-click the HTML5 project node in the Projects window and choose Run to open the application in the browser.
You will see an infobar in the tab in the Chrome browser that informs you that "NetBeans Connector is debugging this tab".
You can use the Inspect mode to help you locate and edit the source code in an HTML5 application. When Inspect mode is enabled, information about some of the actions that you perform in the browser such as selecting and highlighting elements is communicated to the IDE. When you run the application, you can use your browser to help you locate HTML elements in your source code. When you select or place your cursor over elements in the browser window, the element is simultaneously highlighted or selected in the Browser DOM window of the IDE. When you select an element, the style rules for the element are automatically displayed in the Selection tab of the CSS Styles window.
To inspect your application with a browser:
Set the target browser for the application to one of the browsers or devices listed in top row in the browser selection drop-down list.
The browsers and devices in the top row of the browser selection drop-down list support Inspect mode.
Run the application or file.
When you run the application the target browser opens and displays the index page or file in the window.
Enable Inspect mode (Ctrl+Shift+S) in the browser.
In the Chrome browser you can enable Inspect mode in the NetBeans Actions menu. In the Embedded WebKit Browser you can click the Inspect button in the toolbar. Alternatively, you can click the Inspect icon in the Browser DOM window.
Move your cursor over or select an HTML element in the page in the browser window.
When you move your cursor over or select an element in the browser the contents of the following windows in the IDE are updated to synchronize with your actions in the browser.
Browser DOM window. The Browser DOM window displays a DOM tree of the current page. When you move your cursor over an element in the browser the element is highlighted in the Browser DOM window. You can double-click an element in the window to open the source file in the editor.
CSS Styles window. The Selection tab of the CSS Styles window displays the style rules for the selected element. You can edit the rules for the element in the CSS Styles window.
When you enable the Inspect mode in the browser, any element that is in the 'hover' state remains in the state until you disable the Inspect mode. You can select an element in the hover state and inspect and modify the properties of the hover state and view the changes to the element in your browser.
To enable Inspect mode in the Chrome browser you need to install the NetBeans extension to integrate the IDE with the browser.
A single HTML5 application might be viewed on various devices with different screen sizes. The IDE can help you develop projects that can respond and adapt to different display devices by enabling you to view pages at different screen sizes. When you run the HTML5 application from the IDE you can choose to view the pages in one of the default screen sizes or create a custom screen size.
You can view your application in any browser, but if you want to be able to quickly switch between screen sizes you need to specify one of the following integrated browsers as the target browser:
Chrome with NetBeans Connector
Embedded WebKit Browser
When you view the application in one of the integrated browsers you can choose the display size in a menu in the browser.
You can specify the target browser for the application in the Project Properties window or in the Set Project Configuration drop-down list in the toolbar of the IDE.
The integrated browsers provide menus that enable you to switch between common screen sizes that are pre-configured in the menu. When you select a new screen size the display area of the browser resizes to the selected size. By changing the screen size you can view how the layout of the application responds to different sizes, for example, as a result of media queries that are specified in the style sheet.
After you launch the application you can select a screen size from the menu in the browser. The location of the menu for selecting the screen size options depends upon the target browser.
Chrome with NetBeans Connector. Click the NetBeans icon in the URL location bar to open the menu and select a screen size.
Embedded WebKit Browser. Select a screen size in the Other Options menu or click an icon in the toolbar. The toolbar in the Web Browser window contains the following elements.
Display device icons. Click a display device icon to resize the display area to the selected size. You can place your cursor over an icon to display the dimensions of the display device. You can modify which icons are displayed in the toolbar by choosing Customize in the Other Options drop-down list.
Other Options menu. Select a window size in the drop-down list to view the page contents in the selected window size. The drop-down list displays all the available window sizes. Choose Customize to open a dialog that enables you to modify, create or remove window sizes.
Magnification selector. Type a value in the text field or select a value in the drop-down list to change the magnification of the contents of the page.
Inspect icon. Select to enable Inspect mode in the page.
When you run an HTML5 application the location of the current page is displayed in the Location bar. Pages are rendered using the WebKit browser engine running on the embedded lightweight server (localhost:8383). You can modify the server details in the Project Properties window.
You can create custom sizes for windows by selecting Customize in the screen size menu. When you select Customize the browser displays a window that enables you to create a new size and to modify the default screen size options. You can also edit the contents of the menu.
An HTML5 template enables you to quickly create an HTML5 project that contains the files and a structure that is based on the template. A site template can help you quickly develop a project by providing some JavaScript, CSS and HTML files that you can then modify according to your needs.
When you create an HTML5 project in the New Project wizard, you can choose to use a site template .zip archive that is located on your local system, specify the URL of an online template or select a template from the list of popular site templates in the wizard.
You can use the IDE to create a site template that is based on your project by performing the following steps.
In the Projects window, open the HTML5 project that is the model for your template.
Right-click the HTML5 project and choose Save as Template in the popup menu.
Specify the name and where you want to save the template.
Specify the files that you want to include in the template. Click Finish.
Any template that you save is automatically added to the Select Template drop-down list in the New HTML5 Application wizard.
You can generate a cascading style sheet (CSS) from an existing document type definition (DTD), create an empty style sheet and edit the file in the CSS editor or use a CSS preprocessor to generate style sheets.
When you are editing a CSS file the IDE provides windows and dialog boxes that can help you create CSS rules and declarations. After you create a rule you can add declarations to the rule by editing the style sheet in the editor or in the CSS Styles window. When editing CSS files, you can take advantage of standard editor features, including completion, indentation, syntax coloring, and standard clipboard commands.
If you want to use a CSS preprocessor to generate a style sheet the IDE supports the LESS and Sassy CSS syntax. To compile the LESS or Sass files and generate the style sheet you must first install the LESS or Sass preprocessor software on your local system. After you install the preprocessor software you can configure the software to compile the files and generate the CSS files each time that the LESS or Sass file is saved.
You can use the New File wizard to create a new cascading style sheet in your project. After you create the style sheet you can see the new file in the Projects window and Files window. When you create the style sheet the file opens in the Source Editor.
To create a cascading style sheet:
Choose File > New File from the main menu.
Choose HTML5 > Cascading Style Sheet. Click Next.
Enter a name and location for the CSS file. Click Finish.
You can create a CSS rule in a style sheet by typing directly in the source editor or by using the Edit CSS Rules dialog box. You can open the Edit CSS Rules dialog box from the CSS Styles window.
To add a CSS Rule to a style sheet:
Open the CSS file in the source editor.
Open the CSS Styles window (Window > Web > CSS Styles).
Click Document in the CSS Styles window if the Style Sheets tree is not displayed in the CSS Styles window.
Click the Edit CSS Rules icon ( 
) to open the Edit CSS Rules dialog box.
Select a Selector Type in the dialog box.
Type a name in the Selector text field for the id or class element or select an element from the drop-down list.
Confirm that the correct style sheet is selected in the Style Sheet drop-down list.
Specify any additional properties for the rule. Click OK.
After you click OK you can see that the new rule is listed in the CSS Styles window and the Navigator window and that the rule is added to the CSS file in the editor.
You can add properties and values to a CSS rule by manually editing the style sheet in the source editor, by selecting values in the CSS Styles window or by specifying values in the Add Property dialog box.
To add a property to a CSS rule in the CSS Styles window:
Open the CSS file in the source editor.
Open the CSS Styles window (Window > Web > CSS Styles).
Click Document in the CSS Styles window if the Style Sheets tree is not displayed in the CSS Styles window.
Select the rule that you want to edit in the top section of the CSS Styles window.
The properties of the selected rule are displayed in the bottom section of the CSS Styles window.
Click Add Property in the left column of the table in the bottom section of the CSS Styles window and choose a property in the drop-down list.
Type a value for the property in the text field or choose a value from the drop-down list in the right column of the table and hit the return key on your keyboard.
When you hit the return key the property and value are added to the rule in the CSS editor.
To add a property to a CSS rule in the Add Property dialog box:
Open the CSS file in the source editor.
Open the CSS Styles window (Window > Web > CSS Styles).
Click Document in the CSS Styles window if the Style Sheets tree is not displayed in the CSS Styles window.
In the source editor, place the insert cursor between the brackets of the CSS rule that you want to edit.
Click the Add Property icon ( 
) in the bottom section of the CSS Styles window to open the Add Property dialog box.
Select a value for the property from the drop-down list or type a value in the text field in the right column of the table.
Specify any additional properties for the rule. Click OK.
You can create Sass or LESS preprocessor files that can be compiled to generate your CSS files. The IDE provides wizards to generate the preprocessor files and to configure the preprocessor software to watch a location for changes to the files. You must install the CSS preprocessor software on your local system if you want to locally compile the preprocessor files to generate the CSS files.
You can use code completion and syntax coloring in the editor to help you edit CSS preprocessor files.
How to create a CSS preprocessing file:
Choose File > New File from the main menu.
Choose Sass File or LESS File in the HTML5 category. Click Next.
Enter a name and location for the new file.
(Optional) Select Compile Sass (or LESS) files on Save.
When you enable compile on save for CSS preprocessor files you can specify the directory that contains the preprocessor files and the directory that will contain the compiled CSS file.
(Optional) Modify the input and output directories.
When the preprocessor file in the input directory is modified and saved the CSS file is automatically recompiled and created in the specified output directory.
Click Finish.
The IDE can be configured to compile LESS and Sass preprocessor files to generate CSS files. When you are editing the CSS preprocessor files in your project you can compile the files locally to view how your changes affect the layout of the application. The CSS preprocessor software must be installed on your local system if you want to compile the files locally.
You can find instructions for installing LESS and Sass at the following sites.
If you want the preprocessor files automatically compiled when you save them you need to register the CSS preprocessor software with the IDE. You can specify the location of the executables for the CSS preprocessor software in the Options window.
How to register the CSS preprocessor software in the IDE:
Open the Options window.
Click the CSS Preprocessors tab in the Miscellaneous category.
Type the path to the executable of the preprocessor software or click Browse to locate the executable on your local system.
(Optional) Select Open Output on Error if you want the IDE to open the Output window when an error is encountered during compilation. This option is enabled by default.
(Optional) Select Generate extra debug information if you want debug information generated in the CSS file. this option is enabled by default.
You can configure the software to watch the location of your preprocessor files in your application and automatically compile the CSS file when the preprocessor file is saved. You can enable compile on save for CSS preprocessor files when you create the file or in the Project Properties window.
Note:
If you modify the generated CSS files your changes will be lost the next time that the CSS preprocessor files are compiled.
How to enable compile on save in the Project Properties window:
Right-click the project node in the Projects window and choose Properties in the popup menu.
Select the CSS Preprocessors category and select the tab for the preprocessor for your project (LESS or Sass).
Select Compile Sass Files on Save (or Compile LESS Files on Save).
If you see a warning in the Project Properties window that the executable is not selected, click Configure Executables to open the Options window and specify the location of the preprocessor executable.
In the Watch table, specify the Input directory that contains the preprocessor files.
Specify the Output directory for the CSS file that is generated.
(Optional) Specify any compiler options. Click OK.
The IDE provides a wizard for creating JavaScript files and support for JavaScript in the source editor. When you run the application the Browser Log tab opens in the Output window.
You can add JavaScript files to your project in one of two ways:
as a JavaScript file
as a JavaScript library
You can use the New File wizard to add a JavaScript file to a project at any time. You can also use the wizard to create a file of common JavaScript functions which you can use to provide functionality to multiple HTML5 or web projects. If the HTML or Web categories are not available in your installation you can choose JavaScript File in the Other category in the New File wizard. If you want the JavaScript file to be visible in the Projects window, create the JavaScript file in an appropriate subfolder of the project, such as public_html or src.
The default template that is used for JavaScript files contains only licensing information. You can use the Templates Manager to modify the JavaScript template.
To create a standalone JavaScript file:
Select File > New File > HTML5 > JavaScript File.
Enter the desired file name in the File Name field.
Click Finish to save the file.
To edit the JavaScript File template:
Select Tools > Templates in the main menu to open the Templates Manager.
Expand the HTML5 node in the list of templates and select the JavaScript File template.
Click Open in Editor to edit the template in the source editor.
You can edit JavaScript files in the source editor. The source editor provides standard features such as code completion and syntax coloring. The editor provides code highlighting for methods and variables, as well as global variables and properties of literal objects. When a JavaScript file is open in the source editor the Navigator window displays the structure of the JavaScript file and enables you to easily navigate to elements in the code. JavaScript editing features also work for JavaScript code embedded in PHP, JSP and HTML files.
The IDE provides some JavaScript code templates to help you to generate code. You can view the list of default JavaScript code templates and add your own code templates in the Code Templates tab in the Editor category in the Options window.
The IDE provides tools to help you with your JavaScript code. When you are editing your code a parser runs in the background and provides detailed warnings and hints to resolve potential problems. You can configure the JavaScript hints that are displayed in the Options window. When you are editing your JavaScript files you can use the Browser Log window to evaluate JavaScript expressions.
JavaScript code completion gives you a choice of the IDE's built-in JavaScript core classes to insert into your code and can show you the methods available for JavaScript strings. Code completion works with all the literal types in JavaScript. The type analysis and code completion machinery also knows about prototype style classes (regular functions only) and the operator for constructing them.
NetBeans IDE consults type parameters for function parameters and return types (@type, @param). These types are shown in code completion: in the list, in the documentation, and in parameter hints. Return types are also shown in the code completion dialog after the function name, separated by a colon. The IDE can determine the return type for many functions. This function is essential for JSQuery support. For example, methods which return true or false have a Boolean return type, those returning literal numbers have a Number return type, and so on. The IDE both infers types and explicitly tracks declared types via comments. The most important implication is that the IDE follows types through calls.
Expand the project node in the Projects window and double-click the JavaScript file to open the file in the editor.
You can use the IDE to debug JavaScript files in HTML5 applications. JavaScript debugging starts automatically when you run the application or unit tests in one of the browsers that support debugging. When you are debugging the application the following windows provide debugging details.
Table 19-1 JavaScript Debugging Windows
| Window | Description |
|---|---|
|
Breakpoints window |
Displays a list of breakpoints in all open applications. |
|
Call Stack window |
Displays the current execution stack of a JavaScript program. |
|
Variables window |
Displays the variables and watches that are valid in the current scope. You can create a new watch from the Variables window. For details about creating watches, see Section 9.9.6.5, "How to Create a Watch." |
|
Browser Log |
Displays the exceptions, errors and warnings that are generated by the browser. |
When you run the application the debugger will pause execution of the application at the first breakpoint in the JavaScript that is encountered and the JavaScript file that contains the breakpoint opens in the editor. The IDE also automatically opens the JavaScript debugger windows. You can use the debugging buttons in the toolbar to step through the JavaScript files.
To debug JavaScript files in the IDE the IDE needs to be able to communicate with the debugger. To use the JavaScript debugger in the IDE, you need to select one of the following browser options as the target browser.
Table 19-2 Browsers that support JavaScript Debugging
| Browser | Description |
|---|---|
|
Embedded WebKit Browser |
The IDE includes a browser that is based on WebKit. The embedded WebKit browser enables you to view and debug HTML5 applications in the IDE. If you select Embedded WebKit Browser as the browser in the Project Properties window the IDE will open the browser in a window in the IDE when you run the application and debugging is automatically enabled. |
|
Chrome with NetBeans Connector |
The IDE includes an extension that you can install in the Chrome browser that enables the IDE and the browser to communicate. If you select Chrome with NetBeans Connector as the browser in the Properties window, the IDE will open the Chrome browser when you run the application. Debugging is automatically enabled if the extension is installed when you run the application. If the extension is not installed, the IDE will prompt you to install the extension. |
To debug the JavaScript in your application in the IDE, you need to specify breakpoints that will pause execution of the scripts when they are hit. You can set the following JavaScript breakpoints in the IDE:
Table 19-3 Types of JavaScript Breakpoints
| Breakpoint | Description |
|---|---|
|
DOM |
Use this breakpoint to debug changes that are made to the DOM tree. |
|
Line |
Use this breakpoint to debug specific lines of code in your JavaScript file. |
|
Event |
Use this breakpoint to debug actions in your application that are invoked by events. |
|
XMLHttpRequest |
Use this breakpoint to debug requests for URLs. |
To open the New Breakpoint dialog box:
Choose Debug > New Breakpoint from the main menu.
Alternatively, you can open the Breakpoints window by clicking the New Breakpoint icon ( 
) in the left margin.
The steps for setting JavaScript breakpoints will depend upon the type of breakpoint.
Open the HTML file in the editor.
Open the Browser DOM window, if not already open.
In the Browser DOM window, locate the object in the DOM tree that you want to debug.
Right-click the object and choose one of the DOM breakpoint properties in the popup menu.
Open the JavaScript file in the editor.
Click in the left margin of the editor next to the line where you want to set the breakpoint.
The breakpoint icon ( 
) will appear in the margin.
Open a JavaScript file or HTML file in the editor.
Place the insert cursor in the file and choose Debug > New Breakpoint in the main menu to open the New Breakpoint dialog box.
Select JavaScript in the Debugger drop-down list and select Event in the Breakpoint Type drop-down list.
Select any actions that you want to trigger the breakpoint. Click OK.
To set an XMLHttpRequest breakpoint:
Open a JavaScript file or HTML file in the editor.
Place the insert cursor in the file and choose Debug > New Breakpoint in the main menu to open the New Breakpoint dialog box.
Select JavaScript in the Debugger drop-down list and select XMLHttpRequest in the Breakpoint Type drop-down list.
Specify the URL that will trigger the breakpoint when it is requested by a script. Click OK.
You can configure the IDE to use JS Test Driver or Karma to run the unit tests for your JavaScript files. To use the test runner you need to install the test runner and then configure the test runner to specify the browsers and testing framework that you want the test runner to use and the files to load when running the tests. After you configure the test runner for your application you can run the tests from the Projects window. You can view the results of the tests in the Output window of the IDE.
Debugging of unit tests is automatically enabled if you specify Chrome with NetBeans Connector as one of the JS Test Driver browsers when you configure JS Test Driver in the Services window.
To run unit tests with JS Test Driver:
Download the js-test-driver JAR to your local system.
In the Services window, right-click the JS Test Driver node and choose Configure in the popup menu.
In the Configure JSTestDriver dialog box, click Browse and locate the js-test-driver JAR that you downloaded.
Select the browsers that you want to run the tests against. Click OK.
Only browsers that are installed on your local system are displayed in the list.
Right-click the JS Test Driver node and choose Start to start the js-test-driver server.
When you choose Start, each of the browsers that you specified will open a window and will wait to run the unit tests. You can see the status in the js-test-driver server tab in the Output window.
Choose New > New File to open the New File wizard.
Select JsTestDriver Configuration File in the Unit Tests category in the New File wizard.
Use the default name jsTestDriver.conf for the File Name.
Click Browse and select Configuration Files (the config folder in the project) for the Folder. Click Finish.
The file name must be jsTestDriver.conf and the file must be in the root of the config folder to enable the Test command for the project. The correct path that is displayed in the Created File text field will be similar to the following:
<PROJECT_FOLDER>config/jsTestDriver.conf.
If the config folder does not exist you can create the folder by typing config in the Folder text field or by creating the folder manually and then specifying the folder in the Project Properties window.
When you click Finish the IDE creates the jsTestDriver.conf file and opens the file in the editor. In the Projects window, you can see the file under the Configuration Files node.
Edit jsTestDriver.conf to specify the location of the JavaScript source files and test files.
Right-click the project node and choose Test in the popup menu.
When you click Test the IDE runs the unit tests. You can open the Test Results window to view the results. You can see details about the specific tests in the Output window.
Note:
To use JS Test Driver in the IDE you need to download the JS Test Driver JAR that is available from the following location.
http://code.google.com/p/js-test-driver/
The JS Test Driver site also provides documentation and details about using JS Test Driver.
If you are using a JavaScript library that will provide specific functionality in your project you can use the New Project wizard to add the library to the project when you create the project or add JavaScript libraries to a project in the Project Properties window.
To add a JavaScript library to an HTML5 or web application:
Open the selected project in the IDE.
Right-click the project node in the Projects window and choose Properties.
Select the JavaScript Files category in the Project Properties window.
Select a library from the list of available libraries and click the right arrow ( > ) to move the library to the list of selected libraries.
You can type the name of the library in the text field above the list of available libraries to filter the list.
If necessary, specify the folder location for the file in the Libraries Folder field, or click Browse to select from the available folders. If you are not sure, use the default folder location. Click OK.
When you click OK, the IDE adds the JavaScript library to the project.
|
 Copyright © 2013, 2014, Oracle and/or its affiliates. All rights reserved. Legal Notices |
|
