File Gallery Sample App

File Gallery Sample App

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Feb 23, 2018 By: Kony Team
250 0 0 64
This app provides a UI to explore through unstructured content such as images, music, videos and PDF files. It showcases the usage of the latest APIs, widgets and latest enhancement on Visualizer 8.0 such as Collection View, Media API, Image API, Battery API, Action Sheet, Toast, etc. Also, this app comes with an in-built learning module, Knowledge Framework, where one can explore and share behind the scene implementations to get the corresponding layouts and functionalities in the app.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features:

  • Usage of latest APIs and Widgets:
    • Collection View Widget
    • Image API
    • Media API
    • Actionsheet API
    • Battery API
    • Toast 
    • Navigation Bar
  • Knowledge Framework
    • Present as a floating button in each screen
    • On click, explains the "Behind the Scene" implementations for the features on screen
    • Contains brief intro, code snippets and documentation links for each topic
    • Provides sharing option for the code snippets present against each topic

Prerequisites:

  • Kony Visualizer V8.1

This app lets you explore through unstructured content such as images, music and PDF files. It showcases the usage of the latest APIs, widgets and the latest enhancement on Visualizer 8.0 such as Collection View, Media API, Image API, Battery API, Action Sheet, Toast, etc. The app comes with an inbuilt learning module, Knowledge Framework, where one can see the behind the scene implementation to get the appropriate layouts in the app. You can also explore behind the scene implementations and share the used code snippets using email.

File Gallery App Functionality

This section explains the functionality of the File Gallery app. The front end of the app can be divided into three parts:

  • File Gallery View
  • Hamburger Menu
  • Knowledge Framework

 

File Gallery View

The file gallery view is present on the landing screen and comprises of a collection view on the main canvas of the app. The collection view in the main canvas contains a few file types for which individual detail screens are available. The file types present in the home screen are Image (use of Image API), Audio (Use of Media API), and PDF (use of online PDF Reader marketplace component). On tap of each of the elements in the grid, the corresponding detail screen is loaded.

gallery_home.PNGgallery_badges.PNG

gallery_music.PNGgallery_pdf.PNG

Note:

The application does not browse the files on a device. This view showcases the files we have bundled with the application (the limited number of files). A developer can present the files in the device using the layout.

Hamburger Menu

The Hamburger Menu of the app is accessible from the landing page by tapping the menu icon from the top left corner of the screen.

The menu displays the sub menus with the links to Kony Base Camp and Kony Documentation web pages.

The menu also has a Share icon at the bottom left corner. Tapping the Share sub menu opens the mail composer with preset text in the subject and body of the email. This email displays the links to Kony Visualizer Mobile App and the File File Gallery App.

Another option Indexed Mode redirects to the list of APIs and widgets used in the app. The list is displayed in the indexed manner. A tap on each of those items takes you to the detailed view of the corresponding item that contains the What and How for that particular item.

The Indexed Mode is specific to the app.

gallery_hamburger.png

Knowledge Framework

The Knowledge Framework screen of the app is accessible from every page by tapping the blue floating button at the bottom right corner of the screen.

On tap of the Knowledge Framework button, the app presents a layover screen with a list of the key features covered in the particular screen. For example, the Knowledge Framework for landing screen contains topics such as Collection View, Navigation Bar, and Toast.

Upon selecting an item from the list presented, you are navigated to a detailed page containing the What and How of the corresponding key feature along with the appropriate links to the documentation and tutorials.

The What’s it? section provides an overview of the feature whereas the How to use? section contains usage information of the feature. The latter may include blogs, video tutorials or code fragments as applicable. This app carries all the code fragments used to render the UI or functionalities in the app.

gallery_bts.pnggallery_batteryWhat.png

gallery_batteryHow.pnggallery_batteryDoc.png

The following sections help you use the File Gallery app.

Prerequisites

Before you start using the File Gallery App, ensure you have the following:

  1. A Kony Account
  2. Kony Visualizer 8.0

Importing the File Gallery App to Visualizer

There are two ways of doing it:

  1. From Visualizer Marketplace
  • Open Kony Visualizer
  • Click New Project and enter the project name.
  • Select the Project Type and click Create.
  • Click Marketplace menu list and click Browse.
  • If you have not logged in to Visualizer, you are prompted to login with your Kony credentials and subsequently opens the Marketplace browser inside Visualizer.
  • Search for File Gallery and click the corresponding thumbnail.
  • Once the File Gallery detail page opens within the browser, click Import to Workspace.
