View Controls

View

The View control defines a rectangular area on the screen and the interfaces for managing the content in that area.

Now we will discuss in detail related to properties and actions of the view. Tapping on any view will open the following window as shown below.

  • In properties tab you can change any property of view and even can easily search using the search bar.
  • To configure various events related to view tap on action and configure it.

Properties

Object

  1. Xpos : To change X position of the view with respect to the superview.
    • Value - float : Values can vary from -37282702 to 37282702 (width of iPhone screen).
  2. Ypos : To change Y position of the view with respect to the superview.
    • Value - float : Values can vary from -37282702 to 37282702 (width of iPhone screen).
  3. Width : To change width of the view.
    • Value - float : Values can vary from -37282702 to 37282702 (width of iPhone screen).
  4. Height : To change height of the view.
    • Value - float : Values can vary from -37282702 to 37282702 (width of iPhone screen).
  5. Object ID : Set the unique ID of the object in the current selected screen to make use of this for future purpose.
    • Value - String : Select any value from the drop down list.
  6. Key Name to Data : To display data coming from server.
    • Value - String : Clicking on this property ‘s drop down list will give you option to select the web service key of the web service that you have successfully configured in the Data Source panel.
  7. Object Parent ID : Clicking on this will open the drop down list of all the views inside the Main_View which are on child level 1.
    • Value - String : Select any value from the drop down list.

Display/Advanced Text

  1. Hide : To hide/Unhide the view in the current selected screen.
    • Value - Bool : Enable this to hide the selected view.

Advanced

  • To change the autoresizing mask of the view as per the superview. Clicking on this button will open the following window as show below.

  1. Allows expanding or shrinking a view in the direction from the top margin.
  2. Allows expanding or shrinking a view in the direction from the left margin.
  3. Allows expanding or shrinking a view in the direction from the bottom margin.
  4. Allows expanding or shrinking a view in the direction from the right margin.
  5. Allows expanding or shrinking a view’s width.
  6. Allows expanding or shrinking a view’s height.
  7. As per the selection of NSV flags the reflection will be displayed in the square area.
  8. Tap on save to save the settings.

Advanced

  1. Clip Subviews : A Boolean value that determines whether subviews are confined to the bounds of the view.
    • Value - Bool : Enable this to clip the subviews of the current selected.

Display

Background Color

  • To change the background color of the view. Clicking on the box will open the picker as shown below.

  1. Choose the color and tap on OK to change the background color of the view.
  2. Choose none to apply clear color to the background of the view.
  1. User Interaction : A Boolean value that determines whether user events are ignored and removed from the event queue.
    • Value - Bool : When set to NO, user events—such as touch and keyboard for the view are ignored. When set to YES events are received normally by the view. The default value of this property is YES.
  2. Alpha : The view’s alpha value.
    • Value - float : The value of this property is a floating-point number in the range 0.0 to 1.0, where 0.0 represents totally transparent and 1.0 represents totally opaque. This value affects only the current view and does not affect any of its embedded subviews.

Custom Border

  1. Border Width : To change the width of the border of the selected view.
    • Value - float : When this value is greater than 0.0, the tool will draw the border around the view. The default value of this property is 0.0.
  2. Border Color : To change the border color of the view. Clicking on the box will open the picker as shown above.
  3. Border Corner Radius : The radius to use when drawing rounded corners for the view’s background.
    • Value - float : When this value is greater than 0.0, the tool will draw the border around the view. The default value of this property is 0.0.
  4. Dashed Width For Dashed Border : To change the width of the dash which is bordered around the view.
    • Value - float : When this value is greater than 0.0, the tool will draw the dashed border around the view. The default value of this property is 0.0.
  5. Space between dashes for dashed border : To change space width between the dashes on the border of your view.
    • Value - float : When this value is greater than 0.0, the tool will show dashed border around the view. The default value of this property is 0.0.

