How to use form editor in NetBeans IDE
Installation of Controls.js Support plugin is required to use Controls.js Form Editor in NetBeans IDE. How to install the plugin is described here.
Note: Controls 4 Java users should see the instructions below.
How to run Form Editor in NetBeans IDE
1. Start NetBeans IDE.
2. Open any JavaScript file (file with .js extension).
3. To run Form Editor switch to Design tab (if there is no such tab check the plugin installation).
Alternatively you can run Form Editor directly from Projects. Open context menu by right mouse click on JavaScript file. Choose Design.
Note: It could take more time when running Form Editor for the first time or when new version of Form Editor is available. The internet connection is required when running Form Editor for the first time.
How create a new Controls.js Form from source code
You can create a new Controls.js Form directly from the JavaScript source code. Use code completion to turn any empty JavaScript object to Controls.js Form.
1. Enter JavaScript code for empty object: {}
2. Move cursor between curly brackets.
3. Invoke code completion by shortcut CTRL+SPACE.
4. Choose Create Controls.js Form.
Controls 4 Java specific NetBeans IDE integration
Controls.js Form Editor NetBeans IDE integration is also present in Controls.js Support for Java plugin. How to install this plugin is described here.
The integration is almost the same as for JavaScript files (see above). Controls 4 Java use files with .ng extension. If you open this file in NetBeans IDE it will be opened on Design tab (if there is no such tab check the plugin installation).
How to navigate between @Model and Controls.js Form
1. Open Java source code with @Model annotation.
2. Hit the F12 key or select from main menu Navigate/Go to Model/Controls.js Form....
This will open corresponding .ng file in Form Editor.
You can also use it in opposite way:
1. Open .ng file.
2. Hit the F12 key or select from main menu Navigate/Go to Model/Controls.js Form....
This will open corresponding Java source code.
How to create Controls.js Form for @Model
Just use the navigation between @Model and Controls.js Form described in previous paragraph. The plugin will create new .ng file for you automatically if doesn't exist.