DocsSimpleHtml5AndJS

Revision as of 15:34, 15 January 2013 by Kganfield (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)

Working with JavaScript Support in an HTML5 Application

Contents


Requirements for This tutorial

You need the following software:

  • NetBeans IDE 7.3


  1. Click New Project in the toolbar to open the New Project wizard
  2. Expand the Samples node and select the HTML5 category.
  3. Select the AngularJS Phone Catalog Tutorial sample project. Click Next.
  4. Specify a project location. Click Finish.
  5. Click the Run button in the toolbar to run the project.

The application opens in the Chrome browser.

Editing JavaScript Files

?

Not really sure what can be done here to demonstrate editing functionality. Create a new JS file with functions and use it in index.html? Add a new JS library and functionality to the page?

Using the JavaScript Debugger

This is pretty basic using the code in the sample. If some JS is added in the editing section the debugging could be demonstrated using that.

  1. Expand the project node and double-click controllers.js under the Site Root > js node to open the file in the editor.
  2. Place a line breakpoint on line 16 by clicking in the left margin.

You can view the breakpoints that are set in the project by choosing Window > Debugging > Breakpoints to open the Breakpoints window.

  1. Click the Run button in the toolbar to run the project again. The project is automatically in debugger mode when you run it in the Chrome browser.

When you run the project you will see the same page because the breakpoint that you set was not hit.

  1. In the browser, click one of the entries in the page, eg Motorola Xoom.

You will see that the next page loads but that there is no data.

  1. Return to the IDE. In the editor you can see that the breakpoint was hit.
  2. Hover your cursor over the "phone" variable to view a tooltip with information about the variable.

The tooltip contains the following information: $scope.phone = (Resource) Resource

  1. Expand the node in the tooltip to view a list of the variables and values for the $scope.phone resource.

You can expand other nodes, eg. android, to view the values of the two strings that of the android object (os and ui) You can also view the list of variables in the Variables window.

  1. Use the step buttons in the toolbar to step through the JavaScript functions in the angular js library or click the continue (F5) to resume the application.

Running JS Unit Tests

  1. Download JS Test Driver JAR
  2. In the Services window, right-click the JS Test Driver node and choose Configure.

In the Configure dialog box, click Browse and locate the JS Test Driver JAR that you downloaded.

  1. Specify the Browsers to use for testing by selecting the Chrome with NetBeans JS Debugger options and deselecting the other options. Click OK.
  2. Right-click the project node in the Projects window and choose New > Other.
  3. Select the JSTestDriver Configuration File in Unit Tests category. Click Next.
  4. Click Browse and select AngularJSPhoneCat - Configuration Files folder. Click Select in the dialog box and then click Finish in the wizard.

You can see the location of the JS Test Driver config file in the Created File field. The config file needs to be in the config folder. When you click Finish the file opens in the editor. You can expand the Configuration Files node in the Projects window to see the new file.

The file contains the following information by default

server: http://localhost:42442

load:
  - test/lib/jasmine/jasmine.js
  - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
  - test/unit/*.js

exclude:

You now need to specify the location of the tests and any necessary JavaScript files and libraries. The tests are located in test/unit/*.js.

  1. Add the following locations to the load section of the configuration file.

load:

 - app/lib/angular/angular.js
 - app/lib/angular/angular-*.js
 - app/js/*.js  
 - test/lib/angular/angular-mocks.js
  1. Disable any breakpoints that you set.
  2. Right-click the project node in the Projects window and choose Test.

The IDE automatically opens the JsTestRunner in the Chrome browser and two tabs in the Output window.

  1. Choose Window > Output > Test Results in the main menu.

The window displays the message that all 4 tests passed. You can click the green check icon to view the list of the tests that passed.

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