HB Custom Properties

  1. Has Navigation Detail : A boolean value to determine whether there is any navigation from current screen to any other screen.The main purpose of this property is to transfer data from current screen to next screen.
    • Value - Bool : The default value is NO.
  2. Scrolling View Id for vertical Navigation : Set View ID of the view that you want to scroll in the current selected view. This current view will act as template for the other views that will be displayed in the center of the current selected view.
    • Value : Select any object ID of the control in the current selected view from the drop down list.
  3. Header View ID : Set View ID of the view that you want to scroll in the current selected view. This current view will act as template for the other views that will be displayed in the header of the current selected view.
    • Value : Select any object ID of the control in the current selected view from the drop down list.
  4. Footer View ID : Set View ID of the view that you want to scroll in the current selected view. This current view will act as template for the other views that will be displayed in the footer of the current selected view.
    • Value : Select any object ID of the control in the current selected view from the drop down list.
  5. Header Animating Image Identifier : Set View ID of the view that will animate when user will scroll up in the current selected view. This current view will act as pull to refresh view.
    • Value : Select any object ID of the imageview in the current selected view from the drop down list.
  6. Footer Animating Image Identifier : Set View ID of the view that will animate when user will scroll down in the current selected view. This current view will act as pull to refresh view.
    • Value : Select any object ID of the imageview in the current selected view from the drop down list.
  7. Enable Vertical Scrolling : A boolean value to enable the view work as a vertical scrollview.
    • Value : The default value is NO.
  8. Transform Angle : Angle to rotate the object when it is loaded in the current screen.
    • Value : The default value is 0.0.

Action

  1. Number of events having actions.
  2. Number of actions configured in the event.
  • Tapping on action tab will open the window as shown above.
  • Double tap on any action in the above screen will open following window as shown below.

  • You can configure action for any event in this window. Action related to the event will be called off when that events occurs by user interaction or by system interaction. As shown in figure in this window you can add different cases and depending on the case you will add as many actions as many you want.

We will be discussing later about the configuration of the cases and adding actions.
Lets discuss about the events that we can configure in actions tab.

  1. On Double Finger Pan : The action related to this event will be called when user pan on the screen with two fingers.
  2. Location Error : The action related to this event will be called when the location services failed to update.
  3. On Single Finger Swipe : The action related to this event will be called when user swipe on the screen with single finger.
  4. Location Success : The action related to this event will be called when the location services successfully updated.
  5. Double Finger Triple Tap : The action related to this event will be called when user triple taps on the screen with two fingers.
  6. Double Finger Double Tap : The action related to this event will be called when user double taps on the screen with two fingers.
  7. On Double Finger Swipe Up : The action related to this event will be called when user swipe on the screen with two fingers.
  8. On Single Finger Swipe Up : The action related to this event will be called when user swipe up on the screen with one finger.
  9. Load : The action related to this event will be called when system loads the screen.
  10. On Double Finger Swipe Right : The action related to this event will be called when user swipe right on the screen with two fingers.
  11. Double Finger Single Tap : The action related to this event will be called when user single tap on the screen with two fingers.
  12. Single Finger Triple Tap : The action related to this event will be called when user single tap on the screen with single finger.
  13. On Double Finger Swipe Left : The action related to this event will be called when user swipe left on the screen with two fingers.
  14. On Single Finger Swipe Down : The action related to this event will be called when user swipe down on the screen with one finger.
  15. Single Finger Double Tap : The action related to this event will be called when user double taps on the screen with single finger.
  16. Single Finger Single Tap : The action related to this event will be called when user single tap on the screen with single finger.
  17. On Single Finger Long Press : The action related to this event will be called when user single long press on the screen with single finger.
  18. On Double Finger Long Press : The action related to this event will be called when user single long press on the screen with two fingers.
  19. On Single Finger Swipe Right : The action related to this event will be called when user swipe right on the screen with single finger.
  20. Animation Completed : The action related to this event will be called when animation gets completed which is configured in the add action window.

ImageView

An image view object provides a view-based container for displaying a single image.

Properties

Object

Below properties are explained in detail in View Control. Please refer above.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  6. Key Name to Data
  7. Object Parent ID

Advanced

Below properties are explained in detail in View Control. Please refer above.

Clip Subviews

Display

Below properties are explained in detail in View Control. Please refer above.

  1. Background Color
  2. User Interaction
  3. Alpha

Custom Border

Below properties are explained in detail in View Control. Please refer above.

  1. Border Width
  2. Border Color
  3. Border Corner Radius
  4. Dashed Width For Dashed Border
  5. Space between dashes for dashed border

Display/Image

Image

