When developing user interface (UI), developers usually need a tool which allows them to create the UI code, and at the same time to immediately look and feel it. APS Fiddle is such a tool combining a set of UI editors and a viewer that all work in a browser.
APS fiddle is targeted to provide additional convenience for developers to look and feel APS SDK elements before they start using them in their APS projects. The tool does not require its installation and any time consuming deployment and provisioning steps in order to evaluate needed UI solutions.
Development environment contains four fields in the form of quadrants:
Besides the four quadrants, you will also see the pop-up list of shortcuts displayed on front-end by default. You can hide or display this pane by pressing the SHORTKEYS button on top-right in the screen.
The View pane can be used inside the APS Fiddle environment or opened in a separate window. For the latter case, click the NEW WINDOW button.
Each of the editors can be opened in the full-screen mode by pressing the F11 key (Windows and Linux) and returned back by pressing the Esc key. The editors support the following features:
The toolbar on top-right contains the following controls:
The easiest way to get started is to launch pre-defined examples. If you do not have your own examples, open a widget example from the APS Specification as follows.
You will have a new APS Fiddle window with the selected code imported into it.
You can open an existing code from a file and launch it in APS Fiddle. Therefore, you can use either the OPEN button or simply drug the file and drop it on the Fiddle environment. The editor fields will be filled in automatically with the code contained in the file. The code you need to import must comply with the following requirements:
In this mode, interpreter code will start automatically each time the code is updated. By default, this mode is off.
You can save the code created in APS Fiddle at any time. Therefore, use the SAVE button or the Ctrl+S shortcut. Your browser will prompt you to confirm the operation.
You can use the downloaded file in your real project, but keep in mind that APS Fiddle is, first of all, a tool for creating widgets from prototypes and for code visualization. This may be considered as the first step in designing UI. Since APS Fiddle is not connected to any provisioning system, you cannot validate the final version of the code, especially those its parts that interact with the APS controller. That is why, before using the created code ensure its compliance with the requirements to the UI in the real system.
APS Fiddle allows you missing out the aps/PageContainer widget. However, in a control panel, e.g. in Odin Service Automation UI, the widget is required. If the control panel does not display the needed contents, verify if there is the aps/PageController widget in the UI script.
To avoid occasional loss of data, the code created in APS Fiddle is saved periodically in your browser. The latest saved code will appear in the editors when you open the APS Fiddle the next time.
You should not rely on autosave completely. For different reasons, a browser can clean up its storage. That is why, in a certain period the autosaved code can be lost. Always save important codes in files.
APS Fiddle is able to predict and prompt names of variables, tags, and object properties. It can also prompt widget methods and give brief information on their usage. Therefore, you should correctly include needed modules.
Shortcuts in APS Fiddle are important control elements. They duplicate the way of calling any Fiddle operation, and some operations can be called only through shortcuts. There are the following groups of shortcuts.
System shortcuts are available in any context of the environment.
- Ctrl+H - help
- Ctrl+O - open a file
- Ctrl+S - save the contents of all editors in a file
- Ctrl+R - clear all fields
- Ctrl+Enter - run the interpreter to update the View panel
- Ctrl+1 - focus on the HTML editor
- Ctrl+2 - focus on the CSS editor
- F11 - switch the current editor to the full-screen mode (Windows and Linux)
- Esc - return back from the full-screen mode
Shared shortcuts are supported by any editor.
- Ctrl+B - beautify the code, i.e. make the nice formatting
- Ctrl+F - find a string (Windows and Linux)
- Cmd+F - find a string (Mac)
- Ctrl+K - fold or unfold the current code block
- Ctrl+/ - comment out or uncomment the selected block
- Ctrl+Space - request autocompletion prompt
HTML shortcut is supported only by the HTML editor.
- Ctrl+J - move cursor to the paired tag
- Ctrl+I - display the type of the selected variable
- Alt+. - jump to declaration of the selected variable
- Alt+, - jump back, i.e. it works after Alt+. was used
APS Fiddle can function in latest versions of the popular browsers: FireFox, Chrome, IE, and Safari.
We did not test APS Fiddle on mobile browsers. You can use them on your own.