Interface Builder

Overview

Interface Builder is a visual design editor that’s integrated into this tool. Use Interface Builder to create the user interfaces of your apps by assembling views, controls, menus, and other elements from the library of controls. Below image shows the interface area where you can design your screen. The orange bordered area is interface area where we can design our screen.

The white colored area in the above screen is said to be the Main_View of the current screen. You can drag any control from control panel on left and drop into the Main_View to design your screen.

Position and dimension of controls

  1. Select any control in the Main_View which you want to move in the Main_View area.
  2. You can even select multiple controls at a time to move in the area using Ctrl/CMD to select.
  3. You can make use of two options to move the selected control/controls. They are : 1) Drag using mouse 2) Using keyboard arrow keys.
  4. Drag the selected control/controls in the Main_View area to wherever you want to move.
  5. Make use of keys to move the control/controls up, down, right, left.

Note : While using arrow keys, don’t make use of any other key while moving the control / controls.

Resize control:

Control resize can be done by selecting the control and dragging from the end corner points.

Shift +Arrow :

Shift Arrow can be used to move the control by 5 pixel position in every direction.

Resize screen :

This option is only for ioS to change the screen size between 1x and 2x. With this you can check the screen configuration on both the sizes.

Plus Icon: On click of plus icon the screen size changes from 1x to 2x. This also changes the images which we have assigned for 2x resolution.

Minus Icon: On click of minus icon the screen size changes from 2x to 1x. This also changes the images which we have assigned for 1x resolution.

Full screen: With this panel will cover whole screen giving more visibility.

Object Hierarchy

Managing view hierarchies is a crucial part of building your application’s user interface. The positioning of your views influences both the visual appearance of your application and how your application responds to changes and events.

Below image shows an example of how the hierarchy organization of views creates the desired visual effect for an application. In the case of the Template application, the view hierarchy is composed of a mixture of views derived from different sources.

As shown in above figure, Main_View is the main parent view in the screen. You can add any control from the control panel under Main_View as a child control. In Main_View hierarchy, the child control can be moved up and down with reference to some other control.

For e.g. As shown in above figure, we can drag IMAGE_VIEW5 under TEXTFIELD3 or move up above IMAGE_VIEW4. You can even select multiple controls at a time and can move up and move down together in the hierarchy.

Description of above screen:

  1. Screen : This is the screen that is selected from Screen List.
  2. Objects Hierarchy : This is said to  be  Object Hierarchy Window. It is used to view the complete hierarchy of the current selected screen’s Main_View and to manage parent with child along with their sub child. Tapping on objects buttons in the top left panel will open up this window as shown in the below image.

  3. Main_View : The parent in the hierarchy.
  4. Sub-Control / Child-Control : The sub controls in the objects hierarchy.
  5. Sub-Control : The sub control under a sub control in the hierarchy. You can add unlimited number of child controls in hierarchy .
  6. Selected Control : The selected control is displayed in turquoise color. Tapping on any control will show its property in the Property window.
  7. Hide : Select any control from the objects hierarchy window and tap on this button. It will hide that particular control visually but it will be properly seen at the runtime of the app.

Context Menu

Delete

You can delete the single object or multiple object in the same view from the object hierarchy. You can’t delete the multiple controls from different views.

Move Up

The move up will bring the object one step up of another control. This is more important in android platform where the hierarchy of the controls on the object tree must be similar to the way it is placed on the screen.

Move down

The move down will bring the object one step down of another control in the object hierarchy. This is more important in android platform where the hierarchy of the controls on the object tree must be similar to the way it is placed on the screen.

Move To

The Move to option will move the selected control from one view to the another view. When you click on the “Move to” option you will get the number of views to which you can move the selected control. This excludes Tableview and Gridview.

Move below

This will bring the selected object below the object on the same view. When you click on the “Move below” you will be provided with the list of possible object with respect to which the object can move below.

Move above

This will bring the selected object above the object on the same view. When you click on the “Move above” you will be provided with the list of possible object with respect to which the object can move above.

Right Click Option

Remove :

Use this option to remove selected control from the current selected screen.

Clone:

Use this option to clone control in the same screen. The cloned control will be added in top left corner i.e. 0th position of its parent view. You can then set the position of the control as per your needs. For example: The button control is inside view. If you clone the button inside this view, cloned button will appear at the top left part of its parent view.

Shortcut:

Save as Control:

With “Save as control” you can create your own control. Once created you can make use of this control across multiple screens as well as multiple apps. Configure once and use it again and again.

Shortcut: <Alt>+S

