Button Controls

Button

A button control implements a button on the touch screen. A button receives touch events and executes the action configured related to the events. This control provides options for setting the title, image, and other appearance properties of a button. By using these properties, you can specify a different appearance for each button state.

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

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

 

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  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 Controls - 1 Views document.

  1. Hide
  2. Advanced

Display

  1. Button State : A value indicates the state of the button.
    • Value - String : Choose any option from the following:
  1. Normal : The normal, or default state of a control—that is, enabled but neither selected nor highlighted.
  2. Selected : Selected state of a control.
  3. Highlighted : Highlighted state of a control. A button control enters this state when a touch enters and exits during tracking and when there is a touch up event.
  4. Disabled : Disabled state of a control. This state indicates that the control is currently disabled.
  1. Normal/Background/Highlighted/Disabled Title : The title to use for the selected state.
    • Value - String : The state that uses the specified title. If button state is Normal then button will display the value in title set in this property(Normal Title) .
  2. Normal/Background/Highlighted/Disabled Image : Sets the background image to use for the specified button state.
    • Value - image : The image to use for the specified state. If button state is Normal then button will display the value in image as set in this property(Normal Image) .Choose the image from the resources to display image in the button. Tapping on will open up the resource manager.
  3. Normal/Background/Highlighted/Disabled Background Image : Sets the image to use for the specified state.
    • Value - image : The backgrounf image to use for the specified state. If button state is Normal then button will display the value in image as set in this property(Normal Background Image) .Choose the image from the resources to display image in the button. Tapping on will open up the resource manager.
  4. Normal/Background/Highlighted/Disabled Title Color : Sets the color of the title to use for the specified state.
    • Value - color : The state that uses the specified color. If button state is Normal then button will display the value in title color set in this property(Normal Title Color) .
  5. Normal/Background/Highlighted/Disabled Title Shadow Color : Sets the color of the title shadow to use for the specified state.
    • Value - color : The state that uses the specified title shadow color. If button state is Normal then button will display the value in title shadow color set in this property(Normal Title Shadow color) .
  6. Selected : A boolean value to set the state of the button to Selected.
    • Value - bool : If set to YES, then the properties(image, title, title color, etc.) related to Selected state will be applied to button.
  7. Enabled : A boolean value to set the state of the button to Normal.
    • Value - bool : If set to YES, then the properties(image, title, title color, etc.) related to Normal state will be applied to button.
  8. Highlighted : A boolean value to set the state of the button to Highlighted.
    • Value - bool : If set to YES, then the properties(image, title, title color, etc.) related to Highlighted state will be applied to button.
  9. Tint Color : The tint color to apply to the button title and image.
    • Value - color : To change the tint color, click on the box will open the color and choose the color.
  10. Highlighted Color : The highlight color applied to the label’s text.
    • Value - color : This color is applied to the label automatically whenever the highlighted property is set to YES. Tapping on will open the color picker. Choose appropriate color from picker apply it on the label’s highlighted text.

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Background Color
  2. User Interaction
  3. Alpha

Display/Text

Below properties are explained in detail in Label Control. Please refer Controls - 2 Text Controls document.

  1. Font Family
  2. Font Size
  3. LineBreak Mode

Custom Border

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

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

Advanced

  1. Show Touches when highlighted : A Boolean value that determines whether tapping the button causes it to glow.
    • Value - bool : If YES, the button glows when tapped; otherwise, it does not. The image and button behavior is not changed by the glow. The default value is NO.
  2. Adjusts Image when highlighted : A Boolean value that determines whether the image changes when the button is highlighted.
    • Value - bool : If YES, the image is drawn lighter when the button is highlighted. The default value is YES.
  3. Adjusts Image when disabled : A Boolean value that determines whether the image changes when the button is disabled.
    • Value - bool : If YES, the image is drawn darker when the button is disabled. The default value is YES.
  4. Reverse Title when Highlighted : A Boolean value that determines whether the title shadow changes when the button is highlighted.
    • Value - bool : If YES, the shadow changes from engrave to emboss appearance when highlighted. The default value is NO.
  5. Edge : Any internal component of button that you want to provide insets.
    • Value - bool : Choose the following options :
  1. Image : The image of the button
  2. Title : The title of the button.
  3. Content : Content includes both title and image.
  1. Top Content/Title/Image Edge Insets : To insert the space from the top.
    • Value - float : The number of pixels that can be added on the top of Content/Title/Image. The default value is 0.0.
  2. Bottom Content/Title/Image Edge Insets : To insert the space from the bottom.
    • Value - float : The number of pixels that can be added on the bottom of Content/Title/Image. The default value is 0.0.
  3. Left Content/Title/Image Edge Insets : To insert the space from the left.
    • Value - float : The number of pixels that can be added on the left of Content/Title/Image. The default value is 0.0.
  4. Right Content/Title/Image Edge Insets : To insert the space from the right.
    • Value - float : The number of pixels that can be added on the right of Content/Title/Image. The default value is 0.0.