From Marketplace Web
  • Open a web browser and enter https://community.kony.com/marketplace in the address field. The MarketPlace page displays with the list of components.
  • Search for File Gallery and click the corresponding thumbnail. The File Gallery detail page appears,
  • Click Login to Download (in case you are not logged in already) else click Download. The app (zip) file is downloaded to your local system.
  • Open Kony Visualizer.
  • Starter:
  1. On the Project menu, point to Import, and click Local Project. The Import Kony Project dialog appears.
  2. Browse and select the downloaded zip file.
  3. Click Open.
Enterprise
  1. On the File menu, point to Import, and click Local Project. The Import Kony Project dialog appears.
  2. Click Select archive file and click Browse.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. The File Gallery app opens in Visualizer.

 

Configuring the UI of the File Gallery App

Collection View

A Collection View consists of multiple items, and each item can have multiple child widgets. The Collection View widget is similar to the SegmentedUI widget, and shares many of the widgets properties and methods. The items that fill the Collection View widget are based on templates. Widgets are normally added to your Kony application using Kony Visualizer, but can also be added from code. In the current scenario, we are adding using code. The code for the same can be found in frmLandingPageController.

addCollectionViewToForm: function() 
{ var bsp = basicConfig(); var lsp = layoutConfig(); var psp = platformConfig(); bsp.onItemSelect = this.setSelectionCallback; bsp.data = this.collectionViewData; bsp.layout = kony.collectionview.LAYOUT_HORIZONTAL; bsp.contentSize = null; psp.bounces = false; var collectionView = new kony.ui.CollectionView(bsp, lsp, psp); this.view.flxMainLanding.add(collectionView); }

The top three lines of the above code fragment make use of the three methods to create layout specific details for the collection view. The definition of those methods can be found in Config.js":

/*
@Function basicConfig()
@Description This function will return the basic configuration
required for collection view 
*/
function basicConfig()
{
return
{
	"autogrowMode": kony.flex.AUTOGROW_NONE,
	"data": null,
	"left": "5%",
	"top": "0dp",
	"width": "90%",
	"height": "100%",
	"id": "myCollectionView",  
	"isVisible": true,
	"minLineSpace": 0,
	"minItemSpace": 0,
	"retainSelection": true,
	"skin": "sknFullFlex",
	"itemTemplate": "flxCollection",
	"scrollingEvents": {},
	"sectionHeaderTemplate": "flxHeader",
	"sectionFooterTemplate": null,
	"selectionBehavior": kony.collectionview.SINGLE_SELECT,
	"showScrollbars": false,
	"layout": kony.collectionview.LAYOUT_HORIZONTAL,
	"contentSize": [1000, 1000],
	"widgetDataMap":
	{
		"lblHeader":"lblHeader",
		"lblAPIname": "lblAPIname",
		"imgArrow": "imgArrow",
		"imgMain" : "imgMain",
		"FileImage" : "FileImage",
		"thumbnail" : "thumbnail",
		"flxCollection" : "flxCollection"
	},
	"zIndex": 1,
};
}

/*
@Function layoutConfig()
@Description This function will return the layout configuration
required for collection view 
*/
function layoutConfig(){
return
{
	"padding": [0, 0, 0, 0],
	"paddingInPixel": false
};
}

/*
@Function platformConfig()
@Description This function will return the platform configuration
required for collection view 
*/
function platformConfig()
{
return
{
	"bounces": true,
	"enableDictionary": false,
};
}

 

Image API

The Image API gives your app image processing tools. The Image API consists of the functions and constants in both the kony.image and the kony.filter namespaces. In addition, it makes use of the Image object and the Filter object. With the Image API, you can create JavaScript Image objects, scale them, compress them, apply filters to them, and so forth. Your app can use Image objects on Image widgets and button widgets. The present app does not showcase the mentioned capabilities. Currently, it has embedded the code fragments for the above operations in the Knowledge Framework for the particular page. The code for the same can be found in frmImageDetailsController.