Follow the steps to create your own control.

  1. You can select single or multiple controls and click on “Save as control” to create your own control.
  2. Next, On Click of “Save as Control” will open up following pop-up.
    • Add name of the control.
    • Add description of the control.
    • Press on add to save the control in the My Controls Panel.

Once you save any control as My Control. You can see it will reflect in the My control list , from where you can easily drag and drop into the required screen.

Note :

  • If you Save view (i.e parent control) as My Control. All the child controls in that view will also be saved in My control.
  • Hierarchy of the controls will remain the same as before. Even the internal references(especially for android app) will remain intact.
  • The following Quick menu Bring front, Bring Forward, Send back and send backward is only enabled and visible on the right click of the control when controls are overlapped else this options are disabled.

Bring Front:

When you click on the overlapped control and apply bring front. The control appears above all the overlapped control. Suppose button1, button2, and button3 is overlapped where Button1 is below the two buttons. The bring front action on button1 will bring it to the top of the two buttons in object hierarchy.

Shortcut: <HOME>

Bring Forward:

When you click on the overlapped control and select Bring forward. The control appears one level above the overlapped control. Suppose button1, button2, and button3 is overlapped where Button1 is below the two buttons. The Bring forward action will bring the button1 above button2 and below the button3 in the object hierarchy.

Shortcut: <Page up>

Send Back:

When you click on the overlapped control and select Send back. The selected control will appear to the last place in the object hierarchy. Suppose button1, button2, and button3 is overlapped. Button3 is above the two buttons. The Send back action will send button3 to the last place below button2 and button1 in object hierarchy.

Shortcut: <End>

Send Backward:

When you click on the overlapped control and select Send backward it will send the selected control to one level below the current level in the object hierarchy. Suppose button1, button2, and button3 is overlapped and Button3 is above the two buttons. The Send backward action on Button3 will bring it below button1 and above button2 in object hierarchy.

Shortcut: <Page Down>

Same Size:

It is used to make the selected controls height and width of same pixels. Here, right click on the control with which you want to change the other control size. Suppose Button1 and Button2 are two controls. If we want the Button2 size to be same as Button1. Then right click on the button1 and click same size. This will make the button2 size same as button1 and vice-versa.

Same Height:

Use this option to make the height of selected controls of equal pixels. Here, right click on the control with which we want to change the other control height.

Same Width:

Use this option to make the width of selected controls of equal pixels. Here, right click on the control with which we want to change the other control width.

Horizontal Align:

Use this option to align horizontally two or more controls within the same view. When two controls are horizontally aligned they have same Y-position. Here, right click on the control with which you want to horizontally align the other controls. In the below example: Button1 is horizontally align to button2.

Vertical Align:

Use this option to align vertically two or more controls within the same view. When two controls are vertically aligned they have same X-position. Here, right click on the control with which you want to vertically align the other controls. In the below example: Button1 is vertically align to button2.

Embed In View:

Embed option is used to embed the number of controls on one view. This organizes the number of controls into one view. See the below object hierarchy after embedding.

Shortcut: <Ctrl>+<Shift>+E

UnEmbed View:

Use to un-embed the number of controls from view. See the below object hierarchy after un-embedding. All the controls will come out of the view after un-embedding.

Shortcut: <Ctrl>+<Shift>+U

Hard Sync:

The hard sync option appears when you right click on the control on Android platform. It is used to sync particular control for all dimension.

Select Parent:

Select parent is used to select the parent of the control. It is mostly used when the parent and child is of same size which makes it hard to select the parent. Suppose view1(Parent) and view2(Child) are of same size. Therefore, instead of directly selecting parent control you can right click on Child control(View2) and select the parent view.

Shortcut:

Help Doc :

It takes you to the related control document. It ensures to provide related control information during app development.

Help Video:

It takes you to the related control video. It ensures to provide related control information during

Configuration Modes

Various workspaces are provided in App Console to facilitate users with grouping of properties. When a team is working on a project, there can be different stakeholders like Designer, Developer, Tester etc. Every person will have different requirement for different workspace focusing on Design, Development and Actions.

  1. Design Mode : Loading only design properties will save the time as well as increases focus of the user.
  2. Development Mode : This will require all the properties as well as actions.
  3. Action Mode : This mode will show only the actions related to the selected control. No properties will be displayed.

Loading time can be reduced considerably as well as time can be saved using this practise.

Go To