Below properties are explained in detail in label Control. Please refer Controls - 2 Text Control document.

  1. Title Shadow Offset X named as Shadow Offset X in label.
  2. Title Shadow Offset X named as Shadow Offset Y in label.

HB Custom Properties

  1. Is Toggle Button : A boolean value to enable button to behave as toggle button.
    • Value - bool : If set to YES then button will toggle from Normal to Selected and Selected to Normal.
  2. Transform angle for Selected State : To rotate the button in the selected state .
    • Value - float : The default value is 0.0.
  3. Transform angle for Selected State : To rotate the button in the selected state .
    • Value - float : The default value is 0.0.

Action

As shown in above figure the Buttons’s actions description is given below.

Click

  • The action related to this event will be called when user clicks on the the button.

Why to configure for SMS, Phone Contacts, Action Sheet,Alert and Email in the action events of button?

Consider on the click event of the button you configured to open SMS picker. To configure the actions of the buttons in the picker we have to configure actions on the button action.

So following events will be called by the control buttons in the picker or alert.

  1. Remove popover : The action related to this event will be called when popover is removed.
  2. Email Sent : The action related to this event will be called when email is sent successfully.
  3. Email Cancelled : The action related to this event will be called when email is cancelled by the user.
  4. Email Saved : The action related to this event will be called when email is saved in drafts by the user.
  5. Location Error : The action related to this event will be called when the location services failed to update.
  6. Location Success : The action related to this event will be called when the location services successfully updated.
  7. Email Failed : The action related to this event will be called when email is failed to be sent.
  8. SMS Sent :The action related to this event will be called when SMS is sent successfully.
  9. SMS Cancelled : The action related to this event will be called when SMS is cancelled by user.
  10. SMS Failed : The action related to this event will be called when SMS is failed to deliver.
  11. Alert Button Click : The action related to this event will be called when any of the button in the alert view clicked.
  12. Phone Contact Added : The action related to this event will be called when the phone contact gets added successfully.
  13. Phone Contact Selected : The action related to this event will be called when the user selects any contact in the phone contact picker.
  14. Phone Contact Edited : The action related to this event will be called when the user edits any contact in the contact picker.
  15. Action Sheet Selected : The action related to this event will be called when the user clicks on any button of the action sheet.
  16. Sharing Done : The action related to this event will be called when the user successfully shared on Facebook/Twitter.
  17. Saved to Album : The action related to this event will be called when the user saves the image to the album.

Bar Button

A bar button item is a button specialized for placement on a Toolbar or NavigationBar control. It inherits basic button behavior.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Width
  2. Height
  3. Object ID
  4. Key Name to Data
  5. Object Parent ID

Style

  • The style of the bar button.

Value

  • Choose from the following style :
  1. Plain : Glows when tapped. The default item style.
  2. Bordered : A simple button style with a border.
  3. Done : The style for a done button—for example, a button that completes some task and returns to the previous view.

System Item Identifier

  • Defines system-supplied images for bar button items.

Value - Color

  • Choose from the following style :
  1. Done :The system Done button.
  2. Cancel : The system Cancel button.
  3. Edit : The system Edit button.
  4. Save : The system Save button.
  5. Add : The system add button.
  6. Flexible Space : Blank space to add between other items. The space is distributed equally between the other items. Other item properties are ignored when this value is set.Add : The system add button.
  7. Fixed Space : Blank space to add between other items. Only the width property is used when this value is set.
  8. Compose : The system Compose button.
  9. Reply : The system Reply button.
  10. Action : The system Action button.
  11. Organize : The system Organize button.
  12. Bookmarks : The system Compose button.
  13. Search : The system Reply button.
  14. Refresh : The system Action button.
  15. Stop : The system Organize button.
  16. Camera : The system Camera button.
  17. Trash : The system Trash button.
  18. Play : The system Reply button.
  19. Pause : The system Action button.
  20. Rewind : The system Organize button.
  21. FastForward : The system Camera button.
  22. Undo : The system Trash button.
  23. Redo : The system Trash button.
  24. Page curl : The system Trash button.

