You are here: Creating an Image Using a Constructor: voltmx.ui.Image2

Image Widget

Image widget is used to display a graphic image such as a company logo, photo, or illustration, in PNG, JPEG,WebP or GIF format, in an application.

Following are the key concepts in Image widget:

• Image as widget skin: Image widget can be used to display an image as a background skin for a widget. For instance, a back button in a form can have an image depicting the back arrow as its skin.

• Image when failed and Image while downloading: An image is displayed on a screen when the remote source is not available, or when the remote source is being downloaded.

• Company logo: Image widget is used to display the company logo in a form.

• Profile picture: Image widget is used to set the profile picture of a user in an application. The shape of an image can also be changed using the clipView property. For instance, consider the following screen that displays the profile picture of an employee in a circular view.

• Base 64: When you get base 64 strings from the backend, the image widget is used to display it as an image in an application. For example, in the following employee list screen, the employee images are displayed using the base 64 strings from the backend.

Widgets are normally added to your application using Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Iris User Guide.

For general information on the Image2 widget see the Image2 topic in the Volt MX Iris User Guide.

This widget supports drag and drop of images for iOS 11 on iPad.

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

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

Layout

Animations

Data Management

3D Touch

User Input Handling

UI Appearance

Enabling RTL

Miscellaneous

Configurations Common To All Widgets

Image Widget Basics

Creating an Image Using a Constructor: voltmx.ui.Image2

var myimage = new voltmx.ui.Image2 (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

//Creating the Image with isVisible:true.
var basicConfImage = {
    id: "imageIdTest",
    isVisible: true,
    src: "http://www.fordesigner.com/imguploads/Image/cjbc/zcool/png20080525/1211728825.png",
    imageWhenFailed: "rn_icon1.png",
    imageWhileDownloading: "new.png"
};

var layoutConfImage = {
    containerWeight: 100
};

var PSPConfImage = {
    glossyEffect: constants.MAGE_GLOSSY_EFFECT_RADIAL
};

var imageIdTest = new voltmx.ui.Image2(basicConfImage, layoutConfImage, PSPConfImage);

//Reading the visibility of the Image
alert("Image visibility is ::" + imageIdTest.isVisible);

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

var Image1 = new voltmx.ui.Image(basicConf, layoutConf, pspConf)

Customizing Appearance

You can customize the appearance of the Image widget 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.

Naming Conventions

To specify a local image, you must add the image file to the resources folder of the Application.

Note: For more information on how to add these files, see the Working with Resources section of the VoltMX Iris User Guide.

The image can be either a bitmap or a vector graphics file.

Image files can be of GIF, animated GIF, JPG, PNG, or WebP formats.

Vector graphics are also supported for the following formats on the following platforms:

• Android supports .xml files
• iOS supports .pdf files
• SPA supports .svg files
• Windows (Creators Edition) supports .svg files.

The files that you add must follow a particular naming convention. The following is the naming convention that you must follow:

• The file name must contain only lowercase characters.
• The file name must start only with an alphabet.
• The file name can contain numbers.

• Do not use any reserved words or keywords ( of JavaScript) as the file names for the images.

• Numerical characters.

The following table shows a few examples of valid and invalid file names for the images:

Note: Volt MX Iris does not recognize images that have invalid file names.

Image Caching

Image caching is a feature in Volt MX Iris V8 that ensures that the Image Widget can use URLs as a source for an image. This feature is designed to use the same URL multiple times in an application to load the image as fast as possible with minimal server sync delay.

To configure Image Caching, do the following:

1. On your machine where Volt MX Iris is installed, navigate to Volt MX Iris project folder: _\\\\resources\\common_.
2. Open the infoplist_configuration.json file.
3. Towards the end of the file, add the following content:

{
    “imageWidgetURLCache”:
    	{
    	“cacheSize”:10,
    		// Value should greater than equal to 0
    		// 0 for max memory 
    	“skipServerValidation”:YES
    		//YES for once cached no need to sync with server again to check the updated resource
    	//NO for Sync with the server to check for the updated resource.
    	}  
    }
    
    

1. Save and close the file.
   Image caching is enabled in the Volt MX cache mechanism.