setImageUsingImageAPI: function(imageName) 
{ this.view.headerTitleLabel.text = imageName; var filter = kony.filter.createFilter(); var img = kony.image.createImage(imageName); var filterData; filterData= { "filterName": kony.filter.BOX_BLUR, "inputImage": img, "inputRadius": 1 }; filter.applyFilter(filterData); var imageObj = filter.getOutputImage(); this.view.imageFile.rawBytes = imageObj.getImageAsRawBytes(); }

 

Media API

The Media API enables your app to play and record audio files. It provides the provisions to play, pause, stop, seek, and set callbacks on the media file that are playing. The code fragment for the same can be found at frmAudioDetailsController.

playAudio: function() 
{ if (flag === true) setAudio(this, this.file); else startAudio(); }

The method definitions for setAudio and startAudio are found in Modules.js.

var mediaObj = null;

function setAudio(self,filename)
{
	audioPageContext = self;
	var destFilePath;
	if(kony.os.deviceInfo().name === "iPhone")
		destFilePath = kony.io.FileSystem.getDataDirectoryPath() 
+"/"+ filename; else if(kony.os.deviceInfo().name === "android") destFilePath = kony.io.FileSystem.getDataDirectoryPath() + filename; kony.io.FileSystem.copyBundledRawFileTo(filename, destFilePath); var file = new kony.io.File(destFilePath); mediaObj = kony.media.createFromFile(file); mediaObj.setCallbacks({ onProgressCallBack: OnMediaProgress, onMediaCompleted: onMediaComplete }); kony.timer.schedule("KonyFacilityTimer", startAudio, 1,false); } function startAudio() { mediaObj.play(1); }

You can also use the additional methods to stop, pause or seek media (Click seek button and slide progress bar)

/*
@function pauseAudio
@description This API will pause the audio
*/
function pauseAudio() { mediaObj.pause(); }

/* @function stopAudio @description This API will stop the audio */ function stopAudio() { flag = true; mediaObj.stop(); }

/*
@function OnMediaProgress
@description This API will change the layout based on the progress of the media file
*/
function OnMediaProgress(position) { audioPageContext.view.sliderAudio.selectedValue = Number(position); audioPageContext.view.forceLayout(); }

/*
@function onSlide
@description This API will seek audio at the position where the user leaves the slider
*/
function onSlide(endPos) { mediaObj.seek(Number(endPos)); }

/* @function seekForward @description This API will seek audio forwards */ function seekForward(currentPos) { var requiredPos = currentPos + 3; if(requiredPos >= mediaObj.duration) requiredPos = mediaObj.duration; mediaObj.seek(Number(requiredPos)); }

/* @function seekBackward @description This API will seek audio backwards */ function seekBackward(currentPos) { var requiredPos = currentPos - 3; if(requiredPos <= 0) requiredPos = 0; mediaObj.seek(Number(requiredPos)); }

 

Battery API

The Battery API enables your app to check the battery level and state on the user's device. To check the battery's current level, your app calls the kony.os.getBatteryLevel function. To check the charging, discharging, and so forth, invoke the kony.os.getBatteryState function. Calling the kony.os.registerBatteryService function registers a callback function that is automatically invoked every time the battery's level or state changes. The behavior of the Battery API is dependent on the underlying hardware platform.

For example, if you register a callback function with kony.os.registerBatteryService so that your app can be apprised of changes to the battery's current charge level. The behavior of the callback depends on the kind of device handled by the user. If it is an iOS device, the callback function is invoked once per minute. If it is an Android or Windows device, the callback function is invoked whenever the percentage of the battery charged changes.

function batteryLevel()
{
	kony.os.getBatteryLevel();
}

function batteryState()
{
	kony.os.getBatteryState();
}

 

Toast

The Toast API enables your app to display small feedback messages to the user. These messages include warnings or success messages that appear for a short time along the bottom of the user's screen. Users cannot interact with the feedback messages and they fade away automatically after a short period of time. As the users cannot interact with toasts, they are non-blocking form of communication. i.e. When the toast is displayed, the user can continue to interact with the app in other ways.

Your app creates a toast by calling the kony.ui.Toast function, as shown in the code snippet below.

toast = new kony.ui.Toast({“text”:”This is the toast’s text”, “duration”:constants.SHORT});
toast.show()