Bar Button Title

  • The title of the button item.

Value - Color

  • The default value is nil.

Display

Tint Color

  • The tint color to apply to the button item.

Value - Color

  • To change the tint color of the bar button click on the box will open the color picker.

Enabled

  • A Boolean value that determines whether the receiver is enabled.

Value - bool

  • The default value is YES.

Display/Image

Below properties are explained in detail in Imageview Control. Please refer Controls - 1 Views document.

  1. Image

Action

  • As shown in above figure the bar button’s actions are almost similar to buttons ‘s actions which are discussed above.

A navigation button is typically use to provide next previous functionality in gridview or photogallery control.

  1. Navigation Button Forward : A boolean value to set the button as the forward button.
    • Value - bool : If set to YES, then the button works as forward button. If set to NO, then the button works as backward button. The default value is NO.
  2. Object Parent ID : Set the Parent ID to Gridview control’s Object ID or PhotoGallery control’s Object ID.
    • Value : Select any value from the drop down list.

Other Properties of this control are similar to the Button control’ property. Please refer above.

There are no action related to this control.

Bar Code Button

A bar code button is mainly used to scan any bar code image in order to get code out the bar code image. It also can be used to generate bar code image in the app.

Properties

HB Custom Properties

  1. Bar Code Image Id : An Imageview where you will be displaying the encoded bar code image.
    • Value : Select the imageview control’s object id from the drop down list.
  2. Bar Code Text Id : A textfield where you will be displaying the encoded bar code image.
    • Value : Select the textfield control’s object id from the drop down list.

Action

As shown in above figure the bar code button’s actions are almost similar to Buttons ‘s actions which are discussed above. Please refer description of all the actions of bar code button as given above.

Radio Button

Radio buttons are used when you want to let the user select one - and just one - option from a set of alternatives. Each radio button is normally accompanied by a label describing the choice that the radio button represents.

Properties

Object

  1. Group Name : A static identifier to identify the group of buttons .
    • Value - String : Any string you can enter for the group of buttons.

Note : Provide same identifier for the all the buttons. By default there will be two but you can add more buttons but for those buttons too the identifier should be same.

Radio Button will toggle from Normal state to Selected state. Set Image/Title/Background color/Background Image depending on the state.

Other properties of radio button are similar to the button. Please refer above.

Action

As shown in above figure the radio buttons ‘s actions description is given below.

  1. Click : The action related to this event will be called when user clicks on the button.
  2. Value Changed : The action related to this event will be called when state of button changes from selected to normal or normal to selected.

Segment Control

A Segment Control is a horizontal control made of multiple segments, each segment functioning as a discrete button. A segmented control affords a compact means to group together a number of controls. A segmented control can display a title or an image. The UISegmentedControl object automatically resizes segments to fit proportionally within their superview unless they have a specific width set.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

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

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced

Custom Border

Below property are explained in detail in View Control. Please refer Controls - 1 Views document.

  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. Segment Control Style : The styles of the segmented control.
    • Value : Choose from the following style:
      1. Plain : The large plain style for segmented controls. This style is the default.
      2. Bordered : The large bordered style for segmented controls.
      3. Bar : The small toolbar style for segmented controls. Segmented controls in this style can have a tint color.
      4. Bezeled : The large bezeled style for segmented controls. Segmented controls in this style can have a tint color.
  2. Number of Segments : The number of segments in the segment control.
    • Value : The default value is 2.0.
  3. Momentry : A Boolean value that determines whether segments in the receiver show selected state.
    • Value - bool : The default value of this property is NO. If it is set to YES, segments in the control do not show selected state and do not update the value of selectedSegmentIndex after tracking ends.
  4. Tint Color : The tint color of the segmented control.
    • Value - color : The default property is clear color.
  5. Segment Number : The index number identifying the selected segment on which following properties will be applied.
    • Value - int : The default property is 1.
  6. Segment Title : The title of the segment.
    • Value - String : The default property is 1.
  7. Segment Image : The image of the segment.
    • Value - Image : The default property is nil.
  8. Segment Widths : The width of the segment.
    • Value - Float : The default property is 0.
  9. Segment Content offset Top : To insert the space from the top.
    • Value - Float : The default property is 0.
  10. Segment Content offset Left : To insert the space from the left.
    • Value - Float : The default property is 0.
  11. Segment Enabled : Enables the specified segment.
    • Value - bool : The default property is YES.
  12. Selected : Set the segment selected.
    • Value - bool : The default property is YES.

