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. You can use the IDE to create a site template that is based on your project by performing the following steps. 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. 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. Type a name in the Selector text field for the id or class element or select an element from the drop-down list. 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.
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.
In the source editor, place the insert cursor between the brackets of the CSS rule that you want to edit. 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. 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. 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. 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.
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. 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. Type the path to the executable of the preprocessor software or click Browse to locate the executable on your local system.
This option is enabled by default. Optional Select Generate extra debug information if you want debug information generated in the CSS file. 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. How to enable compile on save in the Project Properties window:. 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. When you run the application the Browser Log tab opens in the Output window.
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. The default template that is used for JavaScript files contains only licensing information. You can use the Templates Manager to modify the JavaScript template.
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.
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. 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. 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.
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. 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. The source editor supports versions 5. To switch between different versions of the JavaScript language:. Choose Properties from the context menu and JavaScript from the Categories list. 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 JavaScript Debugging Windows. You can create a new watch from the Variables window. For details about creating watches, see Section 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.
You can use the debugging buttons in the toolbar to step through the JavaScript files. To use the JavaScript debugger in the IDE, you need to select one of the following browser options as the target browser.
Table Browsers that support JavaScript Debugging. 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. Table Types of JavaScript Breakpoints. Alternatively, you can open the Breakpoints window by clicking the New Breakpoint icon in the left margin.
The breakpoint icon will appear in the margin. Specify the URL that will trigger the breakpoint when it is requested by a script. 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. Prior to installing Karma on your local system you need to download and install Node.
Use the default name karma. Click Finish. When you click Finish the IDE creates the karma. Edit karma. Right-click the project node in the Projects window and choose Properties in the popup menu. Select Karma in the Testing Provider drop-down list. To specify the location of your Karma configuration file, click Search and the IDE will find the default Karma configuration file.
Alternatively, click Browse to manually locate a configuration file. When you click OK a Karma node appears under the project node in the Projects window. To start the Karma server, right-click the Karma node in the Projects window and choose Start in the popup menu. Applies if Karma script is not automatically found by the IDE and the path to Karma needs to be set manually.
Right-click the project node in the Projects window and choose Test in the popup menu. The IDE runs the unit tests. This is important because jQuery behaviors connect to elements of the DOM, and these elements must be available to jQuery in order to get the results we expect.
Add the following code in bold inside the document. This code will invoke the jQuery accordion widget script that is included in the jQuery UI library. The accordion script will modify the elements within the DOM object that is identified as infolist. In this code, infolist is a CSS selector connected to a unique DOM element that has an id attribute with the value infolist. Confirm that Apply Changes to the Element is selected. When you click OK in the dialog box a CSS rule for the infolist selector is automatically added to the basecss.
When you save your changes the page in the web browser reloads automatically. You can see that the layout of the page has changed and that the page now uses the CSS style rules that are defined in the basecss.
The jQuery accordion function now modifies all the page elements that are contained in the infolist DOM object. You can right-click on an element in the Navigator window and choose Go To Source to quickly navigate to the location of that element in the source file. When Inspect in NetBeans Mode is enabled in the browser, when you select an element in the browser window the element is highlighted in the Browser DOM window. You can save your project as a site template that you can use as a template to create other HTML5 sites that are based on the project.
The IDE provides a wizard to help you select the files that you want to include in the site template. If you expand the nodes in the tree in the dialog box you can see the files that will be included in the site template. You can see that the site template will include the index. The site template can also include any configuration files and tests.
When you want to create a project that is based on the site template you specify the location of the. When you edited the index. Apache NetBeans. Latest release. The project resources zip file contains the JPG images and the CSS file that you need to add to the project in this tutorial.
If you would like to compare your project with a working solution, you can download the site template of the finished project. If Chrome is not set as the default browser for the IDE you need to open the Options window and select Chrome in the Web Browser dropdown list in the General category before you perform the following steps.
Specify a Name and Location for the project. Select No Site Template. Click Finish. Confirm that Chrome with NetBeans Integration is selected in the dropdown list in the toolbar. Click Run in the toolbar. Alternatively, you can install the NetBeans Connector extension directly from the Chrome Web Store by performing the following steps.
Select Embedded WebKit Browser in the dropdown list in the toolbar. Figure List of target browsers for HTML5 applications in the dropdown list in the toolbar. Click Run in the toolbar or right-click the project node in the Projects window and choose Run. In Step 3. Site Template, select No Site Template.
You must be online to create a project that is based on one of the online templates in the list. Click Finish to complete the wizard.
You can now test that your project displays correctly in the Chrome browser. You can also click Browse to manually locate a configuration file. When you click OK you can see that a Karma node appears under the project node in the Projects window.
You right-click the Karma node and start and stop the Karma server and set the configuration file in the popup menu.
When you click Start the Karma server starts and a browser window opens that displays the status of the server. In the Output window you can see the status of the server. You are also prompted to install any missing plugins. The browser window must be open and the Karma server must be running to run the unit tests. You can disable the breakpoints by deselecting the checkbox for the breakpoints in the Breakpoints window. When you choose Test the test runner runs the unit tests on the files.
The configuration dialog enables you to easily specify the location of the JS Test Driver server JAR and the browsers that you want to run tests against. The JS Test Driver node enables you to quickly see if the server is running and to start and stop the server. Click OK. The list of browsers that can be captured and used for testing is based on the browsers that are installed on your system.
You can select multiple browsers as slave browsers, but to run the tests a window that can be a slave for the server must be open for each browser. The selected browsers will be captured automatically when you start the server from the IDE. Click Next. The jsTestDriver. If the location for the created file is not the config folder, click Browse and select AngularJSPhoneCat - Configuration Files folder in the dialog box.
In the Projects window you can see that the configuration file is created under the Configuration Files node. If you expand the lib folder under the Unit Tests node you can see that the Jasmine libraries were added to the project.
In the editor you can see the following contents of the configuration file that are generated by default:. The configuration file specifies the default location of the local server that is used to run the tests.
The file also lists the files that must be loaded. By default the list includes the Jasmine libraries and any JavaScript files that are in the unit folder. Tests are usually located in the unit folder but you can modify the list to specify the locations of other files that need to be loaded to run the tests.
To run the unit tests you also need to add the location of the JavaScript files that you want to test and the Angular JavaScript libraries to the list of files that are loaded.
For this tutorial, if you want to run the tests using JS Test Driver you will want to add the following files in bold to the list of files that are loaded. After you update the configuration file you can right-click the project node in the Projects window and choose Test. The Chrome browser window displays a message when the jsTestDriver server is running.
You can see that the server is running on localhost In the js-test-driver Server tab in the Output window you can see the status of the server. The browser window must be open and the jsTestDriver server must be running to run the unit tests. You can start the server and open the window by right-clicking the JS Test Driver node in the Services window and choosing Start. You can click the green check icon in the left margin of the window to view the the expanded list of the tests that passed.
NetBeans IDE 8. Expand the js folder in the Projects window and double-click controllers. Modify line 7 in the file to make the following changes in bold. Save your changes. When you save your changes the page automatically reloads in the browser.
You can see that the order of the phones in the list changed. Confirm that the JS Test Driver server is running and that the status message is visible in the Chrome browser window. When you run the test you can see that one of the tests failed with the message that the value "name" was encountered instead of the expected value "age".
You can see in the message that the orderProp is expected to be age on line
0コメント