Interstitial Screen (Animated Squares)

Interstitial Screen (Animated Squares)

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jul 3, 2017 By: Kony Team
44 0 0 7
The Interstitial screen can be used to fill natural transition points in the flow of an app. E.g. when new content is being loaded or whenever a major change in state occurs that a clean break is required. It is primarily a loading screen. Whenever a delay is encountered, you can use this screen to keep the user engaged. For instance, use it to tell the user that his/her request has been received and the app is working on it.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features

  • Ready-to-use Visualizer component
  • Keep user engaged while content is being loaded- use the Interstitial screen to tell the user what is being loaded and how brief the delay will be
  • Easy to customize

Prerequisites

  • Kony Visualizer Enterprise

The Interstitial screen is displayed at natural transition points in the flow of an application, such as between activities or while navigating to other forms. You can use the Interstitial Screen to notify the user that the form is in the process of loading.

Here is a use case that describes the use of the Interstitial Screen component.

Use Case

Considering a case that you want to develop an app. In this app, if a form takes more time to load, you can add the Interstitial Screen component to notify the user that the form is in the process of loading. The Interstitial Screen disappears when the form loads.

The Interstitial Screen component is a ready-to-use component. You can import the Interstitial Screen component into your app (created in Kony Visualizer), and achieve the Interstitial Screen feature without developing it from scratch. The Interstitial Screen component also facilitates a set of properties, events, and APIs that helps you customize the UI elements and the functionality.

The following sections help you use the Interstitial Screen component in your app:

Prerequisites

Before you start using the Interstitial Screen component, ensure you have the following:

  1. Kony account
  2. Kony Visualizer Enterprise 7.3

Importing the Interstitial Screen Component

Before you start importing the component to Kony Visualizer, you must download the component from the Kony Marketplace website.

To import the Interstitial Screen component, do the following:

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. The Open dialog appears.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. The Import Marketplace Item dialog appears.
    interstitialsq_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name.
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.animatedSquare name is displayed by default. If you want, you can rename it.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Thus, after you import a component, you must add the component to your app.

Adding a Interstitial Screen Component to your App

To add a Interstitial Screen component, do the following:

  1. Open your app, and then open the form to which you want to add the component.
  2. Open the library to which you imported the component. To open the library:
    • Click the context arrow of KonyLibrary, point to Open, and select the library in which the component exists.
      library.png
  3. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component is added to the form. You can also see a new element, com.konymp.animatedSquare, in the Components section on the Templates tab.
Note:

Ensure that the component is set to occupy 100 percent width of the device. You can achieve this by setting the width of the parent widget to 100 percent.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer Button Widget.

You can also see that a new tab, Component, is added on the Properties pane. The Component tab contains assorted properties relevant to the component that allow you to customize the component as required. The properties on the Component tab are categorized as Pass Through and Custom properties. The Pass Through properties are the default properties of individual widgets in the component. The Custom Properties are user-defined properties based on the use case of the component.

Note:

Changes made to the Custom properties are reflected only during run time, but not during design time (Visualizer Canvas).

The component can be used only in the Portrait mode.

You can also add a Interstitial Screen component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click the context menu arrow of Modules, and then click New JS module. A new JavaScript file opens in the Code Editor.
  2. Copy and paste the following code snippet in the JavaScript file:
    /* creating a component's Object */
    var animatedSquare = new com.konymp.animatedSquare({
                    "clipBounds": true,
                    "height": "100%",
                    "id": "animatedSquare",
                    "isVisible": true,
                    "layoutType": kony.flex.FREE_FORM,
                    "left": "0dp",
                    "masterType": constants.MASTER_TYPE_USERWIDGET,
                    "skin": "konympSknFlxBgBlue",
                    "top": "0dp",
                    "width": "100%"
                }, {}, {});
    
    /* Setting component's pass-through and custom properties */
                animatedSquare.bgColor = "4785F4";
                animatedSquare.animateElementColor = "FFFFFF";
                animatedSquare.description = "Subtitle short description";
                animatedSquare.title = "INTERSTITIAL SCREEN TITLE";
                this.view.add(animatedSquare);
    

    In the code snippet, you can edit the properties of the component as you require. For more information, see Setting Properties.

  3. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the Interstitial Screen component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information on how to set properties by writing a JavaScript.

Title
Category: Pass Through
Description: Specifies the title to be displayed on the Interstitial Screen.
Syntax: title
Type: String
Read/Write: Read + Write
Remarks: If you do not provide any text, the component will display the default text. If you do not want to display the title, provide the text value as a space character.
Example: this.view.componentID.title = " ";
Example:
this.view.componentID.title = "INTERSTITIAL SCREEN TITLE";
Description
Category: Pass Through
Description: Specifies the description to be displayed on the interstitial screen.
Syntax: description
Type: String
Read/Write: Read + Write
Remarks: If you do not provide any text, the component will display the default text. If you do not want to display the description, provide the text value as a space character.
Example: this.view.componentID.description = " ";
Example:
this.view.componentID.description= "Subtitle short description";
Background Color
Category: Custom
Description: Specifies the background color of the interstitial screen.
Syntax: bgColor
Type: String (Hex Color code)
Read/Write: Read + Write
Remarks:

The default value of the property is "4785F4"

Example:
this.view.componentID.bgColor="4785F4";
Animated Element Color
Category: Custom
Description: Specifies the color code of the animated element.
Syntax: animateElementColor
Type: String (Hex Color code)
Read/Write: Read + Write
Remarks:

The default value of the property is "FFFFFF"

Example:
this.view.componentID.animateElementColor= "FFFFFF";

APIs

The following API pertains to the Interstitial Screen component:

show

The API displays the Interstitial Screen.

Syntax
show()
Parameters

None

Return Value

None

Example
this.view.componentID.show();
hide

The API hides the Interstitial Screen.

Syntax
hide()
Parameters

None

Return Value

None

Example
this.view.componentID.hide();