Below properties are explained in detail in View Control. Please refer Controls - 1 Views Controls document.

  1. Background Color
  2. Alpha
  3. User Interaction Enabled

HB Custom Properties

  1. Divider Image : The image for the divider between the two segments.
    • Value - image : Choose the image from the resources to display image in the divider of the segment control. Tapping on will open up the resource manager.
  2. Selected Background Color : Set the color of the selected segment.
    • Value - color : To change the background color of the selected segment click on the box will open the color picker.
  3. UnSelected Background Color : Set the color of the unselected segment.
    • Value - color : To change the background color of the selected segment click on the box will open the color picker.
  4. Selected Background Image : Set the background image of the selected segment.
    • Value - image : Choose the image from the resources to display image in the selected segment of the segment control. Tapping on will open up the resource manager.
  5. Unselected Background Image : Set the background image of the unselected segment.
    • Value - image : Choose the image from the resources to display image in the selected segment of the segment control. Tapping on will open up the resource manager.
  6. Selected Font Color : Set the font color of the text of the selected segment
    • Value - color : To change the font color of the text of the segment click on the box will open the color picker form where you can choose the color.
  7. Unselected Font Color : Set the font color of the unselected segment.
    • Value - color : To change the font color of the text of the segment click on the box will open the color picker form where you can choose the color.
  8. Selected Font Size : Set the font size of the text of the selected segment.
    • Value - float : The default font size of the 0.0.
  9. UnSelected Font Size : Set the font size of the text of the unselected segment.
    • Value - float : The default font size of the 0.0.
  10. Selected Font Name : Set the font name of the text of the selected segment.
    • Value - : The default style is Helvetica-Bold.
  11. Unselected Font Name : Set the font name of the unselected segment.
    • Value : The default style is Helvetica-Bold.
  12. Unselected Font Name : Set the font name of the unselected segment.
    • Value : The default style is Helvetica-Bold.

Action

As shown in above figure the Segment control’s actions description is given below.

  1. Click : The action related to this event will be called when user clicks on the segment.
  2. Value Changed : The action related to this event will be called when user selects any segment. The segment state will change from unselected to selected.

Switch

You use the switch control to create and manage the On/Off buttons used, for example, in the Settings app for options such as Airplane Mode and Bluetooth. These objects are known as switches.

The switch control declares a property and a method to control its on/off state. As with Slider control, when the user manipulates the switch control (“flips” it) a Value Changed event is generated, which results in the control (if properly configured) sending an action message.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Width
  4. Height
  5. Object ID
  6. Key name to data
  7. Object Parent ID
  1. On : A Boolean value that determines the off/on state of the switch.
    • Value - bool : The default value is YES.
  2. On Tint Color : The color used to tint the appearance of the switch when it is turned on.
    • Value - Color : To change the tint color, click on the box will open the color picker and choose the color.

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced

Display

Below properties are explained in detail in Label Control. Please refer Controls - 1 Views Controls document.

  1. Background Color
  2. Alpha
  3. User Interaction Enabled

HB Custom Properties

  1. Switch Off Tint Color : The tint color of the switch in the off position.
    • Value - Color : To change the tint color of the switch, click on the box will open the color picker and choose the color.
  2. Switch Thumb Tint Color : The color used to tint the appearance of the thumb.
    • Value - Color : To change the tint color of the switch thumb, click on the box will open the color picker and choose the color.
  3. On Text : The text to be displayed in the switch in the on position.
    • Value - String : The default value is nil.
  4. Off Text : The text to be displayed in the switch in the off position.
    • Value - String : The default value is nil.
  5. On Image : The image to be displayed in the switch in the on position.
    • Value - String : The default value is nil.
  6. Off Image : The image to be displayed in the switch in the on position.
    • Value - String : The default value is nil.