Choose the image from the resources to display image in the imageview. Tapping on will open up the image as shown below.

  • Choose any image from the list and tap on save to apply image to the imageview object.
  • Choose upload and then tap on save to save apply image to the imageview object and save in the resources.

Display

  1. Highlighted Image : The highlighted image displayed in the image view.
    • Value : Choose the image from the resources to display image in the imageview. Tapping on will open up the image as shown above.
  2. Highlighted : A Boolean value that determines whether the image is highlighted.
    • Value - bool : This property determines whether the regular or highlighted images are used. When highlighted is set to YES, imageview will use the highlighted Image property. If both of those properties are set to nil or if highlighted is set to NO, it will use the image.
  3. Content-Mode : A mode used to determine how a view lays out its content when its bounds change.
    • Value : Click on the drop down list and choose any value from the list.

HB Custom Properties

  1. Placeholder Image : To display image while the original image is getting downloaded from the server.
    • Value - Image : Choose the image from the resources to display image in the imageview. Tapping on will open up the image as shown above.
  2. Enable Image Detailing : To allow user to view image in full screen, when user will tap on the imageview.
    • Value - Bool : Enabling this property will allow user to view image in full screen as well as user can zoom in and out the image.
  3. Key Name To Detailing : To display higher resolution or different image when user will tap on the imageview.
    • Value - Bool : Clicking on this property ‘s drop down list will give you option to select the web service key of the web service that you have successfully configured in the Data Source panel.

Below property are explained in detail in View Control. Please refer above.

TransformAngle

Action

As shown in above figure the Image View's actions are almost similar to View ‘s actions which are discussed above. Please refer description of all the actions of ImageView as given above.

WebView

Use the WebView control to embed web content in your application.

Properties

Object

Below properties are explained in detail in View Control. Please refer above.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  6. Key Name to Data
  7. Object Parent ID

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer above.

  1. Hide
  2. Advanced

Advanced

Below properties are explained in detail in View Control. Please refer above.

  1. Clip Subviews

Display

Below properties are explained in detail in View Control. Please refer above.

  1. Background Color
  2. User Interaction
  3. Alpha

Custom Border

Below properties are explained in detail in View Control. Please refer above.

  1. Border Width
  2. Border Color
  3. Border Corner Radius
  4. Dashed Width For Dashed Border
  5. Space between dashes for dashed border

Display

  1. Detection : The types of data converted to clickable URLs in the web view.
    • Value : You can use this property to specify the types of data (phone numbers, http links, and so on) that should be automatically converted to clickable URLs in the webview. When clicked, the text view opens the application responsible for handling the URL type and passes it the URL.

Advanced

  1. Opaque : A Boolean value that determines whether the view is opaque.
    • Value - bool : This property provides a hint to the drawing system as to how it should treat the view. If set to YES, the drawing system treats the view as fully opaque, which allows the drawing system to optimize some drawing operations and improve performance. If set to NO, the drawing system composites the view normally with other content. The default value of this property is YES.

Object

  1. Scales page to fit : A Boolean value determining whether the webpage scales to fit the view and the user can change the scale.
    • Value - bool : If YES, the webpage is scaled to fit and the user can zoom in and zoom out. If NO, user zooming is disabled. The default value is NO.

HB Custom Properties

  1. Should Open Link : To open any link embedded in the html content in the webview.
    • Value - bool : If YES, the webview will open any link in the safari app . If NO, the webview will redirect internally to the link.

Below property are explained in detail in View Control. Please refer above.

  1. TransformAngle

Action

There are no actions related to this control.

Ad View

The AdView control provides a view that displays banner advertisements to the user. When the user taps a banner view, the view triggers an action programmed into the advertisement. For example, an advertisement might show a movie, present a modal advertisement, or launch Safari to show a webpage. Your application is notified when an action starts and stops, but does not otherwise interact with the advertisement. You receive revenue when users see new advertisements or trigger their actions.

Properties

Object

Below properties are explained in detail in View Control. Please refer above.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  6. Key Name to Data
  7. Object Parent ID

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer above.

  1. Hide
  2. Advanced

Display

Background Color

  • The property is explained in detail in View Control. Please refer above.

HB Custom Properties

  1. Ad Type : To choose the type of Ad that you want to show in the view.
    • Value : Four types of ads you can show in the Ad view. They are : 1)iAD 2)Google AdMob