In the example above, the call to the kony.ui.Toast function creates a Toast object that displays the string This is the toast's text. for a short period of time. The exact duration of the toast is dependent on the underlying platform. The example then displays the toast by calling the Toast object's show method.

The Kony implementation of toasts enables you to use templates to customize the appearance of toasts. To set a template on a toast, assign a flex container widget to the Toast object's template property. Your app can use any of the following widgets as a template.

  • Label Widget
  • Link Widget
  • RichText Widget
  • Button Widget
  • Image Widget

If your app does not supply a template for a toast, the toast creates it and displays with the default text style.

 

Action Sheet

In iOS apps, Action Sheets implement pop-up menus that enable users to select actions. They can also be used for notification dialog boxes or alert boxes.

To implement an Action Sheet, your app must create an Action Sheet object by calling the kony.ui.ActionSheet function. To add selectable items to the Action Sheet, your app creates ActionItem objects by invoking the kony.ui.ActionItem function. Each ActionItem object has a callback function that is automatically invoked whenever the user taps the Action Sheet choice represented by the Action Item. The callback function processes the user's inputs as needed.

var actionItem2 = new kony.ui.ActionItem(
{
	"title":"Cancel", 
	"style":constants.ACTION_ITEM_STYLE_DEFAULT, 
	"action":function(){}
}	
);

var   actionItem1 = new kony.ui.ActionItem(
{
	"title":"Play", 
	"style":constants.ACTION_ITEM_STYLE_DEFAULT, 
	"action":function(){  mediaObj.play(1);}
}	
);

var actionSheetObject = new kony.ui.ActionSheet(
{
	"title":"Alert", 
	"message":"Battery level below 30%. Do you still want to play?", 
	"showCompletionCallback": function(){}
}
);

actionSheetObject.addAction(actionItem1);
actionSheetObject.addAction(actionItem2);
actionSheetObject.show();

 

Navigation Bar

An iOS Navigation bar appears at the top of an app screen, below the status bar, and enables navigation through a series of hierarchical app screens. When a new screen is displayed, a back button, often labeled with the title of the previous screen, appears on the left side of the bar.

/*******************************************
Create Bar Button Items
*******************************************/
item0 = new kony.ui.BarButtonItem(
{
	type: constants.BAR_BUTTON_TITLE,
	style: constants.BAR_ITEM_STYLE_PLAIN,
	enabled: false,
	action: null,
	metaData:
	{
	title: "Home"
	}	
}
);

item1 = new kony.ui.BarButtonItem(
{
	type: constants.BAR_BUTTON_SYSTEM_ITEM,
	style: constants.BAR_ITEM_STYLE_PLAIN,
	enabled: true,
	action: onClick,
	metaData:
	{
	systemItem: constants.SYSTEM_ITEM_REPLY
	}		
}
);

item2 = new kony.ui.BarButtonItem(
{
	type: constants.BAR_BUTTON_IMAGE,
	style: constants.BAR_ITEM_STYLE_PLAIN,
	enabled: true,
	action: null,
	metaData:
	{
	image: "pinb.png"
	}
}
);


/*******************************************
To Set Buttons in Navigation Bar
*******************************************/
/*
@function setBarButtonItems
@description This API will assign BarButtonItems to Naivgation Bar
*/
function setBarButtonItems()
{
	var btns = [item0,item1];
	var btns1 = [item2];
	newAttributes.leftBarButtonItems = btns;
	newAttributes.rightBarButtonItems = btns1;
}


/*******************************************
To Change Navigation Bar Attributes
*******************************************/
/*
@function changeTitleBarAttributes
@description This API will change TitleBar Attributes
*/
function changeTitleBarAttributes()
{
	newAttributes = 
	{
	"prompt": "",
	"tintColor": "FFFFFF00",
	"navigationBarHidden": false,
	"barStyle": constants.BAR_STYLE_DEAFULT,
	"translucent": false,
	"leftBarButtonItems": [],
	"rightBarButtonItems" : [],
	"backIndicatorImage": "back_btn.png",
	"backIndicatorTransitionMaskImage": "back_btn.png",
	"hidesBackButton" : false,
	"titleView" : null,
	"leftItemsSupplementBackButton" : true
	};
	frmLandingPage.titleBarAttributes = newAttributes;
}