Action

As shown in above figure the Switch control’s action description is given below.

Value Changed

  • The action related to this event will be called when user switches from on to off position or vice-versa.

Stepper

A stepper control provides a user interface for incrementing or decrementing a value.

A stepper displays two buttons, one with a minus (“–”) symbol and one with a plus (“+”) symbol. The bounding rectangle for a stepper matches that of a Switch control.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Object ID
  4. Key name to data
  5. Object PArent ID
  1. Key to Maximum Value : Set the maximum value of the stepper through the data coming from server.
    • Value : 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 Datasource panel.
  2. Key to Minimum Value : Set the minimum value of the stepper through the data coming from server.
    • Value : 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 Datasource panel.
  3. Key to Stepper Value : Set the step value of the stepper for increment or dcrement through the data coming from server.
    • Value : 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 Datasource panel.

Display/Advanced Text

  1. Value : The numeric value of the stepper.
    • Value - float : When the value changes, the stepper sends the message to Event ValueChanged flag to its action.
  2. Continuous : The continuous or noncontinuous state of the stepper.
    • Value - bool : If YES, value change events are sent immediately when the value changes during user interaction. If NO, a value change event is sent when user interaction ends.
  3. Minimum Value : The lowest possible numeric value for the stepper.
    • Value - float : Must be numerically less than maximumValue. If you attempt to set a value equal to or greater than maximumValue, the system raises an exception.
  4. Maximum Value : The highest possible numeric value for the stepper.
    • Value - float : Must be numerically less than maximumValue. If you attempt to set a value equal to or greater than maximumValue, the system raises an exception.
  5. Auto Repeats : The automatic or nonautomatic repeat state of the stepper.
    • Value - bool : If YES, the user pressing and holding on the stepper repeatedly alters value.
  6. Wrap : The wrap vs. no-wrap state of the stepper.
    • Value - bool : If YES, incrementing beyond maximumValue sets value to minimumValue; likewise, decrementing below minimumValue sets value to maximumValue. If NO, the stepper does not increment beyond maximumValue nor does it decrement belowminimumValue but rather holds at those values.
  7. Step Value : The step, or increment, value for the stepper.
    • Value - float : Must be numerically greater than 0. If you attempt to set this property’s value to 0 or to a negative number, the system raises an exception.

Display

Below properties are explained in detail in View Control. Please refer Controls - 1 Views Controls document.

  1. Background Color
  2. Alpha
  3. User Interaction Enabled

Custom Border

Below property are explained in detail in View Control. Please refer Controls - 1 Views document.

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

HB Custom Properties

  1. Plus On Image : The image to be displayed on the plus side when the button is pressed.
    • Value - Image : Choose the image from the resources to display image in the plus side of the stepper control. Tapping on will open up the resource manager.
  2. Minus On Image : The image to be displayed on the minus side when the button is pressed.
    • Value - Image : Choose the image from the resources to display image in the minus side of the stepper control. Tapping on will open up the resource manager.
  3. Plus Off Image : The image to be displayed on the plus side in the normal state of the button.
    • Value - Image : Choose the image from the resources to display image in the plus side of the stepper control. Tapping on will open up the resource manager.
  4. Minus Off Image : The image to be displayed on the minus side in the normal state of the button.
    • Value - Image : Choose the image from the resources to display image in the minus side of the stepper control. Tapping on will open up the resource manager.

Action

As shown in above figure the Switch control’s action description is given below.

Click

  • The action related to this event will be called when user clicks on plus button or minus button.

Slider

A Slider is a visual control used to select a single value from a continuous range of values. Sliders are always displayed as horizontal bars. An indicator, or thumb, notes the current value of the slider and can be moved by the user to change the setting.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Width
  4. Object ID
  5. Key name to data
  6. Object Parent ID

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

  1. Key to maximum value
  2. Key to minimum value
  1. Minimum Value : Contains the minimum value of the receiver.
    • Value - float : The default value of this property is 1.0.
  2. Maximum Value : Contains the maximum value of the receiver.
    • Value - float : The default value of this property is 0.0.