Switching among UI and backend becomes easy with “Go To” option. Using it you can:

  1. Preview : Redirects user on Project >> PreviewIT page from where either he can invite user to preview the App or get information on how to install PreviewIT App.
  2. Download : Access this option to download either .IPA or .APK
  3. Backend : Switching to this option will allow the user to view dashboard of the Backend panel. To get more information about backend, please refer to Backend Management.
  4. Language Manager : Get connected with Language Manager Section using this option.This option will be visible only if the application is multilingual app.
  5. Asset Manager : Get connected with Asset Manager Section using this option.

Right Side Menu

  1. DataSource : Accessing this Menu will display the datasource used in the selected screen. You can edit or delete the datasource as well as add events for datasource. Adding more datasource can also be achieved from here. Refer Datasource Management for more information.
  2. Miscellaneous Settings : Some Application wide common but important features like Splash Screen, Alert View, Side Panel etc. can be configured using this option. Refer Miscellaneous Settings for more information.
  3. Tab Settings : Default Tab setting is Disabled. Enabling it will show all available tabs of the screen and related settings can be configured using this menu. Refer Tab Settings for more information.
  4. Notifications : Clicking this option will display the notifications used in the selected screen. You can edit or delete the notification as well as add events for notification. Adding more notification can also be achieved from here. Refer Notifications for more information.
  5. Third Party : Lists all the Third Party Applications which can be configured. Configure.IT supports many Third Party Apps for now such as Facebook, Twitter, Paypal, Flury, Admob, Google+ etc. This lists gets expanded as we keep on adding more third party Apps here. Refer Third Party Applications for the complete list of Apps as well as more information about how to configure them.
  6. Screen Settings : Common properties of all the screen controls can be set using this. There is an option given if you want to apply these changes to the existing controls or only to new controls. Screen settings are applicable to the current screen only. Refer Screen Settings for more information
  7. Application Settings : These settings are applicable on all the screens of the application. Refer Application Settings for more information
  8. Restore Changes : To revert the changes till the last revision is possible with this option. You can undo the last changes made by you. Refer Restore Changes for more information
  9. Add Notes : Any supportive or additional information can be added using this option. You can add a note related to a control, screen, or the entire App. Refer Add Notes for more information

User Profile and Hotkey References

Walkthrough :Clicking this icon will give you a walkthrough of the entire screen as well as also creates new screen for you as sample. This video tutorial is very helpful feature.

Full Screen : This icon will put the App Console to Full Screen.

Hotkey References :Clicking on this icon will display the list of shortcuts of the App Console as below :

Edit Profile: You can edit your profile anytime using this menu item. Refer to Front-end Overview >> Profile.

Team: If you have subscribed for “Team Plan” as mentioned on our Pricing Page, then you will see the “Team” Tab or else you won't. Please refer to “Team Management” to get complete and detailed information about Team Plan.

Logout: Pressing this menu will logs you out of Configure.IT

Quick Menu

When any control is selected, it open Quick Menu as shown above. Quick Menu options are enabled/disabled depending upon the control selected.

  1. Setting: The setting icon in the Quick menu is used to show hide property window.
  2. Dimension Window : The dimension window is only enabled on the Android platform(xhdpi and xxhdpi and more). It provides information of current size vs original size.
  3. Font : To change the font style and color of the text. Tapping on this button will show below screen.



    • Choose font color of the text of the selected control.
    • Choose font name of the text of the selected control.
    • Choose font size of the text of the selected control.
    • Apply alignment to the text of the selected control
  4. Left Align : Use this option to align left.
  5. Center Align : Use this option for align center.
  6. Right Align : Use this option for align right.
  7. Background Color: Tapping on Background color will open the following screen.

Here, You can apply this quick action only after selecting the control. You can apply it on single or multiple controls at the same time. For multiple controls full width, full height, and full height and width won’t work.

