Previous topic

Command Line Tools

Next topic

APS Testing Framework

DOCUMENTATION
Last updated 04-Apr-2017

APS Fiddle

Purpose

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.

Usage

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.

APS Fiddle Environment

Development environment contains four fields in the form of quadrants:

../../_images/fiddle-environment.png
  1. HTML editor
  2. CSS editor
  3. JavaScript editor
  4. View pane

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:

  • Highlight of syntax elements
  • Validation of the code on the fly, i.e. when you are typing it
  • Auto-closing matching brackets and tags
  • Code folding, i.e. ability to hide and display selectively code blocks
  • Auto indentation that makes the code nicely structured
  • Smart auto-completion of code

The toolbar on top-right contains the following controls:

  • RUN - runs the code interpreter code
  • LIVE - turns on automatic updates of results synced with updates of the code
  • NEW WINDOW - opens the View pane in a new browser window
  • OPEN - opens a file selected by you, resulting in importing the code from the file
  • CLEAR - resets the contents of all editor panes to the initial state
  • SAVE - saves the contents of all editors in a file
  • SHORTKEYS - displays the pop-up list of key shortcuts

Viewing Examples

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.

  1. Navigate to Widgets.
  2. Select a widget, e.g., Message.
  3. Choose one of proposed sample codes and click RUN DEMO on top right of the sample section.

RUN DEMO

<div id="page" data-dojo-type="aps/PageContainer">
  <div data-dojo-type="aps/Message" data-dojo-props="type : 'warning'">
   Text<a href='javascript:void(0)'>Link</a>
  </div>
  <div data-dojo-type="aps/Message" data-dojo-props="type : 'error'">
   Text<a href='javascript:void(0)'>Link</a>
  </div>
  <div data-dojo-type="aps/Message" data-dojo-props="type : 'info'">
   Text<a href='javascript:void(0)'>Link</a>
  </div>
  <div data-dojo-type="aps/Message" data-dojo-props="type : 'progress'">
   Text<a href='javascript:void(0)'>Link</a>
  </div>
  <div data-dojo-type="aps/Message" data-dojo-props="type : 'update'">
   Text<a href='javascript:void(0)'>Link</a>
  </div>
  <div data-dojo-type="aps/Message" data-dojo-props="type : 'limits'">
   Text<a href='javascript:void(0)'>Link</a>
   <div data-dojo-type="aps/Button" data-dojo-props="title: 'Cancel'">
    Button text
   </div>
  </div>
</div>

You will have a new APS Fiddle window with the selected code imported into it.

Requirements to existing Codes

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:

  • Single file

    If HTML code is used, the HTML code and JavaScript code must be in the same file.

  • Single JavaScript code

    It is recommended to present JavaScript code in a single pair of <script> tags.

  • Absence of third-party files

    JavaScript code should not use codes from other files. APS Fiddle will include files needed for APS SDK. If the code uses images, the full path (with the source server name) to each of them must be a property of the corresponding widgets.

Live mode

In this mode, interpreter code will start automatically each time the code is updated. By default, this mode is off.

Saving Code

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.

Note

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.

Autosaving

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.

Note

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.

Autocompletion

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.

Note

The best practice is to assign the module name to the corresponding JavaScript object to avoid unneeded typos. For example, if the aps/FieldSet module is required, the corresponding JavaScript object should be assigned the FieldSet name.

When typing the code, you can request the autocompletion prompt by means of the Ctrl+Space shortcut. In the following example, after “page.” is typed in the JavaScript editor, pressing Ctrl+Space will display the drop-down list of methods with the description of the method you select.

../../_images/fiddle-autocompletion.png

Shortcuts

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
    • Ctrl+3 - focus on the JavaScript 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
  • JavaScript shortcuts are supported by the JavaScript editor only.

    • 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

Browser Compatibility

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.