Display/Advanced

  1. Maximum Value Image : Contains the image that is drawn on the side of the slider representing the maximum value.
    • Value - Image : This default value of this property is nil. Choose the image from the resources to display image in the slider control. Tapping on will open up the resource manager.
  2. Minimum Value Image : Contains the image that is drawn on the side of the slider representing the minimum value.
    • Value - Image : This default value of this property is nil. Choose the image from the resources to display image in the slider control. Tapping on will open up the resource manager.
  3. Minimum Tint Color : The color used to tint the standard minimum track images.
    • Value - Color : To change the tint color, click on the box will open the color picker and choose the color. Setting this property removes any custom minimum track images associated with the slider.
  4. Maximum Tint Color : The color used to tint the standard minimum track images.
    • Value - Color : To change the tint color, click on the box will open the color picker and choose the color.Setting this property removes any custom minimum track images associated with the slider.
  5. Thumb Tint Color : The color used to tint the standard thumb images.
    • Value - Color : To change the tint color , click on the box will open the color picker and choose the color.Setting this property removes any custom minimum track images associated with the slider.
  6. Value : Contains the receiver’s current value.
    • Value - float : The default value is 0.0.
  7. Continuous : Contains a Boolean value indicating whether changes in the slider's value generate continuous update events
    • Value - bool : If YES, the slider sends update events continuously to the associated action. If NO, the slider only sends an action event when the user releases the slider’s thumb control to set the final value.

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced

Display

Below properties are explained in detail in View Control. Please refer Controls - 1 Views Controls document.

  1. Background Color
  2. Alpha
  3. User Interaction Enabled

HB Custom Properties

  1. Show popover with slider while slider moves : A boolean value to display popover with value of slider in label.
    • Value - bool : If set YES, then the popover will appear as the slider value changes.
  2. Slider popover background color : The color that will be displayed in the background of the popover.
    • Value - Color : To change the background color of popover, click on the box will open the color picker and choose the color.
  3. Slider popover label text color : The color of the text of the label in the popover.
    • Value - Color : To change the background color of popover, click on the box will open the color picker and choose the color.
  4. Slider thumb image : Assigns a thumb image to the slider.
    • Value - image : Choose the image from the resources to display image in the thumb of slider control. Tapping on will open up the resource manager.
  5. Slider thumb image : Assigns a thumb image to the slider when the user taps on the slider.
    • Value - image : Choose the image from the resources to display image in the thumb of slider control in highlighted state. Tapping on will open up the resource manager.
  6. Enable Scaling : A boolean value to enable the slider work like stepper , incrementing or decrementing on specific step value.
    • Value - bool : If set to YES then slider will work like stepper.
  7. Step Value : The step, or increment, value for the slider.
    • Value - float : Must be numerically greater than 0.
  8. Maximum Track Image : Contains the image that is drawn on the side of the slider representing the maximum value.
    • Value - image : Choose the image from the resources to display image in the thumb of slider control in highlighted state. Tapping on will open up the resource manager.
  9. Minimum Track Image : Contains the image that is drawn on the side of the slider representing the minimum value.
    • Value - image : Choose the image from the resources to display image in the thumb of slider control in highlighted state. Tapping on will open up the resource manager.

Custom Border

Below property are explained in detail in View Control. Please refer Controls - 1 Views document.

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

Action

As shown in above figure the slider control’s action description is given below.

Value Changed

  • The action related to this event will be called when user slides the thumb of the slider.

Image Picker

An image picker is a one kind of button use to access photos and videos of the user.Tapping on this button will open the default or customized image picker to pick images.

Properties

The properties of the Image Picker button are same as the normal button please refer it for detail description. Below only HB Custom Properties are described in detail.