Settings that you need to do to configure the Ads:

  1. iAD : You don’t have to do anything with iAD.
  2. Google AdMob : You have to provide Api key in the Third Party Configuration in the right panel. For Api Key you need to follow this Link.

Action

Lets discuss about the events that we can configure in actions tab.

  1. Adv Success : The action related to this event will be called when ad view starts successfully receiving ads.
  2. Adv Error : The action related to this event will be called when ad view fails receiving ads.

Navigation Bar

The Navigation Bar is a kind of bar, typically displayed at the top of the screen, containing buttons for navigating within a hierarchy of screens. The primary properties are a left (back) button, a center title, and an optional right button. You can use a navigation bar as a standalone object.

Properties

Object

Below properties are explained in detail in View Control. Please refer above.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  6. Key Name to Data
  7. Object Parent ID

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer above.

  1. Hide
  2. Advanced

Advanced

Below properties are explained in detail in View Control. Please refer above.

  1. Clip Subviews

Below property are explained in detail in ImageView Control. Please refer above.

  1. Opaque

Display

Below properties are explained in detail in View Control. Please refer above.

  1. Background Color
  2. User Interaction
  3. Alpha

Below property are explained in detail in ImageView Control. Please refer above.

  1. Content Mode

Custom Border

Below properties are explained in detail in View Control. Please refer above.

  1. Border Width
  2. Border Color
  3. Border Corner Radius
  4. Dashed Width For Dashed Border
  5. Space between dashes for dashed border

Display/Image

Below property are explained in detail in ImageView Control. Please refer above.

  1. Image

Action

There are no actions related to this control.

Activity Indicator View

Use an activity indicator to show that a task is in progress. An activity indicator appears as a “gear” that is either spinning or stopped.

Properties

Object

Below properties are explained in detail in View Control. Please refer above.

  1. Xpos
  2. Ypos
  3. Object ID
  4. Object Parent ID

Style

  • The visual style of the progress indicator.

Value

  • Choose any of the style for the indicator :
  1. Large White : The large white style of indicator.
  2. White : The standard white style of indicator (the default).
  3. Gray : The standard gray style of indicator.

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer above.

  1. Hide
  2. Advanced

Hides when stop

  • A Boolean value that controls whether the receiver is hidden when the animation is stopped.

Value

  • If the value of this property is YES (the default), the superview sets its hidden property to YES when receiver is not animating. If the hidesWhenStopped property is NO, the receiver is not hidden when animation stops. You stop an animating progress indicator with the stopAnimating method.

Display

Below properties are explained in detail in View Control. Please refer above.

  1. Background Color
  2. User Interaction
  3. Alpha

Color

  • The color of the activity indicator.

Value

  • If you set a color for an activity indicator, it overrides the color provided by the activityIndicatorViewStyle property.

Action

There are no actions related to this control.

Tool Bar

A toolbar is a control that displays one or more buttons, called toolbar items. A toolbar momentarily highlights or does not change the appearance of an item when tapped.

Properties

Object

Below properties are explained in detail in View Control. Please refer above.

  1. Xpos
  2. Ypos
  3. Width
  4. Object ID
  5. Object Parent ID

Bar Style

  • The toolbar style that specifies its appearance.

Value

  • Choose from the following style:
  1. Default : Use the default style normally associated with the given view. For example, navigation bars typically use a white background with dark content.
  2. Black Opaque : Use a black background with light content.

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer above.

  1. Hide
  2. Advanced

Custom Border

Below properties are explained in detail in View Control. Please refer above.

  1. Border Width
  2. Border Color
  3. Border Corner Radius
  4. Dashed Width For Dashed Border
  5. Space between dashes for dashed border

Display

Tint Color

  • The tint color to apply to the bar button items.

Value

  • To change the background color of the toolbar. Clicking on the box will open the color picker .

Below properties are explained in detail in View Control. Please refer above.

  1. Background Color
  2. User Interaction
  3. Alpha

HB Custom Properties

  1. Background Image : Sets the image to use for the background in toolbar.
    • Value : Choose the image from the resources to display image in the imageview. Tapping on will open up the image as shown above.

Below properties are explained in detail in View Control. Please refer above.

  1. TransformAngle

Action

As shown in above figure the Toolbar’s action is almost similar to View ‘s action which is discussed above. Please refer description of action of Toolbar as given above.