HorizontalImageStrip Widget

HorizontalImageStrip also called as Hz Image Strip displays a list of images which are aligned side-by-side in the horizontal direction. You can scroll through the Hz Image Strip to view the next or previous set of images.

This section provides the following documentation on this Widget.

Overviews

Events

Methods

Properties

The HorizontalImageStrip widget capabilities can be broadly categorized into the following:

• Layout
• Animations
• Data Management
• User Input Handling
• 3D Touch
• State Configurations
• UI Appearance
• Miscellaneous
• Configurations Common To All Widgets

Layout

Animations

Data Management

3D Touch

Gestures

UI Appearance

State Configurations

Miscellaneous

Configurations Common To All Widgets

Overviews

Creating an HorzontalImgStrip using a constructor: voltmx.ui.HorzontalImageStrip2

var HorizontalImgStrip = new voltmx.ui.HorizontalImageStrip2 (basicConf, layoutConf, pspConf)

• basicConf is an object with basic properties.
• layoutConf is an object with layout properties.
• pspConf is an object with platform specific properties.

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.

Example

function onSelectionCallBack(hIS)
{
	//Write your logic here.
}

//Defining the properties for Image strip with onSelection:onSelectionCalBck
var hISBasic=
    {
      id:"hIS",
      skin:"hISkn",
      focusSkin:"hISknFocus",
      isVisible:true,
      selectedIndex:1,
      imageWhileDownloading:"img.png",
      imageWhenFailed:"img3.png",
      spaceBetweenImages:20,
      data:
      [
        [
          {"imagekey":"image1.png"},
          {"imagekey":"image2.png"},
          "imagekey"
        ]
      ], 
      viewType:constants.HORIZONTAL_IMAGESTRIP_VIEW_TYPE_COVERFLOW,
      showArrows:true,
      showScrollbars:true,
      onSelection:onSelectionCallBack
    };

var hISLayout=
    {
      padding:[5,5,5,5],
      margin:[5,5,5,5],
      paddingInPixel:true,
      marginInPixel:true,
      referenceWidth:100, 
      referenceHeight:100, 
      imageScaleMode:constants.IMAGE_SCALE_MODE_FIT_TO_DIMENSIONS, 
      containerWeight:100
    };

var hISPSP={};

//Creating the Horizontal Image strip.
var hIS=new voltmx.ui.HorizontalImageStrip2(hISBasic, hISLayout, hISPSP);

//Reading onSelection of Horizontal Image strip.
alert("Horizontal Image strip onSelection::"+hIS.onSelection);

For backward compatibility with support for all deprecated properties and behaviors, use the constructor voltmx.ui.HorzontalImageStrip .

var HorizontalImg1 = new voltmx.ui.HorizontalImageStrip (basicConf, layoutConf, pspConf)

Customizing Appearance

You can customize the appearance of the Hz Image Strip using the following properties:

• widgetAlignment: Specifies the alignment of the widget.
• margin: Defines the space around a widget.
• padding: Defines the space between the content of the widget and the widget boundaries.
• skin: Specify the skin to be applied to the images in the Hz Image Strip.
• focusSkin: Specify the skin to be applied to the individual image in the Hz Image Strip when in focus.

Important Considerations:

The following are the important considerations of an Hz Image Strip:

• For a good user experience, you must add images of the same width and height.

• You can scroll through one or more images at a time (platform dependent).

• If you reach the end of an image strip and if there are additional images, a network call is placed to get the additional images.
• In Android platform, images are displayed from the middle of the widget.
• For Symbian, HzImageStrip always uses an image size of 64x64 pixels.
• The Hz Image Strip occupies 100% of the screen width.
• Ensure that the image name does not exceed 12 characters (including the extension). If the image name exceeds 12 characters, the IDE does not allow you to select the image.