HB Custom Properties

  1. Multiple Image Selection : A boolean value to allow user to select multiple images from the picker.
    • Value - image : If set to YES, custom picker will open up to pick image. If set to NO, the default picker that is available in the device will open up.
  2. Is Image Source Camera : A boolean value to allow user to capture images using default camera picker that is available in the iOS/Android Library.
    • Value - image : If set to YES, camera will open this button tap.
  3. Is Image Source album : A boolean value to allow user to fetch images using default image picker that is available in the iOS/Android Library.
    • Value - image : If set to YES, image library will open this button tap.
  4. Should Capture video : A boolean value to allow user to capture video using default camera picker that is available in the iOS/Android Library.
    • Value - image : If set to YES, camera will open this button tap to capture video.
  5. Is Video Picker : A boolean value to allow user to pick video using default image picker that is available in the iOS/Android Library.
    • Value - bool : If set to YES, camera will open this button tap to fetch video.
  6. Is Audio Picker : A boolean value to allow user to pick audio using default media library that is available in the iOS/Android Library.
    • Value - bool : If set to YES, media picker will open this button tap to fetch audio.
  7. Enable Cropping : A boolean value to allow user to crop image after successfully picking image from camera or image library.
    • Value - bool : If set to YES, media picker will open this button tap to fetch audio.
  8. Audio Recording View Nib Name : An object ID of the recording view for audio .
    • Value : The default value is nil.
  9. ImageQuality : The quality of the that will be received after successfully picking from library.
    • Value : The default value is medium.

Below property are explained in detail in View Control. Please refer Controls - 1 Views Controls document.

  1. Transform Angle

Below property are explained in detail in ImageView Control. Please refer Controls - 1 Views Controls document.

  1. PlaceHolder Image

Below property are explained in detail in Button Control. Please refer Controls - 1 Views Controls document.

  1. Is Toggle Button

Action

As shown in above figure the slider control’s action description is given below.

  1. Click : The action related to this event will be called when user slides tap on the button.
  2. Image Picked : The action related to this event will be called when user successfully selected image or video or audio.

Video Player

A video player manages the playback of a movie from a file or a network stream. Playback occurs in a view owned by the video player and takes place fullscreen. You can incorporate a movie player’s view into a view hierarchy owned by your app.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Width
  4. Object ID
  5. Key name to data
  6. Object Parent ID

Video Source

  • Source type for the video player from where the video will be player .

Value

  • Choose from the following Sources:
  1. Youtube : A youtube link.
  2. Local file : A local file in the resources of the app.
  3. Web URL : A web url that is coming from the web service response.

Custom Border

Below property are explained in detail in View Control. Please refer Controls - 1 Views document.

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

Display/Advanced Text

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced

Local Video

  • Option to select local video .

Value

  • Tapping on will open up the following window.

Drag and drop the video or upload the video in the resources to play in the app using video player.

HB Custom Properties

  1. External Play Button Enable : A boolean value to allow user to customize the play button that will be displayed on video player.
    • Value - image : If set to YES, button will be displayed on video player.
  2. External Play Button Image : An image to be displayed in the button in the middle of the video player.
    • Value - image : Choose the image from the resources to display image in the button. Tapping on will open up the resource manager.
  3. Should Play video in MPMoviePlayer : A boolean value to allow user to play video in MPMoviPlayer (customized frame).
    • Value - image : If set to YES, video player can be played in MPMovieplayer.

Action

As shown in above figure the video player control’s action description is given below.

Load

The action related to this event will be called when video player will be loaded in the screen.

Rate View

A rate view is basically used to provide user to rate any article or video or image or any information. The rate view consists of buttons whose state change from selected to unselected or unselected to selected. As per the state the buttons change the image.

Properties

Object

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Xpos
  2. Ypos
  3. Width
  4. Object ID
  5. Key name to data
  6. Object Parent ID
  1. Initial Rating Value : Set the default value of the rate view.
    • Value - int : The default value is 3.

Display/Advanced Text

  1. Selected Image : The image to be displayed in the selected state of the rating view.
    • Value - Image : Choose the image from the resources to display image in the in selected state of the star. Tapping on will open up the resource manager.
  2. UnSelected Image : The image to be displayed in the unselected state of the rating view.
    • Value - Image : Choose the image from the resources to display image in the in unselected state of the star. Tapping on will open up the resource manager.

Below properties are explained in detail in View Control. Please refer Controls - 1 Views document.

  1. Hide
  2. Advanced

HB Custom Properties

  1. Padding : The minimum space between the two stars or two images.
    • Value - int : The default value is 2 pixel.
  2. Enable Editing : A boolean value to allow user to rate any information.
    • Value - bool : The default value is YES.
  3. Number of Stars : The total number of stars or the total rating out of which user will be giving rating.
    • Value - bool : The default value is 5.0.

Action

As shown in above figure the rating view control’s action description is given below.

Value Changed

The action related to this event will be called when the button’s state in the rating view changes from selected to unselected or vice - versa.