Refresh Animation(Shopping Cart)

Refresh Animation(Shopping Cart)

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Jul 6, 2017 By: Kony Team
189 0 0 38
The refresh animation component can be used as a pull-to-refresh (or swipe-to-refresh) pattern that shows up when a user pulls down on a list of data using touch, in order to retrieve more data. Swipe to refresh works good for lists, grid lists, and card collections that are sorted by recent content (a collection is strictly sorted by descending date).

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features

  • Easy to achieve the refresh animation without developing it from scratch.
  • Facility to customize the UI as you require

Prerequisites

  • Kony Visualizer v8

Refresh Animation - Cart component is an animated UI that provides re-usable template to be used as a refresh animation screen. It is used by the app user to fill the space when widget is pulled down to refresh the contents in the form .The user can modify the properties to achieve the look and feel that is compliant with his/ her needs.

Here is a use case that describes the use of the Refresh Animation (Shopping Cart) component.

Use Case

Considering a case that you want to develop an e-commerce app. In this app, you can add the Refresh Animation (Shopping Cart) component to fill the available space when a list (or page) is pulled down to refresh the product list. You can hide the Refresh Animation component when the list refresh is complete.

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

The following sections help you use the Refresh Animation (Shopping Cart) component in your app:

Prerequisites

Before you start using the Refresh Animation (Shopping Cart) component, ensure you have the following:

  1. Kony account
  2. Kony Visualizer V8.

Importing the Refresh Animation (Shopping Cart) Component

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

To import the refreshcart 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.
    refreshcart_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.refreshcart 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 Refresh Animation (Shopping Cart) Component to your App

To add a refreshcart component, do the following:

  1. Open your app, and then open the form to which you want to add the component.
  2. On the My Libraries tab, select the defined Marketplace library from the drop-down list in which the component exists.
    library.png
  3. From the Collections sub-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.refreshcart in the Components section on the Templates tab.
Note:

The width of the component is fixed (100%).
The height of the component cannot be changed.

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 Component tab , 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 General, Image Source, Skin section properties. The General properties are the default properties of individual widgets in the component.

You can also add a Refresh Animation (Shopping Cart) component dynamically. To do so,

  1. In the Project Explorer, on the Projects tab, click the context menu arrow of Controllers under the respective channel, and then click FormController. The FormController 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 refreshcart = new com.konymp.refreshcart({
    		"autogrowMode": kony.flex.AUTOGROW_NONE,
    		"clipBounds": true,
    		"height": "19.19%",
    		"id": "refreshcart",
    		"isVisible": true,
    		"layoutType": kony.flex.FREE_FORM,
    		"left": "0dp",
    		"masterType": constants.MASTER_TYPE_USERWIDGET,
    		"skin": "konymprcsknflxBackground20223c",
    		"top": "0dp",
    		"width": "100%"
                   "zIndex": 1
                }, {}, {});
    		refreshcart.largeLinesSource = "kony_mp_rc_dashlong.png";
    		refreshcart.mediumLinesSource = "kony_mp_rc_dashmid.png";
    		refreshcart.smallLinesSource = "kony_mp_rc_dashsmall.png";
    		refreshcart.cartSource = "kony_mp_rc_shape.png";
    		refreshcart.wheelSource = "kony_mp_rc_path.png";
    		refreshcart.backgroundSkin = "konymprcsknflxBackground20223c";
    		refreshcart.durationOfAnimation = "1";	
    
    /*Adding the refreshcart Component to the form*/
     		this.view.add(componentInstance);     
    

    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 Refresh Animation (Shopping Cart) 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.

General

Animation speed
Description: Specifies the duration of the animation.
The duration value is specified in seconds.
Syntax: durationOfAnimation
Type: String
Read/Write: Read + Write
Remarks: The property throws an exception if you provide an invalid value or a non-string value. User needs to handle this exception.
Example:
this.view.refreshcart.durationOfAnimation = "1";

Image Source

Large Lines Source
Description: Specifies the file name of the image to be displayed as large lines during the refresh animation.
Syntax: largeLinesSource
Type: String
Read/Write: Read + Write
Remarks: Changes made to the property are reflected only during run time, but not during the design time (Visualizer Canvas).
Before setting the property:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.refreshcart.largeLinesSource= "kony_mp_rc_dashlong.png";
Medium Lines Source
Description: Specifies the file name of the image to be displayed as medium lines during the refresh animation.
Syntax: mediumLinesSource
Type: String
Read/Write: Read + Write
Remarks: Changes made to the property are reflected only during run time, but not during the design time (Visualizer Canvas).
Before setting the property:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.refreshcart.mediumLinesSource= "kony_mp_rc_dashmid.png";
Small Lines Source
Description: Specifies the file name of the image to be displayed as small lines during the refresh animation.
Syntax: smallLinesSource
Type: String
Read/Write: Read + Write
Remarks: Changes made to the property are reflected only during run time, but not during the design time (Visualizer Canvas).
Before setting the property:
  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.refreshcart.smallLinesSource= "kony_mp_rc_dashsmall.png";
Cart Source
Description: Specifies the file name of the image to be displayed as the cart during the refresh animation.
Syntax: cartSource
Type: String
Read/Write: Read + Write
Remarks:

