IDE Part I: Main Elements

Interface Builder (IDE)

The module is used for developing system visual interfaces.

The module may be only accessed in the Development mode, which is available in the menu.

Part I. Main Elements
 

Main Menu

The main menu contains several management tools and the name of current project file (on the right).

The main menu of the project management interface (Interface):

It enables you to open, close or exit a project. Object Upload and Create buttons open a window, which shows the file structure of the project storage and allows to create not only projects, but catalogues as well.

Main menu contains:

  • Save – quickly saves data;
  • Refresh – updates the interface. In the majority of cases the interface is refreshed automatically. Nevertheless, sometimes it is necessary to update it manually;
  • Auto refresh — enabling/ disabling automatic refresh of the interface;
  • DataBase Connections – a configuration interface for connecting to databases. It is needed for work with database tables outside ORM and contains the list of established connections and connection setup interface listing the main parameters;

 

 

 

 

  • Project Config – project settings:
    • Project Classes Namespace – the namespace used for defining Class component prototypes;
    • Project Run Namespace – the namespace of executable code (of created objects).



It also allows to include third-party js-files or other projects into the project (e.g., a project describing a complex component, which is used in many interfaces).

Side menu (widgets and components)

Central Panel

The central panel displays the results of the project code implementation. It shows the way your project will look after the code compillation.

Object Management Panel



The panel is divided into two parts:

  • The upper part, which lists the Layout Objects, allowing to drag and drop objects hierarchically and open object properties by a double click;
  • The lower part, which shows the properties of the selected object. Its view and opportunities may vary depending on the object type. There is also a search field for looking up properties and ‘JS’ button (shows JS code representing the object in the project).

The second tab of lower part contains a list of events. Clicking an event will open Event Editor:

Code Editor

The Action Code Editor allows to describe the application logic (Javascript).

The panel is divided into two parts: Code Editor and Eventts Editor.

Code Editor is used for describing the logic, which does not fit the events model or if the events model of the builder is not used. You can also use your own IDE for editing action scripts, which are located in the following directory: www/js/app/actions.

Events Editor is used for viewing and editing actions related to the events of the interface elements.