Lets view the working of each Quick action in detail below:

  1. Top: It will align the control to the top of it’s parent control. If you select two or more controls and apply this action. The selected control will form a group. Here, the selected control will be placed at the top considering the position of the Particular control on the top of the group.
  2. Shortcut: < Ctrl>+<Shift>+Top Arrow

    For example: Button1 and Button2 are selected control which form a group. The position of button1 is above the button2. When the Top action is applied to this group. Both the controls are placed to the top considering the position of button1 which is above button2.

  3. Middle: It will align the control to the horizontal center of its parent.If Multiple controls are selected then they will form a group and the horizontal center of that group will be aligned to the horizontal center of parent.
  4. Shortcut: <Ctrl>+<Shift>+'+'

    For example: Button1, Button2, button3 are selected control which form a group. It considers the horizontal center of the group. When the middle action is applied to this group. The group is moved so that the horizontal center of the group is aligned with the horizontal center of parent.

  5. Bottom: It will align the control to the bottom of its parent control. The selected control which formed a group will be moved to the bottom considering the control below all the controls.
  6. Shortcut: <Ctrl>+<Shift>+Down Arrow

    For example: Button1, Button2, button3 are selected control which form a group. The position of button2 is below the button1 and button3. When the Bottom action is applied to this group. All the controls are placed to the bottom considering the position of button2 which is below button1 and button3.

  7. Left: It will align the controls to the left of its parent control. The selected control which formed a group will be moved to the left considering the control on the leftmost side of all the controls.
  8. Shortcut: <Ctrl>+<Shift>+Left Arrow

    For example: Button1, Button2, button3 are selected control which form a group. Button2 is leftmost of button1 and button3. When the “LEFT” action is applied to this group. All the controls are placed to the Left considering the position of button2.

  9. Right: It will align the controls to the Right of its parent control. The selected control which formed a group will be moved to the Right considering the control on the Rightmost side of all the controls.
  10. Shortcut: <Ctrl>+<Shift>+Right Arrow

    For example: Button1, Button2, button3 are selected control which form a group. Button3 is Rightmost of button1 and button2. When the “RIGHT” action is applied to this group. All the controls are placed to the right considering the position of button3.

  11. Center: It will align the control to the vertical center of its parent. If Multiple controls are selected then they will form a group and the vertical center of that group will be aligned to the vertical center of its parent.
  12. Shortcut:

    For example: Button1, Button2, button3 are selected control which form a group. It considers the vertical center of the group. When the center action is applied to this group. The group is moved so that the vertical center of the group is aligned with the vertical center of parent.

  13. Full Width: This action will change the width of the selected object to the full width of parent control.
  14. Shortcut: <Ctrl>+<Alt>+W

  15. Full Height: This action will change the height of the selected object to the full height of the parent control.
  16. Shortcut: <Ctrl>+<Alt>+H

  17. Full Screen: This action will change the height and width of the selected object to the full height and width of the parent control.
  18. Shortcut: <Ctrl>+<Alt>+E

    1. Bring Forward: When you click on the overlapped control and select Bring forward. The control appears one level above the overlapped control. Suppose button1, button2, and button3 is overlapped where Button1 is below the two buttons. The Bring forward action will bring the button1 above button2 and below the button3 in the object hierarchy.
    2. Shortcut: <Page up>

    3. Send Back: When you click on the overlapped control and select Send back. The selected control will appear to the last place in the object hierarchy. Suppose button1, button2, and button3 is overlapped. Button3 is above the two buttons. The Send back action will send button3 to the last place below button2 and button1 in object hierarchy.
    4. Shortcut: <End>

    5. Bring Front: When you click on the overlapped control and apply bring front. The control appears above all the overlapped control. Suppose button1, button2, and button3 is overlapped where Button1 is below the two buttons. The bring front action on button1 will bring it to the top of the two buttons in object hierarchy.
    6. Shortcut: <HOME>

    7. Send Backward: When you click on the overlapped control and select Send backward it will send the selected control to one level below the current level in the object hierarchy. Suppose button1, button2, and button3 is overlapped and Button3 is above the two buttons. The Send backward action on Button3 will bring it below button1 and above button2 in object hierarchy.
    8. Shortcut: <Page Down>

  19. Copy/Cut Paste Control: This option appears after we select the control to be copied or cut. You can copy or cut and paste single control or multiple controls. The copied and cut controls can be pasted in same screen or other screen.
  20. When you select the multiple control and paste it, the control maintains the same arrangement wherever it is placed.

    Note: We can’t select the controls on different views to copy together.

  21. Embed in View : This option will be used to embed current selected control into a view.
  22. For e.g. Hierarchy of objects changes as shown below :

    → Main_View

       → IMAGE_VIEW5

       → IMAGE_VIEW6

    Changes to

    → Main_View

      →VIEW1

             → IMAGE_VIEW5

      → IMAGE_VIEW6

  23. Unembed from View : This option will be used to un-embed current selected control from a view.
  24. For e.g. Hierarchy of objects hanges as shown below :

    → Main_View

      →VIEW1

             → IMAGE_VIEW5

      → IMAGE_VIEW6

    Changes to

    → Main_View

       → IMAGE_VIEW5

       → IMAGE_VIEW6

  25. Link : This option will provide you shortcut to attach any action to the selected control.
  26. Clicking on this will open the window as shown in figure :

    The detail description of each action event of the control will be discussed in detail later.

  27. Delete : This option will delete the current selected control.
  28. Hard Sync: It Hard Syncs the selected control in all the other resolution [shortcut to sync an individual control