Before setting the property:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.refreshcart.cartSource= "kony_mp_rc_shape.png";
Wheel Source
Description: Specifies the file name of the image to be displayed as the wheel during the refresh animation.
Syntax: wheelSource
Type: String
Read/Write: Read + Write
Remarks:

Before setting the property:

  • Ensure that the image file exists in the workspace\resources\common directory.
  • Do not add any uppercase characters in the file name of the image.
  • Ensure that the image is in PNG format.
  • Specify the file name of the image along with the extension.
Example:
this.view.refreshcart.wheelSource= "kony_mp_rc_path.png";

Skin

You can select skins from the Exposed Skins drop-down list on the Skin tab. This section provides information on how to set Skin by writing a JavaScript.

Background Skin
Description: Specifies the skin to be set as the background of the component.
Syntax: backgroundSkin
Type: String
Read/Write: Read + Write
Remarks:

Before you set the property, ensure that the skin ID that you specify already exists in your app project.

Example:
this.view.refreshcart.backgroundSkin = "skinname";

APIs

The following API pertains to the Refresh Animation (Shopping Cart) component:

Show

The API displays the refresh animation.

Syntax
show()
Parameters

None

Return Value

None

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

The API hides the refresh animation.

Syntax
hide()
Parameters

None

Return Value

None

Example
this.view.refreshcart.hide();
isShown

The API notifies whether the refresh animation is displayed or not.

Syntax
isShown()
Parameters

None

Return Value

Boolean

Example
var returnValue = this.view.refreshcart.isShown();

Sample Usage of the Component

Component with the Segment Widget

Consider a use case where user pulls down a list to update the list data. You can use the Refresh Animation component to fill the space when the list (segment widget) is pulled down to refresh the data. You can achieve the use case by following the below procedure.

To use the component in the Segment Widget, do the following:

  1. Import the Refresh Animation (Shopping Cart) component.
  2. Add a FlexContainer Widget to the form.
  3. Set the Layout Type of the FlexContainer Widget to Flow Vertical.
  4. Drag the Refresh Animation (Shopping Cart) component and the Segment Widget onto the FlexContainer Widget.
  5. Set the left and top margin values of the Refresh Animation (Shopping Cart) component to Zero percent.
  6. Set the left and top margin values of the Segment Widget to Zero percent.
  7. Define the onPull event of the Segment Widget as shown in the following code snippet:
    /* Call onPullCallback on the onPull of the Segment Widget */
    	this.onPullCallback(segmentWidget,scrollDirection);
  8. In the Project Explorer, on the Projects tab, click the context menu arrow of Controllers under the respective channel, and then click FormController. The FormController JavaScript file opens in the Code Editor.
  9. Copy and paste the following code snippet in the FormController JavaScript file:
    /*Define onPullCallback in the formController */
    onPullCallback: function(segmentWidget,scrollDirection){
    	       this.view.componentInstance.show();
    }

    The above code displays the Refresh animation component on triggering the onPull event of the Segment Widget.

  10. Save the file.

  

Component with the FlexContainer Widget

To use the component in the FlexContainer Widget, do the following:

  1. Import the Refresh Animation (Shopping Cart) component.
  2. Drag the Refresh Animation (Shopping Cart) component and the FlexContainer Widget onto the Form.
  3. Set the left and top margin values of the Refresh Animation (Shopping Cart) component to Zero percent.
  4. Set the left and top margin values of the FlexContainer Widget to Zero percent.
  5. Define the onTouchStart, onTouchMove, and onTouchEnd events of the Form as shown in following code snippet:
    /*Call the methods in the form’s Action editor*/
    
    /*onTouchStart of the Form */ this.onStart(y);
    /*onTouchMove of the Form */ this.onMove(y);
    /*onTouchEnd of the Form */ this.onEnd();
  6. In the Project Explorer, on the Projects tab, click the context menu arrow of Controllers under the respective channel, and then click FormController. The FormController JavaScript file opens in the Code Editor.
  7. Copy and paste the following code snippet in the FormController JavaScript file:
    /* Define methods in the Form Controller */
    	define({
    	yCoordinates: "0",
    	_top: "0",
    	_started: 0,
    	onStart: function (yy) {
    		this.yCoordinates = yy;
    		if (this._started === 0) {
    			this.view.componentInstance.show();
    			this._started = 1;
    		}
    	},
    	onMove: function (y) {
    		this._top = y - this.yCoordinates;
    		if (this._top > 0) {
    			this.view.flexContainer.top = this._top;
    		} else {
    			this.view.flexContainer.top = 
    parseInt(this.view. componentInstance.height) + this._top + "dp"; } }, onEnd: function () { if (this._top >= 0) { this.view.flexContainer.top = this.view. componentInstance.height; } else { this.view.flexContainer.top = "0dp"; this.view.componentInstance.hide(); this._started = 0; } } });

    The above code displays the Refresh animation component on triggering the Form events.

  8. Save the file.

 

Limitations

Landscape mode is not supported in this version.

Known Issues

Changes in images of long, mid, and small dash will not reflect on the Canvas.