Kony 2.0 Visualizer User Guide
जाहिरात
जाहिरात
Kony Visualizer
User Guide
Release 2.0
Document Relevance and Accuracy
This document is considered relevant to the Release stated on this title page and the document version stated on the Revision History page.
Remember to always view and download the latest document version relevant to the software release you are using.
© 2014 by Kony, Inc. All rights reserved 1 of 621
Kony Visualizer User Guide
Version 2.2
Copyright © 2014 Kony, Inc.
All rights reserved.
March, 2015
This document contains information proprietary to Kony, Inc., is bound by the Kony license agreements and may not be used except in the context of understanding the use and methods of Kony
Inc, software without prior, express, written permission. Kony, Empowering Everywhere, Kony
MobileFabric, Kony Modeler, and Kony Visualizer are trademarks of Kony, Inc. Microsoft, the
Microsoft logo, Internet Explorer, Windows, and Windows Vista are registered trademarks of
Microsoft Corporation. Apple, the Apple logo, iTunes, iPhone, iPad, OS X, Objective-C, Safari, and
Xcode are registered trademarks of Apple, Inc. Google, the Google logo, Android, and the Android logo are registered trademarks of Google, Inc. Chrome is a trademark of Google, Inc. BlackBerry,
PlayBook, Research in Motion, and RIM are registered trademarks of BlackBerry. All other terms, trademarks, or service marks mentioned in this document have been capitalized and are to be considered the property of their respective owners.
© 2014 by Kony, Inc. All rights reserved 2 of 621
Kony Visualizer User Guide
Version 2.2
Revision History
Date
01/05/2014
05/05/2014
08/19/2014
12/15/2014
02/23/2015
03/30/2015
Document
Version
1.0
1.1
1.2
2.0
2.1
2.2
Description of Modifications/Release
Kony Visualizer User Guide
Properties renamed, images refreshed, added section:
Importing and Exporting a project, and added iOS 7 specific properties.
Added the following sections: Importing Photoshop Styles,
Upgrading Kony Visualizer, and Visualizer Admin Console.
Updated various widget PSP.
Added the following sections: Actions, Internationalizing
(i18n) Application Content, Windows PSP, and Modules.
Updated the document for Visualizer 2.0.2 release with the following features:
, added new PSP for widgets,
,
.
Updated the document for Visualizer 2.0.3 release with the following features:
,
, and
.
© 2014 by Kony, Inc. All rights reserved 3 of 621
Table of Contents
© 2014 by Kony, Inc. All rights reserved
Kony Visualizer User Guide
Version 2.2
4 of 621
© 2014 by Kony, Inc. All rights reserved
Kony Visualizer User Guide
Version 2.2
5 of 621
© 2014 by Kony, Inc. All rights reserved
Kony Visualizer User Guide
Version 2.2
6 of 621
6.4 Platform Specific properties
© 2014 by Kony, Inc. All rights reserved
Kony Visualizer User Guide
Version 2.2
7 of 621
7.3 Platform Specific Properties
9.4 Platform Specific properties
© 2014 by Kony, Inc. All rights reserved
Kony Visualizer User Guide
Version 2.2
8 of 621
Kony Visualizer User Guide
Version 2.2
11.3 Adding and configuring an action
12. Importing Photoshop Styles
12.2 Importing Photoshop Styles into Visualizer
© 2014 by Kony, Inc. All rights reserved
9 of 621
Kony Visualizer User Guide
Version 2.2
15. Importing and Exporting a Project
15.1 Exporting a Project to Kony Studio
15.2 Importing a Project from Kony Studio
16.1 Upgrading from Visualizer 2.0.1 or earlier versions 600
17. Internationalizing (i18n) Application Content 602
17.1 Configuring i18n Locales and Adding Keys
17.2 Assigning an i18n key to a widget
18.1 Accessing Visualization Services
© 2014 by Kony, Inc. All rights reserved 10 of 621
Kony Visualizer User Guide
Version 2.2
19. Support for Legacy Widgets and Old Projects
19.1 How Visualizer supports legacy widgets
19.2 How a project created in earlier versions of Visualizer is upgraded 617
© 2014 by Kony, Inc. All rights reserved 11 of 621
1. Preface
Kony Visualizer User Guide
Version 2.2
1. Preface
Kony Visualizer enables you to create highly interactive designs for mobile and tablet devices.
Visualizer comes with numerous built-in designing elements, using which you can create your application designs quickly. These designs can be customized for a device and its operating system.
This WYSIWYG tool provides an instant preview of your design, thereby, helping you make necessary changes to the design quickly.
Without writing even a single line of code, you can manipulate a widget's look and feel, change its skin, provide a platform specific property, or assign an action.
Your team can reuse the user-defined designing elements and skins by importing and exporting them.
And not only the designing elements and skins, but a complete project can be shared easily. You can upload the project directly to your cloud account and allow your team to download the project. This helps in saving a lot of effort in designing duplicates, and in maintaining consistent look and feel across the projects.
One of the unique features of Kony Visualizer is its ability to provide a functional preview of your design. Similar to how an end-user would view the User Interface (UI) of an application, you can generate a functional preview that allows you to view application UI and run any action events attached.
Seamless integration with Kony Studio allows exporting (or importing) designs effortlessly.
The product is available on both the Windows and Macintosh platforms. You can easily build your design on one platform, and preview or modify the same design on the other platform.
1.1 Purpose
The document helps you familiarize with the Kony Visualizer, and provide procedural information to perform various tasks required to build your application prototype.
The scope of the document is limited to explaining the process involved between creating a design and exporting the design to Kony Studio.
© 2014 by Kony, Inc. All rights reserved 12 of 621
1. Preface
Kony Visualizer User Guide
Version 2.2
1.2 Intended Audience
This document is written for web and application designers who use Kony Visualizer to design and wireframe mobile and tablet application.
1.3 Formatting Conventions
The following are the formatting conventions used throughout the document:
Conventions
Monospace
Italic
Bold
Explanation n
User input text, system prompts and responses n
File Path n
Commands n
Program Code n
File Names n
Emphasis n
Names of Books and Documents n
New Terminology n
Windows n
Menus n
Buttons n
Icons n
Fields n
Tabs n
Folders
© 2014 by Kony, Inc. All rights reserved 13 of 621
1. Preface
Kony Visualizer User Guide
Version 2.2
Conventions
Note
Important
Explanation
Active link to a URL.
Provides helpful hints or additional information.
Highlights actions or information that might cause problems to systems or data.
1.4 Contact Us
We welcome your feedback on our documentation. Write to us at [email protected]
.For technical questions, suggestions, comments, or to report problems on Kony's product line, contact [email protected]
.
© 2014 by Kony, Inc. All rights reserved 14 of 621
2. Introduction
Kony Visualizer User Guide
Version 2.2
2. Introduction
Kony Visualizer workspace is a logical grouping of various elements and tasks that enable you to create your designs quickly.
In the workspace, you begin wire framing a design by adding a form from the Project tab. On this form, you add the required widgets by dragging a widget from the Library Explorer and dropping the widget on a form. You change the look and feel of a widget from the widget's Properties tab. The central pane of the workspace is called App Canvas, and this is where you see your application being designed.
After you complete designing a project, you can allow your team to view the application using Kony
Functional Preview. Similar to how a user will view an application in real-time, using Kony Functional
Preview, your team can view the application, perform actions associated with a form, pop-up, or widget such as navigate from one form to another, animate a widget, and modify a widget's skin.
© 2014 by Kony, Inc. All rights reserved 15 of 621
2. Introduction
Kony Visualizer User Guide
Version 2.2
The workspace consists of four major areas and include:
1.
: You configure project settings, create projects, and add forms for mobile and tablet devices, view the widgets used in a project, edit widgets skins, create templates, and view the assets available for a project.
2.
: It consists of Kony built-in widgets and skins. You can also view the userdefined libraries with collections and themes.
© 2014 by Kony, Inc. All rights reserved 16 of 621
2. Introduction
Kony Visualizer User Guide
Version 2.2
3.
: It is the central panel of this WYSIWYG environment. Here, you can view the design being created and make the necessary modifications.
4. Properties: Widget properties are displayed in the right-hand side panel of Kony Visualizer workspace. From here, you can: l
Manipulate widget look and feel.
l
Change, modify, and edit a widget skin.
l
Provide platform specific properties.
l
Apply action events.
© 2014 by Kony, Inc. All rights reserved 17 of 621
3. Project Explorer
Kony Visualizer User Guide
Version 2.2
3. Project Explorer
Project Explorer is located in the top-left panel of Kony Visualizer workspace.
Project Explorer consists of the following sections:
1.
: The name of the project appears. You can rename a project by clicking the project name > Rename option.
2.
Project tab : Allows you to configure project settings, create, and view forms and pop-ups of the
mobile and tablet devices.
3.
: Allows you to view the skins being used in the design, edit an existing skin, create new skins, and store the skins as themes.
© 2014 by Kony, Inc. All rights reserved 18 of 621
3. Project Explorer
Kony Visualizer User Guide
Version 2.2
4.
Templates tab : Allows you to create templates for a Form (header and footer), Segments,
Maps, and Calendar.
5.
Assets tab : Allows you to view the images and fonts that are available for a project.
6.
: Allows you to search for the elements within Project, Skins, Templates, or Assets tab.
7.
: Allows you to filter for the elements within Project, Skins, Templates, or Assets tab.
3.1 Project Name
You project name should follow the below guidelines: l
It should not contain more than 13 characters.
l
Only alphanumeric characters are allowed.
l
Project name should not start with a number.
l
Reserved words should not be used as project names.
The following table shows a few examples of valid and invalid project names:
Valid Project
Name
FirstProject myProject bankproject
Invalid Project
Name
1stProject my Project continue
Remarks
Project name should not start with a number.
Spaces (and other special characters) are not allowed.
The Project name is a Java keyword.
After Installing Visualizer, when you launch it for the first time, you are required to either create a project or import an existing project. Until then, the remaining workspace is disabled. You can:
© 2014 by Kony, Inc. All rights reserved 19 of 621
3. Project Explorer
Kony Visualizer User Guide
Version 2.2
1. Create a project by clicking Project > New Project.
2. Import an existing project from your desktop by clicking Project > Import Project.
3. Import an existing project from your cloud account by clicking Project > Import Cloud Studio
Project.
© 2014 by Kony, Inc. All rights reserved 20 of 621
Kony Visualizer User Guide
Version 2.2
3.2 Project Context Menu
From the project context menu, you can rename the project.
Rename: Allows you to rename the project. When you click Rename, the project name changes to an inline editable text field.
© 2014 by Kony, Inc. All rights reserved 21 of 621
Kony Visualizer User Guide
Version 2.2
3.3 Project Tab
The major sections of the Project tab are: l
Project Settings : Provide global settings for your project.
l
Forms : It is a visual area (basic application screen) that holds other widgets on it.
l
invoked when an action is triggered inside a form.
l
: This tab displays a list of events that you can reuse across the project.
3.3.1 Project Settings
You can provide platform specific settings as well as common settings that are applicable across the platforms.
You can modify the following project settings: l
l
l
l
l
3.3.1.1 Application
The following are the list of settings available across the platforms:
© 2014 by Kony, Inc. All rights reserved 22 of 621
Kony Visualizer User Guide
Version 2.2
1. ID: Name of the project.
2. Version: Current version of the project.
3. Company Name: Specify your company name.
4. Application Logo: You provide a logo for the application by clicking the ellipsis button (...) located next to the Application Logo box, and then selecting an image from the list of images or typing the URL of an image.
Note:
Before using an image in a project, navigate to following location:
<konyworkspace>/<Name of your project>/resources and copy the image in the respective subfolder. For example, if you want an image to be available across all the channels, copy the image in the subfolder common. Alternatively, if you wanted an image to be available
© 2014 by Kony, Inc. All rights reserved 23 of 621
Kony Visualizer User Guide
Version 2.2
only for a specific platform, for example, mobile channel >native platform, copy the image to mobile/native subfolder. After copying the image, ensure you click the refresh button from the Project Explorer > Assets tab (in Kony Visualizer) to bind the newly added image to the project.
Note: The above identification elements are required when submitting an application to
Android or Google store.
5. Enable Accessibility: Allows access to your application to all the people, regardless of disability or impairment. For more information, see
Accessibility (508 Compliance) .
6. Enable i18N: Enables you to display an application in multiple languages. For more information, see
Internationalizing (i18n) Application Content
.
7. Map Widget: The map widget key needs to be generated based on a domain name. The key generated for a single domain is used for all sub-domains, URLs on hosts in those domains, and all ports on those hosts. You can provide the following type of Map keys: a. Static Map Widget Key: This key is applicable for Android, iOS and SPA. For generating a specific map API key and use it in the properties, see https://developers.google.com/maps .
b. Android Map Widget Key: You need the Google Maps API key for Android to enable
Maps in the applications you develop for Android platform. Maps API keys are linked to specific certificate/package pairs, rather than to users or applications. You only need one key for each certificate, no matter how many users you have for an application.
Applications that use the same certificate can use the same API key. For generating maps API key for Android, you need to provide the fingerprint of the signed certificate. For more information about signing Android applications, see http://developer.android.com/guide/developing/eclipse-adt.html
and https://developers.google.com/maps/documentation/android/start?hl=en
© 2014 by Kony, Inc. All rights reserved 24 of 621
Kony Visualizer User Guide
Version 2.2
c. Bing Map Widget Key: To generate a Bing Map Key for Windows platform, refer http://msdn.microsoft.com/en-us/library/ff428642.aspx
.
3.3.1.2 Kony Server Details
You can provide a server name or an IP address of a machine containing project specific services such as validating user credentials and interacting with the database.
When a Kony Studio project is imported, the server details are automatically updated in Kony
Visualizer. These details are useful while performing functional preview of the project (using option
Run > Run-IDE), where the project needs to interact with the server to run the required services.
Note: You can also type a server name or an IP address manually. This option is useful when the primary sever (whose details were automatically updated in Kony Visualizer when Kony Studio project is imported) is unavailable, and you wanted to provide the details of a backup server.
3.3.1.3 iOS
The following are the list of settings available for iOS platform:
© 2014 by Kony, Inc. All rights reserved 25 of 621
Kony Visualizer User Guide
Version 2.2
l iOS Build Settings o
Bundle Identifier: Specifies a unique name that identifies the application bundle. This is usually in three parts and follows the convention of com.kony.<appname>.
o
Bundle Version: Specifies the version number of your project.
o
Glossy Effect Key: Specifies Glossy effect key.
l iPad Settings o
Application Launch Mode: Specifies the default mode of launching the application on an iPad.
o
Supported Orientations: Specifies the supported orientations for the iPad. Both orientation modes are selected by default.
3.3.1.4 Android
The following are the list of settings available for Android platform.
© 2014 by Kony, Inc. All rights reserved 26 of 621
Kony Visualizer User Guide
Version 2.2
l
Android Build Settings o
Support for Margin in Pixels: Provides you with an option to choose whether the Support for the Margin in Pixels should be allowed.
3.3.1.5 SPA
The following are the list of settings available for SPA platform.
© 2014 by Kony, Inc. All rights reserved 27 of 621
Kony Visualizer User Guide
Version 2.2
l iPhone shortcut icon: Specifies the project icon that appears on an iPhone.
l
Browser Bar Title: Specifies the project title that appears on browser bar.
l
Android Tablet Base Font Size: Specifies the project base font size that appears on an Android tablet.
l iPad Base Font Size: Specifies the project base font size that appears on an iPad.
l
WinPhone Base Font Size: Specifies the project base font size that appears on a Windows phone.
l
SPA Windows Tablet Base Font Size: Specifies the project base font size that appears on a
Windows tablet.
© 2014 by Kony, Inc. All rights reserved 28 of 621
Kony Visualizer User Guide
Version 2.2
3.3.2 Forms
Form is the starting point for any application. A form is the top most container. A form can contain any number of widgets but cannot contain another form.
Adding a Form for a Mobile
1. From the Project tab of Project Explorer, expand Mobile folder. Right-click Form > New Form.
Select either VBox Form or Flex Form. This result in creating a new form with a default name assigned to it.
2. You may choose to rename the form by clicking the down-arrow next to the form and then clicking Rename. The name of the form is in edit mode allowing you to rename the form.
3. To make a form as a startup form (that is, the first form to appear after the application is loaded), click the down-arrow next the form, and then click Mark as Startup.
Note: To add a Form for Tablet devices, follow similar steps as stated above.
3.3.2.1 Form Context Menu
Form context menu allows you to perform various actions such as: l
Open: Allows you to open and display a form's design on the App Canvas pane.
l
Rename: Allows you to rename a form.
l
Duplicate: Allows you to duplicate a form. Duplicating a form creates an exact copy of the form under the same channel.
l
Copy: Allows you to copy a form.
l
Paste: Allows you to paste a copied form. This option is activated only when you have copied a form. You can paste a form across the channels. That is, you can copy a form designed for mobile channel and paste it on the tablet channel.
l
Delete: Allows you to delete the form. Before deleting, system displays a warning message.
© 2014 by Kony, Inc. All rights reserved 29 of 621
Kony Visualizer User Guide
Version 2.2
l
Fork: Forks a form. For information, see
l
Mark as StartUp: Allows you to identify a form as the first form to appear after an application is loaded. By default, the first form you add to a new project is marked as StartUp form.
Note: When a startup form is deleted, ensure that you choose another form as a startup form. Else, you may encounter errors while previewing or building a project.
For details on Form properties, refer
section.
© 2014 by Kony, Inc. All rights reserved 30 of 621
Kony Visualizer User Guide
Version 2.2
3.3.3 Popups
A pop-up window usually appears in the center of the screen and on the top of a form from which you have invoked the pop-up window. It does not span the entire screen width. Pop-ups allow you to partition UI design into smaller parts.
Following are the steps for adding a pop-up for a mobile applications:
1. From the Project tab of Project Explorer, expand Mobile folder. Rest the pointer on Popups to display a down-arrow. Click this down-arrow and then click New Popup. This result in creating a pop-up window with a default name assigned to it.
2. You may rename a pop-up window by clicking the down-arrow next to the pop-up, and then clicking Rename. The name of the pop-up is in edit mode, allowing you to type a new name.
Note: To add a pop-up window for tablet applications, follow similar steps as stated above.
© 2014 by Kony, Inc. All rights reserved 31 of 621
Kony Visualizer User Guide
Version 2.2
3.3.4 Actions
Actions tab contain a list of actions created for the mobile and tablet devices. These actions can be reused across the project but within the same channel. For example, an action created under Mobile tab can only be used for mobile channel elements. The following are the ways to create an action: l
Creating an actions from the Action tab .
l
Creating an action from the Action tab of a Widget (or Pop-up or form) .
l
3.3.4.1 Important Considerations l
You cannot delete an action.
l
For an event, you can assign only one action. If you attempt to assign multiple actions, the last action assigned is executed during functional preview.
3.3.4.2 Creating an actions from the Action tab
To create an action from the Action tab, follow these steps:
© 2014 by Kony, Inc. All rights reserved 32 of 621
Kony Visualizer User Guide
Version 2.2
1. Expand the Action tab from the Projects tab.
2. Select a channel (Mobile or Tablet.)
3. Right-click the channel, and then click New Action.
4. Add the required action by referring to the following section:
Adding and configuring an action .
3.3.4.3 Creating an action from the Action tab of a Widget (or Pop-up or form)
To create an action from the Action tab, follow these steps:
© 2014 by Kony, Inc. All rights reserved 33 of 621
1. Select a widget (or a form or pop-up) from the Project tab,
Kony Visualizer User Guide
Version 2.2
2. Click the Action tab from the properties tab.
3. Select an event. The Action Editor dialog appears.
4. Add the required action by referring to the following section:
Adding and configuring an action .
3.3.4.4 Assigning an Action
To assign an action, follow these steps:
© 2014 by Kony, Inc. All rights reserved 34 of 621
Kony Visualizer User Guide
Version 2.2
1. Select a widget from project tab or App Canvas.
2. Right-click an action from the Action tab > Mobile (or Tablet.)
3. Click Assign Action.
4. Select an event
The action is assigned to an event. You can confirm if an action is assigned to an event by viewing the
Properties > Action tab of a widget.
© 2014 by Kony, Inc. All rights reserved 35 of 621
When an action is assigned to an event, braces appear next to the event.
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 36 of 621
Kony Visualizer User Guide
Version 2.2
3.4 Skins Tab
A widget skin defines the look and feel of the widget when it is rendered on the form in an application.
You can specify different skins for different widgets, or different skins for different platforms. The Kony
Visualizer allows you to create skins and specify skins for widgets while setting the properties.
Some of the features of Project Explorer > Skins are: l
Creating new themes l
Duplicating themes l
Creating new skins l
Assigning new skins l
Editing skins l
Forking Skins l
Duplicating Skins l
Adding skins to themes
Theme
Theme holds the skins that are created
3.4.1 Default Theme
The skins that are available in the Default Theme are provided by Kony Visualizer.
At the time of creating a project, Default Theme contains empty widget folders. As you start adding widgets to your design, the respective skins for the widgets are added automatically.
© 2014 by Kony, Inc. All rights reserved 37 of 621
Kony Visualizer User Guide
Version 2.2
For example, the above design contains a Form, a Button, and an HBox. Only the skins for these elements are available in their respective folders. The remaining widget folders remain empty.
The Default Theme and the default skins cannot be modified, deleted, or renamed. Attempt to modify a default skin results in creating a new skin. These new skins can be used within the same project. If you require these skins for other projects, save them in a user-defined theme, and then export them.
3.4.2 Create a New Theme
For storing default as well as modified skins you create a new theme.
© 2014 by Kony, Inc. All rights reserved 38 of 621
Kony Visualizer User Guide
Version 2.2
From the Skin tab of the Project Explorer, click the Default Theme list and then click Create New
Theme. A new theme with a default name is created.
All the skins (default and customized) that are used in the project until the time of creating this new theme are added automatically to the newly created theme.
3.4.3 Rename a Theme
You can rename a theme by clicking the Theme drop-down under Skins tab and then click Rename.
From the Rename Theme dialog box type a new name for the Theme.
3.4.4 Duplicate Current Theme
You can duplicate an existing theme, by selecting the theme from the list below the Skins tab and then clicking Duplicate Current Theme from the same list.
3.4.5 Delete Current Theme
To delete an existing theme, select a theme from the list below the Skins tab and then select Delete
Current Theme from the same list.
3.4.6 Skin Context Menu
To access the skin context menu list, right-click on any of the skins, items include: l
Assign To: Allows you to assign a skin to a widget state such as Normal or Focus.
l
Edit: Opens the skin in edit mode and allows you to modify its properties.
l
Copy: Copies the skins.
l
Paste: Pastes a skin into the selected theme. This option is available only when a skin is copied.
l
Duplicate: Duplicates a skin.
l
Rename: Rename a skin.
© 2014 by Kony, Inc. All rights reserved 39 of 621
Kony Visualizer User Guide
Version 2.2
l
Delete: Deletes a skin.
Note: When a skin is deleted, widgets attached to the deleted skin will revert to default skins.
l
Fork: Forks the skin for mobile, tablet and SPA platforms.
l
Add to Theme: Adds the skin to an existing library theme.
© 2014 by Kony, Inc. All rights reserved 40 of 621
Kony Visualizer User Guide
Version 2.2
3.5 Templates Tab
Templates provide an easy way to display the same information across the forms, segments, and maps.
The following templates are available for mobile and tablet devices, and desktop:
1.
2.
3.
The following templates are available for mobile and tablet devices:
1.
2.
3.5.1 Headers
Header is a section of the form that is docked at the top of the form, and can be reused across the forms.
To create a header template for a mobile applications, follow these steps:
1. Click the Templates tab from the Project Explorer.
2. Expand Mobile and rest the pointer on the Headers to display a down-arrow. Click this downarrow, and then click New Template. Rename the template, if required.
3. Drag and drop an HBox, a ScrollBox, or a FlexContainer onto a template.
© 2014 by Kony, Inc. All rights reserved 41 of 621
Kony Visualizer User Guide
Version 2.2
Note: You cannot place widgets directly on a template. You need to first add a container widget and then place other widgets inside this container widget. Use either an HBox or a
ScrollBox container widget to create a template for a VBox Form. Use FlexContainer container to create a template for a Flex Form.
4. Drag and drop the required widgets onto the HBox or ScrollBox. Set the properties of these widgets and save the header.
3.5.2 Footers
Footer is a section of the form that is docked at the bottom of the form and can be reused across the forms.
To create a footer template for mobile applications, follow these steps:
1. Click the Templates tab from the Project Explorer.
2. Expand Mobile and rest the pointer on the Footers to display a down-arrow. Click this downarrow and then click New Template. Rename the template, if required.
3. Drag and drop an HBox or a ScrollBox onto the template.
Note: You cannot place widgets directly on a template. You need to first add a container widget and then place other widgets inside this container widget. Use either an HBox or a
ScrollBox container widget to create a template for a VBox Form. Use FlexContainer container to create a template for a Flex Form.
4. Drag and drop the required widgets onto the HBox or ScrollBox. Set the properties of these widgets and save the footer.
3.5.3 Inserting Header and Footer to a Form
After creating header and footer templates, you need to insert them in a form, so that they are visible.
To insert a header and a footer, follow these steps:
© 2014 by Kony, Inc. All rights reserved 42 of 621
Kony Visualizer User Guide
Version 2.2
1. From the Project tab of Project Explorer, expand either Mobile or Tablet (depending on whether you have created the header and footer for a mobile or a tablet device).
2. Expand Forms and click the form to which you want to insert the header and footer.
3. From the form properties, click Form2 tab.
4. For inserting header, a. Click the Edit button against the headers field to open the Headers dialog box.
b. From the available list, choose a header and then click OK.
5. For inserting footer, a. Click the Edit button against the footers field to open the Footers dialog box.
b. From the available list, choose a footer and then click OK.
3.5.4 Segments
Segment template enables you to define a template for section headers and rows of the segment. This is primarily useful for achieving common look and feel of section headers along with few widgets added as part of section header of a segment.
To create a segment template for mobile, follow these steps:
1. Click the Templates tab from the Project Explorer.
2. Expand Mobile and rest the pointer on the Segments to display a down-arrow. Click this downarrow and then click New Template. Rename the template, if required.
3. Drag and drop an HBox onto a template.
Note: You cannot place widgets directly on a template. You need to first add an HBox widget, and then place other widgets inside this HBox widget.
© 2014 by Kony, Inc. All rights reserved 43 of 621
Kony Visualizer User Guide
Version 2.2
4. Drag and drop the required widgets onto the HBox or ScrollBox. Set the properties of these widgets and save the Segment template.
3.5.5 Inserting a Segment Template to a Segment Widget
To insert a Segment template to a Segment widget, follow these steps:
1. From the Project tab of Project Explorer, expand either Mobile or Tablet (depending on whether you have created the segment template for a mobile or tablet device).
2. Expand Forms and navigate to the form containing a segment widget.
3. Expand this form, and click the segment widget.
4. From the Segment properties, click Segment tab.
5. The segment templates are available under General > Row Template and Section Header
Template list. You may choose to use the template as either Row Template or Section Header
Template for the Segment widget.
3.5.6 Maps
Map Templates are used to set a template for a map callout.
To create a map template for mobile or tablet applications, follow these steps:
1. Click the Templates tab from the Project Explorer.
2. Expand Mobile or Tablet (depending on which devices you want to create a map template) and rest the pointer on the Maps to display a down-arrow. Click this down-arrow and then click New
Template. Rename the template, if required.
3. Drag and drop an HBox onto a template.
© 2014 by Kony, Inc. All rights reserved 44 of 621
Kony Visualizer User Guide
Version 2.2
Note: You cannot place widgets directly on a template. You need to initially add an HBox widget, and then place other widgets inside this HBox widget.
4. Drag and drop the required widgets onto the HBox or ScrollBox. Set the properties of these widgets and save the Map template.
3.5.7 Inserting a Map Template to a Map Widget
To insert a Map template to a Map widget, follow these steps:
1. From the Project tab of Project Explorer, expand either Mobile or Tablet (depending on whether you have created the map template for a mobile or tablet device).
2. Expand Forms and navigate to the form that contains a map widget, and to which you want to add the map template.
3. Expand this form and click the map widget.
4. From the Map properties, click Map tab.
5. Click Edit button against Callout Template field. This results in opening calloutTemplate dialog box.
6. From the available list, choose a map and click OK.
3.5.8 Gridcalendars
Gridcalendar template enables you to define a template for Calendar Day cell. Only one template can be used for each Calendar. The Gridcalendar templates are used: l to define a Calendar Day cell with custom look and feel.
l to achieve the behavior of having widgets such as an Image and a label for a Calendar Day cell.
l to perform an action on the event of an onClick of a Calendar Day cell.
To create a Gridcalendar template for mobile or tablet applications, follow these steps:
© 2014 by Kony, Inc. All rights reserved 45 of 621
Kony Visualizer User Guide
Version 2.2
1. Click the Templates tab from the Project Explorer.
2. Expand Mobile or Tablet (depending on which devices you want to create a Gridcalendar template) and rest the pointer on the Gridcalendar to display a down-arrow. Click this downarrow, and then click New Template. Rename the template, if required.
3. Drag and drop an HBox onto a template.
Note: You cannot place widgets directly on a template. You need to first add an HBox widget, and then place other widgets inside this HBox widget.
4. Drag and drop the required widgets onto the HBox or ScrollBox. Set the properties of these widgets and save the Map template.
© 2014 by Kony, Inc. All rights reserved 46 of 621
Kony Visualizer User Guide
Version 2.2
3.6 Assets Tab
Assets are a repository of Images and Fonts that are copied into a project. Click the Assets tab from the Project Explorer to view a list of Images and Fonts.
3.6.1 Images
Before you can use an image in a project, you need to copy the image to an appropriate project subfolder.
For example, if you wanted an image to be used only for a tablet device and in native mode, you need to copy this image to the following folder:
<Konyworkspace>/<project>/resources/tablet/native
.
Following are the subfolders under which you can store the images:
1. Common: The images stored here are available across all the channels (mobile and tablet applications) and modes (native and web).
2. Mobile: Images stored here are available for all Mobile devices.
a. Common: The images stored here are available for native and web applications.
b. Native: The images stored here are available only for building native applications.
c. Web: The images stored here are available only for web applications.
3. Tablet: Images stored here are available for all tablet devices.
a. Common: The images stored here are available for native and web applications.
b. Native: The images stored here are available only for building native applications.
c. Web: The images stored here are available only for web applications.
© 2014 by Kony, Inc. All rights reserved 47 of 621
Kony Visualizer User Guide
Version 2.2
Note: Click refresh ( ) to ensure that new images and fonts copied to the project folder are loaded.
3.6.2 Retina Display on iPhone iPhone 4.0 has a high resolution screen (960x640) with a density of 326 ppi. When the screen density is more than 300 ppi, images, videos, text, and other objects appear very smooth with high clarity on the screen. This high resolution screen enables a very clear view of all the objects on the screen, which is similar to high quality printed output. Apple has named this technology Retina Display.
All the iPhone applications are developed for 320x480 resolution. The images used in the application are automatically scaled up to suit the high resolution screen. When the images are scaled up for a high resolution screen, the clarity of images is distorted. The Retina Display feature ensures excellent image clarity by preventing automatic scaling.
To support images within an application for Retina Display, follow these steps:
1. Create an image twice the pixel size of the original image. For more information, see the example given below.
2. Suffix the image name with @2x.
For example, if you have a company logo image logo.png, 50X50 pixels, which you want to use for a high resolution screen, create the same image with a 100x100 pixel size and name it [email protected].
Note: Place the images created for the high resolution screen in the Resources folder along with the other images. The application will automatically pick up the high resolution images for devices supporting retina display.
3.6.3 Fonts
Kony Visualizer supports a large number of font families and most of these fonts are available to you by default.
© 2014 by Kony, Inc. All rights reserved 48 of 621
Kony Visualizer User Guide
Version 2.2
Note:
To view the available fonts for a project, from the Properties pane of any widget, click the
Skin tab, and under Fonts, click the Edit button next to the Font Family.
You can import custom fonts into a project by copying the fonts (of type TTF) to an appropriate platform font's subfolder. Ensure that you do not change the name of the custom font while copying the font to a project.
For example, if you wanted a font family to be available only for Android devices, then copy that font family to the following location:
<Konyworkspace>/<project>/resources/fonts/Android
.
You can store the fonts under the following folders:
1. Android: Fonts stored here are available for all Android devices.
2. Android Tablet: Fonts stored here are available for all Android tablet devices.
3. IPad: Fonts stored here are available for all iPad devices.
4. IPhone: Fonts stored here are available for all iPhone devices.
5. SPA Android: Fonts stored here are available for all SPA Android devices.
6. SPA Android Tablet: Fonts stored here are available for all SPA Android Tablet devices.
7. SPA iPad: Fonts stored here are available for all SPA iPad devices.
8. SPA iPhone: Fonts stored here are available for all SPA iPhone devices.
Note: After copying a font family to a project folder, click refresh ( ) in the Assets tab to ensure that the new font family is loaded into the project.
Fonts Limitations
1. Open Type Fonts (OTF) are not supported by Visualizer. You may, however, convert the OTF to True Type Fonts (TTF) and use them in Visualizer.
© 2014 by Kony, Inc. All rights reserved 49 of 621
Kony Visualizer User Guide
Version 2.2
2. Faux font weight (normal and bold) is not supported by iOS. You need to use the original TTF
(such as Helvetica Bold and Helvetica Light) to produce the desired font weight.
3. Strikethrough of fonts is not supported.
4. Functional Preview does not support custom fonts.
3.7 Search
The Search option allows to search for the elements within Project, Skins, or Templates tab.
The following are the searchable elements from each of the tabs: l
From the Projects tab, you can search for forms and pop-ups.
l
From the Skins tab, you can search for default and user-defined skins.
l
From the Templates tab, you can search for Headers, Footers, Segments, Maps, and
Gridcalendars templates.
To initiate search, follow these steps:
1. Click on a tab. For example, Project.
2. Click the search icon.
3. In the Search box, as you type, relevant results are displayed.
4. Click on a search result.
3.8 Filters
Filters allow you to view elements of similar type thereby hiding the remaining elements. For example, when you filter for Headers in the Templates tab, only header templates of the Mobile and the Tablet channels are displayed. You can apply filters for the following tabs:
© 2014 by Kony, Inc. All rights reserved 50 of 621
Kony Visualizer User Guide
Version 2.2
l
l
l
l
3.8.0.1 Project
Project filter allows you to filter for Forms or pop-ups.
To apply the filters, click the Project tab from Project Explorer, and then click the down-arrow next to the Assets tab. You can select one of the following filters: l
Show All: Displays all the project elements.
l
Forms: Displays only Forms.
l
Popups: Displays only Pop-ups.
3.8.0.2 Skins
Skins filter allows you to filter for widget specific skins.
To apply a filter, click the Skins tab from Project Explorer, and then click the down-arrow next to the
Assets tab. Select a widget to filter for its skins. You can select one of the following filters: l
All Skins: Displays all the available skins.
l
Individual Widget Skins: Click any of the individual widgets (such as HBox, Button or Slider) to display the skins of the selected widget.
3.8.0.3 Templates
Template filters allows you to filter for specific type of templates.
To apply a filter, click the Templates tab from Project Explorer, and then click the down-arrow next to the Assets tab. You can select one of the following filters:
© 2014 by Kony, Inc. All rights reserved 51 of 621
Kony Visualizer User Guide
Version 2.2
l
Show All: Displays all the templates.
l
Headers: Displays only Header templates.
l
Footers: Displays only Footer templates.
l
Segments: Displays only Segment templates.
l
Maps: Displays only Map templates.
l
Gridcalendars: Displays all the grid calendar templates that are available for the project.
3.8.0.4 Assets
Assets filter allows you to filter for either the images or fonts that are copied into a project.
To apply a filter, click the Assets tab from Project Explorer and then click the down-arrow next to the
Assets tab. You can apply one of the following filters: l
Show All: Displays all the assets.
l
Images: Displays all the images that are available for the project.
l
Fonts: Displays the fonts that are available for the project.
© 2014 by Kony, Inc. All rights reserved 52 of 621
4. Library Explorer
Kony Visualizer User Guide
Version 2.2
4. Library Explorer
Library Explorer contains repositories of
,
, and
and includes the following: l
Kony Library: Contains predefined set of widgets and skins. You may modify the skins of this library and save them in a user-defined library.
l
User-defined Libraries: These libraries are created by the user and are stored at the Visualizer application level and are available across all projects. (Example: A library created in project X is available for project Y provided these projects are created in the same workspace.) l
Imported Libraries: These libraries are imported into the project from other workspace. Once a library is imported, it is stored at the Visualizer application level and available for all the projects in the same workspace.
© 2014 by Kony, Inc. All rights reserved 53 of 621
Kony Visualizer User Guide
Version 2.2
4.1 Library Menu
Click the down-arrow next to the KonyLibrary in the Library Explorer to open the Library Menu Items.
Following are Library Menu items:
1. KonyLibrary: Opens KonyLibrary. This is the default library and available across all the projects.
Note: You cannot delete, rename, import, or export KonyLibrary.
2. Open: Hover your mouse over this menu item to display the list of available libraries within the same workspace. Click the desired library to open it.
3. New: Opens Create New Library dialog box. Type a unique name to create a new library.
4. Rename: Enables you to type a new name for the library.
5. Delete: Deletes the library.
6. Import Library: Displays Open dialog box. Locate and select the library to be imported.
© 2014 by Kony, Inc. All rights reserved 54 of 621
Kony Visualizer User Guide
Version 2.2
7. Export Library: Displays Save As dialog box. Choose the folder for saving the file. A default file name is assigned to the library. You may rename the library before exporting.
Note: If the project is not saved, system will prompt you to save the project before you can export a library.
© 2014 by Kony, Inc. All rights reserved 55 of 621
Kony Visualizer User Guide
Version 2.2
4.2 Widgets
Widgets are small chunks of code that are re-used without additional compilation. Some widgets support interaction with the user (for example: Button, Label, Checkbox, and so on). Others act as containers that group the widgets added to them (for example: Form, Row, Column, and so on).
The Widgets tab lists all the predefined widgets. These widgets are available across all the projects.
The widgets are grouped together based on their common behavior and characteristics. These widgets are categorized as:
1.
: These widgets hold other widgets within them.
2.
Basic Widgets : These widgets are used to display content on a form and/or ask for user’s input.
3.
: These widgets allow you to perform specialized actions such as displaying rows of data using Segment2 widget, capturing an image using a Camera widget, opening a browser window using a Browser widget, and displaying geographical map using a Map widget.
You can filter for specific type of widgets from the filter list shown below:
© 2014 by Kony, Inc. All rights reserved 56 of 621
Kony Visualizer User Guide
Version 2.2
4.2.1 Containers
These are a set of widgets that hold other widgets within them. The following is a list of Container
Widgets:
Following widgets are classified as Container Widgets: l
l
l
l
© 2014 by Kony, Inc. All rights reserved 57 of 621
Kony Visualizer User Guide
Version 2.2
4.2.2 Basic Widgets
These widgets are components that act independently of the Container Widgets. The following is a list of Basic Widgets: l
l
l
l
l
l
l
l
l
l
l
l
l
l
l
© 2014 by Kony, Inc. All rights reserved 58 of 621
4.2.3 Advanced Widgets
These widgets help build some of the complex actions and include: l
l
l
l
l
l
l
l
l
l
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 59 of 621
Kony Visualizer User Guide
Version 2.2
4.3 Collections
Collection consists of user-defined widget templates.
The listing in the Collections tab is available only for the user-defined collections that are added to a selected library.
Below image illustrates the Collections tab.
4.3.1 Collection
To expand or collapse a collection, click the triangle located at the left the collection.
To delete a collection, hover the mouse pointer over the collection to display a triangle to the right of the collection. Click the triangle, and then click Delete.
4.3.1.1 Widgets Template
Collection saves a single widget or a group of widgets (that is, widget and its child widgets) as a template. You can perform following actions on templates:
© 2014 by Kony, Inc. All rights reserved 60 of 621
Kony Visualizer User Guide
Version 2.2
l
Rename: Click Rename to rename a template, from the template contextual menu.
l
Delete: Click Delete to delete a template, from the template contextual menu.
© 2014 by Kony, Inc. All rights reserved 61 of 621
Kony Visualizer User Guide
Version 2.2
4.4 Library Skins
The Skins tab of the Library Explorer consists of skin themes and can include: l
Predefined skins: By default, these skins are available across all the projects.
l
User-defined skins: These skins are created by the user and can be accessed by all projects that are in the same local drive.
l
Imported Library Skins: When a library is imported into a project all the skins from the imported library will be available for the project. These libraries are saved and are treated as user-defined skins.
When you select KonyLibrary from the Library Explorer, the Skins tab contains a default theme provided by the Kony Visualizer.
When you select a user-defined library from the Library Explorer, the Skins tab contains user-defined themes.
Each theme contains widget folders to hold the skins for that particular widget.
While a user-defined skin can be deleted by right-clicking a skin and then selecting Delete, the default themes (and consequently skins) cannot be deleted.
Similarly, you can rename a user-defined theme or a skin. But you cannot rename the default
KonyLibrary themes or its skins.
To apply a skin from the Skins tab, select a widget from its project (or from App Canvas) and then from the Skins tab of Library Explorer, navigate to the widget folder, right-click the skin and then click
Apply.
Note: You can also apply a skin by clicking a skin in the Library Explorer.
© 2014 by Kony, Inc. All rights reserved 62 of 621
5. Working with Widgets
Kony Visualizer User Guide
Version 2.2
5. Working with Widgets
Widgets are small chunks of code that are re-used without additional compilation. Some widgets support interaction with the user such as: Button, Label, and Text Box. Others act as containers that group the widgets added to them such as FlexContainer, FlexScrollContainer, HBox, VBox,
TabPane, and ScrollBox.
© 2014 by Kony, Inc. All rights reserved 63 of 621
Kony Visualizer User Guide
Version 2.2
5.1 FlexContainer
A FlexContainer widget is used to layout widgets in a user specified orientation. It can contain any number of widgets.
5.1.1 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 64 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a Flex Container widget, refer section:
5.1.1.1 Auto Growth of a FlexContainer
A FlexContainer enables you to dynamically adjust its height based on the height of its child widgets.
When this property is enabled, changes made to the height of the child widgets result in dynamically updating the height of a FlexContainer.
To enable the Flex Container to dynamically adjust its height, select Preferred from the Look tab of
FlexContainer > Height list.
Following are the important considerations for a FlexContainer that is set to grow dynamically:
1. A FlexContainer will not dynamically adjust its height, if its static height can be determined. For example, the height of a FlexContainer is determined if the top and bottom values are provided.
In such situations, Flex Container will not dynamically modify its height.
© 2014 by Kony, Inc. All rights reserved 65 of 621
Kony Visualizer User Guide
Version 2.2
2. Consider a FlexContainer that is set to grow dynamically and has the following child widgets: a
FlexContainer that is set to grow dynamically and a Segment2 widget with the Auto Grow property enabled, the height of the parent FlexContainer is dynamically adjusted after its child widgets heights are adjusted.
Calculating height of Child Widgets
The following table helps determine the height of child widgets:
Center Y
Yes
No
No
No
No
No
No
No
Yes
Yes
Yes
No
Yes
Yes
Yes
Yes
Height
Yes
No
Yes
No
No
Yes
No
Yes
No
No
No
Yes
Yes
Yes
Yes
No
Top
Yes
Bottom
Yes
Yes
No
No
Yes
No
No
Yes
No
Yes
No
Yes
Yes
No
No
Yes
No
No
No
Yes
Yes
Yes
No
Yes
No
No
Yes
No
Yes
No
Yes
Child Height centerY + height/2 + bottom centerY + height/2 + bottom centerY+ height/2 centerY+ height/2
(centerY – top) * 2 + top + bottom
(centerY – top) * 2 + top centerY + bottom + cph/2 centerY + CPH/2 top + height + bottom top + CPH + bottom top + height top + CPH height + bottom cph + bottom height
CPH
© 2014 by Kony, Inc. All rights reserved 66 of 621
Kony Visualizer User Guide
Version 2.2
Note:
Computed Preferred Height (CPH) is determined using the following values:
1. Calculated height for the content driven widget.
2. Default value returned from the config file for the greedy widgets.
3. Calculated height of Auto Grow Segment or FlexContainer.
Limitations:
1. If top or bottom values of child widgets are not provided, then the values are considered as zero while determining the height of a FlexContainer.
2. If the height of a widget changes when the widget's skin state changes (for example, from normal to focus), the height of a FlexContainer will not grow dynamically.
3. If a widget's top value is negative, then the widget will be clipped in case of Free Form and overlapped on the previous widget in Flow Vertical.
4. A FlexContainer will not grow dynamically when placed inside an HBox or a VBox.
Note: You can place a FlexContainer inside an HBox or VBox only while creating a Map or
Gridcalendars template.
5. Suppose a FlexContainer (flexA) contains a FlexContainer (flexB) (which is not set to grow dynamically) whose Clip Bounds are set to false. The children of flexB that are out of the bounds of flexB do not effect on the height of flexA. Only the heights of direct children of flexA will be used to determine the height of flexA.
6. A Segment template created using FlexContainer will dynamically grow only when the
Segment2 view type is Table View.
7. FlexContainer dynamic growth is not supported on a Tab Widget.
8. In Windows Platform, Segment2 Auto Grow property is not supported if the Segment 2 Widget is placed inside FlexContainer.
© 2014 by Kony, Inc. All rights reserved 67 of 621
Kony Visualizer User Guide
Version 2.2
5.1.2 Skin
Skin defines properties such as background color, borders, and shadows for a widget. They also define the widget font (applicable only if the text appears on a widget.)
For a FlexContainer widget, you can apply a skin for the following states:
Skin
Normal
Focus
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
Blocked
UI
Specifies the skin applied to block the interface until the action in progress (for example, a service call) is completed.
Note: Blocked UI is available only for the SPA platforms.
Refer to section
to know more about adding a skin to a widget.
5.1.3 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 68 of 621
Kony Visualizer User Guide
Version 2.2
5.1.3.1 Clip Bounds
Specifies whether to clip the child widgets when they go out of boundaries or not.
5.1.3.2 Layout Type
Specifies if the arrangement of the widgets either in horizontal or vertical direction.
Default: Vertical
Following are the options: l
Free Form: The navigation happens in both directions.
l
Flow Vertical: The navigation happens in vertical direction.
l
Flow Horizontal: The navigation happens in horizontal direction.
5.1.3.3 Snap to Grid
A widget aligns to the nearest intersection of lines in the grid, or other widgets.
l
To allow snapping the widgets to a grid, click On.
l
To disable snapping the widgets to a grid, click Off.
© 2014 by Kony, Inc. All rights reserved 69 of 621
Kony Visualizer User Guide
Version 2.2
5.1.3.4 Snap Grid Size
Specifies the value of the grid size. This option is available only when you enable Snap to Grid property.
5.1.3.5 Default Unit
Specifies the default unit to be used for interpretation of numbers with no qualifiers when passed to layout properties.
Following are the options: l dp: Specifies the values in terms of device independent pixels.
l px: Specifies the values in terms of device hardware pixels.
l
%: Specifies the values in percentage relative to the parent dimensions.
5.1.4 Action
On this tab, you define the events that are executed when an action is run. On a FlexContainer widget, you can run the following actions: l onTouchStart: An event callback is invoked by the platform when the user touches the touch surface. This event is invoked asynchronously.
l onTouchMove: An event callback is invoked by the platform when the touch moves on the touch surface continuously until movement ends. This event is invoked asynchronously. An event callback is invoked by the platform when the touch moves on the touch surface continuously until movement ends. This event is invoked asynchronously.
l onTouchEnd: An event callback is invoked by the platform when the user touch is released from the touch surface. This event is invoked asynchronously.
For more information on using the above action, refer to section
.
© 2014 by Kony, Inc. All rights reserved 70 of 621
Kony Visualizer User Guide
Version 2.2
5.2 FlexScrollContainer
A FlexScrollContainer is a scrollable container which allows you to scroll the content in horizontal or vertical direction on a FlexForm or FlexContainer. It can contain any number of widgets within it.
5.2.1 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 71 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a FlexScrollContainer widget, refer section:
5.2.2 Skin
Skin defines properties such as background color, borders, and shadows for a widget. They also define the widget font (applicable only if the text appears on a widget.)
For a FlexScrollContainer, you can apply a skin for the following states:
Skin
Normal
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
Focus
Blocked
UI
Specifies the skin applied to block the interface until the action in progress (for example, a service call) is completed.
Note: Blocked UI is available only for the SPA platforms.
© 2014 by Kony, Inc. All rights reserved 72 of 621
Kony Visualizer User Guide
Version 2.2
Refer to section
to know more about adding a skin to a widget.
5.2.3 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 73 of 621
Kony Visualizer User Guide
Version 2.2
5.2.3.1 Layout Type
Specifies if the arrangement of the widgets either in horizontal or vertical direction.
Default: Vertical
© 2014 by Kony, Inc. All rights reserved 74 of 621
Kony Visualizer User Guide
Version 2.2
Following are the options: l
Free Form: The navigation happens in both directions.
l
Flow Vertical: The navigation happens in vertical direction.
l
Flow Horizontal: The navigation happens in horizontal direction.
5.2.3.2 Enable Scrolling
Specifies whether the scrolling is enabled on the container or not.
l
To enable scrolling, click On.
l
To disable scrolling, click Off.
5.2.3.3 Bounces
Specifies whether the scroll bounce is enabled or disabled.
l
To enable scroll bounce, click On.
l
To disable scroll bounce, click Off.
5.2.3.4 Horizontal Bounce
Specifies whether the scroll bounce is enabled or disabled in the horizontal direction.
l
To enable horizontal scroll bounce, click On.
l
To disable horizontal scroll bounce, click Off.
5.2.3.5 Vertical Bounce
Specifies whether the scroll bounce is enabled or disabled in the vertical direction.
l
To enable vertical scroll bounce, click On.
l
To disable vertical scroll bounce, click Off.
© 2014 by Kony, Inc. All rights reserved 75 of 621
Kony Visualizer User Guide
Version 2.2
5.2.3.6 Horizontal Scroll Indicator
Specifies whether the scroll indicator to be shown or not in the horizontal direction.
Note: Scroll Indicators may not be shown permanently. But depending on the platform scroll indicators may appear only during scrolling.
5.2.3.7 Vertical Scroll Indicator
Specifies whether the scroll indicator to be shown or not in the horizontal direction.
Note: Scroll Indicators may not be shown permanently. But depending on the platform scroll indicators may appear only during scrolling.
5.2.3.8 Paging
Specifies the whether the paging is enabled for the scroll container. If this property is set to true, the scroll view stops on multiples of the scroll view's bounds when the user scrolls.
5.2.3.9 Scroll Direction
Specifies the direction in which the FlexScrollForm should scroll. This property is supported only when the
Following are the options: l
Horizontal: Specifies the Flex Scroll Form to scroll in horizontal direction.
l
Vertical: Specifies the Flex Scroll Form to scroll in vertical direction.
l
Both: Specifies the Flex Scroll Form to scroll in the horizontal and vertical directions.
© 2014 by Kony, Inc. All rights reserved 76 of 621
Kony Visualizer User Guide
Version 2.2
5.2.3.10 Content Offset X
Specifies the x coordinates of the top-left of the scrollable region. When the values are set, the scroll container scrolls even if the scrolling is disabled. This will always returns the value that developer has set but never reflects the actual computed offset.
5.2.3.11 Content Offset Y
Specifies the Y coordinates of the top-left of the scrollable region. When the values are set, the scroll container scrolls even if the scrolling is disabled. This will always returns the value that developer has set but never reflects the actual computed offset.
5.2.3.12 Content Size Width
Specifies the width of the container to accommodate all the widgets placed in it. This will returns the values that developer has set, but never reflects the actual computed content size.
5.2.3.13 Content Size Height
Specifies the height of the container to accommodate all the widgets placed in it. This will returns the values that developer has set, but never reflects the actual computed content size.
5.2.3.14 Snap to Grid
A widget aligns to the nearest intersection of lines in the grid, or other widgets.
l
To allow snapping the widgets to a grid, click On.
l
To disable snapping the widgets to a grid, click Off.
5.2.3.15 Snap Grid Size
Specifies the value of the grid size. This option is available only when you enable Snap to Grid property.
© 2014 by Kony, Inc. All rights reserved 77 of 621
Kony Visualizer User Guide
Version 2.2
5.2.3.16 Default Unit
Specifies the default unit to be used for interpretation of numbers with no qualifiers when passed to layout properties.
Following are the options: l dp: Specifies the values in terms of device independent pixels.
l px: Specifies the values in terms of device hardware pixels.
l
%: Specifies the values in percentage relative to the parent dimensions.
5.2.3.17 Zoom Scale
Specifies the current scale factor applied to the form content.
Default:1
Note: This property is specific to the iOS platform.
5.2.3.18 Min Zoom Scale
Specifies the minimum zoom scale factor that can be applied to the form.
Default: 1
Note:
This property is specific to the iOS platform.
5.2.3.19 Max Zoom Scale
Specifies the maximum zoom scale factor that can be applied to the form.
Default: 1
Note: This property is specific to the iOS platform.
© 2014 by Kony, Inc. All rights reserved 78 of 621
Kony Visualizer User Guide
Version 2.2
5.2.3.20 Bounces Zoom
Specifies whether the scroll view animates the content scaling when the scaling exceeds the maximum or minimum limits. If the value is set to true, and zooming exceeds either the minimum or maximum limits for scaling, the scroll view temporarily animates the content scaling just past these limits before returning to them. If the property is set to false, zooming stops immediately as it reaches scaling limits.
Note: This property is specific to the iOS platform.
5.2.4 Actions
On this tab, you define the events that are executed when an action is run. On a FlexScrollContainer widget, you can run the following actions:
5.2.4.1 onScrollStart
An event callback is invoked by the platform when the user starts scrolling the content. This event is invoked asynchronously.
5.2.4.2 onScrollTouchReleased
An event callback is invoked by the platform when the user touch is released from the touch surface.
This event is invoked asynchronously.
5.2.4.3 onScrolling
An event callback is invoked by the platform when the scrolling is in progress. This event is invoked asynchronously.
5.2.4.4 onDecelerationStarted
An event callback is invoked by the platform when the user stops scrolling but the content still moves before the content actually stops. This event is invoked asynchronously.
© 2014 by Kony, Inc. All rights reserved 79 of 621
Kony Visualizer User Guide
Version 2.2
5.2.4.5 onScrollEnd
An event callback is invoked by the platform when the scrolling is ended. This event is invoked asynchronously.
5.2.4.6 onTouchStart
An event callback is invoked by the platform when the user touches the touch surface. This event is invoked asynchronously.
5.2.4.7 onTouchMove
An event callback is invoked by the platform when the touch moves on the touch surface continuously until movement ends. This event is invoked asynchronously.
5.2.4.8 onTouchEnd
An event callback is invoked by the platform when the user touch is released from the touch surface.
This event is invoked asynchronously.
5.2.4.9 widgetToZoom
An event callback is invoked by the platform to return one of the child widgets of source to zoom. The returning source itself makes the complete scroll container zoomable. If a null value is returned then the container does not zoom. This event is invoked asynchronously.
Note: This action is specific to the iOS platform
5.2.4.10 onZoomStart
An event callback is invoked by the platform when the container is about to zoom. This event is invoked asynchronously.
Note: This action is specific to the iOS platform
© 2014 by Kony, Inc. All rights reserved 80 of 621
Kony Visualizer User Guide
Version 2.2
5.2.4.11 onZooming
An event callback is invoked by the platform when the container is zooming. This event is invoked asynchronously.
Note: This action is specific to the iOS platform
5.2.4.12 onZoomEnd
An event callback is invoked by the platform when the zooming has ended. This event is invoked asynchronously.
Note: This action is specific to the iOS platform
© 2014 by Kony, Inc. All rights reserved 81 of 621
Kony Visualizer User Guide
Version 2.2
5.3 HBox
An HBox is used to layout widgets in a single horizontal orientation. It can contain any number of widgets. By default, HBox occupies the entire available width of its parent widget. However, due to form size limitations, it is advisable not to place many widgets in an HBox.
5.3.1 Important Considerations
The following are important considerations for an HBox Widget.
l
An HBox widget is available only for a VBox Form.
l
An HBox can be placed within a Form, VBox, TabPane, a Segment (only if orientation is vertical), or a ScrollBox (only if the orientation is vertical).
l
If an HBox contains multiple child widgets with varying heights, the height of the child widget with the maximum height is set as the height of the HBox.
l
If a background image is specified (as part of the normal skin) for the HBox, and if the heights of the child widgets are less than the height of the background image, then height of the image is set as the height of the HBox.
5.3.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 82 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of an HBox widget, refer section:
.
5.3.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. They also define the widget font (applicable only if the text appears on a widget.)
For the HBox widget, you can apply a skin for the following states:
© 2014 by Kony, Inc. All rights reserved 83 of 621
Kony Visualizer User Guide
Version 2.2
Skin
Normal
Definition
Specifies the default skin of a widget.
Focus Specifies the skin applied when the focus is on a widget.
Blocked
UI
Specifies the skin applied to block the interface until the action in progress (for example, a service call) is completed.
Note:
Blocked UI is available only for the SPA platforms.
Refer to section
to know more about adding a skin to a widget.
5.3.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
5.3.4.1 Percent
Specifies whether the child widget's weight must be considered during the layout.
Default: Percent is enabled.
© 2014 by Kony, Inc. All rights reserved 84 of 621
Kony Visualizer User Guide
Version 2.2
5.3.4.2 Alignment
Specifies the direction in which the widgets are laid out. This property appears only when Percent property is disabled. .
layoutAlignment list allows you to set the direction in which the child widgets are laid out within an
HBox.
Default: Left
Following are the options: o
Left: The widgets placed inside a box are aligned left.
o
Right: The widgets placed inside a box are aligned right.
o
Center: The widgets placed inside a box are aligned center.
5.3.4.3 Position
Specifies the position of an HBox as header or footer of the form, popup, segment, or map. When you set this property, the HBox is docked along with header or footer.
Note: This property is applicable for immediate child widgets placed on a Form.
Default: Normal
Following are the options available: l
Normal: The original position of the box is retained.
l
Header: The box is fixed at the top of the form.
l
Footer: The box is fixed at the bottom of the form.
© 2014 by Kony, Inc. All rights reserved 85 of 621
Kony Visualizer User Guide
Version 2.2
l
Fullscreen Segment Header: This option is useful to fix the position of the box to the top of the form when the box is placed inside a Segment with screenLevelWidget set to true. This property is treated as normal
1 when a box is not placed in a segment.
l
Fullscreen Segment Footer: This option is useful to fix the position of the box to the bottom of the form when a box is placed inside a Segment with screenLevelWidget set to true. This property is treated as normal
2 when a box is not placed in a segment.
The selected option becomes the default position value for all the platforms. You can provide a different value for a platform by forking position property. Refer to the section
for more details.
Note: Position property is not applicable for SPA platform.
5.3.5 Actions
On this tab, you define the events that are executed when an action is run. On HBox, you can run the following action: l onClick: This action is invoked by the platform when the user performs a click action on the widget.
For more information on using the above action, refer to section
.
5.3.6 Placement inside a Widget
An HBox can be directly added inside the following widgets:
Widget
Flex Form
HBox placement inside a widget
No
1BOX_POSITION_AS_NORMAL where the original position of the box is retained.
2BOX_POSITION_AS_NORMAL where the original position of the box is retained.
© 2014 by Kony, Inc. All rights reserved 86 of 621
Widget
VBox Form
HBox placement inside a widget
Yes
FlexContainer
FlexScrollContainer
No
No
HBox
VBox
Scroll Box
Tab
Segment
No
Yes
Horizontal Orientation - No
Vertical Orientation- Yes
Yes
Horizontal Orientation - No
Vertical Orientation- Yes
Popup
Template
Yes
Header- Yes
Footer- Yes
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 87 of 621
Kony Visualizer User Guide
Version 2.2
5.4 ScrollBox
A ScrollBox is a scrollable container which allows you to scroll the content within horizontally and vertically. A ScrollBox can contain any widget except a Tab pane. It can contain any number of widgets within it.
5.4.1 Important Considerations
The following are important consideration for a ScrollBox widget: l
A ScrollBox widget is available only for a VBox Form.
l
For a good user experience, you must place the ScrollBox using a percentage layout. In a nonpercentage layout the width of the ScrollBox varies across platforms.
5.4.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 88 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a ScrollBox widget, refer section:
5.4.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For a ScrollBox widget, you can apply a skin for the following states:
© 2014 by Kony, Inc. All rights reserved 89 of 621
Kony Visualizer User Guide
Version 2.2
Normal
Skin
Refresh - Pull
Refresh - Push
Specifies the default skin of a widget.
Definition
Specifies the skin of a widget when the scroll bar is pulled.
Specifies the look and feel of a widget when the scroll bar is pushed.
Refer to section
to know more about adding a skin to a widget.
5.4.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
Note:
In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
© 2014 by Kony, Inc. All rights reserved 90 of 621
Kony Visualizer User Guide
Version 2.2
5.4.4.1 Percent
Specifies whether the child widget's weight must be considered during the ScrollBox layout.
Default: percent is enabled
5.4.4.2 Alignment
This property appears only when Percent is disabled.
Alignment allows you to set the direction in which the widgets are laid out.
Default: Left
Following are the options:
© 2014 by Kony, Inc. All rights reserved 91 of 621
Kony Visualizer User Guide
Version 2.2
o
Left: The widgets placed inside a box are aligned left.
o
Right: The widgets placed inside a box are aligned right.
o
Center: The widgets placed inside a box are aligned center.
5.4.4.3 Orientation
Specifies how you can stack the widgets within the ScrollBox. You can set the orientation of the
ScrollBox as horizontal or vertical.
Note: ScrollBox with a vertical orientation cannot be placed directly on a form. It has to be placed inside an HBox.
Default: Horizontal
Following are the options: l
Horizontal: Enables you to stack the content within the ScrollBox horizontally.
l
Vertical: Enables you to stack the content within the ScrollBox vertically.
5.4.4.4 Scroll Direction
Specifies how you can scroll the content within the ScrollBox.
Default: Horizontal
Following are the options: l
Horizontal: Enables you to scroll the content within the ScrollBox horizontally.
l
Vertical: Enables you to scroll the content within the ScrollBox vertically.
l
Both: Enables you to scroll the content within the ScrollBox horizontally as well as vertically.
l
None: Disables scrolling of the content in the ScrollBox.
© 2014 by Kony, Inc. All rights reserved 92 of 621
Kony Visualizer User Guide
Version 2.2
Note:
On SPA platforms, Horizontal scroll direction is not supported when the
is set as
Vertical; Vertical scroll direction is not supported when the
is set as Horizontal.
5.4.4.5 Position
Specifies the position of a ScrollBox as header or footer of a form.
Note: This property is applicable for immediate child widgets (with horizontal orientation) of a
Form.
Default: Normal
Following are the options available: l
Normal: Retains the original position of the ScrollBox.
l
Header: Specifies the position of the ScrollBox is fixed at the top of the Form.
l
Footer: Specifies the position of the ScrollBox is fixed at the bottom of the Form.
l
Fullscreen Segment Header: This option is useful if the box is placed on a form with a Segment on it. You must set the screenLevelWidget property of the particular segment to true. The scrollbox attaches itself to the Segment as a header and scrolls along with the segment. If the screenLevelWidget property of the particular segment is not set, then this value is ignored and the box is treated as normal.
l
Fullscreen Segment Footer: This option is useful if the box is placed on a form with a Segment on it. You must set the Full Screen Widget property of the particular segment to true. The scrollbox attaches itself to the Segment as footer and scrolls along with the segment. If the Full
Screen Widget property of the particular segment is not set, then this value is ignored and the box is treated as normal.
The position of the widget selected from this list becomes the default position value for all the platforms. You can provide a different value for a platform by forking position property. Refer to the section
for more details.
© 2014 by Kony, Inc. All rights reserved 93 of 621
Kony Visualizer User Guide
Version 2.2
5.4.4.6 Show Scrollbars
Show Scrollbars specifies the visibility of the Scroll Bars.
Default: Show Scrollbars is enabled l
Click On to display the Scrollbars.
l
Click Off to hide the Scrollbars.
The selected option becomes the default for all the platforms. You can provide a different value for a platform by forking showScrollbars property. Refer to the section
for more details.
5.4.4.7 Scroll By Page
Enables the scrolling of the content in increments of the width of the scrollbox on swipe gesture.
Default: Enabled scroll by page l
Click On to enable scroll by page.
l
Click Off to disallow scroll by page.
The selected option becomes the default for all the platforms. You can choose to provide a different option for a platform by forking Scroll By Page property. Refer to the section
for more details.
5.4.4.8 Height
Specifies the available height of the container in terms of percentage. The percentage is with reference to the value of
property.
For example, on a Form you have a ScrollBox with 5 labels and 5 buttons in it and a Button below the
ScrollBox. If the Height is set as 100 (percentage) and
is set as Form Reference, then the ScrollBox occupies the height of the Form excluding the height occupied by the Button.
Note:
This property is unavailable on Flex Forms.
© 2014 by Kony, Inc. All rights reserved 94 of 621
Kony Visualizer User Guide
Version 2.2
5.4.4.9 Height Reference
This property is enabled when you set the
.
Default: Form Reference
The container height percentage is calculated based on the following options.
l
Form Reference: The scrollbox height is percentage calculated based on the height of the Form excluding headers and footers. This property doesn't have any effect if the scrollbox is placed inside a popup or headers/footers.
l
Parent Width: Use this option if the scrollbox is placed inside a Box. The width is calculated based on the width of the Box.
Note:
This property is unavailable on Flex Forms.
5.4.4.10 Single Page Application (SPA) properties
In SPA, you can provide images for left, right, top and bottom arrows.
Left Arrow
For inserting a left arrow image, click the Edit button against the Left Arrow field to open the Left
Arrow dialog box.
You can either: l
Locate the image and click OK.
l
Provide image URL and click OK.
Right Arrow
For inserting a right arrow image, click the Edit button against the Right Arrow field to open the Right
Arrow dialog box.
You can either:
© 2014 by Kony, Inc. All rights reserved 95 of 621
Kony Visualizer User Guide
Version 2.2
l
Locate the image and click OK.
l
Provide image URL and click OK.
Top Arrow
For inserting a top arrow image, click the Edit button against the Top Arrow field to open the Top
Arrow dialog box.
You can either: l
Locate the image and click OK.
l
Provide image URL and click OK.
Bottom Arrow
For inserting a bottom arrow image, click the Edit button against the Bottom Arrow field to open the
Bottom Arrow dialog box.
You can either: l
Locate the image and click OK.
l
Provide image URL and click OK.
5.4.5 Actions
On this tab, you define the events that are executed when an action is run. On a ScrollBox widget, you can run the following actions: l onReachingBeginning: This action is called when scrolling reaches the beginning of the
ScrollBox widget l onReachingEnd: This action is called when scrolling reaches the end of the ScrollBox widget.
l onPull: This action is called when ScrollBox is pulled from top.
l onPush: This action is called when ScrollBox is pushed from bottom.
© 2014 by Kony, Inc. All rights reserved 96 of 621
Kony Visualizer User Guide
Version 2.2
For more information on using the above actions, refer to section
.
5.4.6 Placement Inside a Widget
A ScrollBox can be directly added inside the following widgets:
Widget
Flex Form
VBox Form
ScrollBox placement inside a widget
No
Yes
FlexContainer
FlexScrollContainer
No
No
HBox
VBox
ScrollBox
Yes
Yes
Horizontal Orientation - No
Vertical Orientation- No
Tab
Segment
Popup
Template
Yes
No
Yes
Header- Yes
Footer- Yes
© 2014 by Kony, Inc. All rights reserved 97 of 621
Kony Visualizer User Guide
Version 2.2
5.5 TabPane
TabPane widget allows you to organize multiple tabs within it. Each Tab will in turn hold a collection of widgets within the same area of the Form. You can only view one Tab a time, and every Tab in the
TabPane widget consists of a certain type of information and appears when the user selects the corresponding Tab.
5.5.1 Important Considerations
The following are important considerations for a TabPane Widget.
l
The TabPane widget occupies 100 percent of the screen width.
o
You can navigate within the TabPane using only the down key.
o
If you press the down key, the focus shifts to the next widget in the TabPane.
o
If you press the down key while you are on the last widget in the TabPane, you are taken to the top most widget in the TabPane.
o
If you press the right or the left arrow keys, you move to next or previous tabs.
o
Tab cycling is supported (that is, if you are on the last tab and you press the right arrow, you move to the first tab).
l
On devices which have a navigation key, the following are applicable: o
Each Tab has a context menu. This menu appears in the menu options whenever the Tab is in focus. The MenuItems must be placed on other Form specific MenuItems.
o
Tab remembers the control on which there was focus. For example, if control 2 of Tab2 is in focus, and you navigate to Tab1, when you navigate back to Tab2, control 2 will be in focus and not the first item in the Tab.
© 2014 by Kony, Inc. All rights reserved 98 of 621
Kony Visualizer User Guide
Version 2.2
5.5.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 99 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a TabPane widget, refer section:
.
5.5.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For a TabPane widget, you can apply a skin for the following states
© 2014 by Kony, Inc. All rights reserved 100 of 621
Kony Visualizer User Guide
Version 2.2
Skin Definition
Active Specifies the skin to be applied when a TabPane is active.
Active
Focus
Specifies the skin that is to be applied when a TabPane is active and focused.
Inactive Specifies the skin to be applied for all inactive tabs.
Page Specifies the skin for page indicator. This property is applicable only when View Type is set as
Page and images are selected for Focused Page Icon and Unfocused Page icon.
Refer to section
to know more about adding a skin to a widget.
5.5.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 101 of 621
Kony Visualizer User Guide
Version 2.2
5.5.4.1 Active Tabs
Indicates the selected Tabs indices. Index starts from 0. Specifies the Tab is displayed as the default open Tab.
5.5.4.2 Full Screen Widget
Specifies whether the widget should occupy the whole container or not.
Note:
You cannot place more than one TabPane as a screen level widget inside a form. Also, if you choose to make a TabPane a Screen Level Widget, we recommend that you place only one
TabPane in the form and do not place any other widgets in the form.
Note: Do not set the screen level widget property to true for more than one widget in the form. If you have multiple widgets with this property set as true, there may be issues with how information appears along with some scrolling issues.
l
If On is selected, the widget occupies the whole container.
l
If Off is selected, the widget does not occupy the whole container.
Note:
This property is available only when TabPane is placed inside a VBox Forms.
5.5.4.3 View Type
Specifies the view type the Tab Pane should display.
To specific view type for various platforms, click the Edit button against View Type field to open View
Type dialog box. Select the desired view type for a choose platform.
Following are the options: l
Tab l
Collapsible
© 2014 by Kony, Inc. All rights reserved 102 of 621
Kony Visualizer User Guide
Version 2.2
l
Page
5.5.4.4 Height
Specifies the height of the TabPane in terms of percentage. The percentage is with reference to the value of
property.
Note:
This property is available only when TabPane is placed inside a VBox Forms.
5.5.4.5 Height Reference
The TabPane height percentage is calculated based on the option selected.
l
Form Reference: The TabPane height percentage is calculated based on the height of the form excluding headers and footers. This option is not respected if TabPane is placed inside a popup or in templates.
l
Parent Width: This option is used if the TabPane is placed inside a popup or in templates. The width is calculated based on the width of the parent container.
Note: This property is available only when TabPane is placed inside a VBox Forms.
5.5.4.6 Progress Indicator
Specifies if the progress indicator must be displayed.
l
If Off is selected, the progress indicator is not displayed on the widget.
l
If On is selected, the progress indicator appears on the widget.
Note: This property is specific to the iOS platform.
5.5.4.7 Progress Indicator Color
Specifies the color of the progress indicator. You can either choose Grey color or White color for your
Progress Indicator.
© 2014 by Kony, Inc. All rights reserved 103 of 621
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the iOS platform.
5.5.4.8 Tab Header Height
Specifies the height of a tab header.
Note: This property is specific to the Android platform.
5.5.5 Actions
On this tab, you define the events that are executed when an action is run. On a TabPane widget, you can run the following action: l onTabClick: This action is executed when the tab is clicked. This action is available only when the View Type is set to Collapsible View and is triggered when you expand or collapse any
Tab.
For more information on using the above action, refer to section
.
5.5.6 Placement inside a Widget
A TabPane can be directly added inside the following widgets:
Widget
Flex Form
TabPane placement inside a widget
Yes.
VBox Form
FlexContainer
FlexScrollContainer
HBox
Yes, only 1
Yes
Yes
Yes, only 1
© 2014 by Kony, Inc. All rights reserved 104 of 621
Kony Visualizer User Guide
Version 2.2
Widget
VBox
ScrollBox
Tab
Segment
Popup
Template
TabPane placement inside a widget
Yes, only 1
Horizontal Orientation -No
Vertical Orientation- No
No
Horizontal Orientation -No
Vertical Orientation- No
Yes, only 1
Header- No
Footer- No
5.6 Tab
Tab widget hold a collection of widgets within the same area of the Form. You can only view one Tab a time. The Tab consists of a certain type of information and appears when the user selects the corresponding Tab.
5.6.1 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
© 2014 by Kony, Inc. All rights reserved 105 of 621
Kony Visualizer User Guide
Version 2.2
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
To specify the look properties of a TabPane widget, refer section:
.
5.6.2 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For a Tab widget, you can apply the following skin:
© 2014 by Kony, Inc. All rights reserved 106 of 621
Kony Visualizer User Guide
Version 2.2
5.6.3 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
To specify the look properties of a Tab widget, refer section:
.
© 2014 by Kony, Inc. All rights reserved 107 of 621
Kony Visualizer User Guide
Version 2.2
5.6.4 Skin
Skin defines properties such as background color, borders, and shadows for a widget. They also define the widget font (applicable only if the text appears on a widget.)
For a Tab widget, you can apply the following skin:
Skin Definition
Normal Specifies the default skin of a widget.
Refer to section
to know more about adding a skin to a widget.
5.6.5 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 108 of 621
Kony Visualizer User Guide
Version 2.2
5.6.5.1 Image
Indicates the image displayed next to the tab name. To select an image, click Edit. The Image window appears. From the list of images, choose an image, and then click OK.
5.6.5.2 Tab Name
Indicates the name of the tab. When a tab is added to the TabPane, a unique name is assigned. You can rename the tab by directly typing in the tab box.
5.6.5.3 Alignment
Indicates how the image and tab name are arranged on a tab.
5.6.5.4 Clip Bounds
Specifies whether to clip the child widgets when they go out of boundaries or not.
5.6.5.5 Layout Type
Specifies if the arrangement of the widgets either in horizontal or vertical direction.
Default: Vertical
Following are the options: l
Free Form: The navigation happens in both directions.
l
Flow Vertical: The navigation happens in vertical direction.
l
Flow Horizontal: The navigation happens in horizontal direction.
5.6.5.6 Snap to Grid
A widget aligns to the nearest intersection of lines in the grid, or other widgets.
l
To allow snapping the widgets to a grid, click On.
l
To disable snapping the widgets to a grid, click Off.
© 2014 by Kony, Inc. All rights reserved 109 of 621
Kony Visualizer User Guide
Version 2.2
5.6.5.7 Snap Grid Size
Specifies the value of the grid size. This option is available only when you enable Snap to Grid property.
5.6.5.8 Default Unit
Specifies the default unit to be used for interpretation of numbers with no qualifiers when passed to layout properties.
Following are the options: l dp: Specifies the values in terms of device independent pixels.
l px: Specifies the values in terms of device hardware pixels.
l
%: Specifies the values in percentage relative to the parent dimensions.
5.6.6 Actions
On this tab, you define the events that are executed when an action is run. On a Tab widget, you can run the following actions: l
OnInit: An action is run when the user navigates to the tab.
l onTouchStart: An event callback is invoked by the platform when the user touches the touch surface. This event is invoked asynchronously.
l onTouchMove: An event callback is invoked by the platform when the touch moves on the touch surface continuously until movement ends. This event is invoked asynchronously. An event callback is invoked by the platform when the touch moves on the touch surface continuously until movement ends. This event is invoked asynchronously.
l onTouchEnd: An event callback is invoked by the platform when the user touch is released from the touch surface. This event is invoked asynchronously.
For more information on using the above action, refer to section
.
© 2014 by Kony, Inc. All rights reserved 110 of 621
5.6.7 Placement Inside a Widget
A tab can only be placed inside a TabPane.
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 111 of 621
Kony Visualizer User Guide
Version 2.2
5.7 VBox
A VBox is used to layout widgets in a single vertical orientation. It can contain any number of widgets.
By default, VBox occupies the entire available height of its parent widget.
5.7.1 Important Considerations
The following are important considerations of a VBox Widget: l
A VBox widget is available only for a VBox Form.
l
The height of a VBox is the cumulative height of its child widgets.
l
A VBox widget cannot be directly placed inside another VBox.
l
A widget becomes invisible if you choose not to render it, and if that widget is placed inside a
VBox.
5.7.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 112 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a VBox widget, refer section:
.
5.7.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For a VBox widget, you can apply a skin for the following states:
© 2014 by Kony, Inc. All rights reserved 113 of 621
Kony Visualizer User Guide
Version 2.2
Skin
Normal
Definition
Specifies the default skin of a widget.
Focus Specifies the skin applied when the focus is on a widget.
Blocked
UI
Specifies the skin applied to block the interface until the action in progress (for example, a service call) is completed.
Note:
Blocked UI skin is available only for the SPA platforms.
Hover
Skin
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note: Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.7.4 Actions
VBox widget has the following action associated with it: l onClick: This action is invoked by the platform when the user performs a click action on the widget.
For more information on using the above action, refer to section Action Editor.
5.7.5 Placement Inside a Widget
A VBox can be directly added inside the following widgets:
Widget
Flex Form
VBox Form
VBox placement inside a widget
No
No
© 2014 by Kony, Inc. All rights reserved 114 of 621
Widget
FlexContainer
VBox placement inside a widget
No
FlexScrollContainer
HBox
No
Yes
VBox
ScrollBox
Tab
Segment
Popup
Template
No
Horizontal Orientation - Yes
Vertical Orientation- No
No
Horizontal Orientation - Yes
Vertical Orientation- No
No
Header- No
Footer- No
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 115 of 621
Kony Visualizer User Guide
Version 2.2
5.8 Button
A button is a control that you can use to provide input to an application or trigger an event. For example, navigating to a form, interacting with a dialog box, or confirming an action.
5.8.1 Important Considerations
The following are important considerations for a Button Widget.
l
You can specify different skins for normal and focus states of a button.
l
You can specify a background image for normal and focus states of a button.
l
To avoid jumping effect or to avoid overlap of neighboring widgets, you must ensure that the image for normal and focus skins are of the same size.
5.8.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 116 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a Button widget, refer section:
.
© 2014 by Kony, Inc. All rights reserved 117 of 621
Kony Visualizer User Guide
Version 2.2
5.8.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For a Button widget, you can apply a skin for the following states:
Skin
Normal
Focus
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
Blocked
UI
Specifies the skin applied to block the interface until the action in progress (for example, a service call) is completed.
Note: Blocked UI skin is available only for the SPA platforms.
Pressed Specifies the skin to indicate that the widget is pressed or clicked.
Note: Pressed skin is available only on Android Native platforms.
Refer to section
to know more about adding a skin to a widget.
5.8.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 118 of 621
Kony Visualizer User Guide
Version 2.2
5.8.4.1 Progress Indicator
Specifies if the progress indicator must be displayed when the button is clicked. Typically this property is enabled when the time take to load an application is long.
Default: Progress Indicator is enabled.
l
Click On to enable progress indicator.
l
Click Off to disable progress indicator.
Note: This property is specific to the iOS platform.
5.8.4.2 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note:
This property is specific to the Windows Tablet platform.
5.8.5 Actions
On this tab, you define the events that are executed when an action is run. On a Button widget, you can run the following actions: l onClick: This action is invoked by the platform when the user performs a click action on the button.
For more information on using the above action, refer to section
.
5.8.6 Placement inside a Widget
A button can be directly added inside the following widgets:
© 2014 by Kony, Inc. All rights reserved 119 of 621
Widget
Flex Form
Button placement inside a widget
Yes
VBox Form
FlexContainer
FlexScrollContainer
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
Yes
Yes
Yes
Yes
Yes
Horizontal Orientation -Yes
Vertical Orientation -Yes
Yes
Horizontal Orientation -Yes
Vertical Orientation -Yes
Yes
Header- No
Footer- No
5.8.7 Widget Appearance on Platforms
The appearance of the Button widget on various platforms is as follows:
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 120 of 621
iOS
SPA
Platform
Visualizer (Apple-iOS : Native)
Android
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 121 of 621
Kony Visualizer User Guide
Version 2.2
5.9 Calendar
Calendar widget allows you to select a date from a graphical calendar. The calendar widget appears as a label with a small calendar icon (icon does not appear on Mobile Web platforms) and displays the date or the date format specified by you. You can interact with the calendar widget by clicking on it.
5.9.1 Important Considerations
The following are important considerations for a Calendar Widget.
l
The default height of calendar widget is 28px.
l
If you do not specify an image for popup view then a default image is provided.
l
By default, calendar widget occupies the complete width of its parent widget.
l
Clicking the Calendar icon, opens the current month calendar. On Android platform, restricting the date selection between validStartDate and validEndDate is not possible with Native
Calendar View.
5.9.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 122 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a Calendar widget, refer section:
.
5.9.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
© 2014 by Kony, Inc. All rights reserved 123 of 621
Kony Visualizer User Guide
Version 2.2
For a Calendar widget, you can apply a skin for the following states:
Skin
Normal
Definition
Specifies the default skin of a widget.
Focus
Grid
Specifies the skin applied when the focus is on a widget.
Specifies the skin applied for the grid calendar.
Cell Specifics the skin applied for the grid calendar cell.
Cell - Selected Specifies the skin applied when a grid calendar cell is selected.
Cell - Focus
Cell - Today
Specifies the skin applied when there is a focus on the grid calendar cell.
Specifies the skin applied for the grid calendar today cell.
Cell -Weekend Specifies the skin applied for the weekend days of a grid calendar.
Cell - Inactive Specifies the skin applied for non-working inactive days of a grid calendar.
Done Button Specifies the skin to be applied for Done button that appear on a calendar pop up.
Cancel Button Specifies the skin to be applied for a Cancel button that appear on a calendar pop up.
Day
Month
Specifies the day portion of the currently selected date.
Specifies the month portion of the currently selected date.
Hover Skin Specifies the look and feel of a widget when the cursor hovers over a widget.
Note:
Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.9.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 124 of 621
Kony Visualizer User Guide
Version 2.2
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
© 2014 by Kony, Inc. All rights reserved 125 of 621
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 126 of 621
Kony Visualizer User Guide
Version 2.2
5.9.4.1 Start Date
Specifies the start date in your choose
. By default, the Start Date is populated with today's date.
To input a different default start date or to provide a platform specific start date, click the Edit button against the Start Date to open the Start Date dialog box.
The Default platform value is populated with today's date. To change this value, click the calendar icon and from the calendar pop-up select a date.
To provide a platform specific start date, a. Click the desired platform check box b. In the corresponding Value field, click the calendar icon.
c. From the Calendar pop-up, select a date.
© 2014 by Kony, Inc. All rights reserved 127 of 621
Kony Visualizer User Guide
Version 2.2
5.9.4.2 End Date
Specifies the end date in your choose
Data Format . By default, the valid end date is populated with
today's date.
To input a different default end date or to provide a platform specific end date, click Edit button against the End Date. This results in opening the Valid EndDate window.
Default platform value is populated with today's date. To change this value, click the calendar icon and from the calendar pop-up select a date.
To provide a platform specific end date, l click the desired platform check box l in the Value field, click the calendar icon.
l from the Calendar pop-up, select a date.
5.9.4.3 View Type
Specifies the view type of the Calendar.
© 2014 by Kony, Inc. All rights reserved 128 of 621
Kony Visualizer User Guide
Version 2.2
Default: Default
The following are the view types of a calendar: l
Default: Specifies the default native calendar view in respective platforms.
l
Onscreen Grid l
Popup Grid (only SPA platforms supports this option.)
The View Type of the widget selected from this list becomes the default for all the platforms. You can provide a different value for a platform by forking View Type property. Refer to the section
for more details.
Note: On Android platform, when the View Type is set as Default, the user cannot be restricted to select the dates within the validStartDate and validEndDate.
5.9.4.4 Placeholder
Specifies the temporary or substitute text that must be displayed until a date is selected.
For example, you can display the placeholder text on the calendar widget as "Enter your date of travel", until the user clicks the calendar widget and selects a date.
5.9.4.5 Default Date
Specifies a default date to be displayed on a Calendar widget. You can choose a date by clicking the calendar icon, and then selecting a date.
This date replaces any
value.
5.9.4.6 Data Format
The date format enables you to select the format in which the date appears.
Default: DD/MM/YYY
Following date formats are supported:
© 2014 by Kony, Inc. All rights reserved 129 of 621
Kony Visualizer User Guide
Version 2.2
l
DD/MM/YYYY l
MM/DD/YYYY l
MM/DD/YY
5.9.4.7 Calendar Icon
Specifies the calendar icon that appears next to the placeholder.
System provides a default icon that appears across the platforms.
You may choose to replace this default icon or provide a platform specific icon by clicking the Edit button against the Calendar Icon field to open the calendar Icon dialog box.
© 2014 by Kony, Inc. All rights reserved 130 of 621
Kony Visualizer User Guide
Version 2.2
Select the platform and click inside the corresponding value field to open the Select Image dialog box.
You can either: l
Select an available image l
Provide image URL
5.9.4.8 Left Nav Image
Specifies left navigation image that appears on the calendar popup. Click this image to navigate and select a past date from the calendar.
For assigning an image, click the Edit button against the Left Nav Image to open the Left Nav Image search dialog box. You can either: l
Select an image.
l
Provide image URL.
5.9.4.9 Right Nav Image
Specifies right navigation image that appears on the calendar popup. Click this image to navigate and select a future date from the calendar.
For assigning an image, click the Edit button against the Right Nav Image to open the Right Nav
Image search dialog box. You may either: l
Select an image.
l
Provide image URL .
5.9.4.10 Weekend Selectable
Select the check box to allow weekend selection. If unchecked, you will not be able to choose dates that fall on weekends.
5.9.4.11 Mode
Specifies the mode in which the calendar is used.
© 2014 by Kony, Inc. All rights reserved 131 of 621
Kony Visualizer User Guide
Version 2.2
Default: Date
Following are the options: l
Date: Allows you to select only date.
l
Date & Time: Allows you to select both date and time.
Note: This property is specific to the iOS platform.
5.9.4.12 Hide Days Header
This property is available only when View Type is set as Onscreen Grid or Popup Grid. It indicates if the weekdays are hidden on the header of a grid calendar.
l
Click On to hide the weekdays.
l
Click Off to display weekdays.
Note:
This property is specific to the iOS and Android platforms.
5.9.4.13 Hide Months Header
This property is available only when View Type is set as Onscreen Grid or Popup Grid. It indicates if the months header is hidden for grid calendar including the navigation buttons.
l
Click On to hide the months header.
l
Click Off to display the months header.
Note: This property is specific to the iOS and Android platforms.
5.9.4.14 Day Text Alignment In Cell
This property is available only when the View Type is set as Onscreen Grid or Popup Grid. It specifies the alignment of the text for a Calendar Day cell regarding its boundaries. The alignment values are:
© 2014 by Kony, Inc. All rights reserved 132 of 621
Kony Visualizer User Guide
Version 2.2
l
Top-Left: Specifies the text should align at the top left corner of a Calendar Day cell.
l
Top-Center: Specifies the text should align at the top center of a Calendar Day cell.
l
Top-Right: Specifies the text should align at the top right of a Calendar Day cell.
l
Middle-Left: Specifies the text should align at the middle left of a Calendar Day cell.
l
Center: Specifies the text should align at the center of a Calendar Day cell.
l
Middle-Right: Specifies the text should align at the middle right of a Calendar Day cell.
l
Bottom-Left: Specifies the text should align at the bottom left of a Calendar Day cell.
l
Bottom-Center: Specifies the text should align at the bottom center of a Calendar Day cell.
l
Bottom-Right: Specifies the text should align at the bottom right of a Calendar Day cell.
Note: This property is specific to the iOS and Android platforms.
5.9.4.15 Cell Template
This property is available only when the View Type is set as Onscreen Grid or Popup Grid. It specifies the common template to be used for a Calendar Day cell. A template is used only when the data is present for a Calendar Day cell. If the data is not set to a cell, the cell appears with the default look, which has no template.
To assign a template for cell template, follow these steps:
1. Click Edit. The cellTemplate window appears.
2. From the list of templates, select a template.
3. Click OK.
Note: This property is specific to the iOS and Android platforms.
© 2014 by Kony, Inc. All rights reserved 133 of 621
Kony Visualizer User Guide
Version 2.2
5.9.4.16 Data
To modify the Data property, you need to assign a grid template to the
property.
Data represents the actual data to be rendered in each cell.
To specify the data, follow these steps:
1. Click Edit. The Master Data for GridCalendar window appears.
2. From the Data column, click Calendar icon.
3. Select a date.
4. From the Template Data column, click ellipsis. The Template Data appears.
5. Do the following: a. Update the data of a widget, if required.
b. Update the skin of a widget, if required.
6. Click OK.
Note:
This property is specific to the iOS and Android platforms.
5.9.4.17 Height
This property is available only when View Type is set as Onscreen Grid or Popup Grid. It specifies the available height of the container in terms of percentage. The percentage is with reference to the value of
property.
Note: This property is specific to the iOS and Android platforms.
© 2014 by Kony, Inc. All rights reserved 134 of 621
Kony Visualizer User Guide
Version 2.2
5.9.4.18 Height Reference
This property is available only when View Type is set as Onscreen Grid or Popup Grid and when you set the Height.
The container height percentage is calculated based on the below options.
l
Form Reference: The Calendar height is percentage calculated based on the height of the Form excluding header and footer.
l
Parent Width: Use this option if the Calendar is placed inside a Box. The width is calculated based on the width of the Box.
Note: This property is specific to the iOS and Android platforms.
5.9.4.19 Popup Title
Specifies the title text to be displayed on the calendar popup.
Note: This property is specific to the SPA platform.
5.9.4.20 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note:
This property is specific to Windows platform.
5.9.5 Actions
On this tab, you define the events that are executed when an action is run. On a Calendar widget, you can run the following action: l onSelection: This action is triggered when an item is selected.
For more information on using the above action, refer to section
.
© 2014 by Kony, Inc. All rights reserved 135 of 621
5.9.6 Placement Inside a Widget
A Calendar can be directly added inside the following widgets:
Widget
Flex Form
Calendar placement inside a widget
Yes
VBox Form
FlexContainer
FlexScrollContainer
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
Yes
Yes
Yes
Yes
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
5.9.7 Widget Appearance on Platforms
The appearance of the Calendar widget on various platforms is as follows:
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 136 of 621
iOS
SPA
Platform
Visualizer (Apple-iOS : Native)
Android
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 137 of 621
Kony Visualizer User Guide
Version 2.2
5.10 CheckBoxGroup
The CheckBoxGroup widget allows you to make one or more selections from a group of check boxes.
If you select a check box, a check mark appears inside the check box to indicate the selection.
You can use a CheckBoxGroup widget to provide a selection of choices in groups from which the user can select one or more choices.
5.10.1 Important Considerations
The following are important considerations for a CheckBoxGroup Widget.
5.10.1.1 All Platforms l
CheckBoxGroup widget is always a group widget.
l
Limit the number of choices in the widget. If you need to display several choices (above 15 choices), consider using a
widget.
5.10.1.2 Android l
If you set the
to horizontal, we suggest that you do not place more than two items in the group, as there is a platform limitation.
If you place more than two items and the associated text with the items is large, there is a possibility that the additional items will not fit in the screen width and will not be visible on the screen.
5.10.1.3 iPhone l
You cannot apply skins in the on-off switch view.
5.10.1.4 SPA l
Focus skin is not supported.
© 2014 by Kony, Inc. All rights reserved 138 of 621
Kony Visualizer User Guide
Version 2.2
5.10.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 139 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a CheckBoxGroup widget, refer section:
.
5.10.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For a CheckBoxGroup widget, you can apply a skin for the following states:
© 2014 by Kony, Inc. All rights reserved 140 of 621
Kony Visualizer User Guide
Version 2.2
Skin
Normal
Definition
Specifies the default skin of a widget.
Focus Specifies the skin applied when the focus is on a widget.
Refer to section
to know more about adding a skin to a widget.
5.10.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
5.10.4.1 Master Data
Specifies the set of values that must be displayed for the user to make a selection from the available choices.
For specifying these set of values, click the Edit button against the masterData field to open the
MasterData for CheckBox dialog box.
© 2014 by Kony, Inc. All rights reserved 141 of 621
Kony Visualizer User Guide
Version 2.2
Master Data contains the following columns: l
Key: It is the unique identifier of each individual Check Box.
l
Display Value: This value appears in the CheckBoxGroup widget on a form.
l
Select Key: Allows you to select individual check boxes from the group. You can select more than one check box.
If require, to add more check boxes to the widget, click Add. To delete a check box, click inside a check box, and then click Delete.
After providing the required details and click Apply to create master data.
5.10.4.2 Selected Image
Specifies the image to be displayed when you make a selection.
For providing a default or platform specific image, click the Edit button against Selected Image field to open the Selected Image dialog box.
© 2014 by Kony, Inc. All rights reserved 142 of 621
Kony Visualizer User Guide
Version 2.2
To provide a platform specific image or to replace the default image, select the platform and click inside the corresponding value field. This results in opening the Select Image dialog box. You can either: l
Select an available image.
l
Provide image URL.
5.10.4.3 Unselected Image
Specifies the image to be displayed when a selection is cleared.
For providing a default or platform specific image, click the Edit button against unselected Image field to open the Unselected Image dialog box.
© 2014 by Kony, Inc. All rights reserved 143 of 621
Kony Visualizer User Guide
Version 2.2
To provide a platform specific image or to replace the default image, select the platform and click inside the corresponding value field. This results in opening the Select Image dialog box. You can either: l
Select an available image.
l
Provide image URL.
5.10.4.4 Orientation
Specifies the alignment of the check boxes as horizontal or vertical.
Default: Vertical
Following orientations are available: l
Vertical l
Horizontal
5.10.4.5 View Type
Specifies the view type of the CheckBoxGroup.
© 2014 by Kony, Inc. All rights reserved 144 of 621
Kony Visualizer User Guide
Version 2.2
Default: Switches
Following views are available: l
Switches l
Table l
On-screen Wheel
Note: This property is specific to the iOS platform.
5.10.4.6 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
5.10.5 Actions
On this tab, you define the events that are executed when an action is run. On a CheckBoxGroup widget, you can run the following action: l onSelection: This action is invoked by the platform when an item is selected.
For more information on using the above action, refer to section
.
5.10.6 Placement Inside a Widget
A CheckBoxGroup can be directly added inside the following widgets:
Widget
Flex Form
VBox Form
CheckBoxGroup placement inside a widget
Yes
Yes
© 2014 by Kony, Inc. All rights reserved 145 of 621
Kony Visualizer User Guide
Version 2.2
Widget
FlexContainer
CheckBoxGroup placement inside a widget
Yes
FlexScrollContainer
HBox
Yes
Yes
VBox
ScrollBox
Tab
Segment
Popup
Template
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
5.10.7 Widget Appearance on Platforms
The appearance of the CheckBoxGroup widget on various platforms is as follows:
Platform
Visualizer (Apple-iOS :
Native)
Appearance
© 2014 by Kony, Inc. All rights reserved 146 of 621
Android
Platform iOS
SPA
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 147 of 621
Kony Visualizer User Guide
Version 2.2
5.11 ComboBox
A ComboBox is a widget that allows you to select a single item from a list.
If you select the drop-down arrow on a ComboBox, a list containing a list of items (values) appears.
When you select an item from the list, the selected item appears on the ComboBox.
A ComboBox is similar to a
ListBox . However, unlike the ListBox, you can only select a single item at a
time.
Note: A ComboBox widget is available only for a Flex Form.
5.11.1 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 148 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a ComboBox widget, refer section:
5.11.2 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
© 2014 by Kony, Inc. All rights reserved 149 of 621
Kony Visualizer User Guide
Version 2.2
For a ComboBox widget, you can apply a skin for the following states:
Skin
Normal
Definition
Specifies the default skin of a widget.
Focus Specifies the skin applied when the focus is on a widget.
Blocked
UI
Specifies the skin applied to block the interface until the action in progress (for example, a service call) is completed.
Note:
Blocked UI skin is available only for the SPA platforms.
Hover
Skin
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note: Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.11.3 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 150 of 621
Kony Visualizer User Guide
Version 2.2
5.11.3.1 Master Data
Specifies the set of values that must be displayed for the user to make a selection from the available choices.
For specifying these values, click the Edit button against the Master Data to open the Master Data :
ComboBox dialog box.
Master Data contains the following columns: l
Key: It is the unique identifier of each Combo Box value.
l
Display Value: This value appears in the ComboBox widget on a form.
l
Select Key: Allows you to select an individual Combo Box value from the group.
If required, to add more combo box values to a widget, click Add. To delete a combo box row, click inside a cell, and then click Delete.
After providing the required details and click Apply to create master data.
© 2014 by Kony, Inc. All rights reserved 151 of 621
Kony Visualizer User Guide
Version 2.2
5.11.3.2 Drop Down Image
Specifies the image to be used for the drop-down box indicator. The image you specify is used to depict the drop-down box. If you do not specify an image, the drop-down box displays the default image (inverted triangle).
To provide a platform specific image, click the Edit button against the Drop Down Image to open dropDownImage dialog box.
Select the desired platform and click inside corresponding value field. From the Select Image dialog field, you can either, l
Select an available image.
l
Provide image URL.
5.11.3.3 Placeholder
Specifies the temporary or substitute text (a hint provided as a word or phrase) that must be displayed on the ComboBox until the actual selection is made.
Note:
This property is specific to the iOS and Windows platform.
© 2014 by Kony, Inc. All rights reserved 152 of 621
Kony Visualizer User Guide
Version 2.2
5.11.3.4 View Type
Specifies the view mode of the ComboBox.
To select a view type, click the Edit button against the View Type field to open the View Type dialog box.
Following are the options: l
List l
Table l
Toggle l
On-screen Wheel
For Toggle, you can further select one of the following View Styles:
© 2014 by Kony, Inc. All rights reserved 153 of 621
Kony Visualizer User Guide
Version 2.2
l
Plain l
Bordered l
Bar
Apart from the above options, you can also enable and provide Tint Color for this widget.
l
Enable Tint Color: To provide a tint color when the view type is Toggle, select True option.
l
Tint Color: This option is Enabled when Tint Color is set to true. For selecting a tint color, click the color picker to open the color selection dialog box, and then select a desired color.
Note: This property is specific to the iOS7 platform.
Click the Equal Segments check box to distribute the segments in equal proportions.
Note: This property is specific to the iOS platform.
5.11.3.5 Popup Title
Specifies the title text to be displayed for the ComboBox.
Note: This property is specific to the Android platform.
5.11.3.6 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
5.11.4 Actions
On this tab, you define the events that are executed when an action is run. On a ComboBox widget, you can run the following action:
© 2014 by Kony, Inc. All rights reserved 154 of 621
Kony Visualizer User Guide
Version 2.2
l onSelection: This action is triggered when you select or deselect any item in ComboBox.
For more information on using the above action, refer to section
.
5.11.5 Placement Inside a Widget
A ComboBox can be directly added inside the following widgets:
Widget
Flex Form
ComboBox placement inside a widget
Yes
VBox Form
FlexContainer
FlexScrollContainer
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
Yes
Yes
Yes
Yes
Yes
Horizontal Orientation - yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
© 2014 by Kony, Inc. All rights reserved 155 of 621
Kony Visualizer User Guide
Version 2.2
5.11.6 Widget Appearance on Platforms
The appearance of the ComboBox with the default properties on various platforms is as follows:
Platform
Visualizer (Android : Native)
Appearance
Android iOS
SPA
5.11.6.1 UI Behavior
When you click a ComboBox, the UI behavior is not the same on all the platforms.
The UI behavior of a ComboBox on various platforms is as follows:
© 2014 by Kony, Inc. All rights reserved 156 of 621
iOS
SPA
Platform
Android
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 157 of 621
Kony Visualizer User Guide
Version 2.2
5.12 DataGrid
DataGrid widget allows you to present a collection of data in rows and columns (tabular format).
DataGrid also supports common table formatting options, such as alternating the row background color, customizing the gridline, and ability to hide or show headers.
You can use a DataGrid widget to show a read-only view of a small amount of data in a tabular format.
5.12.1 Important Considerations
The following are important considerations for a DataGrid Widget.
l
To set the data, you must first specify the rows and columns using the
property.
l
If the DataGrid supports the
property, you must ensure that you have specified the
property. Else, you will not be able to distinguish multiple selections.
5.12.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 158 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a DataGrid widget, refer section:
.
5.12.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For a DataGrid widget, you can apply a skin for the following states:
© 2014 by Kony, Inc. All rights reserved 159 of 621
Kony Visualizer User Guide
Version 2.2
Skin
Header
Row
Row - Focus
Row - Alternate
Row - Focus
Hover Skin
Definition
Specifies the skin that is applied to the Header row.
Specifies the skin that must be applied when the row is not in focus.
Specifies the skin that must be applied when the row is in focus.
Specifies the skin that is applied to the alternative rows.
Specifies the skin that must be applied when the row is in focus.
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note:
Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.12.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
5.12.4.1 Data
Represents the data displayed in each cell of the data grid.
© 2014 by Kony, Inc. All rights reserved 160 of 621
Kony Visualizer User Guide
Version 2.2
To input the data, click the Edit button against the Data field. This results in opening the Master Data :
DataGrid.
Master Data consist of two tabs: l
Columns l
Rows
Columns
Provide details such as: l
ID: Specifies the unique identifier of a column.
l
Header: Specifies the Column header.
l
Column Type: Specifies the column to display either as text or image.
o
Text o
Image l
Width (%): Specify the width of each column in percentage.
l
Sort: Specifies if sorting is allowed for the column.
© 2014 by Kony, Inc. All rights reserved 161 of 621
Kony Visualizer User Guide
Version 2.2
l
Alignment: Specifies the alignment of the content in each column. Following alignment options are available: o
Top-Left o
Top-Center o
Top-Right o
Middle-Left o
Center o
Middle-Right o
Bottom-Left o
Bottom-Center o
Bottom-Right l
OnClick: Specifies the action that takes place when you click on the header of a column. To specify an OnClick action for a column, click the ellipses button (...).
Rows
© 2014 by Kony, Inc. All rights reserved 162 of 621
Kony Visualizer User Guide
Version 2.2
All the fields in the Rows tab are based on the inputs that you have provided in the Columns tab and include: l
Column Headers: The Header specified in the Columns tab appears here.
l
Table cells having Column Type as Text, behave as text fields. You can type the text within these cells.
l
Table cells having Column Type as Image, behave as image fields. You can choose an image to be displayed in these cells. Click the ellipses button (...) in the image field to open Select
Image dialog box. From the list, select an image or provide the URL of the image and click OK.
The selected image appears in the cell.
l
Based on the Alignment, the text or the image are aligned within the cells.
5.12.4.2 Multi-Select
When this property is enabled, you can choose multiple rows of DataGird.
skin is applied to those selected rows.
5.12.4.3 Column Headers
This property controls the visibility of the column headers of the DataGrid.
5.12.4.4 Grid Line Color
Specifies the color of the grid line.
Note:
This property is specific to the Android platform.
5.12.4.5 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note:
This property is specific to the Windows Tablet platform.
© 2014 by Kony, Inc. All rights reserved 163 of 621
Kony Visualizer User Guide
Version 2.2
5.12.5 Actions
On this tab, you define the events that are executed when an action is run. On a DataGrid widget, you can run the following action: l onRowSelected: This action is invoked a when a row is selected.
For more information on using the above action, refer to section
.
5.12.6 Placement Inside a Widget
A DataGrid can be directly added inside the following widgets:
Widget
Flex Form
DataGrid placement inside a widget
Yes
VBox Form
FlexContainer
FlexScrollContainer
HBox
VBox
ScrollBox
Tab
Segment
Popup
Yes
No
Yes
Yes
Yes
Yes
Yes
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
© 2014 by Kony, Inc. All rights reserved 164 of 621
Kony Visualizer User Guide
Version 2.2
Widget
Template
DataGrid placement inside a widget
Header- No
Footer- No
5.12.7 Widget Appearance on Platforms
The following is the appearance of the DataGrid widget on various platforms with a specified Master
Data, Header skin, and row skin:
Platform
Android
Appearance iOS
© 2014 by Kony, Inc. All rights reserved 165 of 621
Platform
SPA
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 166 of 621
Kony Visualizer User Guide
Version 2.2
5.13 Image2
Image widget is a non-interactive widget that you can use to display a graphic (local or remote) from a
PNG file. You can use an Image widget in the following scenarios: l
Display your company's logo.
l
Display a snapshot.
l
Provide an illustration.
5.13.1 Important Considerations
The following are important considerations for an Image widget:
1. Before you can use an image in a project, you need to copy the image to an appropriate project subfolder. For more information, see
2. If a Kony Studio project that is utilizing images from a drawable folder is imported, during functional preview on an Android device, these images are ignored.
3. On App Canvas, the Crop property of an image does not reflect correctly. That is, when you trim an image using crop option, the complete image appears on App Canvas instead of cropped image. However, during functional preview, the cropped image appears correctly.
4. Following are the important consideration for the Image widget concerning its naming conventions: a. The file name must contain only lowercase characters.
b. The file name must start only with an alphabet.
c. The file name can contain numbers.
d. Do not use any reserved words or keywords ( of JavaScript) as the file names for the images.
© 2014 by Kony, Inc. All rights reserved 167 of 621
Kony Visualizer User Guide
Version 2.2
e. Numerical characters.
The following table shows a few examples of valid and invalid file names for the images:
Valid File
Names myicon.png
Invalid File Names Remarks icon2.png
Myicon.png
Icon_2.png
accntsummary.png
aCCNT&summary.png
accountdetails.png
flightstatus123.png
Details.png
continue.png
The file name is invalid because it contains uppercase character.
The file name is invalid because it contains uppercase character and an underscore.
The file name is invalid because it contains uppercase characters and special character.
The file name is invalid because it contains uppercase character.
The file name contains a Java keyword.
5.13.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
© 2014 by Kony, Inc. All rights reserved 168 of 621
Kony Visualizer User Guide
Version 2.2
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
To specify the look properties of an Image2 widget, refer section:
5.13.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
© 2014 by Kony, Inc. All rights reserved 169 of 621
Kony Visualizer User Guide
Version 2.2
Note:
On the iOS and the Android platform, rounded border skins are not supported.
For the Image widget, you can apply a skin for the following states:
Skin
Normal
Hover Skin
Definition
Specifies the default skin of a widget.
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note: Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.13.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 170 of 621
Kony Visualizer User Guide
Version 2.2
5.13.4.1 Scale Mode
Specifies how the image's width and height are identified when those of the source image varies from the Image widget itself. Image Widget represents the underlying native widget which renders (and applies alignment to) the source image.
Default: Maintain Aspect Ratio
Following are the image scale options available: l
Fit To Dimensions l
Maintain Aspect Ration l
Crop
Note:
On App Canvas, Crop option is ignored. That is, when you crop an image, the size of the image that appears on App Canvas is same as the size of an image when you select Fit to Dimensions.
5.13.4.2 Reference Width
It is the reference image width in pixels. These are device independent Pixels specified against 163 dpi.
5.13.4.3 Reference Height
It is the reference image height in pixels. These are device independent Pixels specified against 163 dpi.
5.13.4.4 Source
Specifies the source of the image to be displayed. You can specify an image from the resources folder or specify a URL of the image.
To specify an image, click Edit button against Source field to open Src dialog box. You can either:
© 2014 by Kony, Inc. All rights reserved 171 of 621
Kony Visualizer User Guide
Version 2.2
l
Select an available image.
l
Provide image URL.
5.13.4.5 Downloading Image
Specifies the image to be displayed when the remote source is still being downloaded.
To specify an image, click Edit button against Downloading Image field to open Downloading Image dialog box. You can either: l
Select an available image.
l
Provide image URL.
5.13.4.6 Failed Image
Specifies the image to be displayed when the remote resource is not available.
To specify an image, click Edit button against Failed Image field to open Failed Image dialog box.
You can either: l
Select an available image.
l
Provide image URL.
5.13.4.7 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
5.13.5 Actions
On this tab, you define the events that are executed when an action is run. On an Image widget, you can run the following action:
© 2014 by Kony, Inc. All rights reserved 172 of 621
Kony Visualizer User Guide
Version 2.2
l onDownloadComplete: This action is triggered when the image download from the URL is complete.
For more information on using the above action, refer to section
.
5.13.6 Placement inside a Widget
An Image can be directly added inside the following widgets:
Widget
Flex Form
Image placement inside a widget
Yes
VBox Form
FlexContainer
FlexScrollContainer
HBox
VBox
Scroll Box
Tab
Segment
Popup
Template
Yes
Yes
Yes
Yes
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
Yes
Yes
Header- No
Footer- No
© 2014 by Kony, Inc. All rights reserved 173 of 621
Kony Visualizer User Guide
Version 2.2
5.14 Label
Label widget is used to display non-editable text on the Form and is non-interactive.
5.14.1 Important Considerations
The following is an important considerations for a Label widget.
l
If the text in the Label is occupying more space than the allocated height of the Label widget, the
Label is stretched vertically to accommodate the full text (infinite wrapping) and does not stretch in the horizontal direction.
5.14.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 174 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a Label widget, refer section:
.
© 2014 by Kony, Inc. All rights reserved 175 of 621
Kony Visualizer User Guide
Version 2.2
5.14.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the Label widget, you can apply a skin for the following states:
Skin
Normal
Hover Skin
Definition
Specifies the default skin of a widget.
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note: Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.14.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 176 of 621
Kony Visualizer User Guide
Version 2.2
5.14.4.1 Wrapping
When the content of the label reaches the boundaries, it starts wrapping. While wrapping, two strategies can be applied: l
Word Wrapping: Wrap or clip the string only at word boundaries.
l
Character Wrapping: Wrap or clip the string at the closest character boundary.
Following are the options: l
Word Wrap: Specifies if the complete word must be moved to the next line when you reach the right margin. This is the default wrapping property.
l
Char Wrap: Specifies if the characters in a word must be moved to the next line when you reach the right margin.
Note:
This property is specific to the iOS platform.
5.14.4.2 Text Copyable
You can choose whether to allow copying the Label widget's text, and paste this text into other widgets such as TextBox2 and TextArea2.
Note:
This property is specific to the iOS platform,
5.14.4.3 Pasteboard Type
This property enables an application to share data within the application or between the applications.
Another object in the same or a different application then reads that data from the pasteboard and presents it to you in a new location, usually during a paste operation.
Note: The destination text box and the source text box must have the same pasteboard type. For example, if you set the pasteboard type as App Level Persistent, you can paste the text only to another textbox whose pasteboard type is also set to App Level Persistent .
© 2014 by Kony, Inc. All rights reserved 177 of 621
Kony Visualizer User Guide
Version 2.2
The different pasteboard types are: l
Default: If you choose this option, the value selected in the application properties is applied.
l
System Level: This is the default selection and if this option is unchanged, the text copied from a Label can be pasted across different applications on the device. Even if you exit the source application, the copied text persists in the memory and can be pasted across applications or within the same application.
l
App Level Persistent: If you select this option , the text copied from a Label can be pasted in
TextArea or TextBox (with the pasteboard type set as App Level Persistent) within the same application. Even if you close the application, the copied text persists in the memory and can be copied to another TextArea whose pasteboard type is App Level Persistent, when you restart that application.
l
App Level Non-Persistent: If you select this option, the text copied from a Label can be pasted in
TextArea or TextBox within the same application. This text is not retained in the memory when you close the application.
Note: This property is specific to the iOS platform.
5.14.4.4 Text Copyable
You can choose whether to allow copying the Label widget's text, and paste this text into other widgets such as TextBox2 and TextArea2.
5.14.4.5 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
5.14.5 Placement Inside a Widget
A label can be directly added inside the following widgets:
© 2014 by Kony, Inc. All rights reserved 178 of 621
Widget
Flex Form
Label placement inside a widget
Yes
VBox Form
FlexContainer
FlexScrollContainer
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
Yes
Yes
Yes
Yes
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
Yes
Yes
Header- No
Footer- No
5.14.6 Widget Appearance on Platforms
The appearance of the Label widget on various platforms is as follows:
Platform
Android
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 179 of 621
Platform iOS
SPA
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 180 of 621
Kony Visualizer User Guide
Version 2.2
5.15 Line
The Line widget allows you to draw a horizontal or a vertical line on a Form. It is used as a separator between widgets for a better visual experience.
5.15.0.1 Important Considerations
The following is an important considerations for a Line Widget.
l
A Line widget is available only for a Flex Form.
l
A Line widgets orientation depends on its parent widget. If a Line widget is placed inside an
HBox, its orientation is vertical and if placed inside a VBox or a form, its orientation is horizontal.
5.15.0.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 181 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a Line widget, refer section:
.
5.15.0.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the Label widget, you can apply a skin for the following states:
Skin Definition
Normal Specifies the default skin of a widget.
Refer to section
to know more about adding a skin to a widget.
5.15.0.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 182 of 621
Kony Visualizer User Guide
Version 2.2
Thickness
Specifies the thickness of the widget in pixels. The pixel values are scaled to density specific pixels by the respective platforms.
Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
5.15.0.5 Placement Inside a Widget
A line can be directly added inside the following widgets:
Widget
Form
HBox
VBox
ScrollBox
Tab
Segment
Line placement inside a widget
Yes
Yes
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
Yes
© 2014 by Kony, Inc. All rights reserved 183 of 621
Widget
Popup
Template
Line placement inside a widget
Yes
Header- No
Footer- No
5.15.0.6 Widget Appearance on Platforms
The appearance of the Line widget on various platforms is as follows:
Platform
Android
Appearance
Kony Visualizer User Guide
Version 2.2
iOS
© 2014 by Kony, Inc. All rights reserved 184 of 621
Kony Visualizer User Guide
Version 2.2
5.16 Link
Link widget allows you to define a hyperlink that you can interact with (select and click) and navigate to an external location or a location within the application.
5.16.1 Important Considerations
The following are important considerations for a Link Widget.
l
A Link widget is available only for a Flex Form.
l
If you do not specify a skin, the default skin is applied to the link (link appears in blue font and is underlined).
l
If you do not specify a Focus, the default focus skin is applied to the link (link appears in black font and is underlined).
l
If you specify a skin or Focus without an underline, when rendered, the link will appear without an underline on the platform.
l
For Server side Mobile Web (basic), font styles are not supported.
5.16.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 185 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a Link widget, refer section:
.
© 2014 by Kony, Inc. All rights reserved 186 of 621
Kony Visualizer User Guide
Version 2.2
5.16.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the Link widget, you can apply a skin for the following states:
Skin
Normal
Focus
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
Blocked
UI
Specifies the skin applied to block the interface until the action in progress (for example, a service call) is completed.
Note: Blocked UI skin is available only for the SPA platforms.
Hover
Skin
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note: Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.16.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 187 of 621
Kony Visualizer User Guide
Version 2.2
5.16.4.1 Progress Indicator
Specifies if the progress indicator must be displayed when the link is clicked.
l
Click On to enable progress indicator.
l
Click Off to disable progress indicator. (default)
Note: This property is specific to the iOS platform.
5.16.4.2 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
5.16.5 Actions
On this tab, you define the events that are executed when an action is run. On a Link widget, you can run the following actions: l onClick: This action is invoked by the platform when the user performs a click action on the link.
For more information on using the above action, refer to section
.
5.16.6 Placement Inside a Widget
A link can be directly added inside the following widgets:
Widget
Form
Link placement inside a widget
Yes
© 2014 by Kony, Inc. All rights reserved 188 of 621
Widget
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
Link placement inside a widget
Yes
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
Yes
Yes
Header- No
Footer- No
5.16.7 Widget Appearance on Platforms
The following is the appearance of a Link widget on various platforms:
Appearance Platform
Android iPhone
Windows Phone
SPA
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 189 of 621
Kony Visualizer User Guide
Version 2.2
5.17 ListBox
List Box displays a list of items as a drop-down box and allows you to select a single item at a time.
5.17.1 Important Considerations
The following are important considerations for a ListBox Widget.
l
Shows dynamic set of data in a fixed space.
l
The master data of choices should be limited and fetched in a separate service call.
l
On an Android device, the text on a ListBox widget appears left aligned, even when you select center or right alignment options.
5.17.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 190 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a ListBox widget, refer section:
© 2014 by Kony, Inc. All rights reserved 191 of 621
Kony Visualizer User Guide
Version 2.2
5.17.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the ListBox widget, you can apply a skin for the following states:
Skin
Normal
Focus
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
Native
Field
Specifies the skin that is applied to each item in the native popup that appears when you click on the ListBox.
Native
Field Focus
Specifies the skin that is applied to a focused item in the native popup that appears when you click on the ListBox.
Blocked UI Specifies the skin applied to block the interface until the action in progress (for example, a service call) is completed.
Note: Blocked UI skin is available only for the SPA platforms.
Placeholder This property reads the font color set in the skin and ignores the other attributes. Android does not support setting a background color for a placeholder.
Hover Skin Specifies the look and feel of a widget when the cursor hovers on the widget.
Note: Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.17.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 192 of 621
Kony Visualizer User Guide
Version 2.2
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
5.17.4.1 Master Data
Specifies the set of values that must be displayed for the user to make a selection from the available choices.
For specifying these set of values, click the Edit button against the Master Data to open the Master
Data : ListBox dialog box.
© 2014 by Kony, Inc. All rights reserved 193 of 621
Kony Visualizer User Guide
Version 2.2
Master Data contains the following columns: l
Key: It is the unique identifier of each List Box value.
l
Display Value: This value appears in the ListBox widget on a form.
l
Select Key : Allows you to select an individual List Box value from the group.
If required, to add more List box values to a widget, click Add. To delete a List box row, click inside a cell, and then click Delete.
After providing the required details and click Apply to create master data.
5.17.4.2 View Type
Specifies the view mode of the ListBox.
To select a view type, click the Edit button against the View Type field to open the View Type dialog box.
© 2014 by Kony, Inc. All rights reserved 194 of 621
Kony Visualizer User Guide
Version 2.2
View Type - iOS
Following are the options available for iOS platform: l
List l
Table l
Toggle l
On-screen Wheel
For Toggle, you can further select one of the following View Styles: l
Plain l
Bordered l
Bar
Apart from the above options, you can also enable and provide Tint Color for this widget.
© 2014 by Kony, Inc. All rights reserved 195 of 621
Kony Visualizer User Guide
Version 2.2
l
Enable Tint Color: To provide a tint color when the view type is Toggle, select True option.
l
Tint Color: This option is Enabled when Tint Color is set to true. For selecting a tint color, click the color picker to open the color selection dialog box and then Select a desire color.
Note: This property is specific to the iOS7 platform.
Click the Equal Segments check box to distribute the segments in equal proportions.
View Type - Android
Following are the options available for Android platform: l
List l
Spinner
5.17.4.3 Drop Down Image
Specifies the image to be used for the drop-down box indicator (inverted triangle by default). The image you specify is used to depict the drop-down box. If you do not specify an image, the drop-down box displays the default image (inverted triangle).
For specifying a default image or a platform specific image, click the Edit button against the Drop
Down Image to open dropDownImage dialog box.
© 2014 by Kony, Inc. All rights reserved 196 of 621
Kony Visualizer User Guide
Version 2.2
Select the desired platform and click inside corresponding value field. From the Select Image dialog field, you can either, l
Select an available image.
l
Provide image URL.
5.17.4.4 Selected Image
Specifies the image to be displayed when you make a selection.
Note: If you specify a Selected Image, ensure that you also specify an Unselected Image. If not specified, the behavior will be undefined
For specifying a default image or a platform specific image, click the Edit button against the Selected
Image to open tickedImage dialog box.
© 2014 by Kony, Inc. All rights reserved 197 of 621
Kony Visualizer User Guide
Version 2.2
Select the desired platform and click inside corresponding value field. From the Select Image dialog field, you can either, l
Select an available image.
l
Provide image URL.
5.17.4.5 unselected Image
Specifies the image to be displayed when a selection is cleared.
Note: If you specify a Selected Image, ensure that you also specify an Unselected Image. If not specified, the behavior will be undefined
For specifying a default image or a platform specific image, click the Edit button against the unselected Image to open tickedImage dialog box.
© 2014 by Kony, Inc. All rights reserved 198 of 621
Kony Visualizer User Guide
Version 2.2
Select the desired platform and click inside corresponding value field. From the Select Image dialog field, you can either, l
Select an available image.
l
Provide image URL.
5.17.4.6 Place Holder
Specifies the temporary or substitute text (a hint provided as a word or phrase) that must be displayed on the ComboBox until the actual selection is made.
Note: This property is specific to the iOS platform.
5.17.4.7 Popup Icon
Specifies the icon that appears in the title area of the popup (on the top left side of the popup).
© 2014 by Kony, Inc. All rights reserved 199 of 621
Kony Visualizer User Guide
Version 2.2
For the popup icon to appear, click the Edit button against the Popup Icon field to open the popupIcon dialog box.
Select an image to be displayed as the popup icon and click OK.
Note: This property is specific to the Android platform.
5.17.4.8 Popup Title
Specifies the title text to be displayed for the ListBox.
Note: This property is specific to the Android platform.
5.17.4.9 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
5.17.5 Actions
On this tab, you define the events that are executed when an action is run. On a ListBox widget, you can run the following action:
© 2014 by Kony, Inc. All rights reserved 200 of 621
Kony Visualizer User Guide
Version 2.2
l onSelection: This action is invoked by the platform when an item is selected.
For more information on using the above action, refer to section
.
5.17.6 Placement Inside a Widget
A ListBox can be directly added inside the following widgets:
Widget
Flex Form
ListBox placement inside a widget
Yes
VBox Form
FlexContainer
FlexScrollContainer
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
Yes
Yes
Yes
Yes
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
© 2014 by Kony, Inc. All rights reserved 201 of 621
Kony Visualizer User Guide
Version 2.2
5.17.7 Widget Appearance on Platforms
The appearance of the widget with the default properties (with and without skin) on various platforms is as follows:
Platform
Android
Without Skin With Skin iOS
SPA
© 2014 by Kony, Inc. All rights reserved 202 of 621
Kony Visualizer User Guide
Version 2.2
5.18 RadioButtonGroup
RadioButtonGroup is a widget that allows you to define a set of radio buttons and the user can choose one of it as an option.
5.18.1 Important Considerations
The following are important considerations for a RadioButtonGroup Widget.
5.18.1.1 All Platforms l
RadioButtonGroup widget is always a group widget.
l
Limit the number of choices in the widget. If you need to display several choices, consider using a
widget.
5.18.1.2 Android l
If you set the
to horizontal, we suggest that you do not place more than two items in the group, as there is a platform limitation.
l
If you place more than two items and the associated text with the items is large, there is a possibility that the additional items will not fit in the screen width and will not be visible on the screen.
5.18.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
© 2014 by Kony, Inc. All rights reserved 203 of 621
Kony Visualizer User Guide
Version 2.2
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
To specify the look properties of a RadioButtonGroup widget, refer section:
© 2014 by Kony, Inc. All rights reserved 204 of 621
Kony Visualizer User Guide
Version 2.2
5.18.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the RadioButtonGroup widget, you can apply a skin for the following states:
Skin
Normal
Focus
Hover Skin
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note:
Hover Skin is available only on the Windows (native) Tablet devices.
Refer to section
to know more about adding a skin to a widget.
5.18.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 205 of 621
Kony Visualizer User Guide
Version 2.2
5.18.4.1 Master Data
Specifies the set of values that must be displayed for the user to make a selection from the available choices.
For specifying the values, click the Edit button against the Master Data field to open the Master Data:
RadioButtonGroup dialog box.
Master Data contains the following columns: l
Key: It is the unique identifier of each RadioButton value.
l
Display Value: This value appears in the RadioButton group widget on a form.
l
Select Key : Allows you to select an individual RadioButton value from the group.
If required, to add more RadioButton values to a widget, click Add. To delete a RadioButton row, click inside a cell, and then click Delete.
After providing the required details and click Apply to create master data.
5.18.4.2 Selected Image
Specifies the image to be displayed when you make a selection.
© 2014 by Kony, Inc. All rights reserved 206 of 621
Kony Visualizer User Guide
Version 2.2
Note:
If you specify a Selected Image, ensure that you also specify an Unselected Image. If not specified, the behavior will be undefined
For specifying a default image or a platform specific image, click the Edit button against the Selected
Image to open tickedImage dialog box.
To provide a platform specific drop-down image, select the desired platform and click inside corresponding value field. From the Select Image dialog field, you can either, l
Select an available image.
l
Provide image URL.
5.18.4.3 Unselected Image
Specifies the image to be displayed when a selection is cleared.
© 2014 by Kony, Inc. All rights reserved 207 of 621
Kony Visualizer User Guide
Version 2.2
Select the desired platform and click inside corresponding value field. From the Select Image dialog field, you can either, l
Select an available image.
l
Provide image URL.
5.18.4.4 Orientation
Specifies the type of alignment of the items within the widget.
Default: Vertical
Following orientations are available: l
Vertical l
Horizontal
5.18.4.5 View Type
Specifies the view type of the RadioButtonGroup.
Default: List
© 2014 by Kony, Inc. All rights reserved 208 of 621
Kony Visualizer User Guide
Version 2.2
Following are the options: l
List l
Table l
Toggle l
On-Screen Wheel
Note: When you select the On-Screen Wheel view type, you cannot view the on screen wheel on App canvas. However, the On-Screen Wheel option works as expected on a device.
For Toggle, you can further select one of the following View Styles: l
Plain l
Bordered l
Bar
Apart from the above options, you can also enable and provide Tint Color for this widget.
l
Enable Tint Color: To provide a tint color when the view type is Toggle, select True option.
l
Tint Color: This option is Enabled when Tint Color is set to true. For selecting a tint color, click the color picker to open the color selection dialog box and then Select a desire color.
Click the Equal Segments check box to distribute the segments in equal proportions.
Note: This property is specific to the iOS platform.
Drop Down Image
Specifies the image to be used for the drop-down box indicator. The image you specify is used to depict the drop-down box. If you do not specify an image, the drop-down box displays the default image (inverted triangle).
© 2014 by Kony, Inc. All rights reserved 209 of 621
Kony Visualizer User Guide
Version 2.2
This option is available only when View Type selected in List.
To provide a platform specific image, click the Edit button against the Drop Down Image to open Drop
Down Image dialog box.
From the Drop Down Image dialog box, select an image and click OK.
Note: On an iOS device, the following limitation is observed on a RadioButtonGroup widget:
When you select View Type as either Table (with Group Cells enabled) or On-Screen Wheel, only
Single Color background skin is supported.
5.18.4.6 Group Cells
Specifies if the group cells style must be applied. This property is available only when the View Type selected is Table. When applied, the items in the check box are grouped and they are indicated with a round corner rectangle box.
This option is available only when View Type selected in Table.
Default: Cells are not groped.
l
If selected, the group cells style is applied.
l
If unselected, the group cells style is not applied.
5.18.4.7 View Style
This property is available only when View Type is Toggle.
Following are the options: l
Plain l
Bordered l
Bar
© 2014 by Kony, Inc. All rights reserved 210 of 621
Kony Visualizer User Guide
Version 2.2
5.18.4.8 Equal Segments
This option is only available when
is Toggle.
l
Click On to distribute the segments in equal proportions.
l
Click Off if you do not want to distribute the segments in equal proportions.
5.18.4.9 Tint Color
This option is only available when
is Toggle.
l
Click On to provide a tint color.
l
Click Off if you do not want to provide a tint color.
Note: This property is specific to the iOS7 platform.
5.18.4.10 Tint Color
This option is enabled when Tint Color is set to true. For selecting a tint color, click the color picker to open the color selection dialog box and then Select a desire color.
Note: This property is specific to the iOS7 platform.
5.18.4.11 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
5.18.5 Actions
On this tab, you define the events that are executed when an action is run. On a RadioButtonGroup widget, you can run the following action:
© 2014 by Kony, Inc. All rights reserved 211 of 621
Kony Visualizer User Guide
Version 2.2
l onSelection: This action is invoked by the platform when an item is selected.
For more information on using the above action, refer to section
.
5.18.6 Placement inside a Widget
A RadioButtonGroup can be directly added inside the following widgets:
Widget
Flex Form
RadioButtonGroup placement inside a widget
Yes
VBox Form
FlexContainer
FlexScrollContainer
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
Yes
Yes
Yes
Yes
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
© 2014 by Kony, Inc. All rights reserved 212 of 621
Kony Visualizer User Guide
Version 2.2
5.18.7 Widget Appearance on Platforms
The appearance of the RadioButtonGroup widget on various platforms is as follows:
Platform
Android
Appearance iOS
© 2014 by Kony, Inc. All rights reserved 213 of 621
Platform
SPA
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 214 of 621
Kony Visualizer User Guide
Version 2.2
5.19 RichText
RichText widget is used to display non-editable and well formatted text on the Form. HTML formatting tags are used in RichText widget to display text with styles (bold, underlined etc.), links, and images.
5.19.1 Important Considerations
The following is an important considerations for a RichText widget.
l
If you specify a skin for the RichText widget, all the font level settings (color style, or size etc.) is applied to the complete content in RichText widget. You can use the label style HTML formatting tag to override the text color specified at the skin level.
5.19.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 215 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a RichText widget, refer section:
.
© 2014 by Kony, Inc. All rights reserved 216 of 621
Kony Visualizer User Guide
Version 2.2
5.19.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the RichText widget, you can apply a skin for the following states:
Skin
Normal
Link
Link Focus
Telephone Link
Definition
Specifies the default skin of a widget.
Specifies the skin is applied to the link in the RichText widget.
Specifies the skin is applied to the link when focused.
Specifies the skin to be applied to the telephone links in the RichText widget.
Hover
Super Script
Note: Telephone Link is available only on the Windows platform.
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note:
Hover Skin is available only on the Windows (native) Tablet platform.
Specifies the skin to be applied to superscripts in the RichText widget.
Note: Super Script Skins is available only on the Windows platform.
Refer to section
to know more about adding a skin to a widget.
5.19.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 217 of 621
Kony Visualizer User Guide
Version 2.2
5.19.4.1 Rich Text Wrapping
When the content of the RichText reaches the boundaries, it starts wrapping. There are two wrapping options available: l
Word Wrap: Specifies if the complete word must be moved to the next line when you reach the right margin. This is the default wrapping property.
l
Character Wrap: Specifies if the characters in a word must be moved to the next line when you reach the right margin.
Note:
This property is specific to the iOS platform.
5.19.4.2 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note:
This property is specific to the Windows Tablet platform.
5.19.5 Actions
On this tab, you define the events that are executed when an action is run. On a RichText widget, you can run the following actions:
Rich Text widget has the following action associated with it: l onClick: This action is invoked by the platform when the user performs a click action on the
RichText.
© 2014 by Kony, Inc. All rights reserved 218 of 621
Kony Visualizer User Guide
Version 2.2
For more information on using the above action, refer to section
.
5.19.6 Placement Inside a Widget
A RichText can be directly added inside the following widgets:
Widget
Flex Form
VBox Form
RichText placement inside a widget
Yes
Yes
FlexContainer
FlexScrollContainer
Yes
Yes
HBox
VBox
ScrollBox
Yes
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Tab
Segment
Popup
Template
Yes
Yes
Yes
Header- No
Footer- No
5.19.7 Widget Appearance on Platforms
The appearance of the Rich Text widget on various platforms is as follows:
© 2014 by Kony, Inc. All rights reserved 219 of 621
Android
Platform iOS
SPA
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 220 of 621
Kony Visualizer User Guide
Version 2.2
5.20 Slider
Slider widget allows you to select a value from a defined range of values by moving the thumb (an indicator) in a horizontal direction. The Slider widget consists of a seekbar (or track) and a thumb (a control that you can slide). You can optionally choose to display a minimum value and a maximum value. When you drag the thumb along the slider, the value or process is updated continuously and appears on the track (you must define an event to achieve this behavior).
Note: The Slider widget is not supported in SPA platforms.
5.20.1 Important Considerations
The following are important considerations for an Slider Widget.
l
All platforms (except iPhone): The slider widget does not display the minimum and maximum values unless the
and
are specified.
l iPhone: You cannot display the minimum and maximum values. You can use the
and the
to indicate the values.
5.20.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 221 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of an Slider widget, refer section:
5.20.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the Slider widget, you can apply a skin for the following states:
Skin
Left
Definition
Specifies the skin that is applied to the background of the slider on left side of the thumb image.
Right Specifies the skin that is applied to the background of the slider on right side of the thumb image.
Min Label Specifies the skin that is applied to the min property of the slider.
Max Label Specifies the skin that is applied to the max property of the slider.
Refer to section
to know more about adding a skin to a widget.
© 2014 by Kony, Inc. All rights reserved 222 of 621
Kony Visualizer User Guide
Version 2.2
5.20.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
5.20.4.1 Min Value
Specifies the minimum value on the Slider that you can select.
Default: 0
© 2014 by Kony, Inc. All rights reserved 223 of 621
Kony Visualizer User Guide
Version 2.2
You can set any number (the number can be up to 4 bytes (positive or negative)) as the minimum value.
5.20.4.2 Max Value
Specifies the maximum value on the slider that you can select.
Default: 100
You can set any number (the number can be up to 4 bytes (positive or negative)) as the maximum value.
5.20.4.3 Step
Specifies the value by which the slider value is increased or decreased between the allowed slider values.
Default: 1 you can specify a value which is in between the difference of the maximum and minimum values of the slider.
For example, if you set the minimum value to 40 and the maximum value to 45, the step value can be a number between 1 and 5.
5.20.4.4 Selected Value
Specifies the value that must be displayed as selected when rendered. If you specify the default selected value, the thumb shows the specified value as the selected value when rendered.
Default: 40
You must be aware of the following scenarios for the slider:
Scenario1: Below is the calculation, if default value is not specified:
Default value = minimum value + (maximum value - minimum value)/2
© 2014 by Kony, Inc. All rights reserved 224 of 621
Kony Visualizer User Guide
Version 2.2
The default value is the minimum value plus half the difference between the minimum and the maximum value.
For example, if the minimum value is 0 and the maximum value is 100, the default value is 50.
Scenario2: Below is the calculation, if default value is specified:
If you specify a default value which is lesser than the minimum value, the minimum value is taken as the default value.
If you specify a default value which is greater than the maximum value, the maximum value is taken as the default value
5.20.4.5 Thumb Image
Specifies the image to indicate the thumb.
To provide a default or platform specific thumb image, click the Edit button against the Thumb Image to open thumbImage dialog box.
© 2014 by Kony, Inc. All rights reserved 225 of 621
Kony Visualizer User Guide
Version 2.2
System provides a default image for each of the platforms.
To provide a platform specific image or to replace the default image, select the desired platform and click inside the corresponding value field. This results in opening the Select Image dialog box. From here, you can either: l
Select an available image.
l
Provide image URL.
5.20.4.6 Thumb Image Focus
Specifies the image to indicate that there is focus on the thumb.
To provide a default or a platform specific thumb image, click the Edit button against the Focus Thumb
Image to open focusThumbImage dialog box.
© 2014 by Kony, Inc. All rights reserved 226 of 621
Kony Visualizer User Guide
Version 2.2
To provide a platform specific image or to replace the default image, select the desired platform and click inside the corresponding value field. This results in opening the Select Image dialog box. You can either: l
Select an available image.
l
Provide image URL.
5.20.4.7 Thickness
Specifies the thickness of the seekbar.
Default: 15
5.20.4.8 Min Label
Specifies the text or number to be displayed for the minimum value of the slider. This text appears just below the slider on the left.
In the Min Label text field, type the name to be used as minimum Label. This text become default for all the platforms.
For providing platform specific label, click the Edit button against the Min Label to open the minLabel dialog box.
© 2014 by Kony, Inc. All rights reserved 227 of 621
Kony Visualizer User Guide
Version 2.2
Select a platform and then type a desired name inside the corresponding value field. This becomes the Min Label for that particular platform.
5.20.4.9 Max Label
Specifies the text or number to be displayed for the maximum value of the slider. This text appears just below the slider on the right.
In the Max Label text field, type the name to be used as maximum label. This text become default for all the platforms.
For providing platform specific label, click the Edit button against the Max Label to open the maxLabel dialog box.
© 2014 by Kony, Inc. All rights reserved 228 of 621
Kony Visualizer User Guide
Version 2.2
Select a platform and then type a desired name inside the corresponding value field. This becomes the Max Label for that particular platform.
5.20.4.10 Min Value Image
Specifies the image for the minimum value of the slider.
Click the Edit button against the Min Value Image to open the minValueImage dialog box. You can either: l
Select a available image.
l
Provide image URL.
© 2014 by Kony, Inc. All rights reserved 229 of 621
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the iOS platform.
5.20.4.11 Max Value Image
Specifies the image for the maximum value of the slider.
Click the Edit button against the Max Value Image to open the maxValueImage dialog box. You can either: l
Select a available image.
l
Provide image URL.
Note: This property is specific to the iOS platform.
5.20.4.12 Enable Thumb Tint Color
Specifies whether a color should be specified for the Slider widget thumb.
Note: This property is specific to the iOS7 platform.
5.20.4.13 Thumb Tint Color
This option is Enabled when Enable Thumb Tint Color is set to true. For selecting a tint color, click the color picker to open the color selection dialog box and then Select a desire color.
Note: This property is specific to the iOS7 platform.
© 2014 by Kony, Inc. All rights reserved 230 of 621
Kony Visualizer User Guide
Version 2.2
5.20.5 Actions
On this tab, you define the events that are executed when an action is run. On an Slider widget, you can run the following actions:
Slider widget has the following actions associated with it: l onSlide: This action is invoked by the platform when there is a change in the default selected value.
o
For touch based devices, this action is triggered when you stop sliding the thumb icon.
o
For non touch based devices, this action is triggered when the left or right key is released.
l onSelection: This action is invoked by the platform when the user makes a selection.
o
For touch devices, this action is triggered when you stop sliding the thumb icon.
o
For non-touch devices, this action is triggered when the left or right key is released.
For more information on using the above actions, refer to section
.
5.20.6 Placement inside a Widget
A slider can be directly added inside the following widgets:
Widget
Flex Form
VBox Form
FlexContainer
FlexScrollContainer
HBox
Yes
Yes
Yes
Slider placement inside a widget
Yes
Yes
© 2014 by Kony, Inc. All rights reserved 231 of 621
Widget
VBox
ScrollBox
Tab
Segment
Popup
Template
Slider placement inside a widget
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
5.20.7 Widget Appearance on Platforms
The appearance of the Slider widget on various platforms is as follows:
Platform
Android
Appearance iPhone
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 232 of 621
Kony Visualizer User Guide
Version 2.2
5.21 TextArea2
TextArea is used to provide an editable field for the user to enter text which spans over multiple lines .
You can use the TextArea widget to provide a field where a user can enter multiple lines of text.
For example, in the Feedback section of an Application, you can place a TextArea widget and instruct the users to enter their comments.
5.21.1 Important Considerations
The following are important considerations for a TextArea Widget.
l
Editing on devices with small form factor takes place in a new screen.
l
Editing on devices with medium or large form factor takes place in the same screen.
l
In Mobile web, some browsers by default enable a scroll bar (vertical/horizontal) for the text area, even if the number of lines are less than
. The Mobile Web platform has no control on deciding whether the scroll bar should appear or not.
5.21.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 233 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a TextArea2 widget, refer section:
.
© 2014 by Kony, Inc. All rights reserved 234 of 621
Kony Visualizer User Guide
Version 2.2
5.21.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the TextArea widget, you can apply a skin for the following states:
Skin
Normal
Focus
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
Blocked UI Specifies the skin applied to block the interface until the action in progress (for example, a service call) is completed.
Note: Blocked UI skin is available only for the SPA platforms.
Placeholder Specifies the skin to be applied to the placeholder text in the TextArea widget. Only the font color skin attribute is applicable.
Hover Skin Specifies the look and feel of a widget when the cursor hovers on the widget.
Note: Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.21.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
© 2014 by Kony, Inc. All rights reserved 235 of 621
Kony Visualizer User Guide
Version 2.2
5.21.4.1 Max Characters
Specifies the maximum number of characters that the text field can accept.
If you specify a number for this property, the number of input characters cannot exceed the specified number.
5.21.4.2 Input Mode
Specifies the type of input characters that a user can enter into the TextArea2 widget. You can use this property to restrict the input characters to only numbers or a combination of alphabets, numbers, and special characters.
Following are the options:
© 2014 by Kony, Inc. All rights reserved 236 of 621
Kony Visualizer User Guide
Version 2.2
l
Any: Specifies that the input characters can be letters, numbers, special characters, or a combination of all three of them.
l
Numeric Only: Specifies that the input characters must be numbers only. This option is not supported on Server side Mobile Web platforms.
5.21.4.3 Key Board Style
When you interact with a TextBox widget, a keyboard appears. You can use this property to select the type of keyboard that you want to display.
The following are the available keyboard types : l
Decimal l
Number Pad l
Phone Pad l
Signed Decimal Number l
Signed Number
Note: This property is specific to the Android platform.
5.21.4.4 Placeholder
The placeholder attribute specifies a short hint that describes the expected value of an input field
(example, a sample value or a short description of the expected format). The hint appears in the input field when it is empty, and disappears when the field gets focus.
For example, for the Username field, you can enter the placeholder text as Enter User ID or Email
Address. The user then clicks on the TextArea2 widget and enters the Username.
© 2014 by Kony, Inc. All rights reserved 237 of 621
Kony Visualizer User Guide
Version 2.2
5.21.4.5 Auto Correct
This property determines whether auto-correction is enabled or disabled during typing. With autocorrection enabled, the text object tracks unknown words and suggests a more suitable replacement to the user.
l
If On is selected, the auto correction option is enabled.
l
If Off is selected, the auto correction option is not enabled.
You can choose to provide a platform specific Auto Correct property by clicking ellipsis (...) button next to the Auto Correct Off radio button.
In the AutoCorrect dialog box, select the platform and from the corresponding value field, select the check box to enable or disable auto correct property.
Note: You cannot execute this property on App Canvas.
Note: This property is specific to the iOS and the SPA platform.
5.21.4.6 Auto Capitalize
Specifies the character capitalization behavior.
Following are the options available: l
None: If you leave this option unchanged, no action takes place on the input string.
Example : This is sample text.
l
Words: This option changes the first character of all the words to uppercase. (Not supported on
Mobile Web)
Example : This Is Sample Text.
© 2014 by Kony, Inc. All rights reserved 238 of 621
Kony Visualizer User Guide
Version 2.2
l
Sentences: This option changes the first character of all the sentences to uppercase.
Example : This is sample text.
l
All: This option changes all the characters to uppercase. (Not supported on Mobile Web)
Example : THIS IS SAMPLE TEXT.
5.21.4.7 Visible Lines
Number of lines to be displayed at a given time in the device of the TextArea widget. This essentially decides the height of the text area.
Minimum number of lines displayed are three.
5.21.4.8 Pasteboard Type
This property enables an application to share data within the application or with another application using system-wide or application-specific paste boards.
Typically, an object in the application writes data to a pasteboard when the user requests a copy or cut operation on a selection in the user interface. Another object in the same or different application then reads that data from the pasteboard and presents it to the user at a new location; this usually happens when the user requests a paste operation.
Note: You can only paste the text to a textbox with the same pasteboard type as that of the source textbox. For example, if you set the Pasteboard type as App Level Persistent , you can paste the text only to another textbox whose pasteboard type is also set to App Level Persistent .
The different pasteboard types are as follows: l
None: If you select this option, the value selected in the application properties gets applied.
l
System Level l
App Level Persistent
© 2014 by Kony, Inc. All rights reserved 239 of 621
Kony Visualizer User Guide
Version 2.2
l
App Level Non-Persistent l
Default
Note: This property is specific to the iOS platform.
5.21.4.9 Close Button
Specifies if the Done button that appears in the keypad (opens when you select text box) must be visible or not.
l
If set to Off, the Done button is not visible on the textbox.
l
If set to On, the Done button is visible on the textbox.
The following image illustrates the Keypad when the property is set to true:
Note: This property is specific to the iOS platform.
© 2014 by Kony, Inc. All rights reserved 240 of 621
Kony Visualizer User Guide
Version 2.2
5.21.4.10 Close Button Text
Specifies the text to replace the "Done" button that appears on the Keypad (opens when you select a textbox). This property is available only when
is enabled.
Note: This property is specific to the iOS platform.
5.21.4.11 Progress Indicator
Specifies if there must be an indication to the user that the widget content is being loaded.
You can use this property typically for forms that require network calls during post show.
l
If set to Off, the progress indicator is not displayed.
l
If set to On, the progress indicator appears.
The following image illustrates the progress indicator on iPhone:
Note: This property is specific to the iOS platform.
5.21.4.12 Keyboard Action Label
This property specifies if the text is to be displayed in the action key of the keyboard.
Default: Done
The following are the options:
Done Go Search Next
Send Google Join Route
Yahoo Call
© 2014 by Kony, Inc. All rights reserved 241 of 621
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the iOS platform.
5.21.4.13 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
5.21.5 Actions
On this tab, you define the events that are executed when an action is run. On a TextArea2 widget, you can run the following actions: l onTextChange: This action is triggered when text in the TextArea widget changes. This event is not fired when the text is changed programmatically.
l onDone: This action is triggered when the user is done with entering text in TextArea widget and click or touch the Go or Enter option.
Note: In Windows (8 and 8.1) tablets, when you open a form, the top-most widget is selected automatically. If the top-most widget is a TextArea widget, clicking anywhere within the form will run onDone action of the TextArea.
For more information on using the above actions, refer to section
.
5.21.6 Placement Inside a Widget
A TextArea2 can be directly added inside the following widgets:
Widget
Flex Form
VBox Form
TextArea2 placement inside a widget
Yes
Yes
© 2014 by Kony, Inc. All rights reserved 242 of 621
Kony Visualizer User Guide
Version 2.2
Widget
FlexContainer
TextArea2 placement inside a widget
Yes
FlexScrollContainer
HBox
Yes
Yes
VBox
ScrollBox
Tab
Segment
Popup
Template
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
5.21.7 Widget Appearance on Platforms
The appearance of the TextArea widget with a specified text on various platforms is as follows:
Platform
Android
Appearance
© 2014 by Kony, Inc. All rights reserved 243 of 621
Platform iOS
Appearance
SPA
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 244 of 621
Kony Visualizer User Guide
Version 2.2
5.22 TextBox2
TextBox widget is an editable text component that can be placed on a Form and is used to obtain an input from a user. You can use the TextBox widget to provide a field where a user can enter input text.
For example, in the Login page of an Application, you can place two TextBox widgets for Login and
Password fields and instruct the users to enter their login credentials in those fields.
5.22.1 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 245 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a TextBox2 widget, refer section:
5.22.2 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
© 2014 by Kony, Inc. All rights reserved 246 of 621
Kony Visualizer User Guide
Version 2.2
For the TextBox widget, you can apply a skin for the following states:
Skin
Normal
Definition
Specifies the default skin of a widget.
Focus Specifies the skin applied when the focus is on a widget.
Blocked UI Specifies the skin applied to block the interface until the action in progress (for example, a service call) is completed.
Note:
Blocked UI skin is available only for the SPA platforms.
Placeholder Specifies the skin to be applied to the placeholder text in the TextArea widget. Only the font color skin attribute is applicable.
Hover Skin Specifies the look and feel of a widget when the cursor hovers on the widget.
Note: Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.22.3 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
© 2014 by Kony, Inc. All rights reserved 247 of 621
Kony Visualizer User Guide
Version 2.2
5.22.3.1 Mask Text
Specifies whether the text entered by the user will be secured using a mask character, such as asterisk or dot. This is typically set to true for a password field.
© 2014 by Kony, Inc. All rights reserved 248 of 621
Kony Visualizer User Guide
Version 2.2
Default: Off (Mask Text is disabled) l
If set to On, the text in the TextBox will be masked.
l
If set to Off, the text in the TextBox will not be masked.
5.22.3.2 Max Characters
Specifies the maximum number of characters that the text field can accept.
If you specify a number for this property, the number of input characters cannot exceed the specified number.
5.22.3.3 Input Mode
Specifies the type of input characters that a user can enter into the TextBox widget. You can use this property to restrict the input characters to only numbers or a combination of alphabets, numbers, and special characters.
Following are the options: l
Any: Specifies that the input characters can be letters, numbers, special characters, or a combination of all three of them.
l
Numeric: Specifies that the input characters must be numbers only. .
5.22.3.4 Height Mode
Specifies the widget height based on the selected option.
The following are the options: l
Intrinsic Content: This is default option for iPhone and SPA platform and is available on those platforms only.
l
Custom: This option is supported by all platforms and accepts height in percentage (%). The percentage is evaluated using the ContainerHeight.
The option selected here becomes the default Height Mode for all the platforms.
© 2014 by Kony, Inc. All rights reserved 249 of 621
Kony Visualizer User Guide
Version 2.2
To provide a platform specific or even a default value for the Height Mode, click the Ellipsis button (...) next to the Height Mode drop-down field to open the containerHeightMode dialog box.
From here, you can select the desired platform, and from the corresponding Value drop-down field, select a value.
5.22.3.5 Container Height
Specifies the height of the TextBox2 widget. The height is calculated based on the selected
option. This property is enabled when you set the
value as Custom.
Note:
This property is unavailable on Flex Forms.
5.22.3.6 Height Reference
The TextBox2 height percentage is calculated based on the option selected.
© 2014 by Kony, Inc. All rights reserved 250 of 621
Kony Visualizer User Guide
Version 2.2
l
Form Reference: The TextBox2 height percentage is calculated based on the height of the form excluding headers and footers. This option is not respected if TextBox2 is placed inside a popup or in templates.
l
Parent Width: This option is used if the TextBox2 is placed inside a popup or in templates. The width is calculated based on the width of the parent container.
Note: This property is unavailable on Flex Forms.
5.22.3.7 View Type
Specifies the appearance of the TextBox widget either as a Search box or as a text box.
You can select one of the following views: l
Default: This is the default selection. This view allows you to use the TextBox widget as a text field.
l
Search: This view allows you to use the TextBox widget as a Search field.
The View Type selected here becomes the default for all the platforms.
To provide a platform specific value or even a default value for the View Type, click the Ellipsis button
(...) next to the View Type drop-down field to open the View Type dialog box.
© 2014 by Kony, Inc. All rights reserved 251 of 621
Kony Visualizer User Guide
Version 2.2
From here, you can select a desired platform, and from the corresponding Value drop-down field, select a value.
5.22.3.8 Keyboard Style
When you interact with a TextBox widget, a keyboard appears. You can use this property to select the type of keyboard that you want to display.
The following are the available keyboard types when you select
as Any.
l
Default: Specifies the default keyboard in respective platforms l
Email: Specifies the keyboard to enter email address.
© 2014 by Kony, Inc. All rights reserved 252 of 621
Kony Visualizer User Guide
Version 2.2
l
URL: Specifies the keyboard to enter URL address.
l
Chat: Specifies the keyboard type which is helpful for chatting.
Note: This property is specific to the Android platform.
5.22.3.9 Placeholder
The placeholder attribute specifies a short hint that describes the expected value of an input field
(example, a sample value or a short description of the expected format). The hint appears in the input field when it is empty, and disappears when the field gets focus.
For example, for the Username field, you can enter the placeholder text as
Enter User ID or Email
Address. The user then clicks on the TextBox widget and enters the Username.
5.22.3.10 Auto Capitalize
Specifies the character capitalization behavior.
Following are the options available: l
None: If you leave this option unchanged, no action takes place on the input string.
Example : This is sample text.
l
Words: This option changes the first character of all the words to uppercase. (Not supported on
Mobile Web)
Example : This Is Sample Text.
l
Sentences: This option changes the first character of all the sentences to uppercase.
Example : This is sample text.
l
All: This option changes all the characters to uppercase. (Not supported on Mobile Web)
Example : THIS IS SAMPLE TEXT.
© 2014 by Kony, Inc. All rights reserved 253 of 621
Kony Visualizer User Guide
Version 2.2
5.22.3.11 Pasteboard Type
This property enables an application to share data within the application or with another application using system-wide or application-specific paste boards.
Typically, an object in the application writes data to a pasteboard when the user requests a copy or cut operation on a selection in the user interface. Another object in the same or different application then reads that data from the pasteboard and presents it to the user at a new location; this usually happens when the user requests a paste operation.
Note: You can only paste the text to a textbox with the same pasteboard type as that of the source textbox. For example, if you set the Pasteboard type as App Level Persistent , you can paste the text only to another textbox whose pasteboard type is also set to App Level Persistent .
The different pasteboard types are as follows: l
Default: If you select this option, the value selected in the application properties gets applied.
l
System Level l
App Level Non-Persistent l
None: If you select this option, if you want to disable the content to be copied from a TextBox.
Note: This property is specific to the iOS platform.
5.22.3.12 Close Button
Specifies if the "Done" button that appears in the keypad (opens when you select text box) must be visible or not.
l
If set to Off, the "Done" button is not visible on the textbox.
l
If set to On, the "Done" button is visible on the textbox.
The following image illustrates the Keypad when the property is set to true:
© 2014 by Kony, Inc. All rights reserved 254 of 621
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the iOS platform.
5.22.3.13 Close Button Text
Specifies the text to replace the "Done" button that appears in the Keypad (opens when you select a text box).This property is available only when
is enabled.
Note:
This property is specific to the iOS platform.
5.22.3.14 Clear Button
Specifies if a "Clear" button must be provided. You can use the "Clear" button to erase the text in the
TextBox widget.
l
If set to Off, the clear button is not provided to the textbox.
l
If set to On, the clear button is provided to the textbox
Note: This property is specific to the iOS platform.
© 2014 by Kony, Inc. All rights reserved 255 of 621
Kony Visualizer User Guide
Version 2.2
5.22.3.15 Progress Indicator
Specifies if there must be an indication to the user that the widget content is being loaded.
You can use this property typically for forms that require network calls during post show.
l
If set to Off, the progress indicator is not displayed.
l
If set to On, the progress indicator appears.
The following image illustrates the progress indicator on iPhone:
Note:
This property is specific to the iOS platform.
5.22.3.16 Keyboard Action Label
Specifies if the text to be displayed in action key of the keyboard.
Default: Done
© 2014 by Kony, Inc. All rights reserved 256 of 621
Kony Visualizer User Guide
Version 2.2
The following are the options: l
Done l
Go l
Search l
Next l
Send l
Google l
Join l
Route l
Yahoo l
Call
© 2014 by Kony, Inc. All rights reserved 257 of 621
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the iOS platform.
5.22.3.17 Left Image
Specifies the image that must be displayed on the left-hand side within a TextBox widget. For example, if you want a magnifying glass image to be displayed to indicate "Search" option, you can use this property to display the image.
For inserting a left view image, click the Edit button against the Left Image field to open the
LeftViewImage dialog box.
You can either: l
Select an available image.
l
Provide an image URL.
Note: This property is specific to the iOS platform.
5.22.3.18 Keyboard Action Label
Specifies if the text to be displayed in action key of the keyboard.
Default: Done
© 2014 by Kony, Inc. All rights reserved 258 of 621
Kony Visualizer User Guide
Version 2.2
The following are the options:
Done Go Search Next
Send Google Join Route
Yahoo Call
Note:
This property is specific to the Android platform.
5.22.3.19 Auto Filter
Specifies if the input characters you enter in the TextBox widget must be matched against the Filter
List and possible matches be displayed.
Default: Off ( indicating that the input characters are not matched against the filter list)
© 2014 by Kony, Inc. All rights reserved 259 of 621
Kony Visualizer User Guide
Version 2.2
If you want the input characters to be matched against the filter list and possible matches to be displayed, select the On Radio button.
Note: This property is specific to the Android platform.
5.22.3.20 Auto Complete
Enables users to quickly find and select from a pre-populated list of values as you type, leveraging searching and filtering.
l
If On is selected, the word suggestion is enabled.
l
If Off is selected, the word suggestion is not enabled.
Note: This property is specific to the SPA platform.
5.22.3.21 Auto Correct
This property determines whether auto-correction is enabled or disabled during typing. With autocorrection is enabled, the text object tracks unknown words and suggests a more suitable replacement to the user.
l
If On is selected, the auto correction option is enabled.
l
If Off is selected, the auto correction option is not enabled.
You can choose to provide a platform specific auto correct property by clicking ellipsis (...) button next to the Auto Correct Off radio button.
In the AutoCorrect dialog box, select the platform and from the corresponding value field, select the check box to enable or disable auto correction property.
Note: You cannot execute this property on App Canvas.
Note: This property is specific to the SPA platform.
© 2014 by Kony, Inc. All rights reserved 260 of 621
Kony Visualizer User Guide
Version 2.2
5.22.3.22 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
5.22.4 Actions
On this tab, you define the events that are executed when an action is run. On a TextBox2 widget, you can run the following actions: l onTextChange: This action is triggered when text in the TextBox widget changes. This event is not fired when the text is changed programmatically.
l onDone: This action is a callback that is invoked by the platform then the user performs a click action on the Go or Enter button.
l onBeginEditing: This action is invoked by the platform when the user clicks within the TextBox and is about to start editing.
l onEndEditing: This action that is invoked by the platform when the user performs one of the below actions: l
Click on any other focusable widget(for example, another TextBox) l
Click on the Done button on the Next Previous bar.
l
Click on the Done button on the keypad.
When you click on the Done button of the keypad the following events take place in a sequence: l onendediting
© 2014 by Kony, Inc. All rights reserved 261 of 621
l ondone
Kony Visualizer User Guide
Version 2.2
For more information on using the above actions, refer to section
.
5.22.5 Placement Inside a Widget
A TextBox2 can be directly added inside the following widgets:
Widget
Flex Form
VBox Form
TextBox2 placement inside a widget
Yes
Yes
© 2014 by Kony, Inc. All rights reserved 262 of 621
Kony Visualizer User Guide
Version 2.2
Widget
FlexContainer
TextBox2 placement inside a widget
Yes
FlexScrollContainer
HBox
Yes
Yes
VBox
ScrollBox
Tab
Segment
Popup
Template
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
5.22.6 Widget Appearance on Platforms
The appearance of the TextBox widget with the Text "Editable text component" on various platforms is as follows:
Platform
Android
Appearance
© 2014 by Kony, Inc. All rights reserved 263 of 621
Platform iOS
SPA
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 264 of 621
Kony Visualizer User Guide
Version 2.2
5.23 Browser
Use Browser widget to display HTML content of your application without navigating away from the application or opening the native browser. The HTML content can be either static or obtained from a
URL.
5.23.1 Important Considerations
The following are important considerations for a Browser widget: l
For iOS platform, when the Browser widget is set as non-screen level widget and you keep some widgets before browser and after browser then double scrolling issue will be seen which is native iOS issue. We recommend you to use browser widget as screen level widget and move other widgets to header or footer of the form.
l
The Browser widget, unlike other widgets, is considered to be "heavy" widget as far as memory and performance is considered.
l
The Browser widget uses a lot of initial RAM. The RAM usage grows in proportion to the number of images and static text rendered.
l
If there are multiple instances of the Browser widget in the same application, there may be issues related to sharing of information. For example, cookies etc.
l
You must not place multiple Browser widgets in a form. As a guideline, you must not have more than two Browser widgets in an application.
l
You must not use the Browser widget as a RichText widget. It should only be used to display large HTML content.
l
You must avoid using the Browser widget to create an application which looks and behaves like a mini web browser. Users normally expect to use the native browser to browse web content.
Hence, replicating this functionality within your application is not recommended.
© 2014 by Kony, Inc. All rights reserved 265 of 621
Kony Visualizer User Guide
Version 2.2
5.23.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
To specify the look properties of a Browser widget, refer section:
© 2014 by Kony, Inc. All rights reserved 266 of 621
Kony Visualizer User Guide
Version 2.2
5.23.3 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
5.23.3.1 Master Data
Click Edit button against Master Data to open the Master DataMaster Data dialog box. Here, you have the following options: l
Content: When you select this option, a text field appears, where you can write the content to be displayed in the Browser widget.
l
URL: Specifies the initial URL that must be requested from the server. The URL must begin with http:// .
5.23.3.2 Detect Phone Number
Specifies if the Browser widget must support the detection of phone numbers in the web page and display the phone numbers as clickable Phone links. If you click the Phone link, the Phone application launches and dials the number.
© 2014 by Kony, Inc. All rights reserved 267 of 621
Kony Visualizer User Guide
Version 2.2
l
Click On to enable telephone number detection.
l
Click Off to disable telephone number detection.
The option you choose here becomes the default for all the platforms.
You can change this default option or provide a platform specific option, by forking the Detect Tel
Number property. Refer to section
for more details.
5.23.3.3 Full Screen Widget
Specifies whether the widget should occupy the whole form when your Browser widget has a large
HTML content to display. You must enable this feature so that Browser widget occupy the complete
Form and results in a good user experience.
If disabled, a scroll bar appears either on the Browser widget or on the Form.
l
Click On to allow the widget occupy the whole container, when the Browser widget has a large
HTML content to display.
l
Click Off to disallow the widget occupy the whole container when the Browser widget has a large HTML content to display.
The option you choose here becomes the default for all the platforms.
You can change this default option or provide a platform specific option, by forking the Screen Level
Widget property. Refer to section
for more details.
Note:
You must not place more than one Browser widget as a screen level widget inside a Form.
Also, if you choose to make a Browser widget a Screen Level Widget, you must place only the
Browser widget in the Form and must not place any other widgets in the Form.
Note: Do not set the screen level widget property to true for more than one widget in the form. If you have multiple widgets with this property set as true, there may be issues with how information appears along with some scrolling issues.
© 2014 by Kony, Inc. All rights reserved 268 of 621
Kony Visualizer User Guide
Version 2.2
Note:
This property is unavailable on Flex Forms.
5.23.3.4 Zoom
Specifies if Zoom (ability to change the scale of the view area) must be enabled.
l
If set to On, the Zoom feature is enabled.
l
If set to Off, the Zoom feature is disabled.
The option you choose here becomes the default for all the platforms.
You can change this default option or provide a platform specific option, by forking the Enable Zoom property. Refer to section
for more details.
5.23.3.5 Height
Specifies the height of the Browser in terms of percentage. The percentage is with reference to the value of
property.
Note: This property is unavailable on Flex Forms.
5.23.3.6 Height Reference
The Browser height percentage is calculated based on the option selected.
l
Form Reference: The Browser height percentage is calculated based on the height of the form excluding headers and footers. This option is not respected if Browser is placed inside a popup or in templates.
l
Parent Width: This option is used if the Browser is placed inside a popup or in templates. The width is calculated based on the width of the parent container.
l
Note: This property is unavailable on Flex Forms.
© 2014 by Kony, Inc. All rights reserved 269 of 621
Kony Visualizer User Guide
Version 2.2
5.23.4 Actions
On this tab, you define the events that are executed when an action is run. On a Browser widget, you can run the following actions: l onFailure: This action is invoked by the platform when the given request URL is failed to load the data.
Note: This action is executed only for the given request URL, but not for the subsequent web navigation request failures.
l onSuccess: An action callback which gets invoked when the given request URL is successful in loading the data.
Note:
This action is called only for the given request URL, but not for the subsequent web navigation requests.
5.23.5 Placement Inside a Widget
A browser can be directly added inside the following widgets:
Widget
Flex Form
Browser placement inside a widget
Yes
VBox Form
FlexContainer
FlexScrollContainer
HBox
VBox
Yes
Yes
Yes
Yes
Yes
© 2014 by Kony, Inc. All rights reserved 270 of 621
Widget
ScrollBox
Tab
Segment
Popup
Template
Browser placement inside a widget
Horizontal Orientation -Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
5.23.6 Widget Appearance on Platforms
The appearance of the Browser widget on various platforms is as follows:
Platform
Android
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 271 of 621
Platform iOS
Appearance
Kony Visualizer User Guide
Version 2.2
SPA
© 2014 by Kony, Inc. All rights reserved 272 of 621
Kony Visualizer User Guide
Version 2.2
5.24 Camera
A Camera widget appears as a button in a form. If you select the Camera widget, the phone native camera application is invoked to capture an image (which you can choose to accept or discard) and is stored as a PNG (Portable Network Graphics) image by default with the original size
Note: The Camera widget is not supported on SPA platforms.
5.24.1 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 273 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a Camera widget, refer section:
.
© 2014 by Kony, Inc. All rights reserved 274 of 621
Kony Visualizer User Guide
Version 2.2
5.24.2 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the Camera widget, you can apply a skin for the following states:
Skin
Normal
Focus
Hover Skin
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note:
Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.24.3 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
© 2014 by Kony, Inc. All rights reserved 275 of 621
Kony Visualizer User Guide
Version 2.2
5.24.3.1 Access Mode
Specifies how the captured image must be stored.
Following are the options: l
Public: The captured image is stored on the device as an Image and is accessible to all the applications on the device. For example, the captured images are accessible in ImageGallery.
l
Private: This is the default option for Windows. The captured image is stored as an Image on the device and will not be accessible to any other application on the device and remain private to the application.
l
In-Memory: The captured camera image is stored in memory and is never written to the disk.
These captured images are lost when the application is closed.
To specify the access mode, click the Edit button against the Access Mode field to open the Access
Mode dialog box.
© 2014 by Kony, Inc. All rights reserved 276 of 621
Kony Visualizer User Guide
Version 2.2
Default: Public l
For changing default access mode: From the value list (corresponding to the Default platform), select a desired access mode.
l
For providing platform specific access mode: Select the platform and from the corresponding drop-down value field, select desired access mode.
5.24.3.2 Compression Level
Specifies the compression level or picture quality with which the captured image must be stored. You can specify the compression level value between 0 (best picture quality) and 100 (low picture quality).
To specify the compression level, click the Edit button against the Compression Level field to open the Compression Level dialog box.
Default: 0 ( The image is stored with the best picture quality) l
For changing default compression level: In the value field (corresponding to the Default platform), enter a new compression level value.
l
For providing platform specific compression level: Select the platform and in the corresponding value field, enter a compression level value.
Note: Applicable only when the image format is jpeg.
5.24.3.3 Overlay
Specifies the overlay configuration parameters for overlaying a form.
The following are the configurable properties available for various platforms: iOS l
Overlay Form : Specifies the reference of the form to be rendered over the camera view. When this option is set, the
property is not respected.
Default : None
© 2014 by Kony, Inc. All rights reserved 277 of 621
Kony Visualizer User Guide
Version 2.2
l
Cropping Reference Image : Specifies the reference of the Image widget in the Overlay Form which guides the camera to crop the captured image to the Reference Image Dimensions.
Default : None
Android l
Overlay Form : Specifies the reference of the form to be rendered over the camera view. When this option is set, the
property is not respected.
Default : None l
Cropping Reference Image : Specifies the reference of the Image widget in the Overlay Form which guides the camera to crop the captured image to the Reference Image Dimensions.
Default : None l
Capture Button Skin : Specifies the skin for a captured button.
l
Capture Button Text : Specifies the text for a captured button.
l
Tap Anywhere: Specifies to capture an image with a tap on the camera overlay view.
Default : false
Windows 8 l
Cropping Reference Image : Specifies the reference of the Image widget in the Overlay Form which guides the camera to crop the captured image to the Reference Image Dimensions.
Default : None l
Overlay Form : Specifies the reference of the form to be rendered over the camera view. When this option is set, the
property is not respected.
Default : None l
Tap Anywhere: Specifies to capture an image with a tap on the camera overlay view.
Default : false
© 2014 by Kony, Inc. All rights reserved 278 of 621
Kony Visualizer User Guide
Version 2.2
5.24.3.4 Scale Factor
Specifies the ratio by which a captured image is scaled down. You can set the scale factor between 10 and 100. If you set the scale factor as 100, no reduction takes place and the actual image is returned. If you set the value as 10, an image which is scaled down to 10% of the actual captured image is returned.
5.24.3.5 Enable Overlay
A camera is launched with capability of over-lay a Form UI over the camera view.
To provide values for Enable Overlay property, click the Edit button against the Enable Overlay field.
The Enable Overlay dialog box appears.
Default: Enable Overlay is disabled.
l
To enable overlay by default for all the platforms, click the Value check box (corresponding to the Default platform).
l
To enable overlay property for a specific platform, select a platform check box, and then click the check box of the corresponding Value field.
5.24.3.6 Capture Orientation
Specifies the orientation of the captured image.
Default: Default
The following are the options: l
Landscape: On the device the camera is always turned sideways so that the height of the screen becomes width.
l
Portrait: On the device the camera is always displayed such that the horizontal sides are shorter than vertical sides.
Note: This property is specific to the iOS platform.
© 2014 by Kony, Inc. All rights reserved 279 of 621
Kony Visualizer User Guide
Version 2.2
5.24.3.7 Image Format
Specifies if the image must be stored as a PNG (Portable Network Graphics) or a JPEG (Joint
Photographic Experts Group) image.
Default: PNG
The following are the options: l
PNG : When you select this option the image is always stored in PNG format.
l
JPEG : When you select this option the image is always stored as JPEG format.
Note: This property is specific to the iOS platform.
5.24.3.8 Native UI
Specifies if the camera must have the native interface for camera view (an interface with the default platform controls for camera) or the user interface with custom options.
Default: enabled l
If disabled, the user interface with custom options appears.
l
If enabled, the native interface of camera in respective platforms appears
Note: This property is specific to the iOS platform.
5.24.3.9 Enable Photo Crop
Enables you to crop the captured image manually.
Default: Off l
Click On to enable the photo crop feature.
l
Click Off to disable the photo crop feature.
© 2014 by Kony, Inc. All rights reserved 280 of 621
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the Windows platform.
5.24.3.10 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet devices.
5.24.4 Actions
On this tab, you define the events that are executed when an action is run. On a Camera widget, you can run the following action: l onCapture: This action is invoked when the user captures a picture.
For more information on using the above action, refer to section
.
5.24.5 Placement inside a Widget
A camera can be directly added inside the following widgets:
Widget
Form
HBox
VBox
ScrollBox
Tab
Segment
Camera placement inside a widget
Yes
Yes
Yes
Horizontal Orientation -Yes
Vertical Orientation- Yes
Yes
No
© 2014 by Kony, Inc. All rights reserved 281 of 621
Widget
Popup
Template
Camera placement inside a widget
Yes
Header- No
Footer- No
5.24.6 Widget Appearance on Platforms
The appearance of the Camera widget on various platforms is as follows:
Platform
Android
Appearance
Kony Visualizer User Guide
Version 2.2
iOS
© 2014 by Kony, Inc. All rights reserved 282 of 621
Kony Visualizer User Guide
Version 2.2
5.25 Horizontal Image Strip2
HorizontalImageStrip2 displays a list of images which are aligned side-by-side in horizontal direction.
You can scroll through the Hz Image Strip to view the next or previous set of images.
You can use an Hz Image Strip to display a set of images to give an idea to the user about a products or a location (for example, in a Travel Application, you can add images of popular tourist destinations or add images of the different suites available in a hotel).
5.25.1 Important Considerations
The following are important considerations for a HorizontalImageStrip2 widget.
l
A HorizontalImageStrip2 widget is available only for a Flex Form.
l
For a good user experience, you must add images of the same width and height.
l
You can scroll through one or more images at a time (platform dependent).
5.25.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 283 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a HorizontalImageStrip2 widget, refer section:
5.25.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the HorizontalImageStrip2 widget, you can apply a skin for the following states:
© 2014 by Kony, Inc. All rights reserved 284 of 621
Kony Visualizer User Guide
Version 2.2
Skin
Normal
Focus
Hover Skin
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note: Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
5.25.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
© 2014 by Kony, Inc. All rights reserved 285 of 621
Kony Visualizer User Guide
Version 2.2
5.25.4.1 Master Data
You can specify all the images that you wanted to place inside this widget.
For providing masterData, click the Edit button against Master Data to open Data for HStrip dialog box.
© 2014 by Kony, Inc. All rights reserved 286 of 621
Kony Visualizer User Guide
Version 2.2
Click ellipses (...) to open the select Image dialog box. Select an image or provide an URL for the image, and click OK.
After adding the images in the Master Data, click Apply to insert these images.
5.25.4.2 Arrows
Specifies whether the arrow images must be displayed on the left and right edges of the
HorizontalImageStrip.
Default: disabled l
If enabled, the arrows are displayed.
l
If disabled, the arrows are not displayed.
5.25.4.3 Failed Image
Specifies the image to be displayed when the remote resource is unavailable.
To specify an image, click the Edit button against the Failed Image field to open the Failed Image dialog box, from where you can locate an image to be displayed when the remote resource is unavailable.
© 2014 by Kony, Inc. All rights reserved 287 of 621
Kony Visualizer User Guide
Version 2.2
5.25.4.4 Downloading Image
Specifies the image to be displayed when the remote source is still being downloaded.
To specify an image, click the Edit button against the Downloading Image field. This results in displaying Downloading Image dialog box from where you can locate an image to be displayed when the remote resource is still being downloaded.
5.25.4.5 View Type
Specifies the type of view of HorizontalImageStrip. It displays two different views: l
Strip View l
Slot View
The option selected here becomes the default view type for all the platforms.
For changing the default view type or to provide a platform specific view type, click the ellipsis (...) button next to the View Type list. The View Type dialog box appears.
Select a platform check box, and from its corresponding Value list, select a desired view type.
5.25.4.6 Image Spacing
Specifies the space between the images in the horizontal image strip.
For proving Image Spacing value, click the Edit button against the Image Spacing field to open the
Image Spacing dialog box.
For providing the value specific to a platform, select a platform check box and type a number in the corresponding Value field.
5.25.4.7 Show Scrollbars
Specifies if the scrollbars must be visible all the time.
Default: As per native platform behavior.
© 2014 by Kony, Inc. All rights reserved 288 of 621
Kony Visualizer User Guide
Version 2.2
l
Click On to display the scrollbars.
l
Click Off to hide the scrollbars.
5.25.4.8 Image Scale Mode
The value specifies how an image rendered. Image Widget represents the underlying native widget which renders (and applies alignment to) the Source Image.
Following are the options: l
Fit to Dimensions: The source image is resized to fill the Image widget dimensions.
l
Maintain Aspect Ratio: This mode resizes the source image to fit in the Image widget dimensions while it preserves its native aspect ratio.
l
Crop: This scale mode preserves the original size of the source image.
5.25.4.9 Reference Width
It is the reference image width in pixels. These are device independent Pixels specified against 163 dpi.
5.25.4.10 Reference Height
It is the reference image height in pixels. These are device independent Pixels specified against 163 dpi.
5.25.4.11 Tool Tip
TootlTip is a message that appears when you hover the mouse pointer over a widget.
Note: This property is specific to the Windows Tablet platform.
© 2014 by Kony, Inc. All rights reserved 289 of 621
Kony Visualizer User Guide
Version 2.2
5.25.5 Actions
On this tab, you define the events that are executed when an action is run. On a
HorizontalImageStrip2 widget, you can run the following action: l onSelection: This action is invoked by the platform when an Image is selected in
HorizontalImageStrip widget.
For more information on using the above action, refer to section
.
5.25.6 Placement Inside a Widget
A HorizontalImagestrip2 can be directly added inside the following widgets:
Widget
Form
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
HorizontalImagestrip2 placement inside a widget
Yes
Yes
Yes
Horizontal Orientation -Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
© 2014 by Kony, Inc. All rights reserved 290 of 621
Kony Visualizer User Guide
Version 2.2
5.26 ImageGallery2
ImageGallery represents a set of images adjacent to each other. If the images exceed the row size, they are pushed to the next line.
5.26.1 Important Considerations
The following are important considerations for an ImageGallery2 Widget.
l
A ImageGallery2 widget is available only for a Flex Form.
l
The Image Gallery occupies 100% of the screen width.
l
On devices which have a navigation key, you can use the up or down keys to navigate through the images.
5.26.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 291 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of an ImageGallery2 widget, refer section:
5.26.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the ImageGallery2 widget, you can apply a skin for the following states:
Skin
Normal
Focus
Hover Skin
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
Specifies the look and feel of a widget when the cursor hovers on the widget.
Note: Hover Skin is available only on the Windows (native) Tablet platform.
Refer to section
to know more about adding a skin to a widget.
© 2014 by Kony, Inc. All rights reserved 292 of 621
Kony Visualizer User Guide
Version 2.2
5.26.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
5.26.4.1 Master Data
You can specify all the images that you wanted to place inside this widget.
For providing Master Data, click the Edit button against Master Data to open Data for IGallery dialog box.
© 2014 by Kony, Inc. All rights reserved 293 of 621
Kony Visualizer User Guide
Version 2.2
Click ellipses (...) to open the select Image dialog box. Select an image or provide an URL for the image and click OK.
After adding the images in the masterData, click Apply to insert these images.
5.26.4.2 Failed Image
Specifies the image to be displayed when the remote resource is unavailable.
For specifying an image, click the Edit button against the Failed Image field to open the Failed Image dialog box from where you can locate an image to be displayed when the remote resource is unavailable.
5.26.4.3 Downloading Image
Specifies the image to be displayed when the remote source is still being downloaded.
For specifying an image, click the Edit button against the Downloading Image field to open the
Downloading Image dialog box from where you can locate an image to be displayed when the remote resource is still being downloaded.
© 2014 by Kony, Inc. All rights reserved 294 of 621
Kony Visualizer User Guide
Version 2.2
5.26.4.4 Images Spacing
Specifies the space between the images in the ImageGallery.
For provide this value, click the Edit button against the Image Spacing field to open Image Space dialog box.
You can change the default value by typing a new number inside the Value field corresponding to
Default platform.
For providing the value specific to a platform, select the platform and type a new number in the corresponding Value field.
5.26.4.5 Image Scale Mode
A value of this property specifies how the rendered image's width and height are identified if those of the source image varies from the Image widget itself. Image Widget represents the underlying native widget which renders (and applies alignment to) the Source Image.
Following are the options: l
Fit to Dimensions: The source image is resized to fill the ImageWidget dimensions.
l
Maintain Aspect Ratio: This mode resizes the source image to fit in the ImageWidget dimensions while it preserves its native aspect ratio. In case, l
Crop: This scale mode preserves the original size of the Source Image.
5.26.4.6 Reference Width
It is the reference image width in pixels. These are device independent Pixels specified against 163 dpi.
5.26.4.7 Reference Height
It is the reference image height in pixels. These are device independent Pixels specified against 163 dpi.
© 2014 by Kony, Inc. All rights reserved 295 of 621
Kony Visualizer User Guide
Version 2.2
5.26.5 Actions
On this tab, you define the events that are executed when an action is run. On an ImageGallery widget, you can run the following action: l onSelection: This action is invoked by the platform when an Image is selected in ImageGallery.
For more information on using the above action, refer to section
.
5.26.6 Placement Inside a Widget
A ImageGallery2 can be directly added inside the following widgets:
Widget
Form
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
Image Gallery placement inside a widget
Yes
Yes
Yes
Horizontal Orientation -Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
© 2014 by Kony, Inc. All rights reserved 296 of 621
Kony Visualizer User Guide
Version 2.2
5.27 Map
A Map widget provides you the capability to display pre-defined locations (latitude and longitude) on an onscreen map. Platforms like iPhone (above 3.0) and Android provide a native map widget that can be displayed as part of the application.
On platforms where a native map widget is not available, Map widget integrates with Google Maps and displays the static image with zoom and pan controls. You can customize the map view if you do not want to use the default view.
Note:
1. The platforms Mobile Web (basic) and Non-Touch HTML devices supports only static maps.
2. On Android platform, Map widget does not work in popup.
The Map widget renders a map using the mapping service provided by the platform. The following table shows the list of platforms and the available mapping services:
Platform
Android
Mapping Service
Google Maps
Google Maps iPhone
Mobile Web (advanced) Google Static Maps, Native maps of the device, and interactive maps (Java script)
5.27.1 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
© 2014 by Kony, Inc. All rights reserved 297 of 621
Kony Visualizer User Guide
Version 2.2
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
To specify the look properties of a Map widget, refer section:
.
5.27.2 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
© 2014 by Kony, Inc. All rights reserved 298 of 621
Kony Visualizer User Guide
Version 2.2
5.27.2.1 Callout Template
Accepts reference to a box widget which represents a UI template for a custom callout. The box template is allowed to have only Label, Link, RichText, Button and Image widgets.
Note:
If template is not provided, it will fallback to the platform specific default callout for backward compatibility.
You can create a callout template by referring to section:
For inserting a template, click the Edit against the Callout Template field to open the Callout
Templates dialog box.
From the available templates, choose a template to be used for callouts.
© 2014 by Kony, Inc. All rights reserved 299 of 621
Kony Visualizer User Guide
Version 2.2
5.27.2.2 Pin Image
The default map pin image to be used to indicate a location on map.
For proving an image, click the Edit button against the Pin Image field to open the Pin Image dialog box.
A default image is provide by the system. To replace this image, click inside the Value field corresponding to the Default platform to open the Select Image dialog box. Select a new image and then click OK.
To provide a platform specific image, select a platform and click inside the corresponding Value field to open the Select Image dialog box. Select a new image and then click Ok.
5.27.2.3 Mode
Specifies the map viewing mode.
l
Normal: Traditional depiction of roads, parks, borders etc.
l
Satellite: Map showing aerial imagery.
l
Street: Navigate within street-level imagery.
l
Hybrid: Street map superimposed on Satellite map.
l
Terrain: Map showing the surface of the land in 3D view.
l
Polygon: Map showing the polygonal area as specified in locationdata property.
l
Traffic: Specifies the streets with different colors to indicate traffic information on the map. The color green indicates low traffic, orange indicates medium traffic and red indicates heavy traffic.
From the Mode list you can select a default mode that is applied for all the platforms. Alternatively, to provide a platform specific mode, fork the Mode property. Refer to the section
for more details.
© 2014 by Kony, Inc. All rights reserved 300 of 621
Kony Visualizer User Guide
Version 2.2
5.27.2.4 Source
Specifies the source of the maps.
You can choose one of the following available sources: l
Native: If you select this option, the application uses the mapKey and provider details to fetch the map. The fetched map is interactive with an ability to zoom and pan.
Note: Polygon view on advanced Mobile Web platform is available only when the source is set to non-native.
l
Non Native: If you select this option, the application uses the map that is on the device.
Note: SPA platforms support only Google Static Maps as a source. Static maps are directly requested from Google for a given latitude and longitude. Kony does not support any other option because the size of the get request URL can be bigger than 256 characters leading to the request not being served.
From the Map Source list you can select a default map source that is applied for all the platforms.
Alternatively, to provide a platform specific map source, fork the Map Source property. Refer to the section
for more details.
5.27.2.5 Zoom Level
Sets the zoom level for the current map view. The range varies from platform to platform.
You can specify a zoom level by clicking the Edit button against the Zoom Level to open the Zoom
Level dialog box.
Select the platform and from its corresponding value list, select a desired view type.
5.27.2.6 Full Screen Widget
Specifies whether the widget should occupy the whole container excluding space for headers and footers, if any.
© 2014 by Kony, Inc. All rights reserved 301 of 621
Kony Visualizer User Guide
Version 2.2
l
If On is selected, the map occupies the space as set in the IDE or layout properties.
l
If Off is selected, the map occupies the whole space on the container.
5.27.2.7 Callout Width
Specifies the width of the callout on the map. It accepts a number between 1 to 100 in percentage relative to the map widget width. For example, 100% value means, callout width should fill its map widget width. If the value specified is less than 1 or more than 100, it should fallback to 80%.
5.27.2.8 Height
Specifies the height of the Map in terms of percentage. The percentage is with reference to the value of
property.
Note: This property is unavailable on Flex Forms.
5.27.2.9 Height Reference
The Map height percentage is calculated based on the option selected.
l
Form Reference: The Map height percentage is calculated based on the height of the form excluding headers and footers. This option is not respected if Map is placed inside a popup or in templates.
l
Parent Width: This option is used if the Map is placed inside a popup or in templates. The width is calculated based on the width of the parent container.
Note: This property is unavailable on Flex Forms.
5.27.2.10 Show Current Location
Indicates the current location on map as a pin, circle or none.
Following are the options: None, Pin, and Circle.
© 2014 by Kony, Inc. All rights reserved 302 of 621
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the iOS platform.
5.27.2.11 Zoom Control
Indicates if the zoom control is to be displayed on the map.
l
If On is selected, the zoom control appears.
l
If Off is selected, the zoom control is not displayed.
Note: This property is specific to the Android platform.
5.27.3 Actions
Map widget has the following actions associated with it: l onPinClick: This action is invoked by the platform when a map pin is clicked, passing the selected locationdata to the callback.
l onSelection: This action is invoked by the platform when the user clicks on a callout of the Map.
For more information on using the above actions, refer to section
.
5.27.4 Placement inside a Widget
A map can be directly added inside the following widgets:
Widget
Flex Form
VBox Form
FlexContainer
Map placement inside a widget
Yes
Yes
Yes
© 2014 by Kony, Inc. All rights reserved 303 of 621
Widget
FlexScrollContainer
Map placement inside a widget
Yes
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
Yes
Yes
Horizontal Orientation -Yes
Vertical Orientation- Yes
Yes
No
Yes
Header- No
Footer- No
5.27.5 Widget Appearance on Platforms
The appearance of the Map widget on various platforms is as follows:
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 304 of 621
Platform
Android
Appearance
Kony Visualizer User Guide
Version 2.2
iOS
© 2014 by Kony, Inc. All rights reserved 305 of 621
Platform
SPA
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 306 of 621
Kony Visualizer User Guide
Version 2.2
5.28 Phone
A Phone widget, when placed in an application, allows you to launch the native phone dialer and initiate a phone call to the number that appears on it. It appears as a button on the Form and the phone number appears on it either in the number format or the phone spell text. When the user selects the phone widget, the native dialer is launched to make a phone call.
5.28.1 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 307 of 621
Kony Visualizer User Guide
Version 2.2
To specify the look properties of a Phone widget, refer section:
.
© 2014 by Kony, Inc. All rights reserved 308 of 621
Kony Visualizer User Guide
Version 2.2
5.28.2 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the Phone widget, you can apply a skin for the following states:
Skin
Normal
Definition
Specifies the default skin of a widget.
Focus Specifies the skin applied when the focus is on a widget.
Refer to section
to know more about adding a skin to a widget.
5.28.3 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 309 of 621
Kony Visualizer User Guide
Version 2.2
5.28.3.1 image
Specifies an Image for the Phone widget.
To specify an image, click the Edit button against the Image. This results in displaying Image dialog box from where you can specify a default image or platform specific image.
5.28.4 Placement Inside a Widget
A phone can be directly added inside the following widgets:
Widget
Form
HBox
VBox
ScrollBox
Tab
Segment
Popup
Template
Phone placement inside a widget
Yes
Yes
Yes
Horizontal Orientation -Yes
Vertical Orientation- Yes
Yes
Yes
Yes
Header- No
Footer- No
5.28.5 Widget Appearance on Platforms
The appearance of the Phone widget on various platforms is as follows:
© 2014 by Kony, Inc. All rights reserved 310 of 621
Platform
Android
Appearance iOS
SPA
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 311 of 621
Kony Visualizer User Guide
Version 2.2
5.29 PickerView
A PickerView widget uses a spinning wheel metaphor to display multiple sets of values and allows you to select a single combination of values. You can select a single combination of values by rotating the wheels and aligning the desired row of values with the selection indicator.
PickerView can have multiple components and each component comprises of keys. Users can choose the keys from different components and make the choices . useful in grouping the multiple choices that user can make in different categories related to concept. For example: color, model, year of manufacturing all these three can be modeled as components with different possible values so that user can make his choice using this single widget.
Note: PickerView widget is not supported on SPA platforms.
5.29.1 Important Considerations
The following are important considerations for a PickerView Widget.
l
PickerView is used to make multiple selections and arrive at a combination of the selected values. For example, for Flight Bookings, if you want the user to select one of the available dates, time, and flight number; you can create lists for date, time, and flight numbers and display them in a PickerView widget.
5.29.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
© 2014 by Kony, Inc. All rights reserved 312 of 621
Kony Visualizer User Guide
Version 2.2
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
To specify the look properties of a PikerView widget, refer section:
.
5.29.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the PickerView widget, you can apply a skin for the following states:
Skin
Normal Specifies the default skin of a widget.
Definition
© 2014 by Kony, Inc. All rights reserved 313 of 621
Kony Visualizer User Guide
Version 2.2
Skin Definition
Focus Specifies the skin applied when the focus is on a widget.
Refer to section
to know more about adding a skin to a widget.
5.29.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
5.29.4.1 Master Data
Specifies the set of values that must be displayed for the user to make a selection from the available choices.
© 2014 by Kony, Inc. All rights reserved 314 of 621
Kony Visualizer User Guide
Version 2.2
To specify the set of values, click the Edit button against the Master Data field to open the PickerView
Master Data dialog box.
In the Master Data window, you can specify the Key and Display Value. You can add the components by clicking the add button.
Note: Key Value and Display Value combined width should be 100%
5.29.5 Actions
On this tab, you define the events that are executed when an action is run. On a PickerView widget, you can run the following action: l onSelection: This action is invoked by the platform when the component selection changes.
For more information on using the above action, refer to section
.
5.29.6 Placement Inside a Widget
The appearance of the PickerView widget on various platforms is as follows:
Widget
Form
HBox
VBox
Scroll Box
Tab
Segment
PickerView placement inside a widget
Yes
Yes
Yes
Horizontal Orientation - Yes
Vertical Orientation- Yes
Yes
No
© 2014 by Kony, Inc. All rights reserved 315 of 621
Kony Visualizer User Guide
Version 2.2
Widget
Popup
Template
PickerView placement inside a widget
Yes
Header- No
Footer- No
5.29.7 Widget Appearance on Platforms
The appearance of the PickerView widget on various platforms is as follows
Platform
Android
Appearance
© 2014 by Kony, Inc. All rights reserved 316 of 621
Platform iOS
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 317 of 621
Kony Visualizer User Guide
Version 2.2
5.30 Segment2
A Segment2 consists of multiple segments (rows or records) and each segment (row or record) can have multiple child widgets.
5.30.1 Important Considerations
The following are important considerations for an Segment2 Widget: l
Segment2 occupies memory from two perspectives: o
Amount of data required from number of rows. For example, if you set data for 100 rows, memory for all the 100 records will be in memory.
o
View hierarchy (Box and other supported widgets) in each segment row. If the View hierarchy is complex, the memory usage is high.
Note: On iPhone and Android, and Windows platforms, if your segment has large data sets (more than 20 records with each record having more than 15 widgets), set the segment as a Screen Level Widget.
l
You cannot add any elements to the widgets dynamically. But, you can hide any elements, if you do not provide any data for that element.
l
You can dynamically change the skin of the widgets in the segment.
l
A Segment2 can be placed in a ScrollBox only if the orientation of the ScrollBox is vertical.
l
The height of the Segment2 is determined by the content of the widget. If you set the Screen
Level Widget as true, then the height of the Segment2 widget is the form height excluding headers and footers.
5.30.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab:
© 2014 by Kony, Inc. All rights reserved 318 of 621
Kony Visualizer User Guide
Version 2.2
l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
To specify the look properties of an Segment2 widget, refer section:
.
© 2014 by Kony, Inc. All rights reserved 319 of 621
Kony Visualizer User Guide
Version 2.2
5.30.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the Segment2 widget, you can apply a skin for the following states:
Skin
Row
Row -
Focus
Section
Header
Widget
Definition
Specifies the skin that is applied for each row.
Specifies the skin that is applied when user focuses on a row.
Specifies the skin that is applied to the Section Header of Segment2 widget.
Specifies the skin that is applied to the entire Segment2 .
Specifies the skin that is applied to every alternate even numbered row in the segment.
Row -
Alternate
Blocked UI Specifies the skin that is to block the interface until the action in progress (for example, a service call) is completed.
Note: Blocked UI is available only for the SPA platforms.
Pressed
Refresh -
Pull
Specifies the skin to indicate that the row of the segment is pressed or clicked.
Specifies the look and feel of a widget when the scroll bar is pulled.
Refresh -
Push
Specifies the look and feel of a widget when the scroll bar is pushed.
Refer to section
to know more about adding a skin to a widget.
© 2014 by Kony, Inc. All rights reserved 320 of 621
Kony Visualizer User Guide
Version 2.2
5.30.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
Note: In this section, the properties that can be forked are identified by an icon ( ) located to the left of the property. For more details, refer to section
.
© 2014 by Kony, Inc. All rights reserved 321 of 621
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 322 of 621
Kony Visualizer User Guide
Version 2.2
5.30.4.1 Master Data
The master data is enabled only when the widgets are added to the Segment2 widget.
The below example illustrates the Master Data feature.
In this example , we add an Image and a Button to the Segment2 widget. Following are the steps:
1. Drag and drop an HBox container widget inside the Segment2 widget.
2. Within this HBox container, drag and drop Image and Button widget.
3. From the Segment2 widget properties, click Segment tab.
4. Click the Edit button against the Mater Data to open the Master Data dialog box.
© 2014 by Kony, Inc. All rights reserved 323 of 621
Kony Visualizer User Guide
Version 2.2
5. Provide the image and button widget details as shown in the above image.
6. Click OK.
5.30.4.2 Row Template
Indicates the common template to be used for each row while creating the row and filling the data. This can be overridden at the row level when setting the data using the template key.
Note: Only those templates that are created from Project Explorer >Templates > Segments are visible under Row Template drop-down.
5.30.4.3 Section Header Template
Specifies the common template to be used for each section while creating the section header and filling the data. This is optional parameter and if not provided the default template provided by each platform will be used. It can also be provided at each section level when setting the data.
Note:
Only those templates that are created from Project Explorer >Templates > Segments are visible under Row Header Template drop-down.
Note: When a Section Header is provided along with the rows/items, the Section Header is
"clamped" to the top of the scrollable area (on the Form) as one scrolls through a long list of items
(for example, if you have a long list of contacts that all begin with the letter "A", the "A" header will be fixed at the top until you scroll down past the last "A" item). This behavior can be clearly seen iPhone Contacts application.
This behavior of Section Headers is available on iOS and Android platform and is enabled when the Screen Level Widget has been set to true.
5.30.4.4 Group Cells
Specifies if all the rows in a segment should be grouped using a rounded corner background and border.
© 2014 by Kony, Inc. All rights reserved 324 of 621
Kony Visualizer User Guide
Version 2.2
l
If On is selected, the cells will not have rounded border.
l
If Off is selected, the cells will have a rounded border.
5.30.4.5 Retain Selection
Specifies if the segment should retain the selection made when the user navigates out of the form and revisits the form.
l
If On is selected, the selection is retained when the user navigates to different form.
l
If Off is selected, the selection is not retained.
5.30.4.6 Full Screen Widget
Specifies whether the widget should occupy the whole container or not. You must set the value to true if your segment has large data sets (more than 20 records with each record having more than 15 widgets) to facilitate a better reuse of the widgets and a different scrolling behavior.
l
If On is selected, the widget occupies the whole container and there is a reduction in load time of the Segment2 as only few rows are loaded at the load time. The rest of the rows are loaded as the user scrolls through the widget. But the scrolling speed reduces.
l
If Off is selected, the widget does not occupy the whole container and load time of Segment2 increases because all the rows are loaded at the beginning. But the scrolling speed improves.
Note: This property is available only when Segment2 widget is placed in a VBox form.
5.30.4.7 Separator
Specifies if the segment should display the separator between the rows.
l
If On is selected, the separator appears.
l
If Off is selected, the separator is not displayed.
5.30.4.8 Separator Thickness
Specifies the thickness of the separator in pixels.
© 2014 by Kony, Inc. All rights reserved 325 of 621
Kony Visualizer User Guide
Version 2.2
5.30.4.9 Separator Color
Specifies the color of the separator between rows of Segment2. Click the color sampler to open the color picker from where you can select a separator color.
5.30.4.10 Separator Transparency
Provide the desired transparency for the separator.
5.30.4.11 Show Scrollbars
Specifies if the scrollbars of the segment must be visible all the time.
l
If On is selected, the scrollbars are displayed.
l
If Off is selected, the scrollbars are not displayed.
5.30.4.12 Orientation
Specifies how you can stack the widgets within the Segment2. You can set the orientation of the
Segment2 as horizontal or vertical.
Following are the options: l
Horizontal: Enables you to stack the content within the Segment2 horizontally.
l
Vertical: Enables you to stack the content within the Segment2 vertically.
Note: This property is available only when Segment2 widget is placed in a VBox form.
5.30.4.13 View Type
You can use this property to select the view type of a segment. The following are the available view types that you can select and their appearances on iPhone native client:
© 2014 by Kony, Inc. All rights reserved 326 of 621
l
Table: The rows of the segment appear in a table as a list.
Kony Visualizer User Guide
Version 2.2
l
Page: The rows of the segment appear in pages and you need to scroll through the pages to view the rows.
5.30.4.14 Layout Alignment
This specifies the direction in which the widgets are laid out.
Default: LEFT
The options are: l
Left: The widgets placed inside a Segment2 are aligned left.
l
Center: The widgets placed inside a Segment2 are aligned center.
l
Right: The widgets placed inside a Segment2 are aligned right.
Note: This property is available only when Segment2 widget is placed in a VBox form.
© 2014 by Kony, Inc. All rights reserved 327 of 621
Kony Visualizer User Guide
Version 2.2
5.30.4.15 Selection Behavior
Specifies if the segment will support single or multiple selection.
Following are the options: l
Default: Indicates that the segment does not support either single or multiple selection. This option allows you to define an onRowClick event for the segment.
l
Single Select: Indicates that you can make one selection when you have many choices in the segment (the behavior is similar to a RadioButtonGroup).
l
Multi Select: Indicates that you can make more than one selection when you have many choices in the segment (the behavior is similar to a CheckBoxGroup).
5.30.4.16 Autogrow Mode
This property is applicable only when the segment is placed inside a flex container and View Type is set as Table. It specifies the segment to grow when the new content is added.
Following are the options: l
None: Auto growth of a Segment is disabled.
l
Autogrow-Height: Auto growth of a Segment is enabled.
Rules and Priorities of Autogrow-Mode property l
If the height of the Segment2 is not computable and Autogrow Mode property is configured as
Autogrow-Height, then the height of the Segment2 will be the Preferred Height, and min and max constraints are applied on top of the Preferred Height computed.
Note: Preferred Height in the above statement refers to the cumulative height of the segment contents (rows - defined using templates, section headers / footers, separators etc.).
© 2014 by Kony, Inc. All rights reserved 328 of 621
Kony Visualizer User Guide
Version 2.2
l
If the height of the Segment2 is not computable and Autogrow Mode property is configured as
None, then the height of the Segment2 will be the default value and min/max constraints are applied on top of the default value.
l
The Autogrow Mode property gets preference, when the height of the Segment2 is specified as preferred and Autogrow Mode property is configured Autogrow-Height.
l
If the Autogrow Mode property is not specified or the specified value is invalid, then the default value of the Autogrow Mode property is equal to specifying None.
l
If Autogrow Mode property is specified, and the templates defined are specified in percentage, then the height of the row, which uses percentage template will be considered as the default row height of the template, which is 100dp.
l
All the above rules are applied even if the template specified is a box template.
l
When a Segment2 is generated using single bucket constructor, height property must be set as undefined for Autogrow Mode property to work.
l
If the row template height is not specified and the Segment2 Autogrow Mode property is set as
Autogrow-Height, then row height of the Segment2 is 220dp (preferred height of a flex container).
5.30.4.17 Height
Specifies the height of the Segment2 in terms of percentage. The percentage is with reference to the value of
property.
Note: This property is unavailable on Flex Forms.
5.30.4.18 Height Reference
The Segment2 height percentage is calculated based on the option selected.
l
Form Reference: The Segment2 height percentage is calculated based on the height of the form excluding headers and footers. This option is not respected if Segment2 is placed inside a
© 2014 by Kony, Inc. All rights reserved 329 of 621
Kony Visualizer User Guide
Version 2.2
popup or in templates.
l
Parent Width: This option is used if the Segment2 is placed inside a popup or in templates. The width is calculated based on the width of the parent container.
Note: This property is unavailable on Flex Forms.
5.30.4.19 Dictionary
Specifies if dictionary must be enabled for easy navigation.
If the dictionary property is enabled, alphabets from A to Z appear on the screen and when you select any alphabet, all the corresponding results that start with the selected alphabet are displayed.
Note: This property is applicable if Screen Level Widget property is set to true and the section headers have been set.
l
If On is selected, the dictionary is available.
l
If Off is selected, the dictionary is not available.
Note: This property is specific to the iOS platform.
5.30.4.20 Indicator
Specifies the indicator type as rowSelect, rowClick, or none. Based on your selection, the behavior is exhibited:
Following are the options:
If the user selects the indicator, the related content appears in the next screen .
© 2014 by Kony, Inc. All rights reserved 330 of 621
Kony Visualizer User Guide
Version 2.2
l
Click: Specifies the disclosure button. The button appears as follows:
If the user selects the disclosure button, the detailed content appears.
l
None: No indicator or button appears.
Note:
This property is specific to the iOS platform.
5.30.4.21 Edit Style
Specifies the way in which the edit feature of Segment2 can be enabled.
Following are the options: l
Icon: An icon will be displayed on the left hand side of each row.
l
Swipe: A delete or insert button will be shown on the right hand side of each row when the user performs a SWIPE gesture on the row. Whether an insert button or delete button is to be shown is controlled by the edit mode property that is set using the data property of the Segment2.
l
None: No special edit styles are applied.
Note: This property is specific to the iOS platform.
5.30.4.22 Progress Indicator
Specifies if the progress indicator must be displayed.
Default: true (the progress indicator appears on the widget) l
If On is selected, the progress indicator appears on the widget.
l
If Off is selected, the progress indicator is not displayed on the widget.
© 2014 by Kony, Inc. All rights reserved 331 of 621
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the iOS platform.
5.30.4.23 Progress Indicator Color
Specifies the color of the progress indicator as white or grey.
l
White: The progress indicator is white in color.
l
Grey: The progress indicator is grey in color.
Note: This property is specific to the iOS platform.
5.30.4.24 Scroll Bounces
Specifies whether the scroll view bounces past the edge of the content and back again.
l
If On is selected, the scroll view bounce is applied.
l
If Off is selected, the scroll view bounce is not applied.
Note: This property is specific to the iOS platform.
5.30.4.25 Search Criteria
This specifies the search criteria to be applied when searching has been enabled.
Note:
This property applies only when the
property is enabled,
is set to Table, and a template is selected for
property.
The options are: l
Starts With : The search is performed on the strings that start with the input string.
l
Ends With: The search is performed on the strings that end with the input string.
l
Contains: The search is performed on the strings that contain the input string.
© 2014 by Kony, Inc. All rights reserved 332 of 621
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the iOS platform.
5.30.4.26 Search By
Indicates the identifier of the widget placed inside the row of the Segment2. Search will be performed against the content present inside the widget.
Note: Note: This property is applicable only when
property is enabled,
is set to Table, and a template is selected for
property.
Note: This property is specific to the iOS platform.
5.30.4.27 Dock Section Header
The docking header property enables you to dock or place the section header at the top of the segment while scrolling the section content. If you are scrolling the segment data, the next section header will be docked on top of the segment
Note: This property applies only when the
property is enabled and
is set to Table.
For example, if you scroll the segment data shown in the following figure, as the segment data scrolls up, the Samsung Phones docked header moves out. The Samsung header f view. and is replaced with the HTC Phones section header, which is now docked.
© 2014 by Kony, Inc. All rights reserved 333 of 621
Kony Visualizer User Guide
Version 2.2
Note: This property is specific to the Android platform.
5.30.5 Actions
On this tab, you define the events that are executed when an action is run. On a Segment2 widget, you can run the following actions: l onRowClick: This action is triggered when the user click any row of the Segment2 .
l onPull: This action is called when Segment2 is pulled from top.
l onPush: This action is called when Segment2 is pushed from bottom.
l onReachingBegining : This action is called when scrolling reaches the beginning of the
Segment2 widget.
l onReachingEnd: This action is called when scrolling reaches the end of the Segment2 widget.
l onSwipe: This event is triggered when you swipe a row in a segment. This event is available only when the View Type is set to page view.
© 2014 by Kony, Inc. All rights reserved 334 of 621
Kony Visualizer User Guide
Version 2.2
l onEditing: This action is triggered when a user indicates his desire to edit the row (delete or insert). This action is only triggered if the Edit Style is set to SEGUI_EDITING_STYLE_ICON or
SEGUI_EDITING_STYLE_SWIPE.
Note: This action is applicable only on iOS platform.
For more information on using the above actions, refer to section
.
5.30.6 Placement Inside a Widget
A Segment2 can be directly added inside the following widgets:
Widget
Flex Form
VBox Form
Segment2 placement inside a widget
Yes
Yes
FlexContainer
FlexScrollContainer
Yes
Yes
HBox
VBox
ScrollBox
Tab
Segment
Popup
No
Yes
Horizontal Orientation - No
Vertical Orientation- Yes
Yes
No
Yes
© 2014 by Kony, Inc. All rights reserved 335 of 621
Widget
Template
Segment2 placement inside a widget
Header- No
Footer- No
5.30.7 Widget Appearance on Platforms
The appearance of the Segment2 on various platforms is as follows:
Platform
Android
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 336 of 621
iOS
Platform Appearance
Kony Visualizer User Guide
Version 2.2
Windows Phone
© 2014 by Kony, Inc. All rights reserved 337 of 621
Platform
SPA
Appearance
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 338 of 621
Kony Visualizer User Guide
Version 2.2
5.31 Switch
The Switch widget is identical to the Switch Control (on-off switch which is non customizable) in iPhone and presents two mutually exclusive choices or states.
The Switch widget displays the value that is currently in effect. You must slide the control to select (or reveal) the other value.
Note: The Switch widget is supported on iOS (Native and SPA) and Android (SPA) platforms.
5.31.1 Important Considerations
The following are important considerations for an Switch Widget: l
For a good user experience, use a predictable pair of values so that the users do not have to slide the Switch to know the other value.
l
You can also consider using the Switch widget to change the state of other UI elements in the view. Depending upon the choice that the user makes, changes in the UI must take place.
For example, in an Airline application booking screen, based on the Switch widget selection as
"One Way" or "Round Trip", the required UI elements must change.
5.31.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
© 2014 by Kony, Inc. All rights reserved 339 of 621
Kony Visualizer User Guide
Version 2.2
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
To specify the look properties of an Switch widget, refer section:
.
© 2014 by Kony, Inc. All rights reserved 340 of 621
Kony Visualizer User Guide
Version 2.2
5.31.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For the Switch widget, you can apply skin for the following state:
Skin
Normal
Focus
Thumb
Color
Definition
Specifies the default skin of a widget.
Specifies the skin applied when the focus is on a widget.
This property is available under background only when you fork the skin for iPhone native. It specifies the color of the thumb.
Note:
This property is specific to the iOS7 platform.
© 2014 by Kony, Inc. All rights reserved 341 of 621
Kony Visualizer User Guide
Version 2.2
Skin
Tint
Color
Definition
This property is available under background only when you fork the skin for iPhone native.
Note: This property is specific to the iOS7 platform.
Refer to section
to know more about adding a skin to a widget.
5.31.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
5.31.4.1 State
Allows you to swap the colors.
5.31.4.2 Left Text
Specifies the text to be displayed on the left portion of the Switch.
© 2014 by Kony, Inc. All rights reserved 342 of 621
Kony Visualizer User Guide
Version 2.2
5.31.4.3 Right Text
Specifies the text to be displayed on the right portion of the Switch.
5.31.5 Actions
On this tab, you define the events that are executed when an action is run. On a Switch widget, you can run the following action: l onSlide: This action is invoked by the platform when there is a change in the default selected value.
For more information on using the above action, refer to section
.
5.31.6 Placement Inside a Widget
A switch can be directly added inside the following widgets:
Widget
Flex Form
VBox Form
Switch placement inside a widget
Yes
Yes
FlexContainer
FlexScrollContainer
Yes
Yes
HBox
VBox
ScrollBox
Tab
Yes
Yes
Horizontal Orientation - yes
Vertical Orientation- Yes
Yes
© 2014 by Kony, Inc. All rights reserved 343 of 621
Widget
Segment
Popup
Template
Switch placement inside a widget
Yes
Yes
Header- No
Footer- No
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 344 of 621
Kony Visualizer User Guide
Version 2.2
5.32 Video
Video widget enables you to play a video (by streaming data from a server) within a form.
5.32.1 Important Considerations
The following are important considerations for a Video Widget: l
When the form contains dockable components such as headers, footers, or an Appmenu, scrolling the video widget on iPhone or iPad does not scroll the form. This is due to a limitation that iPhone video controls do not respond to (custom) touch events when media controls are present. To avoid this, apply left or right margins to the either side of the video widget to enable scrolling of the form as well.
l
You can play only one video at a time.
l
Video widget is available only for SPA platforms.
5.32.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 345 of 621
Kony Visualizer User Guide
Version 2.2
5.32.3 Skin
Skin defines properties such as background color, borders, and shadows for a widget. The Skins also define the widget font (applicable only if the text appears on a widget.)
For a Video widget, you can apply a skin for the following states: l
Normal: Specifies the default skin of a widget.
© 2014 by Kony, Inc. All rights reserved 346 of 621
Kony Visualizer User Guide
Version 2.2
Refer to section
to know more about adding a skin to a widget.
5.32.4 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
5.32.4.1 MP4 URL
Specifies the video's URL in mp4 format.
5.32.4.2 WebM URL
Specifies the video's URL in WebM format.
5.32.4.3 OGV URL
Specifies the video's URL in OGV format.
Note: It is mandatory to specify the URL for all the three different formats. The device browser plays a format which is compatible with the underlying Native SDK.
© 2014 by Kony, Inc. All rights reserved 347 of 621
Kony Visualizer User Guide
Version 2.2
5.32.4.4 Controls
Specifies if the default video controls need to be displayed. When this property is set to false, video is playable by clicking anywhere on the Poster.
Note: This property is specific to the SPA platform.
5.32.4.5 Poster
You can specify an image which is to be displayed as a poster or as a starting image for the video. The image location must point to an external URL. For example, www.kony.com/sites/all/themes/kony/logo.png
Note: This property is specific to the SPA platform.
Widget
Flex Form
VBox Form
Video placement inside a widget
Yes
Yes
FlexContainer
FlexScrollContainer
Yes
Yes
HBox
VBox
ScrollBox
Tab
Yes
Yes
Horizontal Orientation -Yes
Vertical Orientation- Yes
Yes
© 2014 by Kony, Inc. All rights reserved 348 of 621
Widget
Segment
Popup
Template
Platform
Android - SPA
Video placement inside a widget
No
Yes
Header- No
Footer- No
Appearance
Kony Visualizer User Guide
Version 2.2
iOS - SPA
© 2014 by Kony, Inc. All rights reserved 349 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6. VBox Form
Form is a visual area (basic application screen) that holds other widgets. You can use a form to set a title and scroll content (similar to a web browser). The entire contents of the form except the headers and footers scroll together. A form is the top most container widget. A form can contain any number of widgets but cannot contain another form.
The screen width occupied by the form is the total available width of the mobile device; the virtual height is determined by the number of widgets on the form (the total height of the form is sum of the virtual heights of its first level visible child widgets).
6.1 Form Properties
Form properties allows you to modify the design look and feel, provide platform specific properties, and attach various actions events.
6.2 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 350 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
1. General > ID: It is the unique identifier of the form. When a form is added, system assigns a unique ID (or name). You can rename the form ID, if required.
2. Render: Defines whether a widget appears on a specific platform. By default, a widget is rendered for all the platforms. If you do not want to render a widget for a specific platform, click the Edit button against the Render field to open the Fork Platforms dialog box.
Clear the check box of the platforms for which the widget should not be rendered.
© 2014 by Kony, Inc. All rights reserved 351 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
3. Padding: Defines the space between the content of the form and the form boundaries.
Following padding options are available for the form.
Property
Top
Definition
Top padding
Bottom
Left
Right
Bottom padding
Left padding
Right padding
Action
Move the slider to adjust the top padding of the widget.
Move the slider to adjust the bottom padding of the widget.
Move the slider to adjust the left padding of the widget.
Move the slider to adjust the right padding of the widget.
Note: Padding can be applied simultaneously for all the four sides by clicking the
Units list.
next to the
Forking a Form’s Padding
To fork a form’s padding, follow these steps:
© 2014 by Kony, Inc. All rights reserved 352 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
1. Click the fork icon.
2. Select the padding units from the Units drop-down.
3. To apply the same values across the four sides, click uniform values icon. Platform
4. Adjust the values of the padding.
Note: The forking of a form’s padding is applied only to the platform selected in the App Canvas.
6.3 Skin
Skin define properties such as background color, borders, and shadows for a form.
For a Form widget, you can apply a skin for the following states:
© 2014 by Kony, Inc. All rights reserved 353 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
Normal
Skin
Specifies the default skin of a widget.
Definition
Menu Normal Specifies the look and feel of a menu items when not in focus.
Menu Focus Specifies the look and feel of the Menu Item when focused.
For more details on skin properties, refer to section:
6.4 Platform Specific properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 354 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 355 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.1 Orientation
This selection decides forms orientation. To provide a platform specific orientation, click the ellipsis(...) next to the Orientation list. From the Orientation window, l
To assign a default orientation, from the Value list corresponding to Default platform, select the desired orientation.
l
To assign a platform specific orientation, select a platform check box, and the from the Value list corresponding to the selected platform, select an orientation.
6.4.2 Header
To insert a header to a form, click the Edit button against the Header field. From the Header window, select a header.
Note:
A header template should be created for a project before inserting the Header into a form.
Refer section
for steps to create a header template.
6.4.3 Footer
To insert a footer to a form, click the Edit button against the Footer. From the Footer window, select a footer.
Note:
A footer template should be created for a project before inserting the footer into a form.
Refer section
for steps to create a footer template.
6.4.4 Enable Idle Timeout
Idle time indicates the amount of time that a user has not interacted with an application. Some applications require a notification to be raised when a user has not interacted with a form for a
© 2014 by Kony, Inc. All rights reserved 356 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
specified amount of time. For example, a banking app might require a notification after five minutes of inactivity by the user. At the same time, applications also must be able to withhold this notification for certain forms in the application. For example, an ATM Locator form in a banking app will raise the notification after a specific period of inactivity. if Enable Idle Timeout property is selected.
l
Click On to enable idle timeout.
l
Click Off to disable idle timeout.
6.4.5 Transition: IN
Specifies the configuration to be used when the user arrives on this form. Click the Edit button against
Transition: IN. The Transition: IN dialog appears. Choose the desired transition direction and transaction effect for a specific platform.
You can assign unique values for Transition: IN on the following platforms: l
l
l
l
6.4.5.1 iPhone
The following are iPhone specific properties:
© 2014 by Kony, Inc. All rights reserved 357 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
Property
Transition Direction:
Specifies the direction from which the Form appears.
Values l
None: Use this option if you do not want to specify a transition direction.
l
From Right: Specifies that the Form must appear from the right.
l
From Left: Specifies that the Form must appear from the left.
l
From Bottom: Specifies that the Form must appear from the bottom.
l
From Top: Specifies that the Form must appear from the top.
© 2014 by Kony, Inc. All rights reserved 358 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None: Use this option if you do not want to specify a transition direction.
l
Fade: Specifies that the form must fade when it is transitioned to a hidden or an invisible state.
l
MoveIn: Specifies that the form must slide over the existing content in the direction as specified in the transition direction.
l
Push: Specifies that the form must push the existing content in the direction as specified in the transition direction and take its place.
l
Flip: Specifies that the form must be rotated along the Y-axis as the content is being displayed. It supports transition directions from right and left.
l
Reveal: Specifies that the form must be revealed gradually in the direction as specified in the transition direction.
l
Curl: Specifies that the form must be curled or folded (look and feel is similar to turning of a page in a book) as the content is being displayed.
It supports transition directions from top and bottom only.
l
Two Split Horizontal In: Specifies the form which is split horizontally into two parts rejoins when the transition takes place.
l
Two Split Vertical In: Specifies the form which is split vertically into two parts rejoins when the transition takes place.
l
Four Split In: Specifies the form which is split in four parts rejoins when the transition takes place.
l
Four Split Rotate In: Specifies the form which is split in four parts rejoins by rotating the parts when the transition takes place.
l
Two Split Horizontal Out: Specifies the form which is split horizontally into two parts and move away when the transition takes place.
l
Two Split Vertical Out: Specifies the form which is split vertically into two parts and move away when the transition takes place.
l
Four Split Rotate Out: Specifies the form which is split in four parts l
Switch Left: Specifies that the form must go out of the view in 3D circular space along the Y-axis towards left as the content is being displayed.
l
Switch Right: Specifies that the form must go out of the view in 3D circular space along the Y-axis towards right as the content is being displayed.
l
Cloth: Specifies the present form must go out of screen animating as if a cloth is removed.
l
Flip Right: Specifies that the form must be rotated along the Y-axis as the content is being displayed giving an illusion of a page is turned towards right in a book.
l
Flip Left: Specifies that the form must be rotated along the Y-axis as the content is being displayed giving an illusion of a page is turned towards left in a book.
l
Door: Specifies that the form must be revealed giving an illusion of an opening a door.
l
Rotate Exchange: Specifies that the form must be rotated along the Xaxis as the content is being displayed.
l
MoveOut: Specifies that the form must slide over the existing content in the direction as specified in the transition direction.
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.5.2 Android
The following are Android specific properties:
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None: The constant value is 0. The default device effect is applied or none of the effect is applied.
l
Bottom Top: The constant value is 1. It specifies that the form must slide-in from the bottom and proceed towards the top.
l
From Left: The constant value is 2. It specifies that the form must slide-in from the left with a fade effect.
l
From Right: The constant value is 3. It specifies that the form must slide-in from the right with a fade effect.
l
To Right: The constant value is 4. It specifies that the form must slide-out to the right with a fade effect.
l
To Left: The constant value is 5. It specifies that the form must slide-out to the left with a fade effect.
l
From Center: The constant value is 6. It specifies that the form must grow from the center with a fade effect.
l
Top Right Bottom: The constant value is 7. It specifies that the form must slide-in from the top-right corner and proceed towards the bottom.
l
Bottom Left Top: The constant value is 8. It specifies that the form must slide-in from the bottom-left corner and proceed towards the top.
l
Bottom Top 2: The constant value is 9. It specifies that the form must shrink from the bottom towards the top.
l
Top Down: The constant value is 10. It specifies that the form must slide-in from the top and proceed towards the bottom.
© 2014 by Kony, Inc. All rights reserved 360 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.5.3 Windows Phone 8
The following are Windows Phone 8 specific properties:
Property
Transition Mode: Specifies the direction from which the From appears.
Transition Key: Specifies the effect from which the From appears.
Transition Speed: Specifies the speed at which the Form is transitioned.
Values l
Default: The default device effect is applied or none of the effect is applied.
l
Sequential- The transition of the Form going out of the view completes first and then the transition of the Form coming into the view takes place.
l
Parallel- The transition of the Form going out of the view and the transition of the Form coming into the view takes place simultaneously.
l
Default: Specifies that the Form must slide horizontally into the view.
l
Rotate 3D Single: Specifies that the Form must be rotated along the center Y-Axis when coming into the view.
l
Rotate 3D Dual: Specifies that the Form must be shown making a circle around the screen from the background before coming into the view.
l
Slide: Specifies that the Form must slide horizontally into the view.
l
Pop: Specifies that the Form must emerge from center-bottom of the screen and gradually occupy the complete screen.
l
Squeeze: Specifies that the Form must be expanded horizontally from an initial width of zero.
The value must be specified in seconds.
© 2014 by Kony, Inc. All rights reserved 361 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.5.4 SPA
The following are SPA specific properties:
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None- Use this option if you do not want to specify a transition direction.
l
Top Center: Specifies that the form must appear from the top center.
l
Bottom Center: Specifies that the form must appear from the bottom center.
l
Right Center: Specifies that the form must appear from the right center.
l
Left Center: Specifies that the form must appear from the left center.
6.4.6 Transition: OUT
Specifies the configuration to be used when the user arrives on this form. Click the Edit button against
Transition: OUT field. From the Transition: OUT window, choose the desired transition direction and transaction effect for a specific platform.
You can assign unique values for Transition: OUT on the following platforms: l
l
l
l
© 2014 by Kony, Inc. All rights reserved 362 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.6.1 iPhone
The following are iPhone specific properties:
Property
Transition Direction:
Specifies the direction from which the Form appears.
Values l
None: Use this option if you do not want to specify a transition direction.
l
From Right: Specifies that the Form must appear from the right.
l
From Left: Specifies that the Form must appear from the left.
l
From Bottom: Specifies that the Form must appear from the bottom.
l
From Top: Specifies that the Form must appear from the top.
© 2014 by Kony, Inc. All rights reserved 363 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None: Use this option if you do not want to specify a transition direction.
l
Fade: Specifies that the form must fade when it is transitioned to a hidden or an invisible state.
l
MoveIn: Specifies that the form must slide over the existing content in the direction as specified in the transition direction.
l
Push: Specifies that the form must push the existing content in the direction as specified in the transition direction and take its place.
l
Flip: Specifies that the form must be rotated along the Y-axis as the content is being displayed. It supports transition directions from right and left.
l
Reveal: Specifies that the form must be revealed gradually in the direction as specified in the transition direction.
l
Curl: Specifies that the form must be curled or folded (look and feel is similar to turning of a page in a book) as the content is being displayed.
It supports transition directions from top and bottom only.
l
Two Split Horizontal In: Specifies the form which is split horizontally into two parts rejoins when the transition takes place.
l
Two Split Vertical In: Specifies the form which is split vertically into two parts rejoins when the transition takes place.
l
Four Split In: Specifies the form which is split in four parts rejoins when the transition takes place.
l
Four Split Rotate In: Specifies the form which is split in four parts rejoins by rotating the parts when the transition takes place.
l
Two Split Horizontal Out: Specifies the form which is split horizontally into two parts and move away when the transition takes place.
l
Two Split Vertical Out: Specifies the form which is split vertically into two parts and move away when the transition takes place.
l
Four Split Rotate Out: Specifies the form which is split in four parts l
Switch Left: Specifies that the form must go out of the view in 3D circular space along the Y-axis towards left as the content is being displayed.
l
Switch Right: Specifies that the form must go out of the view in 3D circular space along the Y-axis towards right as the content is being displayed.
l
Cloth: Specifies the present form must go out of screen animating as if a cloth is removed.
l
Flip Right: Specifies that the form must be rotated along the Y-axis as the content is being displayed giving an illusion of a page is turned towards right in a book.
l
Flip Left: Specifies that the form must be rotated along the Y-axis as the content is being displayed giving an illusion of a page is turned towards left in a book.
l
Door: Specifies that the form must be revealed giving an illusion of an opening a door.
l
Rotate Exchange: Specifies that the form must be rotated along the Xaxis as the content is being displayed.
l
MoveOut: Specifies that the form must slide over the existing content in the direction as specified in the transition direction.
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.6.2 Android
The following are Android specific properties:
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None: The constant value is 0. The default device effect is applied or none of the effect is applied.
l
Bottom Top: The constant value is 1. It specifies that the form must slide-in from the bottom and proceed towards the top.
l
From Left: The constant value is 2. It specifies that the form must slide-in from the left with a fade effect.
l
From Right: The constant value is 3. It specifies that the form must slide-in from the right with a fade effect.
l
To Right: The constant value is 4. It specifies that the form must slide-out to the right with a fade effect.
l
To Left: The constant value is 5. It specifies that the form must slide-out to the left with a fade effect.
l
From Center: The constant value is 6. It specifies that the form must grow from the center with a fade effect.
l
Top Right Bottom: The constant value is 7. It specifies that the form must slide-in from the top-right corner and proceed towards the bottom.
l
Bottom Left Top: The constant value is 8. It specifies that the form must slide-in from the bottom-left corner and proceed towards the top.
l
Bottom Top 2: The constant value is 9. It specifies that the form must shrink from the bottom towards the top.
l
Top Down: The constant value is 10. It specifies that the form must slide-in from the top and proceed towards the bottom.
© 2014 by Kony, Inc. All rights reserved 365 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.6.3 Windows Phone 8
The following are Windows Phone 8 specific properties:
Property
Transition Mode: Specifies the direction from which the From appears.
Transition Key: Specifies the effect from which the From appears.
Transition Speed: Specifies the speed at which the Form is transitioned.
Values l
Default: The default device effect is applied or none of the effect is applied.
l
Sequential- The transition of the Form going out of the view completes first and then the transition of the Form coming into the view takes place.
l
Parallel- The transition of the Form going out of the view and the transition of the Form coming into the view takes place simultaneously.
l
Default: Specifies that the Form must slide horizontally into the view.
l
Rotate 3D Single: Specifies that the Form must be rotated along the center Y-Axis when coming into the view.
l
Rotate 3D Dual: Specifies that the Form must be shown making a circle around the screen from the background before coming into the view.
l
Slide: Specifies that the Form must slide horizontally into the view.
l
Pop: Specifies that the Form must emerge from center-bottom of the screen and gradually occupy the complete screen.
l
Squeeze: Specifies that the Form must be expanded horizontally from an initial width of zero.
The value must be specified in seconds.
© 2014 by Kony, Inc. All rights reserved 366 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.6.4 SPA
The following are SPA specific properties:
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None- Use this option if you do not want to specify a transition direction.
l
Top Center: Specifies that the form must appear from the top center.
l
Bottom Center: Specifies that the form must appear from the bottom center.
l
Right Center: Specifies that the form must appear from the right center.
l
Left Center: Specifies that the form must appear from the left center.
6.4.7 Title
Specifies the title of the form and appears in the Title Bar.
To update Title property, refer to Title Bar .
6.4.8 Retain Scroll Pos
Specifies if the Form must remember the scroll position when the user revisits the Form.
6.4.9 Title Bar
Specifies whether the title bar must be displayed on a form.
l
Click On to display the title bar.
l
Click Off to hide the title bar.
© 2014 by Kony, Inc. All rights reserved 367 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
The selected option becomes the default for all the platforms.
If you wanted to choose a different Title Bar option for a specific platform, click the ellipses (...) button next to the Title Bar Off option to open TitleBar dialog box.
Select a platform and from the corresponding Value field , select the check box to enable or disable displaying the title bar.
6.4.10 Header Overlap
Specifies if the header must overlap the form. For example, every time you scroll the form, the header is fixed and the header overlaps the form as specified in the header overlap field. If this field is selected, the form scrolls behind the header background and a part of the header background is transparent.
l
Click On to allow header overlap the form.
l
Click Off to disallow header overlap the form.
If you wanted to choose a different Header Overlap option for a specific platform, click the ellipses (...) button next to the Header Overlap Off option to open Header Overlap dialog box.
Select a platform and from the corresponding Value field , select the check box to allow or disallow header overlap.
6.4.11 Footer Overlap
Specifies if the footer must overlap the form. For example, every time you scroll the form, the footer is fixed and the footer overlaps the form as specified in the Footer Overlap field. If this field is selected, the form scrolls behind the footer background and a part of the footer background is transparent.
l
Click On to allow footer overlap the form.
l
Click Off to disallow footer overlap the form.
If you wanted to choose a different Footer Overlap option for a specific platform, click the ellipses (...) button next to the Footer Overlap Off option to open Footer Overlap dialog box.
© 2014 by Kony, Inc. All rights reserved 368 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
Select a platform and from the corresponding Value field , select the check box to allow or disallow footer overlap.
6.4.12 App Menu
The Application Menu (App Menu) contains features that apply to the application as a whole, rather than to a specific application screen or window.
You can choose to display App Menu on every form or on specific forms of the application.
By default, App Menu is viable on all the platforms. To hide App Menu for a for a specific platforms, click the Edit button next to the App Menu to open the Fork Platforms dialog box. Clear a platform check box on which you wish to hide App Menu.
© 2014 by Kony, Inc. All rights reserved 369 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
To customize App Menu items, follow below steps:
© 2014 by Kony, Inc. All rights reserved 370 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
1. Click inside the App Menu in the App Canvas to display a right arrow.
2. Click the right arrow, and then click Action: Edit Master Data to open App Menu Master Data.
3. You can customize the following properties: a. Skin: Select a skin from the list of available skins.
b. FocusSkin: Select a skin from the list of available skins.
c. ID: Unique identifier for the menu item.
d. Title: name of the menu item e. Icon: An icon appears above the Title. To assign an icon, click the ellipsis (...) button in the cell, and then select an icon.
f. onClick: You can assign onClick event by clicking the ellipsis (...) button in the cell and creating an event in the Action Editor dialog box.
© 2014 by Kony, Inc. All rights reserved 371 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.13 Menu Position
Specifies if the menu is shown or hidden in the application. In some platforms, form menu items appear along with app menu items. This property allows developer to configure whether to append at the end of application menu list or inserted at beginning of the application menus.
Following are the options: l
After App Menu l
Before App Menu
The selected menu position here becomes the default for all the platforms.
For specifying a platform specific menu position, click ellipsis (...) button next to the Menu Position list to open Menu Position dialog box.
Select the platform, and from its corresponding Value list, choose a desired menu position.
6.4.14 Input View Type
When building iPhone applications that support or provide text input, it's often necessary to create some extra buttons (or other controls) beyond the ones provided by the default keyboard interface.
Kony Platform by default, adds the Previous, Next and Done buttons to the applicable input controls.
These buttons allow specific operations needed by your application, such as moving to the next or previous text field, make the keyboard disappear. The area above the keyboard is known as Input
Accessory View.
This property, allows you to specify the type of accessory view that will be shown for all the input controls on this form.
© 2014 by Kony, Inc. All rights reserved 372 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
Following are the options: l
None: Use this option if you do not want to specify the toolbar. This option should be used carefully, as setting this option for widgets like calendar leaves the user with no option to select and drop-down a wheel calendar.
l
Default: Specifies that the toolbar that is defined in the Application level settings. To set the
Application level settings, right-click on the project and navigate to
Properties> Native
App>iPhone/iPad
.
l
Next / Previous: Specifies the navigation options as Next, Previous, and Done for a form. The below image illustrates the next prev toolbar set for a Textbox. The highlighted toolbar is achieved by setting the Keyboard Type as Default for a Textbox and Input Accessory View
Type as nextprevtoolbar to the Form.
© 2014 by Kony, Inc. All rights reserved 373 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
l
Cancel: Specifies that the input accessory view has a cancel button. This option does not trigger any events.
Note: This property is specific to the iOS platform.
6.4.15 Post Show Indicator
This property specifies if there must be a progress indicator to show that the form content is being loaded. You can use this property for forms that require network calls during post-show.
l
Click On to display the progress indicator.
l
Click Off to hide the progress indicator.
© 2014 by Kony, Inc. All rights reserved 374 of 621
6. VBox Form
The following image illustrates the loading indicator:
Kony Visualizer User Guide
Version 2.2
Note: This property is specific to the iOS platform.
6.4.16 Post Show Transparency
Normally, when a form is loading, the user interface is blocked. You can use this property to specify the percentage of transparency.
Default: 100
Note: This property is specific to the iOS platform.
6.4.17 Scroll Bounces
Specifies whether the scroll view bounces past the edge of the content and back again.
l
If On option is selected, the scroll view bounce is allowed.
l
If Off option is selected, the scroll view bounce is disallowed.
Note: This property is specific to the iOS platform.
6.4.18 Configure Extend Top l
If On option is selected, the property Extend Top appears.
l
If Off option is selected, the property Extend Top is not displayed.
Note: This property is specific to the iOS platform.
© 2014 by Kony, Inc. All rights reserved 375 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.19 Configure Extend Bottom l
If On option is selected, the property Extend Bottom appears.
l
If Off option is selected, the property Extend Bottom is not displayed.
Note: This property is specific to the iOS platform.
6.4.20 Configure Status Bar Style l
If On option is selected, the property Status Bar Style appears.
l
If Off option is selected, the property Status Bar Style is not displayed.
Note: This property is specific to the iOS platform.
6.4.21 Extend Top
This property is available only when
is enabled.
Specifies the form content to scroll under the App Menu. This property is supported in iOS7 and above only. This property is also applicable on the Application Level. The property set at form level takes precedence over Application level. If On option is selected, the form scroll under the App Menu.
Note: This property is specific to the iOS later platforms.
6.4.22 Extend Bottom
This property is available only when
is enabled.
This property enables you to Configure Extend Bottom property. This property is supported on iOS7 and above only. This property is also applicable on the Application Level. The property set at form level takes precedence over Application level. If On option is selected, the property extendBottom appears.
© 2014 by Kony, Inc. All rights reserved 376 of 621
6. VBox Form
Note:
This property is specific to the iOS platform.
6.4.23 Status Bar Style
This property is available only when
is enabled.
This property enables you to set the status bar style.
Kony Visualizer User Guide
Version 2.2
You can select one of the following styles for your status bar: l
Default: The status bar contents are displayed in black color suitable for a light background.
l
Light Content: The status bar contents are displayed in white color suitable for a dark background.
Note: This property is specific to the iOS7 platform.
© 2014 by Kony, Inc. All rights reserved 377 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.4.24 Soft Input Mode
Specifies the soft keyboard for a widget that requires an input should be placed at the bottom of the form. For example, when a TextBox or a TextArea requires input from the user, the soft-keyboard pops up when you enter text.
Following are the options: l
Adjust - Resize: Specifies the form is resized and when you click or start typing within the widget which requires an input, the form scrolls up and the widget which requires an input is not overlapped by the keypad or footer.
l
Adjust - Pan: Specifies the widget which requires an input is placed at the bottom of the form is overlapped by the keypad.
The below image illustrates the above two options:
© 2014 by Kony, Inc. All rights reserved 378 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the Android platform.
6.4.25 Max App Menu Buttons
Specifies the number of app menu buttons that should be displayed on the screen.
Note:
This property is specific to the Windows 8 platform.
6.4.26 Animate Header Footer
Specifies if the headers and footers of the Form must slide up and down respectively away from the view when the Form is in transition. To enable animation, select the On option next to the Animate
Header Footer.
Note:
This property is specific to the Windows 8 platform.
6.5 Actions
On this tab, you define the events that are executed when an action is run. On a Form, you can run the following actions:
Form has the following actions associated with it: l init - called immediately after an addWidgets event for any initializations required for the form.
Init initializes the form and any widgets.
In case of Server side Mobile Web and SPA, addWidgets and init events gets called as soon as the form is created. In case of native platforms, as an optimization, these events are deferred until the first access.
l preh3 - called just before a form is visible on the screen. A form can be made visible by explicitly calling the h3 method of the form.
© 2014 by Kony, Inc. All rights reserved 379 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
l postShow - called immediately after the form is visible on the screen. A form is made visible by explicitly calling the show method of the form.
l onHide - called when the form goes out of the screen. A form can go out of the screen when another form is to be shown.
l onDestroy - called when a form is destroyed. A form is destroyed when the developer explicitly calls destroy and this event gets called before destroying the form.
The following image illustrates the lifecycle of a form: l onOrientationChange: Specifies an Event which is triggered when there is a change in orientation of the form from portrait to landscape or vice versa.
Note: This property is specific to the iOS platform.
© 2014 by Kony, Inc. All rights reserved 380 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
l onDeviceBack: Specifies an event which is triggered when the user uses the back button on the device.
Note: This property is specific to the Android platform.
l onDeviceMenu: Specifies an event which is triggered when the user uses the back button on the device.
Note: This property is specific to the Android platform.
l onOrientationChange: Specifies an event which is triggered when there is a change in orientation of the form from portrait to landscape or vice versa.
Note: This property is specific to the Android platform.
l onDeviceBack: Specifies an event which is triggered when the user uses the back button on the device.
Note:
This property is specific to the Windows 8 platform.
l onOrientationChange: Specifies an event which is triggered when there is a change in orientation of the form from portrait to landscape or vice versa.
Note: This property is specific to the Windows platform.
l onDeviceBack: Specifies an event which is triggered when the user uses the back button on the device.
Note: This property is specific to the SPA platform.
l onOrientationChange: Specifies an event which is triggered when there is a change in orientation of the form from portrait to landscape or vice versa.
© 2014 by Kony, Inc. All rights reserved 381 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
Note: This property is specific to the SPA platform.
For more information on using the above action, refer to section
.
6.6 Notes
The Notes tab consists of form-level comments, feedback, and suggestions about a form (or page).
These notes are either posted by you or your users. The notes are visible to the users during functional preview only when the application is published to the cloud. For more information, see
.
This section details the following: l
l
l
6.6.1 Your Notes
You can manage the notes by performing the following actions: l
Add a Note l
Edit a Note l
Delete a Note
6.6.1.1 Add a Note
To add a note, follow these steps:
© 2014 by Kony, Inc. All rights reserved 382 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
1. Click the form's Properties > Notes tab.
2. Type your note in the box.
3. Click Add Notes.
6.6.1.2 Edit a note
To edit a note, follow these steps:
1. Click the form's Properties > Notes tabs.
2. Click the edit icon.
3. Make necessary changes to the note.
4. Click Save.
Note: You can only edit your own comments
© 2014 by Kony, Inc. All rights reserved 383 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
6.6.1.3 Delete a Note
To delete a note, follow these steps:
1. Click the form's Properties > Notes tab.
2. Click the delete icon next to the note.
Note: You can only delete your own comments
6.6.2 Users Notes
A users can post a comment while viewing the functional preview of the application.
For more details on how a user can post a comment, see
Functional Preview (Cloud) Notes
.
6.6.3 Merging Users Notes
When a note is added during
Functional Preview (Cloud) , they will be available to you in your Kony
Visualizer project. The cloud icon in your project will change its color and a number is displayed. The number indicates the how many comments are available to be merged.
Click the icon to view the added notes:
© 2014 by Kony, Inc. All rights reserved 384 of 621
6. VBox Form
Kony Visualizer User Guide
Version 2.2
These notes are downloaded to your local project and are available in your form Notes tab.
© 2014 by Kony, Inc. All rights reserved 385 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7. Flex Form
Flex Form allows you to place a widget at any area on a form. In a normal form, you have to use horizontal (HBox) and vertical (VBox) boxes to align widgets. In addition, a Flex Form supports overlapping of widgets. The following are the advantages of a Flex Form: l
Can place a widget anywhere on a form l
Supports overlapping of widgets l
Makes the application light weight due to lesser number of HBox Widgets and VBox Widgets l
Can animate the widgets. All flex layout positional properties (top, left, right, bottom, centerX, centerY) can be animated. Changes to these properties can make the widget move out of the parent and overlap with other widgets.
7.1 Look
The Look tab allows you to define how a widget appears on an app. The following are the major properties you can condition for a widget on this tab: l
Specify if a widget should be visible or not.
l
Choose the platforms on which a widget should be rendered.
l
Adjust how a widget should align with its parent widget and its neighboring widgets.
l
Specify where the content on a widget should appear (this property is applicable only for those widgets on which content is displayed).
© 2014 by Kony, Inc. All rights reserved 386 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
1. ID: It is the unique identifier of the form. When a form is added, system assigns a unique ID (or name). You can rename the form ID, if required.
2. Render: This property defines whether a form should be displayed on a specific platform. By default, a form is rendered for all the platforms.
If you do not want to render a form for a specific platform, click the Edit button against the
Render to open the Fork Platforms dialog box. Clear a platform check box for which you do not want to render the form.
© 2014 by Kony, Inc. All rights reserved 387 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
3. a11y Label: The text typed in this box is read aloud to the user when he navigates to this form.
Note: This property appears only when Accessibility is enabled for a project. For more information, see
Note: The text is read aloud only when the text-to-speech feature is enabled on the device.
7.2 Skin
Skin define properties such as background color, borders, and shadows for a form.
For a Form widget, you can apply a skin for the following states:
Normal
Skin
Specifies the default skin of a widget.
Definition
Menu Normal Specifies the look and feel of a menu items when not in focus.
Menu Focus Specifies the look and feel of the Menu Item when focused.
For more details on skin properties, refer to section:
7.3 Platform Specific Properties
On this tab, you can assign properties that are run on any platform (which is supported by Kony
Visualizer) and also, assign properties specific to a platform.
© 2014 by Kony, Inc. All rights reserved 388 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 389 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 390 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.1 Orientation
This selection decides forms orientation. To provide a platform specific orientation, click the ellipsis(...) next to the Orientation list. From the Orientation window, l
To assign a default orientation, from the Value list corresponding to Default platform, select the desired orientation.
l
To assign a platform specific orientation, select a platform check box, and the from the Value list corresponding to the selected platform, select the desired orientation.
7.3.2 Header
To insert a header, click the Edit button against the Header field. From the Header window, select a header.
Note:
A header template should be created for a project before inserting the Header into a form.
To create a header template, see
.
7.3.3 Footer
To insert a footer, click the Edit button against the Footer. From the Footer window, select a footer.
Note:
A footer template should be created for a project before inserting the footer into a form. To create a footer template, see
.
7.3.4 Enable Idle Timeout
Idle time indicates the amount of time that a user has not interacted with an application. Some applications require a notification to be raised when a user has not interacted with a form for a specified amount of time. For example, a banking app might require a notification after five minutes of inactivity by the user. At the same time, applications also must be able to withhold this notification for certain forms in the application. For example, an ATM Locator form in a banking app will raise the notification after a specific period of inactivity. if Enable Idle Timeout property is selected.
© 2014 by Kony, Inc. All rights reserved 391 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
l
Click On to enable idle timeout.
l
Click Off to disable idle timeout.
7.3.5 Transition: IN
Specifies the configuration to be used when the user arrives on this form. Click the Edit button against
Transition: IN field. From the Transition: IN window, choose the desired transition direction and transaction effect for a specific platform.
You can assign unique values for Transition: IN on the following platforms: l
l
l
l
7.3.5.1 iPhone
The following are iPhone specific properties:
Property
Transition Direction:
Specifies the direction from which the Form appears.
Values l
None: Use this option if you do not want to specify a transition direction.
l
From Right: Specifies that the Form must appear from the right.
l
From Left: Specifies that the Form must appear from the left.
l
From Bottom: Specifies that the Form must appear from the bottom.
l
From Top: Specifies that the Form must appear from the top.
© 2014 by Kony, Inc. All rights reserved 392 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None: Use this option if you do not want to specify a transition direction.
l
Fade: Specifies that the form must fade when it is transitioned to a hidden or an invisible state.
l
MoveIn: Specifies that the form must slide over the existing content in the direction as specified in the transition direction.
l
Push: Specifies that the form must push the existing content in the direction as specified in the transition direction and take its place.
l
Flip: Specifies that the form must be rotated along the Y-axis as the content is being displayed. It supports transition directions from right and left.
l
Reveal: Specifies that the form must be revealed gradually in the direction as specified in the transition direction.
l
Curl: Specifies that the form must be curled or folded (look and feel is similar to turning of a page in a book) as the content is being displayed.
It supports transition directions from top and bottom only.
l
Two Split Horizontal In: Specifies the form which is split horizontally into two parts rejoins when the transition takes place.
l
Two Split Vertical In: Specifies the form which is split vertically into two parts rejoins when the transition takes place.
l
Four Split In: Specifies the form which is split in four parts rejoins when the transition takes place.
l
Four Split Rotate In: Specifies the form which is split in four parts rejoins by rotating the parts when the transition takes place.
l
Two Split Horizontal Out: Specifies the form which is split horizontally into two parts and move away when the transition takes place.
l
Two Split Vertical Out: Specifies the form which is split vertically into two parts and move away when the transition takes place.
l
Four Split Rotate Out: Specifies the form which is split in four parts l
Switch Left: Specifies that the form must go out of the view in 3D circular space along the Y-axis towards left as the content is being displayed.
l
Switch Right: Specifies that the form must go out of the view in 3D circular space along the Y-axis towards right as the content is being displayed.
l
Cloth: Specifies the present form must go out of screen animating as if a cloth is removed.
l
Flip Right: Specifies that the form must be rotated along the Y-axis as the content is being displayed giving an illusion of a page is turned towards right in a book.
l
Flip Left: Specifies that the form must be rotated along the Y-axis as the content is being displayed giving an illusion of a page is turned towards left in a book.
l
Door: Specifies that the form must be revealed giving an illusion of an opening a door.
l
Rotate Exchange: Specifies that the form must be rotated along the Xaxis as the content is being displayed.
l
MoveOut: Specifies that the form must slide over the existing content in the direction as specified in the transition direction.
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.5.2 Android
The following are Android specific properties:
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None: The constant value is 0. The default device effect is applied or none of the effect is applied.
l
Bottom Top: The constant value is 1. It specifies that the form must slide-in from the bottom and proceed towards the top.
l
From Left: The constant value is 2. It specifies that the form must slide-in from the left with a fade effect.
l
From Right: The constant value is 3. It specifies that the form must slide-in from the right with a fade effect.
l
To Right: The constant value is 4. It specifies that the form must slide-out to the right with a fade effect.
l
To Left: The constant value is 5. It specifies that the form must slide-out to the left with a fade effect.
l
From Center: The constant value is 6. It specifies that the form must grow from the center with a fade effect.
l
Top Right Bottom: The constant value is 7. It specifies that the form must slide-in from the top-right corner and proceed towards the bottom.
l
Bottom Left Top: The constant value is 8. It specifies that the form must slide-in from the bottom-left corner and proceed towards the top.
l
Bottom Top 2: The constant value is 9. It specifies that the form must shrink from the bottom towards the top.
l
Top Down: The constant value is 10. It specifies that the form must slide-in from the top and proceed towards the bottom.
© 2014 by Kony, Inc. All rights reserved 394 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.5.3 Windows Phone 8
The following are Windows Phone 8 specific properties:
Property
Transition Mode: Specifies the direction from which the From appears.
Transition Key: Specifies the effect from which the From appears.
Transition Speed: Specifies the speed at which the Form is transitioned.
Values l
Default: The default device effect is applied or none of the effect is applied.
l
Sequential- The transition of the Form going out of the view completes first and then the transition of the Form coming into the view takes place.
l
Parallel- The transition of the Form going out of the view and the transition of the Form coming into the view takes place simultaneously.
l
Default: Specifies that the Form must slide horizontally into the view.
l
Rotate 3D Single: Specifies that the Form must be rotated along the center Y-Axis when coming into the view.
l
Rotate 3D Dual: Specifies that the Form must be shown making a circle around the screen from the background before coming into the view.
l
Slide: Specifies that the Form must slide horizontally into the view.
l
Pop: Specifies that the Form must emerge from center-bottom of the screen and gradually occupy the complete screen.
l
Squeeze: Specifies that the Form must be expanded horizontally from an initial width of zero.
The value must be specified in seconds.
© 2014 by Kony, Inc. All rights reserved 395 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.5.4 SPA
The following are SPA specific properties:
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None- Use this option if you do not want to specify a transition direction.
l
Top Center: Specifies that the form must appear from the top center.
l
Bottom Center: Specifies that the form must appear from the bottom center.
l
Right Center: Specifies that the form must appear from the right center.
l
Left Center: Specifies that the form must appear from the left center.
7.3.6 Transition: OUT
Specifies the configuration to be used when the user arrives on this form. Click the Edit button against
Transition: OUT field. From the Transcation: OUT window, choose the desired transition direction and transaction effect for a specific platform.
You can assign unique values for Transition: OUT on the following platforms: l
l
l
l
© 2014 by Kony, Inc. All rights reserved 396 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.6.1 iPhone
The following are iPhone specific properties:
Property
Transition Direction:
Specifies the direction from which the Form appears.
Values l
None: Use this option if you do not want to specify a transition direction.
l
From Right: Specifies that the Form must appear from the right.
l
From Left: Specifies that the Form must appear from the left.
l
From Bottom: Specifies that the Form must appear from the bottom.
l
From Top: Specifies that the Form must appear from the top.
© 2014 by Kony, Inc. All rights reserved 397 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None: Use this option if you do not want to specify a transition direction.
l
Fade: Specifies that the form must fade when it is transitioned to a hidden or an invisible state.
l
MoveIn: Specifies that the form must slide over the existing content in the direction as specified in the transition direction.
l
Push: Specifies that the form must push the existing content in the direction as specified in the transition direction and take its place.
l
Flip: Specifies that the form must be rotated along the Y-axis as the content is being displayed. It supports transition directions from right and left.
l
Reveal: Specifies that the form must be revealed gradually in the direction as specified in the transition direction.
l
Curl: Specifies that the form must be curled or folded (look and feel is similar to turning of a page in a book) as the content is being displayed.
It supports transition directions from top and bottom only.
l
Two Split Horizontal In: Specifies the form which is split horizontally into two parts rejoins when the transition takes place.
l
Two Split Vertical In: Specifies the form which is split vertically into two parts rejoins when the transition takes place.
l
Four Split In: Specifies the form which is split in four parts rejoins when the transition takes place.
l
Four Split Rotate In: Specifies the form which is split in four parts rejoins by rotating the parts when the transition takes place.
l
Two Split Horizontal Out: Specifies the form which is split horizontally into two parts and move away when the transition takes place.
l
Two Split Vertical Out: Specifies the form which is split vertically into two parts and move away when the transition takes place.
l
Four Split Rotate Out: Specifies the form which is split in four parts l
Switch Left: Specifies that the form must go out of the view in 3D circular space along the Y-axis towards left as the content is being displayed.
l
Switch Right: Specifies that the form must go out of the view in 3D circular space along the Y-axis towards right as the content is being displayed.
l
Cloth: Specifies the present form must go out of screen animating as if a cloth is removed.
l
Flip Right: Specifies that the form must be rotated along the Y-axis as the content is being displayed giving an illusion of a page is turned towards right in a book.
l
Flip Left: Specifies that the form must be rotated along the Y-axis as the content is being displayed giving an illusion of a page is turned towards left in a book.
l
Door: Specifies that the form must be revealed giving an illusion of an opening a door.
l
Rotate Exchange: Specifies that the form must be rotated along the Xaxis as the content is being displayed.
l
MoveOut: Specifies that the form must slide over the existing content in the direction as specified in the transition direction.
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.6.2 Android
The following are Android specific properties:
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None: The constant value is 0. The default device effect is applied or none of the effect is applied.
l
Bottom Top: The constant value is 1. It specifies that the form must slide-in from the bottom and proceed towards the top.
l
From Left: The constant value is 2. It specifies that the form must slide-in from the left with a fade effect.
l
From Right: The constant value is 3. It specifies that the form must slide-in from the right with a fade effect.
l
To Right: The constant value is 4. It specifies that the form must slide-out to the right with a fade effect.
l
To Left: The constant value is 5. It specifies that the form must slide-out to the left with a fade effect.
l
From Center: The constant value is 6. It specifies that the form must grow from the center with a fade effect.
l
Top Right Bottom: The constant value is 7. It specifies that the form must slide-in from the top-right corner and proceed towards the bottom.
l
Bottom Left Top: The constant value is 8. It specifies that the form must slide-in from the bottom-left corner and proceed towards the top.
l
Bottom Top 2: The constant value is 9. It specifies that the form must shrink from the bottom towards the top.
l
Top Down: The constant value is 10. It specifies that the form must slide-in from the top and proceed towards the bottom.
© 2014 by Kony, Inc. All rights reserved 399 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.6.3 Windows Phone 8
The following are Windows Phone 8 specific properties:
Property
Transition Mode: Specifies the direction from which the From appears.
Transition Key: Specifies the effect from which the From appears.
Transition Speed: Specifies the speed at which the Form is transitioned.
Values l
Default: The default device effect is applied or none of the effect is applied.
l
Sequential- The transition of the Form going out of the view completes first and then the transition of the Form coming into the view takes place.
l
Parallel- The transition of the Form going out of the view and the transition of the Form coming into the view takes place simultaneously.
l
Default: Specifies that the Form must slide horizontally into the view.
l
Rotate 3D Single: Specifies that the Form must be rotated along the center Y-Axis when coming into the view.
l
Rotate 3D Dual: Specifies that the Form must be shown making a circle around the screen from the background before coming into the view.
l
Slide: Specifies that the Form must slide horizontally into the view.
l
Pop: Specifies that the Form must emerge from center-bottom of the screen and gradually occupy the complete screen.
l
Squeeze: Specifies that the Form must be expanded horizontally from an initial width of zero.
The value must be specified in seconds.
© 2014 by Kony, Inc. All rights reserved 400 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.6.4 SPA
The following are SPA specific properties:
Property
Transition Effect: Specifies the effect from which the form appears.
Values l
None- Use this option if you do not want to specify a transition direction.
l
Top Center: Specifies that the form must appear from the top center.
l
Bottom Center: Specifies that the form must appear from the bottom center.
l
Right Center: Specifies that the form must appear from the right center.
l
Left Center: Specifies that the form must appear from the left center.
7.3.7 Title
Specifies the title of the form and appears in the Title Bar.
To update Title property, refer to Title Bar .
7.3.8 Retain Scroll Pos
Specifies if the Form must remember the scroll position when the user revisits the Form.
7.3.9 Title Bar
Specifies whether the title bar must be displayed on a form.
l
Click On to display title bar.
l
Click Off to hide title bar.
© 2014 by Kony, Inc. All rights reserved 401 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
The selected option becomes the default for all the platforms.
If you wanted to choose a different Title Bar option for a specific platform, click the ellipses (...) button next to the Title Bar Off. The TitleBar dialog box appears.
Select a platform and from the corresponding Value field , select the check box to enable or disable displaying the title bar.
7.3.10 Header Overlap
Specifies if the header must overlap the form. For example, every time you scroll the form, the header is fixed and the header overlaps the form as specified in the header overlap field. If this field is selected, the form scrolls behind the header background and a part of the header background is transparent.
l
Click On to allow header overlap the form.
l
Click Off to disallow header overlap the form.
If you wanted to choose a different Header Overlap option for a specific platform, click the ellipses (...) button next to the Header Overlap Off. The Header Overlap dialog box appears.
Select a platform and from the corresponding Value field , select the check box to allow or disallow header overlap.
7.3.11 Footer Overlap
Specifies if the footer must overlap the form. For example, every time you scroll the form, the footer is fixed and the footer overlaps the form as specified in the Footer Overlap field. If this field is selected, the form scrolls behind the footer background and a part of the footer background is transparent.
l
Click On to allow footer overlap the form.
l
Click Off to disallow footer overlap the form.
If you wanted to choose a different Footer Overlap option for a specific platform, click the ellipses (...) button next to the Footer Overlap Off. The Footer Overlap dialog box appears.
© 2014 by Kony, Inc. All rights reserved 402 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
Select a platform and from the corresponding Value field , select the check box to allow or disallow footer overlap.
7.3.12 App Menu
The Application Menu (App Menu) contains features that apply to the application as a whole, rather than to a specific application screen or window.
You can choose to display App Menu on every form or on specific forms of the application.
By default, App Menu is viable on all the platforms. To hide App Menu for a for a specific platforms, click the Edit button next to the App Menu. The Fork Platforms dialog box appears. Clear a platform check box on which you wish to hide App Menu.
© 2014 by Kony, Inc. All rights reserved 403 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
To customize App Menu items, follow the below steps:
1. Click inside the App Menu in App Canvas to display a right arrow.
2. Click the right arrow, and then click Action: Edit Master Data. The App Menu Master Data dialog box appears.
© 2014 by Kony, Inc. All rights reserved 404 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
3. You can customize the following properties: a. Skin: From the list of available skins, select a required skin.
b. FocusSkin: From the list of available skins, select a required skin.
From within the table: c. ID: Unique identifier for the menu item.
d. Title: name of the menu item e. Icon: An icon appears above the Title. To assign an icon, click the ellipsis (...) button in the cell, and then select an icon.
f. onClick: You can assign onClick event by clicking the ellipsis (...) button in the cell, and creating an event in the Action Editor dialog box.
7.3.13 Menu Position
Specifies if the menu is shown or hidden in the application. In some platforms, form menu items appear along with app menu items. This property allows developer to configure whether to append at the end of application menu list or inserted at beginning of the application menus.
© 2014 by Kony, Inc. All rights reserved 405 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
Following are the options: l
After App Menu l
Before App Menu
The selected menu position here becomes the default for all the platforms.
For specifying a platform specific menu position, click ellipsis (...) button next to the Menu Position list to open Menu Position dialog box.
Select the platform, and from its corresponding Value list, choose a desired menu position.
7.3.14 Layout Type
Specifies if the arrangement of the widgets either in free form or horizontal or vertical direction.
The following are the layout types of flex forms: l
Free Form: Enables you to place the widgets in any order. That is, you can align the widgets horizontally or vertically.
l
Flow Vertically: Enables you to align the widgets vertically.
7.3.15 Enable Scrolling
Specifies whether the scrolling is enabled on the container or not.
l
To enable scrolling, click On.
l
To disable scrolling, click Off.
7.3.16 Bounces
Specifies whether the scroll bounce is enabled or disabled.
l
To enable scroll bounce, click On.
l
To disable scroll bounce, click Off.
© 2014 by Kony, Inc. All rights reserved 406 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.17 Horizontal Bounce
This property is available only when
is enabled.
Specifies whether the scroll bounce is enabled or disabled in the horizontal direction.
l
To enable horizontal scroll bounce, click On.
l
To disable horizontal scroll bounce, click Off.
7.3.18 Vertical Bounce
This property is available only when
is enabled.
Specifies whether the scroll bounce is enabled or disabled in the vertical direction.
l
To enable vertical scroll bounce, click On.
l
To disable vertical scroll bounce, click Off.
7.3.19 Paging
Specifies the whether the paging is enabled for the container. If this property is set to true, the scroll view stops on multiples of the scroll view's bounds when the user scrolls.
7.3.20 Content Offset X
Specifies the x coordinate of the top-left of the scrollable region. When the value is set, the container scrolls even if the scrolling is disabled.
7.3.21 Content Offset Y
Specifies the y coordinate of the top-left of the scrollable region. When the value is set, the container scrolls even if the scrolling is disabled.
© 2014 by Kony, Inc. All rights reserved 407 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.22 Content Size Width
Specifies the width of the container to accommodate all the widgets placed on a form.
7.3.23 Content Size Height
Specifies the height of the container to accommodate all the widgets placed on a form.
7.3.24 Snap to Grid
A widget aligns to the nearest intersection of lines in the grid, or other widgets.
l
Click On to allow snapping the widgets to a grid.
l
Click Off to disable snapping the widgets to a grid.
7.3.25 Snap Grid Size
Specifies the value of the grid size. This option is available only when you enable Snap to Grid property.
7.3.26 Default unit
Specifies the default unit to be used for interpretation of numbers with no qualifiers when passed to layout properties.
Following are the options: l dp: Specifies the values in terms of device independent pixels.
l px: Specifies the values in terms of device hardware pixels.
l
%: Specifies the values in percentage relative to the parent dimensions.
Note: The default unit assigned for a form becomes the default unit for all the flex widgets except for the widgets FlexContainer and FlexScrollContainer.
© 2014 by Kony, Inc. All rights reserved 408 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.27 Input View Type
When building iPhone applications that support or provide text input, it's often necessary to create some extra buttons (or other controls) beyond the ones provided by the default keyboard interface.
Kony Platform by default, adds the Previous, Next and Done buttons to the applicable input controls.
These buttons allow specific operations needed by your application, such as moving to the next or previous text field, make the keyboard disappear. The area above the keyboard is known as Input
Accessory View.
This property, allows you to specify the type of accessory view that will be shown for all the input controls on this form.
Following are the options: l
None: Use this option if you do not want to specify the toolbar. This option should be used carefully, as setting this option for widgets like calendar leaves the user with no option to select and drop-down a wheel calendar.
l
Default: Specifies that the toolbar that is defined in the Application level settings. To set the
Application level settings, right-click on the project and navigate to
Properties> Native
App>iPhone/iPad
.
l
Next / Previous: Specifies the navigation options as Next, Previous, and Done for a form. The
© 2014 by Kony, Inc. All rights reserved 409 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
below image illustrates the next prev toolbar set for a Textbox. The highlighted toolbar is achieved by setting the Keyboard Type as Default for a Textbox and Input Accessory View
Type as nextprevtoolbar to the Form.
l
Cancel: Specifies that the input accessory view has a cancel button. This option does not trigger any events.
Note: This property is specific to the iOS platform.
© 2014 by Kony, Inc. All rights reserved 410 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.28 Post Show indicator
This property specifies if there must be a progress indicator to show that the form content is being loaded. You can use this property for forms that require network calls during post-show.
l
Click On to display the progress indicator.
l
Click Off to hide the progress indicator.
The following image illustrates the loading indicator:
Note: This property is specific to the iOS platform.
7.3.29 Post Show Transparency
Normally, when a form is loading, the user interface is blocked. You can use this property to specify the percentage of transparency.
Default: 100
Note: This property is specific to the iOS platform.
7.3.30 Hide Status Bar
Specifies the status of the status bar.
Following are the options: l
ApplyApp Settings l
True l
False
© 2014 by Kony, Inc. All rights reserved 411 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.31 Configure Extend Top l
Click On to display the Extend Top property.
l
Click Off to hide the Extend Top property.
Note: This property is specific to the iOS platform.
7.3.32 Configure Extend Bottom l
Click On to display the Extend Bottom property.
l
Click Off to hide the Extend Bottom property.
Note: This property is specific to the iOS platform.
7.3.33 Configure Status Bar Style l
Click On to display the Status Bar Style property.
l
Click Off to hide the Status Bar Style property.
Note: This property is specific to the iOS platform.
7.3.34 Extend Top
Specifies the form content to scroll under the App Menu. This property is supported in iOS7 and above only. This property is also applicable on the Application Level. The property set at form level takes precedence over Application level. If On option is selected, the form scroll under the App Menu.
Note: This property is specific to the iOS later platforms.
© 2014 by Kony, Inc. All rights reserved 412 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.35 Extend Bottom
This property enables you to Configure Extend Bottom property. This property is supported on iOS7 and above only. This property is also applicable on the Application Level. The property set at form level takes precedence over Application level. If On option is selected, the property extendBottom appears.
Note: This property is specific to the iOS platform.
7.3.36 Status Bar Style
This property enables you to set the status bar style.
You can select one of the following styles for your status bar: l
Default: The status bar contents are displayed in black color suitable for a light background.
l
Light Content: The status bar contents are displayed in white color suitable for a dark background.
© 2014 by Kony, Inc. All rights reserved 413 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the iOS7 platform.
7.3.37 Zoom Scale
Specifies the current scale factor applied to the form content.
Default:1
Note: This property is specific to the iOS platform.
7.3.38 Min Zoom Scale
Specifies the minimum zoom scale factor that can be applied to the form.
Default: 1
Note: This property is specific to the iOS platform.
7.3.39 Max Zoom Scale
Specifies the maximum zoom scale factor that can be applied to the form.
Default: 1
Note: This property is specific to the iOS platform.
7.3.40 Soft Input Mode
Specifies the soft keyboard for a widget that requires an input should be placed at the bottom of the form. For example, when a TextBox or a TextArea requires input from the user, the soft-keyboard pops up when you enter text.
Following are the options:
© 2014 by Kony, Inc. All rights reserved 414 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
l
Adjust - Resize: Specifies the form is resized and when you click or start typing within the widget which requires an input, the form scrolls up and the widget which requires an input is not overlapped by the keypad or footer.
l
Adjust - Pan: Specifies the widget which requires an input is placed at the bottom of the form is overlapped by the keypad.
The following image illustrates the above two options:
Note: This property is specific to the Android platform.
7.3.41 Max App Menu Buttons
Specifies the number of app menu buttons that should be displayed on the screen.
Note: This property is specific to the Windows 8 platform.
© 2014 by Kony, Inc. All rights reserved 415 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.3.42 Animate Header Footer
Specifies if the headers and footers of the Form must slide up and down respectively away from the view when the Form is in transition. To enable animation, select the On option next to the Animate
Header Footer.
Note: This property is specific to the Windows 8 platform.
7.4 Actions
On this tab, you define the events that are executed when an action is run. On a form, you can run the following actions:
Form has the following actions associated with it: l init - called immediately after an addWidgets event for any initializations required for the form.
Init initializes the form and any widgets.
In case of Server side Mobile Web and SPA, addWidgets and init events gets called as soon as the form is created. In case of native platforms, as an optimization, these events are deferred until the first access.
l preShow - called just before a form is visible on the screen. A form can be made visible by explicitly calling the show method of the form.
l postShow - called immediately after the form is visible on the screen. A form is made visible by explicitly calling the show method of the form.
l onHide - called when the form goes out of the screen. A form can go out of the screen when another form is to be shown.
l onDestroy - called when a form is destroyed. A form is destroyed when the developer explicitly calls destroy and this event gets called before destroying the form.
The following image illustrates the lifecycle of a form:
© 2014 by Kony, Inc. All rights reserved 416 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
l onScrollStart: An event callback is invoked by the platform when the user starts scrolling the content. This event is invoked asynchronously.
l onScrollTouchReleased: An event callback is invoked by the platform when the user touch is released from the touch surface. This event is invoked asynchronously.
l onScrolling: An event callback is invoked by the platform when the scrolling is in progress. This event is invoked asynchronously.
l onDecelerationStarted: An event callback is invoked by the platform when the user stops scrolling but the content still moves before the content actually stop.
l onScrollEnd: An event callback is invoked by the platform when the scrolling is ended. This event is invoked asynchronously.
© 2014 by Kony, Inc. All rights reserved 417 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
l onOrientationChange: Specifies an Event which is triggered when there is a change in orientation of the form from portrait to landscape or vice versa.
Note: This property is specific to the iOS platform.
l widgetToZoom: An event callback is invoked by the platform to return one of the child widgets of source to zoom. The returning source itself may not result in zooming the entire source. The container will not zoom, if a null value is returned. This event is invoked asynchronously.
Note:
This property is specific to the iOS platform.
l onZoomStart: An event callback is invoked by the platform when the container is about to zoom.
This event is invoked asynchronously.
Note: This property is specific to the iOS platform.
l onZooming: An event callback is invoked by the platform when the container is zooming. This event is invoked asynchronously.
Note: This property is specific to the iOS platform.
l onZoomEnd: An event callback is invoked by the platform when the zooming has ended. This event is invoked asynchronously.
Note: This property is specific to the iOS platform.
l onDeviceBack: Specifies an event which is triggered when the user uses the back button on the device.
Note: This property is specific to the Android platform.
l onDeviceMenu: Specifies an event which is triggered when the user uses the back button on
© 2014 by Kony, Inc. All rights reserved 418 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
the device.
Note: This property is specific to the Android platform.
l onOrientationChange: Specifies an event which is triggered when there is a change in orientation of the form from portrait to landscape or vice versa.
Note:
This property is specific to the Android platform.
l onDeviceBack: Specifies an event which is triggered when the user uses the back button on the device.
Note: This property is specific to the Windows 8 platform.
l onOrientationChange: Specifies an event which is triggered when there is a change in orientation of the form from portrait to landscape or vice versa.
Note: This property is specific to the Windows platform.
l onDeviceBack: Specifies an event which is triggered when the user uses the back button on the device.
Note: This property is specific to the SPA platform.
l onOrientationChange: Specifies an event which is triggered when there is a change in orientation of the form from portrait to landscape or vice versa.
Note: This property is specific to the SPA platform.
For more information on using the above action, refer to section
.
© 2014 by Kony, Inc. All rights reserved 419 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.5 Notes
The Notes tab consists of form-level comments, feedback, and suggestions about a form (or page).
These notes are either posted by you or your users. The notes are visible to the users during functional preview only when the application is published to the cloud. For more information, see
.
This section details the following: l
l
l
7.5.1 Your Notes
You can manage the notes by performing the following actions: l
l
l
7.5.1.1 Add a Note
To add a note, follow these steps:
© 2014 by Kony, Inc. All rights reserved 420 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
1. Click the form's Properties > Notes tab.
2. Type your note in the box.
3. Click Add Notes.
7.5.1.2 Edit a Note
To edit a note, follow these steps:
1. Click the form's Properties > Notes tabs.
2. Click the edit icon.
3. Make necessary changes to the note.
4. Click Save.
Note: You can only edit your own comments
© 2014 by Kony, Inc. All rights reserved 421 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
7.5.1.3 Delete a Note
To delete a note, follow these steps:
1. Click the form's Properties > Notes tab.
2. Click the delete icon next to the note.
Note: You can only delete your own comments
7.5.2 Users Notes
A users can post a comment while viewing the functional preview of the application.
For more details on how a user can post a comment, see
Functional Preview (Cloud) Notes
.
7.5.3 Merging Users Notes
When a note is added during
Functional Preview (Cloud) , they will be available to you in your Kony
Visualizer project. The cloud icon in your project will change its color and a number is displayed. The number indicates the how many comments are available to be merged.
.
Click the icon to view the added notes:
© 2014 by Kony, Inc. All rights reserved 422 of 621
7. Flex Form
Kony Visualizer User Guide
Version 2.2
These notes are downloaded to your local project and are available in your Notes tab.
© 2014 by Kony, Inc. All rights reserved 423 of 621
8. Flex Container Rules
Kony Visualizer User Guide
Version 2.2
8. Flex Container Rules
Widgets placed on a
adhere to some rules for width, height, and positioning of the widget with respect to other widgets and parent container.
l
l
Preferred Width and Preferred Height Rules
l
Widget Layout Properties - Priority Rules
8.0.1 Height and Width Rules
Height and width of a widget is determined by the explicit values specified to width and height properties. There are cases where you will not be able to give an explicit width and height, due to dynamic nature of the application.
The properties Min Height, Max Height, Min Width, and Max Width of the widget are used to determine the width and height of the widgets.
The following are some of the cases that explain the behavior of the widget with respect to the properties specified:
Condition
Width of the widget is specified
Height of the widget is specified
Behavior
The specified width is taken for layout purpose. Specifying the width explicitly will make Min Width and Max Width ineffective.
The specified height is taken for layout purpose. Specifying the height explicitly will make Min Height and Max Height values ineffective.
© 2014 by Kony, Inc. All rights reserved 424 of 621
8. Flex Container Rules
Kony Visualizer User Guide
Version 2.2
Condition
Width is undefined and Min Width and
Max Width are specified
Height is undefined, and Min Height and
Max Height are specified
Width and Min Width are undefined, and
Max Width is specified
Behavior l
The Min Width and Max Width values are used to determine the width of the widget.
l
Widget is asked for its preferred width and the final width of widget is calculated based on Min Width and Max Width specified and preferred width of the widget.
l
Always the equation
Min Width <=
Calculated Width <= Max Width
is maintained.
l
The Min Height and Max Height values are used to determine the height of the widget.
l
Widget is asked for its preferred height and the final height of the widget is calculated based on Min
Height and Max Height values, and preferred height of the widget.
l
Always the equation
Min Height <= calculatedHeight <= Max
Height
is maintained.
l
The Max Width vale is used to determine the width of the widget.
l
Widget is asked for its preferred width, and the final width of the widget is calculated based on Max
Width specified and preferred width of the widget.
l
Always the equation
0 <= Calculated
Width <= Max Width
is maintained.
© 2014 by Kony, Inc. All rights reserved 425 of 621
8. Flex Container Rules
Kony Visualizer User Guide
Version 2.2
Condition
Width and Max Width are undefined, and
Min Width is specified
Height and Min Height are undefined, and Max Height is specified
Height and Max Height are undefined, and Min Height is specified
Min Width > Max Width
Behavior l
The Min Width value is used to determine the width of the widget.
l
Widget is asked for its preferred width, and the final width of the widget is calculated based on Min
Width specified and preferred width of the widget.
l
Always the equation
Min Width <=
Calculated Width <= Preferred
Width
is maintained.
l
The Max Height value is used to determine the height of the widget.
l
Widget is asked for its preferred height, and the final height of the widget is calculated based on Max
Height specified and preferred height of the widget.
l
Always the equation
0 <= Calculated
Height <= Max Height
is maintained.
l
The Min Height value is used to determine the height of the widget.
l
Widget is asked for its preferred height, and the final height of the widget is calculated based on Min
Height specified and preferred height of the widget.
l
Always the equation
Min Height <=
Calculated Height <=
Preferred Height
is maintained.
Min Width specified is ignored. For width calculations only
Max Width is considered assuming Min Width as zero.
© 2014 by Kony, Inc. All rights reserved 426 of 621
8. Flex Container Rules
Kony Visualizer User Guide
Version 2.2
Condition
Min Height > Max Height
Behavior
Min Height specified is ignored. For height calculations only Max Height is considered assuming Min Height as zero.
8.0.2 Preferred Width and Preferred Height Rules
The preferred width and preferred height will vary per widget from platform to platform. Widgets are categorized with respect to their preferred width and preferred height calculations:
Content Driven Widgets Greedy Widgets
Label
Button
Image
Calendar
CheckBox Group
ListBox
Link
ComboBox
RadioButton Group
RichText
Fixed Width in Individual
Platforms
Switch
TextArea
TextBox
Slider
Line
Segment2
TabPane
Horizontal Image
Strip
Image Gallery
DataGrid
FlexContainer
FlexScrollContainer
Browser
Map
© 2014 by Kony, Inc. All rights reserved 427 of 621
8. Flex Container Rules
Kony Visualizer User Guide
Version 2.2
Content Driven Widgets
Camera
PickerView
Phone
Fixed Width in Individual
Platforms
Greedy Widgets
Note: Padding is considered as part of the content when deciding the Preferred Width and
Preferred Height for the content driven widgets.
8.0.3 Widget Layout Properties - Priority Rules
For Flex Layout it is not necessary to set all the layout properties except that determine the position and dimension of the widget without any ambiguity.
Positioning
Horizontal positioning
Vertical positioning
Priority Rules l
Center X property has more priority over left.
l
Left property has more priority over right.
l
When none of the horizontal properties are defined, widget is positioned such a way that left of the widget is placed at the left boundary of the parent.
l
Center Y property has more priority over top.
l
Top property has more priority over bottom.
l
When none of the vertical properties are defined, widget is positioned such a way that top of the widget is placed at the top boundary of the parent.
© 2014 by Kony, Inc. All rights reserved 428 of 621
8. Flex Container Rules
Positioning
Width
Height
Kony Visualizer User Guide
Version 2.2
Priority Rules l
Width property has more priority over than implicit width calculations.
l
Implicit width calculations when width is not specified, will rely on Min Width and Max Width values.
l
Implicit width calculations when width related properties are not specified, will rely on positioning properties.
n
In the order of Center X, left, and right properties are used to determine width.
l
When implicit calculated values for width results in negative then values will be defaulted to zero.
l
Height property has more priority over than implicit height calculations.
l
Implicit height calculations when height is not specified, will rely on Min Height and Max Height values.
l
Implicit height calculations when height related properties are not specified, will rely on positioning properties.
n
In the order of Center Y, top, and bottom properties are used to determine height.
l
When implicit calculated values for height results in negative then values will be defaulted to zero.
Additional information: l
When any of the width or height related parameters given then width will be determined based on the
© 2014 by Kony, Inc. All rights reserved 429 of 621
8. Flex Container Rules
Kony Visualizer User Guide
Version 2.2
l
If none of the width or height related properties are specified then layout manager as a second priority does implicit calculations and determines the width and height based on the positional properties provided as per the rules laid out in the above table.
l
When implicit calculated values for width and height results in negative then values will be defaulted to zero.
l
There will not be any implicit calculations to determine the width and height happen in case of
Flow Horizontal or Flow Vertical layout types.
l
If positional properties are not good enough to perform implicit calculations then layout manger purely goes by widgets preferred dimensions (preferred width and preferred height).
l
The properties like Screen Level Widget, Container Height, and Container Height Reference are not supported for the widgets placed inside flex containers.
© 2014 by Kony, Inc. All rights reserved 430 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
9. Popup
A pop-up usually appears in the center of the screen on top of the form from which you have invoked the pop-up. It does not span the entire screen width. A pop-up allows you to partition UI design into smaller parts.
9.1 Popup Properties
You can update a pop-up properties such as look and feel, provide platform specific properties, and attach various actions events.
9.2 Look
Following properties can be modified from this tab.
1. General > ID: It is the unique identifier of the pop-up. When a pop-up is added , system assigns a unique ID (or name). You can rename the pop-up ID, if required.
© 2014 by Kony, Inc. All rights reserved 431 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
2. Render: Defines whether a pop-up should be displayed on a specific platform. By default, a pop-up is rendered for all the platforms. If you do not want to render a pop-up for a specific platform, click the Edit button against the Render field to open the Fork Platforms dialog box.
Clear the platform check box for which you do not want to render the pop-up.
3. Appearance - Width%: Specifies the width of a widget. You can lock the percentage of the width occupied by a widget within a container.
4. Padding: Defines the space between the content of a pop-up and the pop-up boundaries.
Following padding options are available:
Property Definition
Top Top padding
Action
Move the slider to adjust the top padding of the widget.
Bottom
Left
Right
Bottom padding
Left padding
Right padding
Move the slider to adjust the bottom padding of the widget.
Move the slider to adjust the left padding of the widget.
Move the slider to adjust the right padding of the widget.
You define pop-up padding values in percentage (%) units and when forked, you can define pop-up padding values in percentage (%) or pixels (Px).
9.3 Skin
Skin define properties such as background color, borders, and shadows for a popup.
For a popup widget, you can apply a skin for the following states: l
Normal: Specifies a background skin for popup widget.
© 2014 by Kony, Inc. All rights reserved 432 of 621
9. Popup
For more details on skin properties, refer to section:
9.4 Platform Specific properties
Kony Visualizer User Guide
Version 2.2
9.4.1 Title
Specifies the name of the popup.
© 2014 by Kony, Inc. All rights reserved 433 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
9.4.2 Header
For inserting a header to a popup, click the Edit button against the Headers field. From the Headers window, you can select a header.
Note: A header template should be created for a project before inserting the Header into a popup.
Refer to section
for steps to create a Header.
9.4.3 Footer
For inserting a footer to a popup, click the Edit button against the Footers field. From the Footers window, you can select a footer.
Note: A footer template should be created for a project before inserting the footer into a popup.
Refer to section
for steps to create a footer.
9.4.4 Header Overlap
Specifies if the header must overlap the popup. For example, every time you scroll the popup, the header is fixed and the header overlaps the popup as specified in the header overlap field. If this field is selected, the popup scrolls behind the header background and a part of the header background is transparent.
l
Click On to allow header overlap the popup.
l
Click Off to disallow header overlap the popup.
If you wanted to choose a different Header Overlap option for a specific platform, click the ellipses (...) button next to the Header Overlap Off option to open Header Overlap dialog box.
Select a platform and from the corresponding value field , select the check box to allow or disallow header overlap.
© 2014 by Kony, Inc. All rights reserved 434 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
9.4.5 Footer Overlap
Specifies if the footer must overlap the popup. For example, every time you scroll the pop-up, the footer is fixed and the footer overlaps the popup as specified in the Footer Overlap field. If this field is selected, the popup scrolls behind the footer background and a part of the footer background is transparent.
l
Click On option to allow footer overlap the popup.
l
Click Off option to disallow footer overlap the popup.
If you wanted to choose a different Footer Overlap option for a specific platform, click the ellipses (...) button next to the Footer Overlap Off option to open Footer Overlap dialog box.
Select a platform and from the corresponding value field , select the check box to allow or disallow footer overlap.
9.4.6 Transition: IN
Specifies the configuration to be used when the user arrives on this pop-up. Click the Edit button against Transition: IN. The Transition: IN dialog appears. Choose the desired transition direction and transaction effect for specific platforms.
9.4.6.1 iOS Properties
Transition Direction: Specifies the direction from which the pop-up appears. The options are: l
None - Use this option if you do not want to specify a transition direction.
l
From Right - Specifies that the pop-up must appear from the right.
l
From Left - Specifies that the pop-up must appear from the left.
l
From Bottom - Specifies that the pop-up must appear from the bottom.
l
From Top - Specifies that the pop-up must appear from the top.
Transition Effect: Specifies the effect from which the pop-up appears. The options are:
© 2014 by Kony, Inc. All rights reserved 435 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
l
None - Use this option if you do not want to specify a transition direction.
l
MoveIn - Specifies that the pop-up must slide over the existing content in the direction as specified in the transition direction.
l
Push - Specifies that the pop-up must push the existing content in the direction as specified in the transition direction and take its place.
l
Reveal - Specifies that the pop-up must be revealed gradually in the direction as specified in the transition direction.
9.4.6.2 Android Properties
Transition Effect: Specifies the effect from which the form appears. The options are: l
None - The default device effect is applied or none of the effect is applied.
l
Bottom Top - It specifies that the pop-up must slide-in from the bottom and proceed towards the top.
l
Bottom Left Top - It specifies that the pop-up must slide-in from the bottom-left corner and proceed towards the top.
l
Bottom Right Top -It specifies that the pop-up must slide-in from the bottom-right corner and proceed towards the top.
l
Top Right Bottom - It specifies that the pop-up must slide-in from the top-right corner and proceed towards the bottom.
l
From Center - It specifies that the pop-up must grow from the center with a fade effect.
l
Slide In Left - It specifies that the pop-up must slide-in from the left with a fade effect.
l
Slide In Right - It specifies that the pop-up must slide-in from the right with a fade effect.
l
Top Down - It specifies that the pop-up must slide-in from the top and proceed towards the bottom.
© 2014 by Kony, Inc. All rights reserved 436 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
9.4.6.3 Windows Phone 8 Properties
Transition Key - Specifies the effect from which the From appears. The options are: l
Slide In- Specifies that the pop-up must slide horizontally into the view.
l
Pop - Specifies that the pop-up must emerge from center-bottom of the screen and gradually occupy the complete screen.
9.4.6.4 SPA Properties
Transition Effect: Specifies the effect from which the form appears. The options are: l
None- Use this option if you do not want to specify a transition direction.
l
Top Center - Specifies that the pop-up must appear from the top center.
l
Bottom Center - Specifies that the pop-up must appear from the bottom center.
l
Right Center - Specifies that the pop-up must appear from the right center.
l
Left Center - Specifies that the pop-up must appear from the left center.
l
Fade Animation - Specifics that the pop-up must fade.
9.4.7 Transition: OUT
Specifies the configuration to be used when the user arrives on this pop-up. Click the Edit button against Transition: OUT field. From the Transcation: OUT window, choose the desired transition direction and transaction effect for specific platforms.
9.4.7.1 iOS Properties
Transition Direction: Specifies the direction from which the pop-up appears. The options are: l
None - Use this option if you do not want to specify a transition direction.
l
From Left - Specifies that the pop-up must appear from the left.
© 2014 by Kony, Inc. All rights reserved 437 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
l
From Right - Specifies that the pop-up must appear from the right.
l
From Bottom - Specifies that the pop-up must appear from the bottom.
l
From Top - Specifies that the pop-up must appear from the top.
Transition Effect: Specifies the effect from which the pop-up appears. The options are: l
None - Use this option if you do not want to specify a transition direction.
l
Fade - Specifies that the pop-up must fade when it is transitioned to a hidden or an invisible state.
l
MoveIn - Specifies that the pop-up must slide over the existing content in the direction as specified in the Transition Direction.
l
MoveOut: Specifies that the popup must slide away in the direction as specified in the Transition
Direction.
9.4.7.2 Android Properties
Transition Effect: Specifies the effect from which the form appears. The options are: l
None - The default device effect is applied or none of the effect is applied.
l
Bottom Top - It specifies that the pop-up must slide-in from the bottom and proceed towards the top.
l
Bottom Left Top - It specifies that the pop-up must slide-in from the bottom-left corner and proceed towards the top.
l
Bottom Right Top - It specifies that the pop-up slide-in from the bottom-right corner and proceed towards the top.
l
Top Right Bottom - It specifies that the pop-up must slide-in from the top-right corner and proceed towards the bottom.
l
From Center - It specifies that the pop-up must grow from the center with a fade effect.
l
Slide In Left - It specifies that the pop-up must slide-in from the left with a fade effect.
© 2014 by Kony, Inc. All rights reserved 438 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
l
Slide In Right - It specifies that the pop-up must slide-in from the right with a fade effect.
l
Top Down - It specifies that the pop-up must slide-in from the top and proceed towards the bottom.
9.4.7.3 Windows Phone 8 Properties
Transition Key - Specifies the effect from which the From appears. The options are: l
Slide Out - Specifies that the pop-up must slide horizontally into the view.
l
Pop Out - Specifies that the pop-up must emerge from center-bottom of the screen and gradually occupy the complete screen.
9.4.7.4 SPA Properties
Transition Effect: Specifies the effect from which the form appears. The options are: l
None- Use this option if you do not want to specify a transition direction.
l
Top Center - Specifies that the pop-up must appear from the top center.
l
Bottom Center - Specifies that the pop-up must appear from the bottom center.
l
Right Center - Specifies that the pop-up must appear from the right center.
l
Left Center - Specifies that the pop-up must appear from the left center.
9.4.8 Modal
In user interface design, a modal window, which is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.
This property indicates whether the popup is to be shown as modal window or a non-modal window.
The selected option becomes default.
To provide a platform specific style, click the ellipsis (...) button next to the Off option of Modal property to open the Modal dialog box.
© 2014 by Kony, Inc. All rights reserved 439 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
from here, you can either change the default value or provide a platform specific value.
9.4.9 Modal Transparency
You can specify the opacity of the Modal.
9.4.10 Height
Specifies the height of the Pop-up in terms of percentage. The percentage is with reference to the value of
property.
Note: This property is unavailable on Flex Forms.
9.4.11 Height Reference
The Pop-up height percentage is calculated based on the option selected.
l
Form Reference: The Pop-up height percentage is calculated based on the height of the Popup excluding headers and footers.
l
Parent Width: The width is calculated based on the width of the Pop-up.
Note: This property is unavailable on Flex Forms.
9.4.12 Input View Type
When building iPhone applications that support or provide text input, it's often necessary to create some extra buttons (or other controls) beyond the ones provided by the default keyboard interface.
Kony Platform by default, adds the Previous, Next and Done buttons to the applicable input controls.
These buttons allow specific operations needed by your application, such as moving to the next or previous text field, make the keyboard disappear. The area above the keyboard is known as Input
Accessory View.
This property, allows you to specify the type of accessory view that will be shown for all the input controls on this popup.
© 2014 by Kony, Inc. All rights reserved 440 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
Following are the options: l
None: Use this option if you do not want to specify the toolbar. This option should be used carefully, as setting this option for widgets like calendar leaves the user with no option to select and drop-down a wheel calendar.
l
Default: Specifies that the toolbar that is defined in the Application level settings. To set the
Application level settings, right-click on the project and navigate to
Properties> Native
App>iPhone/iPad
.
l
Next / Previous: Specifies the navigation options as Next, Previous, and Done for a popup. The below image illustrates the next prev toolbar set for a Textbox. The highlighted toolbar is achieved by setting the Keyboard Type as Default for a Textbox and Input Accessory View
Type as nextprevtoolbar to the popup.
© 2014 by Kony, Inc. All rights reserved 441 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
l
Cancel: Specifies that the input accessory view has a cancel button. This option does not trigger any events.
Note: This property is specific to the iOS platform.
9.4.13 Scroll Bounces
Specifies whether the scroll view bounces past the edge of the content and back again.
l
If On option is selected, the scroll view bounce is allowed.
l
If Off option is selected, the scroll view bounce is disallowed.
© 2014 by Kony, Inc. All rights reserved 442 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
Note:
This property is specific to the iOS platform.
9.4.14 Configure Extend Top l
If On option is selected, the property Extend Top appears l
If Off option is selected, the property Extend Top is not displayed
9.4.15 Extend Top
This property is available only when
is enabled.
Extend Top specifies whether the scrollbar should start from the header of a popup or the body of the popup. If a popup does not have a header, this property behaves the same when you choose either of the following options: l
If On option is selected, the scrollbar starts from the header of a popup.
l
If Off option is selected, the scrollbar starts from the body of the popup.
Note: This property is specific to the iOS7 platform.
9.4.16 Soft Input Mode
Specifies the soft key-board for a widget that requires an input should be placed at the bottom of the popup. For example, when a TextBox or a TextArea requires input from the user, the soft-keyboard pops up when you enter text.
Following are the options: l
Adjust -,Resize: Specifies the popup is resized and when you click or start typing within the widget which requires an input, the popup scrolls up and the widget which requires an input is not overlapped by the keypad or footer.
© 2014 by Kony, Inc. All rights reserved 443 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
l
Adjust - Pan: Specifies the widget which requires an input is placed at the bottom of the popup is overlapped by the keypad.
The below image illustrates the above two options:
Note: This property is specific to the Android platform.
9.4.17 Max App Menu Buttons
Specifies the number of app menu buttons that should be displayed on the device.
9.5 Actions pop-up has the following actions associated with it:
© 2014 by Kony, Inc. All rights reserved 444 of 621
9. Popup
Kony Visualizer User Guide
Version 2.2
l init: is called immediately after an addWidgets event for any initializations required for the popup. Init initializes the pop-up and any widgets.
In case of Server side Mobile Web and SPA, addWidgets and init events gets called as soon as the pop-up is created. In case of native platforms, as an optimization, these events are deferred until the first access.
l onHide: is called when the pop-up goes out of the screen. A pop-up can go out of the screen when another pop-up is to be shown.
l onDeviceBack: Specifies an event which is triggered when the user uses the back button on the device.
© 2014 by Kony, Inc. All rights reserved 445 of 621
10. Common Properties
10. Common Properties
Widgets contain common properties that are explained in this section: l
l
l
l
Accessibility (508 Compliance)
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 446 of 621
Kony Visualizer User Guide
Version 2.2
10.1 Look
This section details the Properties > Look tab of a widget.
Note: Some of the properties discussed in this section may not be applicable for all the widgets.
A widget's Look properties depends on form the widget is placed. For example, a Button widget placed on a Flex form, will not have Margin properties. Similarly, the Button widget placed on a VBox form will not have Flex properties.
This section covers the following topics: l
A widget's Look Property when placed on a VBox Form
l
A widget's Look Property when placed on a Flex Form
10.1.1 A widget's Look Property when placed on a VBox Form
The following are the widgets' Look properties available for a VBox Form:
© 2014 by Kony, Inc. All rights reserved 447 of 621
Kony Visualizer User Guide
Version 2.2
10.1.1.1 ID
Denotes the name of a widget. When a widget is added to a form, a unique name is assigned to the widget. You can rename a widget by typing a name in the ID box.
© 2014 by Kony, Inc. All rights reserved 448 of 621
Kony Visualizer User Guide
Version 2.2
Note:
You can also rename a widget from the Project Explorer by right-clicking a widget, and then clicking Rename.
10.1.1.2 Visible
Controls the visibility of a widget.
l
To make a widget visible, click On .
l
To make a widget invisible, click Off.
10.1.1.3 Render
Defines whether a widget appears on a specific platform. By default, a widget is rendered for all the platforms. If you do not want to render a widget for a specific platform, click the Edit button against the
Render field to open the Fork Platforms dialog box.
Clear the check box of the platforms for which the widget should not be rendered.
Difference between Visible and Render l
When a Widget is not rendered for a platform, it implies that the widget is hidden from that specific platform.
© 2014 by Kony, Inc. All rights reserved 449 of 621
Kony Visualizer User Guide
Version 2.2
l
Whereas, when a widget is set as invisible, it implies that the widget is available, but is invisible.
This feature is useful when you wanted to display a widget based on certain conditions.
10.1.1.4 Content Align
Allows you to define how the widget content is aligned. Following alignment options are available: a. Horizontal Alignment
: Allows you to align the content horizontal.
Note:
Horizontal alignment of a widget is possible only when the
property is enabled.
b. Vertical Alignment is possible only when:
: Allows you to align the content vertically. This type of alignment l
Two or more widgets are placed inside a container (with horizontal orientation) such as
HBox.
l
Widget whose content is to be aligned vertically should not occupy maximum height.
l
The
property is enabled for the widget whose content is to be aligned vertically.
Note:
You can only view the behavior of the
property during the
and the
You can define the content alignment of a widget specific to a platform by forking Content Align. For more information on forking, refer section:
10.1.1.5 Widget Align
Specifies how a widget is aligned with respect to its boundaries and its neighboring widgets (within the same container widget). Following alignments options are available:
© 2014 by Kony, Inc. All rights reserved 450 of 621
Kony Visualizer User Guide
Version 2.2
a. Horizontal Alignment
: Allows you to align a widget horizontally within its boundaries. This type of alignment is possible only when: o
The
property is disabled.
o
The text entered in the
box should occupy width less than the
set for that widget.
The following table displays how a Button widget is aligned within its boundaries.
Left Center Right b. Vertical alignment
: Allows you to align a widget vertically with respect to its neighboring widget. This type of alignment is possible only when: l
Two or more widgets are placed inside a container widget (with horizontal orientation) such as HBox.
l
Widget that is being aligned vertically should not occupy maximum height.
For example, consider a Label widget and a Button widget are placed inside an HBox widget.
The following table demonstrates how the Label widget is aligned with respect to the Button widget.
Left Center Right
© 2014 by Kony, Inc. All rights reserved 451 of 621
Kony Visualizer User Guide
Version 2.2
10.1.1.6 Expand Horiz
Specifies whether widget is allowed to expand horizontally.
10.1.1.7 Expand Vert
: Specifies whether widget is allowed to expand vertically.
10.1.1.8 Width %
Specifies the width of a widget.
l
If the widget is directly placed on a form, the widget occupies 100 percent width.
l
If a widget is placed inside another widget, you can reduce the width of the widget. You can also lock the percentage of the width occupied by the widget.
10.1.1.9 Text
Specifies the text displayed on a widget.
10.1.1.10 Display Text
Specifies whether the text should be displayed on a widget.
l
To display text on a widget, click On.
l
To hide the text on a widget, click Off.
You can choose to display the text specific to a platform by forking Display Text. For more information on forking, refer section:
.
10.1.1.11 Margin
Defines the space around a widget. You can use this option to assign the left, top, right, and bottom distance between the widget and the next element.
© 2014 by Kony, Inc. All rights reserved 452 of 621
Kony Visualizer User Guide
Version 2.2
Property Definition
Top Top margin
Action
Move the slider to adjust the top margin of the widget.
Right
Bottom
Left
Right margin Move the slider to adjust the right margin of the widget.
Bottom margin Move the slider to adjust the bottom margin of the widget.
Left margin Move the slider to adjust the left margin of the widget.
Note:
1. Uniform margins are applied across the directions by clicking
.
2. When widget margins are modified, it will affect the margins of its parent widget as well as that of the child widgets.
Below image illustrates the Button widget forking:
App Canvas
Before Applying Margins
Margin Properties
App Canvas
After applying margins
Margin Properties
© 2014 by Kony, Inc. All rights reserved 453 of 621
Before Applying Margins
Kony Visualizer User Guide
Version 2.2
You can provide margins specify to a platform by forking Margin. For more information on forking, refer section:
.
Note: When a Margin property is forked, you can apply margins in either Pixels or Percentage for native applications.
10.1.1.12 Padding
Defines the space between the content of the widget and the widget boundaries. You can use this option to assign the top, left, right, and bottom distance between the widget content and the widget's boundaries.
Property Definition
Top Top padding
Bottom
Action
Move the slider to adjust the top padding of the widget.
Bottom padding Move the slider to adjust the bottom padding of the widget.
Left
Right
Left padding Move the slider to adjust the left padding of the widget.
Right padding Move the slider to adjust the right padding of the widget.
Note:
1. Uniform margins are applied across the directions
.
© 2014 by Kony, Inc. All rights reserved 454 of 621
Kony Visualizer User Guide
Version 2.2
2. When widget padding is modified, it will affect the padding of its parent widget as well as that of the child widgets.
Below image illustrates, Button widget forking:
App Canvas
Before Applying Padding
Padding Properties
App Canvas
After applying paddings
Margin Properties
You can provide padding specify to a platform by forking Padding. For more information on forking, refer section:
.
Note: When Padding property is forked, you can apply paddings in either Pixels or Percentage for native applications.
© 2014 by Kony, Inc. All rights reserved 455 of 621
10.1.2 A widget's Look Property when placed on a Flex Form
The following are the widgets' Look properties available for a Flex Form
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 456 of 621
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 457 of 621
Kony Visualizer User Guide
Version 2.2
10.1.2.1 ID
Denotes the name of a widget. When a widget is added to a form, a unique name is assigned to the widget. You can rename a widget by entering a new name in the ID box.
Note: You can also rename a widget from the Project Explorer by right-clicking a widget, and then clicking Rename.
10.1.2.2 Visible
Controls the visibility of a widget.
l
To make a widget visible, click On .
l
To make a widget invisible, click Off.
10.1.2.3 Render
Defines whether a widget appears on a specific platform. By default, a widget is rendered for all the platforms. If you do not want to render a widget for a specific platform, click the Edit button against the
Render field to open the Fork Platforms dialog box.
Clear the check box of the platforms for which the widget should not be rendered.
Difference between Visible and Render
© 2014 by Kony, Inc. All rights reserved 458 of 621
Kony Visualizer User Guide
Version 2.2
l
When a Widget is not rendered for a platform, it implies that the widget is hidden from that specific platform.
l
Whereas, when a widget is set as invisible, it implies that the widget is available, but is invisible.
This feature is useful when you wanted to display a widget based on certain conditions.
10.1.2.4 Content Align
Allows you to define how the widget content is aligned. Following alignment options are available: a. Horizontal Alignment
: Allows you to align the content horizontal.
Note: Horizontal alignment of a widget is possible only when the
property is enabled.
b. Vertical Alignment is possible only when:
: Allows you to align the content vertically. This type of alignment l
Two or more widgets are placed inside a container (with horizontal orientation) such as
HBox.
l
Widget whose content is to be aligned vertically should not occupy maximum height.
You can define the content alignment of a widget specific to a platform by forking Content Align. For more information on forking, refer section:
10.1.2.5 Text
Specifies the text displayed on a widget.
10.1.2.6 Display Text
Specifies whether the text should be displayed on a widget.
l
To display text on a widget, click On.
l
To hide the text on a widget, click Off.
© 2014 by Kony, Inc. All rights reserved 459 of 621
Kony Visualizer User Guide
Version 2.2
You can choose to display the text specific to a platform by forking Display Text. For more information on forking, refer section:
.
10.1.2.7 Flex Properties
The Flex properties enables you to resize, move and position a widget.
10.1.2.8 Left
Determines the left edge of the widget and measured from the left bound of the parent container.
10.1.2.9 Right
Determines the right edge of the widget and measured from the right bound of the parent container.
10.1.2.10 Top
Determines the top edge of the widget and measured from the top bounds of the parent container.
10.1.2.11 Bottom
Determines the bottom edge of the widget and measured from the bottom bounds of the parent container.
10.1.2.12 Width
It determines the width of the widget and measured along the x-axis.
Following are the options that can be used as units of width: l
%: Specifies the values in percentage relative to the parent dimensions.
l px: Specifies the values in terms of device hardware pixels.
l dp: Specifies the values in terms of device independent pixels.
l
Default: Specifies the unit that is considered as default. The default unit is specified in the Flex form's platform specific property:
© 2014 by Kony, Inc. All rights reserved 460 of 621
Kony Visualizer User Guide
Version 2.2
l
Preferred Size: When this option is specified, the layout uses preferred height of the widget as height and preferred size of the widget is determined by the widget and may varies between platforms.
10.1.2.13 Height
Height determines the height of the widget and measured along the y-axis (height of the parent).You
can use any of the following options: l
%: Specifies the values in percentage relative to the parent dimensions.
l px: Specifies the values in terms of device hardware pixels.
l dp: Specifies the values in terms of device independent pixels.
l
Default: Specifies the unit that is considered as default. The default unit is specified in the Flex form's platform specific property:
l
Preferred Size: When this option is specified, the layout uses preferred height of the widget as height and preferred size of the widget is determined by the widget and may varies between platforms.
10.1.2.14 Min Width
Specifies the minimum width of the widget. This property is considered only when width property is not specified.
10.1.2.15 Max Width
Specifies the maximum width of the widget. This property is considered only when width property is not specified.
10.1.2.16 Min Height
Specifies the minimum height of the widget. This property is considered only when height property is not specified.
© 2014 by Kony, Inc. All rights reserved 461 of 621
Kony Visualizer User Guide
Version 2.2
10.1.2.17 Max Height
Specifies the maximum height of the widget. This property is considered only when height property is not specified.
10.1.2.18 Center X
It determines the center of widget measured from left bounds of the parent container.
Note:
If the Layout Type is set as Horizontal, Center X is measured from right edge of the left sibling widget.
10.1.2.19 Center Y
It determines the center of the widget measured from top bounds of the parent container.
Note: If the Layout Type is set as Vertical, centerY is measured from bottom edge of the top sibling widget.
10.1.2.20 Z Index
Specifies the stack order of the widgets. A widget with higher zIndex is in front of the one with lower zIndex.
Note: Modifying the zIndex does not modify the order of widgets inside a flex container. If widgets are overlapping with each other with the same zIndex, then the widget order decides the order of overlapping. Last added widget will be displayed on top.
Default:1 (Indicates the widgets is lowest bottom in the layer hierarchy.)
© 2014 by Kony, Inc. All rights reserved 462 of 621
Kony Visualizer User Guide
Version 2.2
10.2 Working with Skins
This section details the Properties >Skin tab of a widget.
Note: Some of the below properties may not be applicable to all the widgets.
© 2014 by Kony, Inc. All rights reserved 463 of 621
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 464 of 621
Kony Visualizer User Guide
Version 2.2
Skins tab allows you to control the background color and border color of a widget. From here, you can also modify the font styles, text shadows and widget shadows.
10.2.1 Skins Reusability
To facilitate reusability of a skin, Visualizer provides you with the following options: l
Copy: Allows you to copy the current skin of a widget to a clipboard.
l
Paste: Allows you to paste the copied skin to a selected widget.
Note:
When a skin is pasted, a copy of the original skin is created. The pasted skin becomes an independent skin. Any changes made to the original skin does not affect the pasted skin.
Note: Paste function can be applied across the widget states. For example, a Normal state skin of a Button widget can be copied, and pasted to Focus skin state of the Button widget.
l
Assign: Allows you to assign the copied skin to a selected widget. All the properties of the original skin are applied to the selected widget.
Note:
As the skin is assigned, any changes made to the original skin affects the widgets to which this skin is assigned.
Note: Assign function can be applied across the widget states. For example, a Normal state of a Button widget can be copied and assigned to Focus state of the Button widget.
l
Duplicate: Allows you to create a duplicate of the current skin. A duplicated skin becomes an independent skin, and any changes made to the original skin does not affect the duplicated skin.
Difference between Paste and Assign function:
© 2014 by Kony, Inc. All rights reserved 465 of 621
Kony Visualizer User Guide
Version 2.2
l
When a skin is copied and pasted, a new skin is created. Whereas, when a skin is copied and assigned, no new skin is created.
l
Changes made to the copied skins do not affect the pasted skin. Whereas changes made to the copied skin affects the assigned skin (as the copied and assigned skin are one and the same).
10.2.2 General
Following are the general properties of a skin:
1. Name: This is the unique name assigned by the system. You are allowed to rename a skin: l
When you fork it.
l
When you modify any of its properties.
2. Platform: Allows you to fork the skin widget for a platform.
Important Considerations: l
Widgets that have background type as Multi Step Gradient are by default forked (for example, Button and Phone widgets).
l
When you fork and lock a widget skin, changes made to a widget's skin in one platform gets applied to the remaining platforms, unless, you specifically, unlock a platform.
l
To provide a unique skin for a platform, you apply fork and unlock properties for that platform.
© 2014 by Kony, Inc. All rights reserved 466 of 621
Kony Visualizer User Guide
Version 2.2
l
By default all the widgets (except widgets that have background type as Multi Step
Gradient), will have a Common skin. Changes made to this skin will be applied across the platforms.
l
You can select the platforms to be forked by clicking the ellipsis (...) button. and from the
Fork Skin dialog box, select the desired platforms to be forked.
10.2.3 Background
Note:
Not all widgets contain below referenced background types.
1. Type: You can change the background color of a widget by selecting one of the below options from the Type list.
a. Single Color: If you select Single Color as the type, you can select the color and also, set the transparency level for the background. To apply Single Color, follow the below steps:
© 2014 by Kony, Inc. All rights reserved 467 of 621
Kony Visualizer User Guide
Version 2.2
1. Click the Color icon to open the Color picker window.
2. Select a new color.
3. Click the to apply color.
4. Adjust the opacity of the color, if required.
b. Two Step Gradient: If you select Two step gradient as the style, you can select top and bottom colors. To apply Two Step Gradient, follow the below steps:
© 2014 by Kony, Inc. All rights reserved 468 of 621
Kony Visualizer User Guide
Version 2.2
1. Click the color preview to display Two Color Editor.
2. Click the left gradient icon.
3. Click the Color picker icon to open the Color Picker window. Select a new color.
4. Click the right gradient icon.
5. Click the Color picker icon to open the Color Picker window. Select a new color.
6. Adjust the opacity of the gradients, if required.
7. Select the angle at which the gradient colors are to be displayed on the widget.
8. Click Apply to save the changes made to the background color of the widget.
c. Multi Step Gradient: If you select Multi Step Gradient as the style, you can use multiple colors for creating a skin background. To apply Multi Step Gradient, follow the below steps:
© 2014 by Kony, Inc. All rights reserved 469 of 621
Kony Visualizer User Guide
Version 2.2
1. Click the color preview to display Multistep Gradient Editor.
2. Click the left gradient icon.
3. Click the Color picker icon to open the Color Picker window. Select a new color.
4. Click on the edge of the gradient picker, to create a new gradient step. Click the
Color picker icon to open the Color Picker window. Select a new color.
5. Another example of a gradient step.
6. Another example of gradient step.
7. For each of the color stopper, you can provide the location at which the new color
8. Adjust the opacity of the color, if required.
9. Select an angle for the colors to be displayed on the widget.
10. Click Apply to save the changes made to the background color of the widget.
Note:
At any point, you can delete a gradient step by clicking Delete.
d. Image: If you select an image as a background for a widget, then the background skin will be replaced by an image. To apply image, follow the below steps:
© 2014 by Kony, Inc. All rights reserved 470 of 621
Kony Visualizer User Guide
Version 2.2
i. Click Choose Image to display Background Image dialog box.
ii. To provide a default image for all the platforms, click Value field corresponding to
Default platform and from the Search Image window select an image.
iii. To provide a platform specific image, click the platform check box and then click inside the corresponding Value field to display Search Image window from where you can select an image.
Note: Before using an image in a project, navigate to following location:
<konyworkspace>/<Name of your project>/resources
and copy the image in the respective subfolder. For example, if you want an image to be available across all the channels, copy the image in the subfolder
common
.
© 2014 by Kony, Inc. All rights reserved 471 of 621
Kony Visualizer User Guide
Version 2.2
Alternatively, if you wanted an image to be available only for a specific platform, for example, mobile channel >native platform, copy the image to
mobile/native
subfolder. After copying the image, ensure you click the refresh button ( ) from the
Project Explorer > Assets tab (in Kony Visualizer) to bind the newly added image to the project.
10.2.4 Border e
You can modify the following border properties of a widget: a. Size: Provide the Radius of the widget borders.
b. Type: Type defines the border color of the widget. When the border size is above zero pixels,
Type property is enabled. You can choose a single color or two as border color or select a multistep gradient colors as border color.
c. Color: Change the border color of a widget.
d. Opacity: Change the opacity level of the border color.
e. Style: When the border size is above zero pixels, Styles property is enabled. Following type of
Styles are available for the widgets: Plain, Rounded Corner, Complete Rounded Corner and
Custom style borders.
© 2014 by Kony, Inc. All rights reserved 472 of 621
Kony Visualizer User Guide
Version 2.2
l
Plain: Widget borders are in rectangular style.
l
Rounded Corner: Widget borders will have a rounded corners.
l
Complete Rounded Corner: To be updated.
l
Custom: Select this option to provide a your own unique style by using the Radius slider.
Note: For a RadioButtonGroup widget, Border properties are ignored on an iOS device, when the View Type is On-screen Wheel.
10.2.5 Fonts
You can modify the following font properties of a widget: a. Color: Select font color for the widget.
b. Opacity: You can change the opacity level of the font color.
Note: Font opacity is not supported on Windows (version 8 and 8.1) tablets. That is, irrespective of the font opacity assigned, the text appears with 100-percentage opacity.
c. Size: You can modify the font size between the ranges of 0 to 600% .
© 2014 by Kony, Inc. All rights reserved 473 of 621
Kony Visualizer User Guide
Version 2.2
d. Font Family: Click the Edit button against Font Family to open the Font Names window.
Here, you can select the fonts for individual platforms for both Mobile and Tables.
e. Weight: Select whether text on the widget should be normal or bold.
f. Style: Select whether text on the widget should be underlined or italicized.
10.2.6 Shadow
Note:
Shadow feature is available only a widget is forked.
You can modify the following shadow properties of a widget: a. DistX: Denotes the horizontal shadow distance away from the widget. When a positive DisX
© 2014 by Kony, Inc. All rights reserved 474 of 621
Kony Visualizer User Guide
Version 2.2
value is entered, shadow is moved to right-side of a widget; when a negative value is entered, shadow is moved to left-side of a widget.
b. DistY: Denotes the vertical shadow distance away from the widget. When a positive DisY value is entered, shadow is moved to top-side of a widget; when a negative value is entered, shadow is moved to bottom-side of a widget.
c. Blur: Denotes the shadow blur of the widget by allowing you to soften shadow.
d. Color: Denotes the color of the shadow. You can select a shadow color by clicking the Color
Picker.
e. InnerShadow: Click this check box if you wanted the shadow to be displayed inside the widget.
Else, clear the check box to have the shadows displayed outside the widget.
Inner Shadow widget Outer shadow widget
10.2.7 Text Shadow
Note: Text Shadow feature is available only for specific widgets such as Button, Label and
TextBox2.
You can modify the following text shadow properties of a widget:
© 2014 by Kony, Inc. All rights reserved 475 of 621
Kony Visualizer User Guide
Version 2.2
a. DistX: Denotes the horizontal shadow distance away from the widget text.
l
A positive value denotes that the text shadow appears to the right of the text.
l
A negative value denotes that the text shadow appears to the left of the text.
b. DistY: Denotes the vertical shadow distance away from the widget.
l
A positive value denotes that the text shadow appears below the text.
l
A negative value denotes that the text shadow appears above the text.
c. Blur: Denotes the shadow blur of the widget by allowing you to soften text shadow.
d. Color: Denotes the color of the text shadow.You can select a text shadow color by clicking the
Color Picker.
© 2014 by Kony, Inc. All rights reserved 476 of 621
Kony Visualizer User Guide
Version 2.2
10.3 Forking
Forking allows you to customize properties uniquely for a platform. You can fork: l
A Form l
A Widget Property
10.3.1 Forking a Form
Forking forms enables you to customize the position and availability of widgets on different platforms.
l
You fork a form to: o position widgets differently on different platforms o make widgets available on one platform but not on another platform o replace a widget on one platform with a widget on another platform.
Important Considerations
1. You can fork Flex forms and VBox forms.
2. All the forked forms appear below their source forms in the Project Explorer.
3. Renaming a source form renames all its forked forms.
4. Deleting a source form deletes all its forked forms.
5. On App Canvas, the platform for which a form is forked appears on the platform list. For example, a form forked for Android Native platform will have only Android Native in the platform list.
© 2014 by Kony, Inc. All rights reserved 477 of 621
Kony Visualizer User Guide
Version 2.2
6. A forked form only lists common properties and platform specific properties. For example, a form forked for Windows 8 Native lists only common properties and Windows 8 properties.
7. Default skins and user-defined skins are also forked during form forking.
8.
have only those comments made in the forked form's platform. For example, a form forked for Android Native, will have only the notes written on an Android device.
© 2014 by Kony, Inc. All rights reserved 478 of 621
Kony Visualizer User Guide
Version 2.2
9. During forking, any unsupported widgets are ignored. For example, Camera widget is not supported on iOS web. If a form containing a Camera widget is forked for iOS web, the form will be forked, but the Camera widget is not forked.
10.3.1.1 How to Fork a Form
Forking allows you to customize a form specific to a platform. For example, you can fork a form to appear on an iOS (native) platform with green background and have the same form forked to appear on an Android (web) platform with yellow background.
To fork a form, follow these steps:
1. Go to Project Explorer > Project > Forms.
2. Right-click a form, and then click Fork.
© 2014 by Kony, Inc. All rights reserved 479 of 621
Kony Visualizer User Guide
Version 2.2
The Fork Platforms window appears.
3. From the list of platforms, select the desired platforms, and then click OK.
The form is forked for the desired platforms.
10.3.2 Forking a Widget Property
Forking allows you to provide different values for the same property or skin, across the platforms.
© 2014 by Kony, Inc. All rights reserved 480 of 621
Kony Visualizer User Guide
Version 2.2
Only certain widget properties can be forked. You can identify whether a property can be forked by the presence of an icon( ) to the left of the property's name. Two types of forking are available for you:
1. Simple Forking: Allows you to fork one platform at a time.
2. Complex Forking: Allows you to fork multiple platforms at the same time.
10.3.2.1 Simple Forking
In this section, using View Type property of a Calendar widget, let us understand simple forking. The following steps, however, can be used for forking any of the widget properties.
To fork View Type property of a Calendar widget for Android : Native platform, follow these steps:
© 2014 by Kony, Inc. All rights reserved 481 of 621
Kony Visualizer User Guide
Version 2.2
1. Select the Calendar widget from App Canvas.
2. Select Android : Native from the platform list.
3. Select Popup Grid from the View Type list.
4. Click the fork icon ( ) located to the left of the View Type. The icon changes to (
), indicating that the View Type value is forked specifically for Android : Native platform.
When you navigate to a different platform, the value of the forked property is replaced either with: l
A default value of the property.
l
A forked property value, if the property is forked for that specific platform.
10.3.2.2 Complex Forking
In this section, using View Type property of a Calendar widget, let us understand complex forking.
The below steps, however, can be used for forking any of the widget properties.
To fork View Type property of a Calendar widget, follow these steps:
© 2014 by Kony, Inc. All rights reserved 482 of 621
Kony Visualizer User Guide
Version 2.2
1. Select the Calendar widget from App Canvas.
2. Click the ellipsis (...) located to the right of View Type list. The View Type dialog box appears.
3. You can choose to: a. Change the default View Type: From the Value list corresponding to the Default platform, select a new View Type.
b. Change the View Type of a specific platform: Select the platform check box, and from the corresponding Value list, choose a View Type.
Note: If you do not provide a View Type for a specific platform, the Default platform View
Type value is applied.
© 2014 by Kony, Inc. All rights reserved 483 of 621
Kony Visualizer User Guide
Version 2.2
10.4 Accessibility
Accessibility on the Web refers to the best practice of providing equal access and equal opportunity to people with diverse disabilities. This chapter provides the concepts of accessibility and its implementation through Kony Visualizer. This section covers the following topics: l
l
l
Achieving 508 Compliance Using Kony Visualizer
l
Widget Navigation Model and Tab/Focus Order
l
l
Which widgets support Accessibility?
l
How to Enable Accessibility for a Project?
l
How to Input Accessibility Values?
l
Accessibility of Kony Projects on Your Mobile and Tablet Devices
10.4.1 What is Accessibility?
In software application development, accessibility is also referred to as 508 Compliance. For example, people with impaired vision must be able to use software with the help of touch gestures, that is designed to run on a system that has a keyboard. The result of performing a function is read out using the screen reading technology.
The Assistive Technology (AT) for iPhone and Android platforms has built-in programs that support accessibility when enabled on devices. Browser-based platforms use the Web Accessibility Initiative -
Accessible Rich Internet Applications (WAI-ARIA) framework. The WAI-ARIA framework enables you to add attributes to identify features for user interaction, map controls, events, and APIs used in a rich Internet application.
The following table shows different platforms and their assistive technology:
© 2014 by Kony, Inc. All rights reserved 484 of 621
Kony Visualizer User Guide
Version 2.2
Platform Assistive Technology iOS VoiceOver
Android
SPA
TalkBack
WAI-ARIA
Note:
The screen-reading capabilities of the different assistive technologies may vary and may not produce the same results.
10.4.2 Navigation Keys
Important: To use accessibility feature on an Android device, turn on TalkBack. On an iPhone or iPad turn on VoiceOver.
When a device enables assistive technology, visually impaired users typically navigate through the UI controls such as tab/enter/arrow keys/page up/down keys. On various touch-only devices, a few of these key actions are mapped to touchscreen finger gestures.
The chart below shows how keyboard-based navigation keys are mapped to gestures on mobile platforms:
Note: A gesture may function differently in different Assistive Technologies. Refer to the respective assistive technology documentation for more information on gestures.
Keyboard based devices
(desktop)
Tab
Purpose
To move focus in forward direction.
Shift+Tab To move focus in reverse direction.
Android touch (Android
4.1 and higher)
(talkback)
One finger right / down flick gesture.
iOS touch
One finger right flick gesture.
One finger left / up flick gesture.
One finger left flick gesture.
© 2014 by Kony, Inc. All rights reserved 485 of 621
Kony Visualizer User Guide
Version 2.2
Keyboard based devices
(desktop)
Enter /Space
Purpose
To take action on the focused widget.
Android touch (Android
4.1 and higher)
(talkback)
One finger double tap.
iOS touch
One finger double tap.
Right Arrow/Up
Arrow
To increase the value selection on specific widgets like slider / picker.
Left Arrow/Up Arrow To decrease the value selection on specific widgets like slider / picker.
Page Up To scroll up/left of the content in a scroll container.
Two/three finger up/left flick gesture.
One finger up flick gesture.
One finger up flick gesture.
Page Down To scroll down/right the content in a scroll container.
Two/three finger down/right flick gesture.
Three fingers up/right flick gesture.
Three fingers down/right flick gesture.
Starts reading from the beginning of the page.
Starts reading from the current focused item.
Two fingers up flick gesture.
Two fingers down flick gesture.
10.4.2.1 iOS Gestures
The following are some of the gestures explained in the above table:
For more information on accessibility gestures, refer to:
Android: https://support.google.com/nexus/answer/2926960?hl=en
© 2014 by Kony, Inc. All rights reserved 486 of 621
Kony Visualizer User Guide
Version 2.2
iOS: https://www.apple.com/in/accessibility/osx/voiceover/
SPA and Desktop Web: http://www.w3.org/WAI/mobile/
10.4.3 Achieving 508 Compliance Using Kony Visualizer
The built-in assistive technology in the iOS and Android platforms reads some basic widgets of Kony
Visualizer, such as Button, Label, and TextBox. The assistive technology in iOS and Android platforms read the information differently on other widgets.
Every application that is created using Kony Visualizer is accessible to iOS and Android platforms built-in assistive technology. The way the assistive technology interprets the widget information is left to its individual capability. Developers can enhance the behavior of assistive technology with the configuration property (explained in the next page) available for each accessibility supported widget.
10.4.4 Widget Navigation Model and Tab/Focus Order
The general navigation model is for a user to tab/swipe to reach a widget, interact with the control in that widget, and then tab/swipe to move focus to the next widget in the tab order. When a container widget contains a widget, the tab/swipe gesture brings the focus to the container widget because it is the next item in the tab order. This continues down the layers of widgets until the last widget is reached. For example, we have two widgets ' HBox ' and ' Button ' on a page. The widget ' HBox ' contains a ' VBox ' widget. Within the ' VBox ' widget there is a ' Label ' widget.
While tabbing, the focus lands on HBox, then another tab will move the focus to VBox, and then another tab will move the focus to Label. This is because Label is the last widget in VBox focus will not come directly to the Label. One more tab will move the focus to Button. The order in which the focus is passed from one widget to another widget is based on the nearest neighboring widget in a given direction.
© 2014 by Kony, Inc. All rights reserved 487 of 621
Kony Visualizer User Guide
Version 2.2
Note:
Some operating systems allow you to change the systems and enlarge all text displayed on the screen.
10.4.5 Important considerations
The following are the important considerations for Accessibility: l
Accessibility is abbreviated as a11y, where the number 11 refers to the number of letters omitted.
l
Accessibility is enabled at project-level. That is, accessibility is enabled for all the forms, popups, and templates of a project. To enable accessibility, see
How to Enable Accessibility for a
.
l
You can prevent accessibility for a widget by either not providing any a11y values or by enabling a11y Hidden option.
l
Accessibility is not supported on Windows devices and on Desktop channels.
l
The Accessibility values can contain a maximum of 64 characters (including spaces.)
10.4.6 Which Widgets support Accessibility?
Refer to the following table to understand which widget supports accessibility.
Widgets that support Accessibility
Flex Form
VBox Form
Pop-up
HBox
VBox
ScrollBox
Tab
Widgets that do not support Accessibility
TabPane
DataGrid
Line
Browser
ImageGallery2
© 2014 by Kony, Inc. All rights reserved 488 of 621
Kony Visualizer User Guide
Version 2.2
Widgets that support Accessibility
Button
Calendar
CheckBox
GroupComboBox
Image2
Label
Link
ListBox
RadioButtonGroup
RichText
Slider
TextArea2
TextBox2
Camera
HorizontalImageStrip2
PickerView
Map
Widgets that do not support Accessibility
Phone
Segment2
FlexContainer
FlexScrollContainer
10.4.7 How to Enable Accessibility for a Project?
To enable accessibility for a project, follow these steps:
© 2014 by Kony, Inc. All rights reserved 489 of 621
Kony Visualizer User Guide
Version 2.2
1. Click Project > Settings from the tops menu. The Project Settings dialog appears.
2. On the Application tab, select Enable Accessibility check box.
10.4.8 How to Input Accessibility Values
You can provide the following accessibility values for a widget, from the widget's Look properties tab:
© 2014 by Kony, Inc. All rights reserved 490 of 621
Kony Visualizer User Guide
Version 2.2
1. a11y Label: Name of the widget. For example, Login Box
2. a11y Value: Value expected from a user. For example, email address
3. a11y Hint: A hint that reminds the user what value is expected. For example, Type your Kony email address.
4. a11y Hidden: Click Off option, if you choose to enable accessibility values for a widget.
Note:
1. Not all widgets support accessibility. To know if a widget supports accessibility, see
Widgets support Accessibility?
2. All the accessibility values are optional.
10.4.9 Accessibility of Kony Projects on your Mobile and Tablet devices?
Important: Ensure that Accessibility setting is enabled on your mobile or tablet device.
While viewing the functional preview of a Kony application or during the real-time running of a Kony application, the a11y values are voiced out to the user. This help the users who are visually challenged, navigate the application and perform the desired activities.
You can listen to accessibility values from top to bottom of a page or listen to a specific widget's accessibility value. To know more about navigating from one widget to other by using the gestures, see
Widget Navigation Model and Tab/Focus Order .
© 2014 by Kony, Inc. All rights reserved 491 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
11. Action Editor
The Action Editor allows you to assign actions to a form, pop-up, or a widget. Visualizer provides various predefined actions such as rotating a widget, updating widgets properties, and sending an email message. The actions assigned to a project are run in real-time environment or during functional preview.
This section explains the following: l
l
Adding and configuring an action
l
11.1 Important Considerations l
Animation actions are available only for flex widgets.
l
Action Editor does not check whether you have assigned a valid action or not. If you assign an invalid action, during functional preview, the app may not function as expected.
l
You cannot run the actions on App Canvas.
l
You cannot apply actions to the child widgets of a Segment2 widget.
11.2 Accessing Action Editor
You can access the Action Editor dialog using one of the following options: l
App Canvas: Click on a required widget on App Canvas. A right-arrow appears (at the top-right of the selected widget.) Click this arrow, and then click the required action.
© 2014 by Kony, Inc. All rights reserved 492 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
l
Action tab: Click Action tab from a widget's Properties pane, and then click the Edit button against the required action.
© 2014 by Kony, Inc. All rights reserved 493 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
l
Actions tab: Expand Actions > Mobile (or Tablet or Desktop), and then click New action.
11.3 Adding and configuring an action
To add and configure an action, follow these steps:
© 2014 by Kony, Inc. All rights reserved 494 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1.
Action ID : By default, an ID is assigned to an action. You can rename the action ID, if required.
Note:
If you are accessing the Action Editor dialog using the options
or
Action tab , and if you wanted an action to be available under
tab, you need to rename the
Action ID.
2.
Add Actions : From the list of available actions, you select the required action.
3.
Action Sequence : You perform the following actions:
a. Structure the sequence of the actions, if required.
b. Click an action to open its configurable properties.
© 2014 by Kony, Inc. All rights reserved 495 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
4.
Configure Action : You perform the following actions:
a. Select a form, pop-up, or a widget.
b. Configure the properties.
11.3.1 Action ID
By default, an Action ID is assigned by the system.
Double-click inside the Action ID box to rename.
11.3.2 Add Actions
To add an action, from the left-pane of the Action Editor dialog, click the required action.
The action is added and appears under the Action Sequence.
For more details on actions, see
© 2014 by Kony, Inc. All rights reserved 496 of 621
11. Action Editor
11.3.3 Action Sequence
To configure an action, from the list of available actions, click an action.
Kony Visualizer User Guide
Version 2.2
Based on the action selected, Configure Action pane appears.
The following are the context menu items of an action: l
Move Up: Moves an action one-level above its existing position.
Note: This option is unavailable for the top action in the Action Sequence list.
l
Move Down: Moves an action one-level below its existing position.
Note:
This option is unavailable for the bottom action in the Action Sequence list.
l
Delete: Deletes an action immediately.
l
Duplicate: Duplicates an action.
11.3.4 Configure Actions
You need to perform the following action on this pane:
© 2014 by Kony, Inc. All rights reserved 497 of 621
11. Action Editor
1. Select a form, pop-up, or widget.
Kony Visualizer User Guide
Version 2.2
Note: Instead of selecting a form, pop-up, or a widget, for certain actions such as Send
SMS, Send Email, Show Alert, Open URL, Add Snippet, and Call Action, you can directly update the action properties.
© 2014 by Kony, Inc. All rights reserved 498 of 621
11. Action Editor
2. Update the properties.
Kony Visualizer User Guide
Version 2.2
3. Click Apply.
For more details on updating properties for individual actions, see
.
11.4 List of Actions
The actions are grouped under the following types:
1.
: These actions allows you to navigate from one form to other, display, anchor, dismiss a pop-up, or close an app.
2.
Widgets : These actions allows you to set widget properties, update master data, replace a
widget skin, or set a map location.
© 2014 by Kony, Inc. All rights reserved 499 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
3.
: The actions allows you to send an SMS message, an email message, display an alert, or open a webpage.
4.
: These actions allows you to write code snippets or reuse an existing action.
5.
: These actions allows you to move, scale, rotate, transform, and change the background color of a flex widget.
11.4.1 Navigation
This section describes how to add the following actions:
1.
2.
3.
4.
5.
11.4.1.1 Navigate to a Form
Allows you to navigate from one form to other.
To navigate from one form to other, follow these steps:
© 2014 by Kony, Inc. All rights reserved 500 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Navigate to Form from Add Actions > Navigation.
2. Click Navigate to Form from Action Sequence.
3. Select a form from the Navigate To Form tab.
4. Click Apply.
11.4.1.2 Display a Pop-up
Allows you to display a pop-up.
To display a pop-up, follow these steps:
© 2014 by Kony, Inc. All rights reserved 501 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Display Popup from Add Actions > Navigation.
2. Click Display Popup from Action Sequence.
3. Select a pop-up from the Display popup tab.
4. Click Apply.
11.4.1.3 Anchor a Pop-up
Allows you to anchor a pop-up.
Note: You have to
before you anchor the pop-up.
To anchor a pop-up, follow these steps:
© 2014 by Kony, Inc. All rights reserved 502 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Anchor Popup from Add Actions > Navigation.
2. Click Anchor Popup from Action Sequence.
3. Select a pop-up from the Popup to Anchor tab.
4. Select a widget from the Anchor Popup to Widget tab.
5. Select an Anchor Point.
6. Click Apply.
11.4.1.4 Dismiss a Pop-up
Allows you to close a pop-up.
Note:
You have to
before you can dismiss the pop-up.
© 2014 by Kony, Inc. All rights reserved 503 of 621
11. Action Editor
To close a pop-up, follow these steps:
Kony Visualizer User Guide
Version 2.2
1. Click Dismiss Popup from Add Actions > Navigation.
2. Click Dismiss Popup from Action Sequence.
3. Select a pop-up from Dismiss Popup.
4. Click Apply.
11.4.1.5 Exit an App
Allows you to close an application.
To close application, follow these steps:
© 2014 by Kony, Inc. All rights reserved 504 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Exit App from Add Actions > Navigation.
2. Click Exit Application from Action Sequence.
3. Click Apply.
11.4.2 Widgets
This section describes how to add the following actions:
1.
2.
3.
4.
11.4.2.1 Set a Widget Property
Allows you to update a widget's property.
To update a widget's property, follow these steps:
© 2014 by Kony, Inc. All rights reserved 505 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Set Widget Property from Add Actions > Widgets.
2. Click Set Widget Property from Action Sequence.
3. Select a widget from the Widget tab.
4. In the Button Widget Property tab, a. Select a property from the Property list. For example, text property for a Button widget.
b. Based on the select property, you receive an option to modify the widget's property. For example, you can rename the Button widget.
5. Click Apply.
11.4.2.2 Set Master Data
Allows for setting the master data for widgets such as CheckBoxGroup, ComboBox, DataGrid,
RadioButtonGroup, PickerView, and Segment2.
© 2014 by Kony, Inc. All rights reserved 506 of 621
11. Action Editor
To update master data, follow these steps:
Kony Visualizer User Guide
Version 2.2
1. Click Set Master Data from Add Actions > Widgets.
2. Click Set Master Data from Action Sequence.
3. Select a widget from the Widget tab.
4. Click Set Master Data.
© 2014 by Kony, Inc. All rights reserved 507 of 621
11. Action Editor
5. Update the master data of the widget.
6. Click Apply.
11.4.2.3 Set Widget Skin
Allows for changing the skin of the widget based on the action selected.
To change the skin of a widget, follow these steps:
Kony Visualizer User Guide
Version 2.2
1. Click Set Widget Skin from Add Actions > Widgets.
2. Click Set Widget Skin from Action Sequence.
3. Select a widget from the Widget tab.
© 2014 by Kony, Inc. All rights reserved 508 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
4. Click Set Master Data.
5. On the Destination Skin (widget), a. From the Skin list, select the state of widget skin.
b. Select a theme from the Theme list. All the available skins from the chosen theme for the widget are displayed c. Select a skin.
6. Click Apply.
11.4.2.4 Set Map Location
Allows you to assign map coordinates to a Map widget.
To update Map coordinates, follow these steps:
© 2014 by Kony, Inc. All rights reserved 509 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Set Map Location from Add Actions > Widgets.
2. Click Set Map Location from Action Sequence.
3. Select a Map widget from the Widget tab.
4. In the Set Map Location tab, a. Type the latitude of the location in the Latitude box.
b. Type the longitude of the location in the Longitude box.
c. Type the name of the location in the Name box.
d. Type the description of the location in the Desc box.
5. Click Apply.
© 2014 by Kony, Inc. All rights reserved 510 of 621
11. Action Editor
11.4.3 External
This section describes how to add the following actions:
1.
2.
3.
4.
11.4.3.1 Send SMS
Allows you to send a text message.
To send a text message, follow these steps:
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 511 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Send SMS from Add Actions > External.
2. Click Send SMS from Action Sequence.
3. In Configure Action, under Send a message, type the following details: a. Type the mobile number in the Send SMS to number box.
b. Type the message in the SMS Content box.
4. Click Apply.
11.4.3.2 Send Email
Allows you to send an email messages.
To send an email messages, follow these steps:
© 2014 by Kony, Inc. All rights reserved 512 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Send Email from Add Actions > External.
2. Click Send Email from Action Sequence.
3. In Configure Action, under Send an email, type the following details: a. Type the receiver’s email address in the To box.
b. To copy the message, type their email address in the Cc box.
c. To blind copy the message, type their email address in the Bcc box.
d. Type the subject of the mail in the Subject box.
© 2014 by Kony, Inc. All rights reserved 513 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
e. Select the HTML Formatted Body to enable HTML formatting of the mail.
f. Type the message in the Body box.
4. Click Apply.
11.4.3.3 Show Alert
Displays an alert message to the user.
Alerts are of three types: l
Error: An error message appears on the screen.
l
Information: An informative message appears on the screen. This message can be in turn a warning or a success message.
l
Confirmation: A confirmation message with Yes and No options appears on the screen.
All the alerts are modal in nature. That is, the user cannot proceed with other UI operations unless the alert is dismissed.
Note: Do not use Show Alert multiple times in the same action sequence as it could lead to erroneous behavior of the application.
To show an alert, follow these steps:
© 2014 by Kony, Inc. All rights reserved 514 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Show Alert from Add Actions > External.
2. Click Show alert from Action Sequence.
3. In Configure Action, under Show Alert, type the following details: a. Select an alert type for the Alert Type list.
b. Type the alert title in the Alert Title box.
c. Type a value for Yes label.
d. Type a value for No Label.
© 2014 by Kony, Inc. All rights reserved 515 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
e. Select an icon from the list of existing images by clicking Browse.
f. Type the alert message in the Alert Message box.
g. Type a function's name that should be called when an alert is dismissed either through
Yes Label or through No Label button.
11.4.3.4 Open URL
Displays a webpage to the user.
To display a webpage, follow these steps:
1. Click Open URL from Add Actions > External.
2. Click Open URL from Action Sequence.
3. In Configure Action, under Open URL, type the webpage address in the URL to Open box.
4. Click Apply.
11.4.4 Functions
This section describes how to add the following actions:
© 2014 by Kony, Inc. All rights reserved 516 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
l
l
11.4.4.1 Add Snippet
With this function, you can run a function using one of the following methods: l
Write a function l
Invoke an existing function
To write a function or invoke a function, follow these steps:
1. Click Add Snippet from Add Actions > Functions.
2. Click Code Snippet from Action Sequence.
© 2014 by Kony, Inc. All rights reserved 517 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
3. In Configure Action, under Code Editor, type the code or call an existing function.
Note: The format for invoking a function or an action is
function ();
. For example, if the name of the function or action is navigateDashboard, to invoke this function or action, use the following format:
navigateDashboard ();
.
4. Click Apply.
11.4.4.2 Call Action
Lists all the available actions under the
tab.
To run Call Action function, follow these steps:
© 2014 by Kony, Inc. All rights reserved 518 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Call Action from Add Actions > Functions.
2. Click Call action from Action Sequence.
3. In Configure Action, under Select Action, from the Action Type drop-down, select an action.
4. Click Apply.
11.4.5 Animation
Note: Animation actions are available only for flex widgets.
The following are the animation actions: l
l
l
l
l
Set Style
11.4.5.1 Move
Moves a widget within its parent widget or a form.
For moving a widget, follow these steps:
© 2014 by Kony, Inc. All rights reserved 519 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Move from the Add Actions > Animation.
2. Click Move Widget from the Action Sequence.
© 2014 by Kony, Inc. All rights reserved 520 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
3. Select a widget from the Widget tab.
4. Update the properties from the Translate Properties tab with the following details:
Property
Animation ID
Left
Right
Top
Bottom
Center X
Center Y
Time position.
its original position.
Description
Animation ID.
Specifies the distance a widget moves to the left from its original position.
Specifies the distance a widget moves to the right from its original position.
Specifies the distance a widget moves to the top from its original
Specifies the distance a widget moves to the bottom from its original position.
Specifies the distance a widget's center moves horizontally from
Specifies the distance a widget's center moves vertically from its original position.
Examples
Move_left
-20 px, 100 dp, 15%
10 px, 175 dp, 25%
-15 px, 200 dp, 7%
23 px,
225dp, 6%
-21 px, 263 dp, 11%
-15 px, 200 dp, 7%
Specifies the number of milliseconds (ms) in which an animation is completed.
1000
© 2014 by Kony, Inc. All rights reserved 521 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
Property
Time Function
Delay
Repeat
Direction
Description
The following time functions are available:
Examples l
Ease: Specifies a transition effect with a slow start, then fast, then end slowly.
l
Linear: Specifies a transition effect with the same speed from start to end.
l
Ease-In: Specifies a transition effect with a slow start.
l
Ease-Out: Specifies a transition effect with a slow end.
l
Ease-In-Out: Specifies a transition effect with a slow start and end.
Specifies the number of milliseconds (ms) to wait before starting an animation.
2000
5 Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.
Specifies the direction of an action. The following are the options: None,
Alternate l
None: The animation action direction is always same.
l
Alternate: The animation action direction is same every odd time, and in reversed direction every even time.
© 2014 by Kony, Inc. All rights reserved 522 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
Property
Start
Description Examples
Specifies how an animation action starts. The following options are available:
Immediately l
Immediately: Start the animation immediately, with delay, if selected.
l
With Animation: Action is run along with another action.
l
After Animation: Action is run after completing another action.
Inherit
Note: With Animation and After Animation properties are ignored if only single action is available in the Action
Sequence pane.
The following options are available: l
None: Upon completing this action, widget returns to its original size.
l
Forward: Upon completing this action, widget stays at final position.
Both l
Backward: Upon completing an action, widget will come return to the original position.
l
Both: Applies Forward and Backward options.
5. Click Apply.
Note: For the following properties Left, Right, Top, Bottom, Center X and Center Y, you can specify the values in Device Independent Pixels (dp), pixels (px), and percentage (%). You can also specify negative values for these properties.
© 2014 by Kony, Inc. All rights reserved 523 of 621
11. Action Editor
11.4.5.2 Scale
Resizes a widget within its parent widget or a form.
For scaling a widget, follow these steps:
Kony Visualizer User Guide
Version 2.2
1. Click Scale from the Add Actions > Animation.
2. Click Scale Widget from the Action Sequence.
© 2014 by Kony, Inc. All rights reserved 524 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
3. Select a widget from the Widget tab.
4. Update the properties from the Translate Properties tab with the following details:
Property
Animation
ID
Animation ID.
Description Examples
Scale_widget
Width
Height
Specifies the width of a widget.
Specifies the height of a widget.
Min Width Specifies the minimum width of a widget.
Min
Height
Specifies the minimum height of a widget.
Specifies the maximum width of a widget.
Max
Width
Max
Height
Specifies the maximum width of a widget.
100 px
250 dp
20%
15%
540px
300px
Anchor X Specifies the horizontal anchor point from where widget rotation begins.
15%
Anchor Y Specifies the vertical anchor point from where widget rotation begins.
25%
Time Specifies the number of milliseconds (ms) in which an animation is completed.
1000
© 2014 by Kony, Inc. All rights reserved 525 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
Property
Time
Function
Description
The following time functions are available: l
Ease: Specifies a transition effect with a slow start, then fast, then end slowly.
Examples l
Linear: Specifies a transition effect with the same speed from start to end.
l
Ease-In: Specifies a transition effect with a slow start.
l
Ease-Out: Specifies a transition effect with a slow end.
Delay l
Ease-In-Out: Specifies a transition effect with a slow start and end.
Specifies the number of milliseconds (ms) to wait before starting an animation.
2000
Repeat Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.
5
Direction Specifies the direction of an action. The following are the options: None, Alternate l
None: The animation action direction is always same.
l
Alternate: The animation action direction is same every odd time and in reverse direction every even time.
© 2014 by Kony, Inc. All rights reserved 526 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
Property
Start
Description
Specifies how an animation action starts. The following options are available: l
Immediately: Start the animation immediately, with delay, if selected.
l
With Animation: Action is run along with another action.
l
After Animation: Action is run after completing another action.
Examples
Immediately
Inherit
Note: With Animation and After Animation properties are ignored if only single action is available in the Action Sequence pane.
The following options are available: l
None: Upon completing this action, widget returns to its original size.
l
Forward: Upon completing this action, widget stays at final position.
l
Backward: Upon completing an action, widget will come return to the original position.
l
Both: Apply Forward and Backward options.
Both
5. Click Apply.
Note: For the following properties Width, Height, Min Width, Min Height, Max Width, Max Height, you can specify the values in Device Independent Pixels (dp), pixels (px), and percentage (%).
You can also specify negative values for these properties.
© 2014 by Kony, Inc. All rights reserved 527 of 621
11. Action Editor
11.4.5.3 Rotate
Rotates a widget within its parent widget or a form.
For rotating a widget, follow these steps:
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 528 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Rotate from the Add Actions > Animation.
2. Click Rotate Widget from the Action Sequence.
3. Select a widget from the Widget tab.
4. Update the properties from the Translate Properties tab with the following details:
Property
Animation
ID
Animation ID.
Rotate
Description
Specifies the angle at which a widget is to be rotated.
Examples
Rotate_angle
45
15% Anchor X Specifies the horizontal anchor point from where widget rotation begins.
Anchor Y Specifies the vertical anchor point from where widget rotation begins.
15%
Time Specifies the number of milliseconds (ms) in which an animation is completed.
1000
Time
Function
The following time functions are available: l
Ease: Specifies a transition effect with a slow start, then fast, then end slowly.
l
Linear: Specifies a transition effect with the same speed from start to end.
l
Ease-In: Specifies a transition effect with a slow start.
l
Ease-Out: Specifies a transition effect with a slow end.
l
Ease-In-Out: Specifies a transition effect with a slow start and end.
© 2014 by Kony, Inc. All rights reserved 529 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
Property
Delay
Description
Specifies the number of milliseconds (ms) to wait before starting an animation.
Examples
2000
Repeat Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.
5
Direction Specifies the direction of an action. The following are the options: None, Alternate
Start l
None: The animation action direction is always same.
l
Alternate: The animation action direction is same every odd time and in reverse direction every even time.
Specifies how an animation action starts. The following options are available: l
Immediately: Start the animation immediately, with delay, if selected.
Immediately l
With Animation: Action is run along with another action.
l
After Animation: Action is run after completing another action.
Note:
With Animation and After Animation properties are ignored if only single action is available in the Action Sequence pane.
© 2014 by Kony, Inc. All rights reserved 530 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
Property
Inherit
Description
The following options are available: l
None: Upon completing this action, widget returns to its original size.
l
Forward: Upon completing this action, widget stays at final position.
l
Backward: Upon completing an action, widget will come return to the original position.
l
Both: Apply Forward and Backward options.
Examples
Both
5. Click Apply.
11.4.5.4 Transform
Using this single action, you can move, scale, and rotate a widget.
For transforming a widget, follow these steps:
© 2014 by Kony, Inc. All rights reserved 531 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Transform from the Add Actions > Animation.
2. Click Transform Widget from the Action Sequence.
© 2014 by Kony, Inc. All rights reserved 532 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
3. Select a widget from the Widget tab.
4. Update the properties from the Translate Properties tab with the following details:
Property
Animation
ID
Animation ID.
Description Examples
Transform_ widget
Left
Right
Top
Bottom
Specifies by how much a widget moves to the left from its original position.
Specifies by how much a widget moves to the right from its original position.
Specifies by how much a widget moves to the top from its original position.
Specifies by how much a widget moves to the bottom from its original position.
-20 px, 100 dp,
15%
10 px, 175 dp,
25%
-15 px, 200 dp,
7%
23 px, 225dp, 6%
Center X Specifies by how much a widget's center moves horizontally from its original position.
-21 px, 263 dp,
11%
Center Y Specifies by how much a widget's center moves vertically from its original position.
Width Widgets width increase or decrease by multiples of original widget’s width.
-21 px, 263 dp,
11%
2 times
Height Widgets height increase or decrease by multiples of original widget’s height.
0.5 times
Min Width Widgets minimum width increase or decrease by multiples of original widget’s minimum width.
3 .5 times
Min
Height
Widgets minimum height increase or decrease by multiples of original widget’s minimum height.
-2.5 times
© 2014 by Kony, Inc. All rights reserved 533 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
Property
Max
Width
Description
Widgets maximum width increase or decrease by multiples of original widget’s maximum width.
Examples
1.32 times
Max
Height
Rotate
Widgets maximum height increase or decrease by multiples of original widget’s maximum height.
Specifies the angle at which a widget is rotated.
-0.4 times
45
15% Anchor X Specifies the horizontal anchor point from where widget rotation begins.
Anchor Y Specifies the vertical anchor point from where widget rotation begins.
15%
Time Specifies the number of milliseconds (ms) in which an animation is completed.
1000
Time
Function
The following time functions are available: l
Ease: Specifies a transition effect with a slow start, then fast, then end slowly.
l
Linear: Specifies a transition effect with the same speed from start to end.
Delay
Repeat l
Ease-In: Specifies a transition effect with a slow start.
l
Ease-Out: Specifies a transition effect with a slow end.
l
Ease-In-Out: Specifies a transition effect with a slow start and end.
Specifies the number of milliseconds (ms) to wait before starting an animation.
2000
Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.
5
© 2014 by Kony, Inc. All rights reserved 534 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
Property Description
Direction Specifies the direction of an action. The following are the options:
Start
Examples
None, Alternate l
None: The animation action direction is always same.
l
Alternate: The animation action direction is same every odd time and in reverse direction every even time.
Specifies how an animation action starts. The following options are available: l
Immediately: Start the animation immediately, with delay, if selected.
Immediately l
With Animation: Action is run along with another action.
l
After Animation: Action is run after completing another action.
Inherit
Note:
With Animation and After Animation properties are ignored if only single action is available in the Action Sequence pane.
The following options are available: l
None: Upon completing this action, widget returns to its original size.
l
Forward: Upon completing this action, widget stays at final position.
l
Backward: Upon completing an action, widget will come return to the original position.
l
Both: Apply Forward and Backward options.
Both
5. Click Apply.
© 2014 by Kony, Inc. All rights reserved 535 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
Note:
For the following properties Left, Right, Top, Bottom, Center X and Center Y, Width,
Height, Min Width, Min Height, Max Width, Max Height, you can specify the values in Device
Independent Pixels (dp), pixels (px), and percentage (%). You can also specify negative values for these properties.
11.4.5.5 Set Style
Allows you to change the background color of a widget.
For changing the background color of a widget, follow these steps:
© 2014 by Kony, Inc. All rights reserved 536 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
1. Click Set Style from the Add Actions > Animation.
2. Click Set Style from the Action Sequence.
3. Select a widget from the Widget tab.
4. Update the properties from the Translate Properties tab with the following details:
Property
Animation
ID
Animation ID.
Description
Background
Color
Select a color from the color picker. Only Single color .
Opacity Specifies the opacity of the background color.
Time
Time
Function
Specifies the number of milliseconds (ms) in which an animation is completed.
The following time functions are available: l
Ease: Specifies a transition effect with a slow start, then fast, then end slowly.
Examples
SetStyle_Color
15%
1000
Delay l
Linear: Specifies a transition effect with the same speed from start to end.
l
Ease-In: Specifies a transition effect with a slow start.
l
Ease-Out: Specifies a transition effect with a slow end.
l
Ease-In-Out: Specifies a transition effect with a slow start and end.
Specifies the number of milliseconds (ms) to wait before starting an animation.
2000
© 2014 by Kony, Inc. All rights reserved 537 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
Property
Repeat
Description
Specifies the number of times an action is repeated. To run the action indefinitely, select the Infinite check box.
5
Examples
Direction Specifies the direction of an action. The following are the options: None, Alternate
Start l
None: The animation action direction is always same.
l
Alternate: The animation action direction is same every odd time and in reverse direction every even time.
Specifies how an animation action starts. The following options are available: l
Immediately: Start the animation immediately, with delay, if selected.
Immediately l
With Animation: Action is run along with another action.
l
After Animation: Action is run after completing another action.
Inherit
Note:
With Animation and After Animation properties are ignored if only single action is available in the Action Sequence pane.
The following options are available: l
None: Upon completing this action, widget returns to its original size.
l
Forward: Upon completing this action, widget stays at final position.
l
Backward: Upon completing an action, widget will come return to the original position.
l
Both: Apply Forward and Backward options.
Both
© 2014 by Kony, Inc. All rights reserved 538 of 621
11. Action Editor
Kony Visualizer User Guide
Version 2.2
5. Click Apply.
Note:
During functional preview, the background color of an animated widget appears after animation stops.
© 2014 by Kony, Inc. All rights reserved 539 of 621
12. Importing Photoshop Styles
Kony Visualizer User Guide
Version 2.2
12. Importing Photoshop Styles
In Visualizer, creating a skin for a widget is easy and effective. Assigning widget skin properties such as background color, border size, or text shadow are accomplished with minimal effort. However, a good number of designers are adept with creating the required style for a designing element using design tools such as Photoshop. For these designers, Visualizer provides an option of creating the designing styles in Photoshop, and then importing these styles into Visualizer.
12.1 Prerequisites
Following software are required for importing the Photoshop styles into Visualizer:
1. Adobe Photoshop installed in your system.
2. CSS Hat plugin for Photoshop.
12.2 Importing Photoshop Styles into Visualizer
To import Photoshop styles into Visualizer, follow these steps:
© 2014 by Kony, Inc. All rights reserved 540 of 621
12. Importing Photoshop Styles
Kony Visualizer User Guide
Version 2.2
1. In Photoshop, create a design. In this example, we have created a rectangle element and assigned values to background color, stroke, and drop shadow.
2. Select the layer.
3. Open CSS Hat Extension, and ensure that the equivalent CSS properties are populated. Click
Copy. The CSS values are copied to the Clipboard.
Note: Do not select any of these options in the CSS Hat palette.
4. In Visualizer, select a widget on which you want to implement Photoshop styles.
5. In the Properties tab, click Skin.
6. Select a skin state such as Normal, Focus, or Blocked UI.
7. To import all the Photoshop styles (such as background, border and shadow), click Import. The widget skins are updated based on the Photoshop CSS.
© 2014 by Kony, Inc. All rights reserved 541 of 621
12. Importing Photoshop Styles
Kony Visualizer User Guide
Version 2.2
Selective Photoshop CSS import: To import a selective Photoshop style (such as a background, a border, or a shadow style), click Import in the individual property tabs. Based on the Photoshop style, the individual property is updated.
For example, in our Photoshop design, we provided background color, stroke, and dropshadow properties. Instead of importing all these values, we chose to import only background style.
© 2014 by Kony, Inc. All rights reserved 542 of 621
12. Importing Photoshop Styles
Kony Visualizer User Guide
Version 2.2
12.3 Naming Conventions
The following table displays the Visualizer and Photoshop naming conventions:
Border
Kony Visualizer
Stroke
Photoshop
© 2014 by Kony, Inc. All rights reserved 543 of 621
12. Importing Photoshop Styles
Kony Visualizer User Guide
Version 2.2
Kony Visualizer
Background: Multi-Step Gradient
Background: Two Step Gradient
Background: Single Color
Shadow
Shadow
Shadow (Inset)
Shadow (Inset)
Photoshop
Gradient Overlay
Color Overlay
Drop Shadow
Outer Glow
Inner Shadow
Inner Glow
12.4 Limitations
Following are the limitations on importing Photoshop styles: l
Not all the CSS values are imported. Visualizer ignores the values that are unsupported. If such unsupported values exist is CSS, the following message appears: l
Font families are not imported from Photoshop. It is recommended that you provide the font family for a widget in Visualizer.
l
Borders with Multi-Step Gradient (MSG) are not properly imported from Photoshop. It is recommended that you provide the border MSG in Visualizer.
l
If you create non-uniform borders, you need to import the CSS styles in the Native and Web channels.
© 2014 by Kony, Inc. All rights reserved 544 of 621
13. App Canvas
Kony Visualizer User Guide
Version 2.2
13. App Canvas
The central pane of the Kony Visualizer is called App Canvas. This is the core area of "What You See
Is What You Get" (WYSIWYG) environment of Visualizer. Here, you can view your design and make the necessary changes.
App Canvas has the following features:
© 2014 by Kony, Inc. All rights reserved 545 of 621
13. App Canvas
Kony Visualizer User Guide
Version 2.2
1. Open Windows: Lists all the open windows (such as forms, popups, and templates) . A window: l containing any unsaved changes will have an asterisk(*).
l can be opened by clicking it.
l can be closed by clicking on the close button X.
2. Toggle Orientation: Click to toggle your design between landscape and portrait view.
Note: This option is applicable only when you select a form's
as Both.
3. Toggle Shell: Click to view your design with or without the device shell.
4. Platforms: The list contains all the supported platforms. Choose a platform from the list. Your project design appears on the selected platform. Default: Apple-iOS : Native.
5. Device: Based on the selected platform, the device list contains all the supported devices.
6. Zoom: The slider allows you change the zoom level for better design viewing.
7. Context menu: Click the widget to display its context menu items. These menu items will vary depending upon the selected widget, and includes: a. Cut: Allows you to move a widget.
b. Copy: Allows you to copy a widget. The copied widgets can be pasted inside a form or pop-up.
c. Duplicate: Allows you to duplicate a widget within the same parent widget. d. Delete: Allows you to delete a widget.
e. Edit Text Field: If two or more text fields are available for a widget, click the > to display the list of editable text fields. This option varies based on the selected widget.
f. Bring Forward: Moves the selected widget one step forward.
© 2014 by Kony, Inc. All rights reserved 546 of 621
13. App Canvas
Kony Visualizer User Guide
Version 2.2
Note: This options is available only for a Flex form.
g. Bring to Front: Moves the selected widget to the front.
Note: This options is available only for a Flex form.
h. Send Backward: Sends the selected widget one step backward.
Note: This options is available only for a Flex form.
i. Send to Back: Sends the selected widget is moved to the last position in the order.
Note: This options is available only for a Flex form.
j. Hide: Allows you to hide a selected widget from view on App Canvas, but will not affect the Visibility property of the widget.
Note: This options is available only for a Flex form.
k. Unhide: Allows you to unhide a widget. This option is enabled only when the widget is hidden.
Note:
This options is available only for a Flex form.
l. Lock: Allows you to lock a widget. This action prevents you from inadvertently moving or scaling the widget within App Canvas. You will still be able to modify the widget properties from the property editor.
Note: This options is available only for a Flex form.
© 2014 by Kony, Inc. All rights reserved 547 of 621
13. App Canvas
Kony Visualizer User Guide
Version 2.2
m. Unlock: Allows you unlock a widget. This option is available only when the widget is locked.
Note: This options is available only for a Flex form.
n. Move Left and Move Right: Allows you to move the widget either to the left or right of immediate widgets. These options are available only when: l
Multiple widgets are added to a container widget.
l
For a leftmost widget within a container widget, Move Left option is unavailable.
Similarly, for a rightmost widget within a container widget , Move Right option is unavailable.
Note: These options are available only for a VBox form o. Move Up and Move Down: Allows you move the widget either to the top or bottom of its immediate widgets. These options are available only when: l
Multiple widgets are added to a container widget.
l
When the widget is docked at the bottom of a container widget, only Move Up option is available. Similarly, when a widget is docked at the top a container widget, only Move Down option is available.
Note:
These options are available only for a VBox form.
p. Actions: Allows you to assign actions to a widget. For more information, refer section
Action.
q. Add to Collection: Allows you to add a widget to a collection. You can either store a widget to an existing collection and library or create a new collection and library.
8. i18n Locale: The default locale language appears. Click the drop-down arrow to view all the locales available for the project. For more information, refer
.
© 2014 by Kony, Inc. All rights reserved 548 of 621
13. App Canvas
Kony Visualizer User Guide
Version 2.2
9. Beyond-Visual-Range (BVR): This option allows you to view only the selected container widget and its child (including those widgets that are beyond visible view.) The remaining elements on a form are hidden.
Example of BVR:
Form BVR form
Select a container widget, and then click BVR.
Note: The BVR option is available only for flex forms.
13.1 Inline Editing
Inline editing allows you to edit a widget's text property by double-clicking the widget on App Canvas.
This option enables the user to quickly make the edits to a widget's text. Inline editing is available for the widgets such as Button, TextBox2, Label and Phone.
© 2014 by Kony, Inc. All rights reserved 549 of 621
13. App Canvas
Kony Visualizer User Guide
Version 2.2
13.1.1 An example of inline editing of widget that has a single text field:
Double-click the Button widget on the App Canvas.
Button widget text is selected and is in editable mode.
13.1.2 An example of Inline Editing of widget that has two or more text fields:
TextBox2 widget has following text fields: Name and Placeholder.
You can rename the TextBox2 by:
© 2014 by Kony, Inc. All rights reserved 550 of 621
13. App Canvas l
Double-clicking the TextBox2 widget on the App Canvas or l
From the TextBox2 menu, click Edit Text Field > Edit Text.
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 551 of 621
14. Top Menu
Kony Visualizer User Guide
Version 2.2
14. Top Menu
Top menu items consist of the following items: l
Visualizer : Allows you to view Quick preview and Functional Preview preferences along with
the links to Visualizer documentation.
l
: Allows you to create, open, import and export a project.
l
Run : Allows you to run a project with only Visualizer action events or with Kony Studio actions
events (If available for a project).
l
: Allows you to publish and share your project.
© 2014 by Kony, Inc. All rights reserved 552 of 621
Kony Visualizer User Guide
Version 2.2
14.1 Visualizer
Visualizer menu provides the following details:
1.
2.
3.
14.1.1 About Visualizer
Click About Visualizer and from the pop-up, click View Credits to view the list of all Kony, Inc. thirdparty licenses that are used in developing this software.
© 2014 by Kony, Inc. All rights reserved 553 of 621
Kony Visualizer User Guide
Version 2.2
14.1.2 Preferences
Visualizer Preferences enables you to configure the Quick Preview and the Functional Preview process for a project.
For accessing the Visualizer preferences, click Visualizer > Preference from the top menu bar.
14.1.2.1 Quick Preview
Quick Preview provides you the ability to preview the current form. For more details on quick preview, refer to the section
.
The default tab of Visualizer Preference dialog box is Quick Preview.
Here, you can view the port numbers assigned to the Notification Port and the Transfer Port.
14.1.2.2 Functional Preview
Functional preview allows you to view the prototype of a project. For more details on functional preview, refer to the section
© 2014 by Kony, Inc. All rights reserved 554 of 621
Kony Visualizer User Guide
Version 2.2
Click the Functional Preview tab in the Visualizer Preference dialog box to access the Functional
Preview configurable items.
In this tab, you can: l
View the Transfer Port number that is required for the functional preview.
Note: Ensure that this port is not in use.
l
Select the channels on which you wanted to view the functional preview of a project. Before you select the channels, ensure that a project is available for the device.
© 2014 by Kony, Inc. All rights reserved 555 of 621
Kony Visualizer User Guide
Version 2.2
14.1.3 Documentation
Click this link to view all the documentation available for Visualizer such as Video Tutorials, Installation
Guides, User Guide and Release Notes.
© 2014 by Kony, Inc. All rights reserved 556 of 621
14.2 Project
From Project, you can perform following actions:
Kony Visualizer User Guide
Version 2.2
l
New Project: A new project with a unique name is created.
l
Open: Displays a flyout menu with a list of all the available projects within the local drive. Click a project to open it.
If you attempt to open a project that was created in an earlier version of Visualizer, you receive the following message:
© 2014 by Kony, Inc. All rights reserved 557 of 621
Kony Visualizer User Guide
Version 2.2
Click OK to continue. The project is automatically ported to the latest version of Visualizer, and then the project is opened.
l
Settings: Refer to
l
Save: Saves the active form or pop-up. This option is unavailable when all the work in the active form or pop-up is saved.
l
Save All: Saves all the changes made to the project. This option is unavailable when there are no pending changes are found for a project.
l
Delete: Allows you to delete the current project. l
Import Project: Allows you to import a project from your local drive. When you click this option, an Open dialog box appears. You can specify the drive, directory, and the name of a project to be imported.
© 2014 by Kony, Inc. All rights reserved 558 of 621
Kony Visualizer User Guide
Version 2.2
l
Import Cloud Project: Allows you to import projects from your cloud account. When you click this option, the Import Project dialog box, containing a list of projects appears. Rest the pointer on a project to display Import button. Click Import to download the project into your local drive.
© 2014 by Kony, Inc. All rights reserved 559 of 621
Kony Visualizer User Guide
Version 2.2
Note:
If a project with the same name exists in your local drive, system prompts you to choose either to overwrite the existing project or rename the project being imported.
l
Export: Allows you to save the project on your desktop as a compressed file. When you click this option, the Save As dialog box appears. From here, you can navigate to a location on your desktop to store the project. Rename the file (if required), and click Save.
l
Export Themes To Library: Allows you to store the themes on your desktop. These themes are available across the projects within your desktop.
© 2014 by Kony, Inc. All rights reserved 560 of 621
Kony Visualizer User Guide
Version 2.2
14.3 Run
Run allows you to view the
of a project locally by generating the "functional preview" build.
14.3.1 Prerequisites
Select the desired channels on which you would like to view the functional preview. Refer to the section
Functional Preview Preferences
for steps to select channels.
14.3.2 Run Menu
From the Run menu, following actions are available: l
Run: Generates the functional preview build for a project with Visualizer actions.
l
Run-Studio: Generates the functional preview build for a project with Kony Studio actions.
After you select one of the options, and if the functional preview build is successfully, you receive the following confirmation message:
14.3.3 Viewing the Functional Preview
For viewing the functional preview of a project locally, refer to the following section
© 2014 by Kony, Inc. All rights reserved 561 of 621
Kony Visualizer User Guide
Version 2.2
14.4 Cloud
Cloud provides an easy way of sharing designs with your stakeholders in a very secure environment.
You can collaborate with your stakeholders by using the following options, : l
Publish App : Allows your stakeholders to view the functional preview of the project, and execute
any action events attached to the widgets.
l
: Allows your stakeholders to download the complete project. They can open the project, make changes (if required), and then upload the modified project back to the cloud.
14.4.1 Publish App
Following are the steps for publishing an app to the cloud.
1. Open your project and from the top-menu bar, click Cloud > Publish App.
and then click Continue.
© 2014 by Kony, Inc. All rights reserved 562 of 621
Kony Visualizer User Guide
Version 2.2
Note: The Publish App dialog box displays only those channels for which the project is created. For example, if you have created a project only for the Mobile channels, then the
Tablet channels are not displayed.
© 2014 by Kony, Inc. All rights reserved 563 of 621
3. Provide the necessary details and click Apply.
Kony Visualizer User Guide
Version 2.2
l
Name: (optional) Enter a name for your project. This name is updated in the Visualizer
Services under the Resource Name of a project.
l
Description: (optional) Enter a description for your project. This description is updated in the Visualizer Services under the Description.
Note: If you profile is linked to a single account, the above screen will not contain Account list.
4. Depending on the size of your application and the speed of your internet connection, uploading an application may take time. the application is uploaded to your cloud account, a code is generated as show below.
© 2014 by Kony, Inc. All rights reserved 564 of 621
Kony Visualizer User Guide
Version 2.2
Note: This code is vital for viewing the functional preview of the application. This code contains (uppercase) alphabets and numbers.
5. You can easily share this code by clicking Share Via Email. A New Message window from your default mail client (for example, Outlook 2010) appears. The code along with the steps for viewing the functional preview of the app is auto-updated in the body of your new email message as shown below.
© 2014 by Kony, Inc. All rights reserved 565 of 621
Kony Visualizer User Guide
Version 2.2
Add the email address of all the stakeholders to whom you would like to provide the functional preview of the application, and then send the email.
Note:
Steps for Functional Preview of an application can be viewed in the section
14.4.2 Share Project
Following are the steps for sharing a project on the cloud.
© 2014 by Kony, Inc. All rights reserved 566 of 621
Kony Visualizer User Guide
Version 2.2
1. When your design is ready to be shared with others, from the top-menu bar click Cloud > Share
Project.
2. In the Share Project window, provide the necessary details and click Apply.
l
Name: (optional) Enter a name for your project. This name is updated in the Visualizer
Services under the Resource Name.
l
Description: (optional) Enter a description for your project. This description is updated in the Visualizer Services under the Description.
Note: If you profile is linked to a single account, the above screen will not contain Account list.
3. Depending on the size of your project and the speed of your internet connection, uploading a project may take time. After the project is uploaded, you receive a confirmation message as
© 2014 by Kony, Inc. All rights reserved 567 of 621
Kony Visualizer User Guide
Version 2.2
show below.
Click Close to complete the process of sharing the project.
Now the project is uploaded to the cloud, users can downloaded and view the project using the option
.
14.4.2.1 Modifying a Shared Project
A project can be imported and modified by following the below steps:
1. Import a project using the option:
. The project is imported and opened in your Kony Visualizer.
2. Make the necessary changes to the project and save it.
Note: In the Notes (Form Properties >Notes), enter all the modification made to the form.
This would allow others to know the changes you have made to the form.
3. Click Cloud > Share Project.
4. System prompts you to confirm replacing the existing project on the cloud. Click Apply to upload the modified project.
© 2014 by Kony, Inc. All rights reserved 568 of 621
Kony Visualizer User Guide
Version 2.2
5. Depending on the size of your project and the speed of your internet connection, uploading the project may take time. After the project is uploaded, you will receive a confirmation message as show below.
Click Close to complete the process of sharing the project.
14.4.2.2 Shared Project Limitation
A project that is shared on a cloud account can only be reuploaded to the same cloud account. For example, a user shares a project on a cloud account A. You can import this project (if you have necessary permissions) and make changes to the project (if necessary) and then re-export it back to the same cloud account A. You will not be allowed to share this project on any other cloud account even if you have access to multiple accounts (like Cloud account B, C and D).
© 2014 by Kony, Inc. All rights reserved 569 of 621
Kony Visualizer User Guide
Version 2.2
Hence, it is always advisable that an admin create a cloud account specific to a project and invite all the stakeholders of the project to this account. This would ensure that project is available for all to share and modify.
Steps for inviting users to a cloud account
As an admin of a cloud, you can invite users by following the below steps:
1. Visit http://manage.kony.com and enter your Kony Cloud login credentials.
2. After validation login credentials, you are redirected to the Manage Clouds page. All your cloud
© 2014 by Kony, Inc. All rights reserved 570 of 621
accounts are displayed. From the left panel, click Invite Users.
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 571 of 621
Kony Visualizer User Guide
Version 2.2
3. In the Invite User window, l
Enter the email address of user being invited.
l
Select an account role to be assigned to the user. Available roles include: Owner, Admin,
Billing, and Member.
l
From the existing cloud accounts, select the type of access to be provided to the user.
Selecting Full Access option, results in adding the user to the cloud account.
4. User receives an email invite to join the cloud account and follows the process outlined in the mail to register for specified cloud account.
© 2014 by Kony, Inc. All rights reserved 572 of 621
Kony Visualizer User Guide
Version 2.2
14.5 Previewing an App
You can preview an app at any stage of designing to ensure that it renders exactly the same as viewed on the Kony Visualizer.
You can preview using: l
Quick Preview : Allows you to preview the form being viewed on your Kony Visualizer.
l
Functional Preview : Allows you to preview the entire application and also, navigate from one
form to other, while performing any actions that have been attached to the widgets.
© 2014 by Kony, Inc. All rights reserved 573 of 621
Kony Visualizer User Guide
Version 2.2
14.5.1 Quick Preview
Quick Preview allows you to view the current form being designed in Kony Visualizer on an emulator.
Currently, you can perform quick preview from Kony Studio only.
Prerequisite for quick preview: l
Kony Studio installed in your system.
l
Automatic Preview installed and configured.
Note: Refer to Kony Studio User Guide for steps to install and configure Automatic
Preview.
Note:
In Kony Studio, Quick Preview is referred as Automatic Preview.
Steps for configuring and viewing quick preview
© 2014 by Kony, Inc. All rights reserved 574 of 621
1. Launch Automatic Preview emulator from your Kony Studio.
2. The emulator displays Preview Settings window.
Kony Visualizer User Guide
Version 2.2
Enter the following details:
1. Server or IP address: Provide the IP address of your computer.
2. Port: Provide the port number as 9000.
3. In Auto Preview Settings: a. Auto Preview Status: If you enable this option, changes made to a form reflect immediately on you Quick Preview emulator.
© 2014 by Kony, Inc. All rights reserved 575 of 621
Kony Visualizer User Guide
Version 2.2
b. Auto Preview Port: Provide the port number as 9092.
4. Click Preview. The app interacts with your Visualizer design, and displays a preview of the current form that exist in Visualizer.
© 2014 by Kony, Inc. All rights reserved 576 of 621
Kony Visualizer User Guide
Version 2.2
14.5.2 Functional Preview
Functional preview allows you to view the front-end prototype of a project on a device. During functional preview, you can run any action attached to a widget such as navigating from one form to other, applying skin to a widget, and opening a pop-up window.
You can perform functional preview using one of the below methods: l
Functional Preview (Cloud) : Allows you to view the functional preview of a prototype that is
published to the cloud.
l
: Allows you to view the functional preview of a prototype that is published within your intranet.
14.5.2.1 Functional Preview (Cloud)
To view the functional preview of your prototype on cloud, follow these steps:
© 2014 by Kony, Inc. All rights reserved 577 of 621
Kony Visualizer User Guide
Version 2.2
1. Tap Kony Visualizer app on your device. The application launches.
2. Provide your Kony Cloud account credentials on the sign-in page, and then tap Sign In.
Note:
To create a new Kony cloud account or to reset your Kony cloud account password, visit http://manage.kony.com
.
© 2014 by Kony, Inc. All rights reserved 578 of 621
3. The Kony Preview > Cloud page appears.
Kony Visualizer User Guide
Version 2.2
Here, you can perform functional preview using one of the below methods: l
Search using a prototype code: In the Search box, enter the prototype code, and then tap
Search.
© 2014 by Kony, Inc. All rights reserved 579 of 621
Kony Visualizer User Guide
Version 2.2
Note: The prototype code is generated when an app is published to the cloud. For more details, see
l
Search for a prototype code in the History page. Tap History to open a list of prototypes, and then tap a prototype to view the functional preview.
© 2014 by Kony, Inc. All rights reserved 580 of 621
Kony Visualizer User Guide
Version 2.2
4. The functional preview build downloads to your device. View the prototype of the project, and run any actions attached to the prototype.
© 2014 by Kony, Inc. All rights reserved 581 of 621
Kony Visualizer User Guide
Version 2.2
View the notes by holding two fingers on the screen for about 2 seconds, or shake the device.
To exit the current prototype, swipe two fingers from left to right.
Notes
Notes allow your users to provide form-level comments, suggestions, and feedback. Team members interact through notes to build a better design and user experience. A note is visible to everyone, but it can only be modified by the user who posted the note.
The Notes tab includes the following posts: l
posted before publishing a prototype.
l
Notes posted by users while viewing a prototype.
To view the Notes menu during the functional preview, hold two fingers on the screen for about two seconds or shake the device.
© 2014 by Kony, Inc. All rights reserved 582 of 621
Kony Visualizer User Guide
Version 2.2
The Following menu items are displayed: l
Create Notes: Allows you to view the existing notes and add a new note. In the Notes text field, type your comments, suggestions or feedback, and then tap Post. Your post is immediately updated in the Notes tab and is visible to all the users. The same note is also updated within the project form and is a visible under
tab.
© 2014 by Kony, Inc. All rights reserved 583 of 621
Kony Visualizer User Guide
Version 2.2
l
View Notes: View the existing notes and also add a new note, if required.
l
Exit App: Allows you to exit the current prototype. You are redirected to the
l
Dismiss: Allows you to close the Notes menu.
While Notes tab appears, you can perform the following actions:
© 2014 by Kony, Inc. All rights reserved 584 of 621
Kony Visualizer User Guide
Version 2.2
l
To Top: Allows you to increase the size of the Notes tab by tapping To Top. This results in
Notes tab occupying the complete device screen space. To return the Notes tab to the default size, click To Bottom.
l
Edit: Allows you to modify or delete own post or add a new note. When you tap Edit, an X icon appears next the post. A post that had red color X icon indicates that you have posted the note.
Tap the X icon to delete the post or to modify the post tap the post and make the necessary changes. Complete the editing process by tapping Done.
l
X: Allows you to close the Notes menu list.
14.5.2.2 Functional Preview (Local)
Note: Before you view the functional preview locally, you need to generate the Functional Preview build. For more details, refer to
1. Tap Kony Visualizer app on your device.
2. When the application is launched, in the sign-in page provide your Kony Cloud Account credentials, and then tap Sign In.
© 2014 by Kony, Inc. All rights reserved 585 of 621
Kony Visualizer User Guide
Version 2.2
Note: To create a new Kony cloud account or to reset your Kony cloud account password, visit http://manage.kony.com
.
3. After logging to the cloud, you are redirected to Kony Preview > Cloud page. Tap Local
(Advance) tab.
© 2014 by Kony, Inc. All rights reserved 586 of 621
Kony Visualizer User Guide
Version 2.2
4. Input the required details.
l
IP Address: The IP address of the machine that where the prototype exist.
l
Port: Type the port address as 9989.
l
Application: Type the name of the project.
5. Tap Launch App.
6. The functional preview build is downloaded to your device. You can view the prototype of the project, and execute any actions attached to the prototype.
© 2014 by Kony, Inc. All rights reserved 587 of 621
Kony Visualizer User Guide
Version 2.2
At any time, to exit the current prototype, swipe two fingers from left to right.
© 2014 by Kony, Inc. All rights reserved 588 of 621
15. Importing and Exporting a Project
Kony Visualizer User Guide
Version 2.2
15. Importing and Exporting a Project
Typically, a UI/UX design for a project is built in Kony Visualizer and then exported to Kony Studio, where developers code the back-end operations such as adding events to a widget, enabling business logic and integrating it with a database. The seamlessly integration of Kony Studio and Kony Visualizer results in building highly interactive applications for mobile and tablet devices.
This section details the steps for l
Exporting a project to Kony Studio l
Importing a project from Kony Studio
15.1 Exporting a Project to Kony Studio
You can export a Kony Visualizer project using one of the below methods: l
Traditional Export Method: Save the project in your local machine and then share the project as an email attachment or by using any other means of sharing a file.
l
Export to Cloud: Upload the project file directly to your cloud account and allow your users to import the project file into their Kony Studio.
15.1.1 Traditional Export Method
For exporting a Kony Visualizer project, follow these steps:
Note: Ensure you save the project (ctrl+shift+s) before exporting.
© 2014 by Kony, Inc. All rights reserved 589 of 621
15. Importing and Exporting a Project
Kony Visualizer User Guide
Version 2.2
1. In Kony Visualizer, click Project > Export
2. In the Save As dialog box, a. Select a location in your local machine where you wanted the file to be saved.
Rename the file (if required).
b. Click Save to save the Visualizer project.
For the steps to import this file into Kony Studio, refer to Kony Studio User Guide.
15.1.2 Exporting to Cloud
For exporting a Kony Visualizer project to a cloud account, follow these steps:
Note: Ensure you save the project (ctrl+shift+s) before exporting.
© 2014 by Kony, Inc. All rights reserved 590 of 621
15. Importing and Exporting a Project
Kony Visualizer User Guide
Version 2.2
1. In Kony Visualizer, from the top-menu bar click Cloud > Share Project.
2. In the Share Project window, provide the necessary details and click Apply.
3. Depending on the size of your project and the speed of your internet connection, uploading a project may take time. After the project is uploaded, you receive a confirmation message as show below.
© 2014 by Kony, Inc. All rights reserved 591 of 621
15. Importing and Exporting a Project
Kony Visualizer User Guide
Version 2.2
Click Close to complete the process of sharing the project.
For the steps to import this file into Kony Studio, refer to Kony Studio User Guide.
15.1.2.1 Modifying a Project
A project can be modified and exported to the cloud by following these steps:
1. Import a project using the option:
. The project is imported and opened in your Kony Visualizer.
2. Make the necessary changes to the project and save it.
Note: In the Notes (Form Properties >Notes), enter all the modification made to the form.
This would allow others to know the changes you have made to the form.
3. Click Cloud > Share Project.
4. System prompts you to confirm replacing the existing project on the cloud. Click Apply to upload the modified project.
5. Depending on the size of your project and the speed of your internet connection, uploading the project may take time. After the project is uploaded, you will receive a confirmation message as show below.
© 2014 by Kony, Inc. All rights reserved 592 of 621
15. Importing and Exporting a Project
Kony Visualizer User Guide
Version 2.2
Click Close to complete the process of sharing the project.
Note: A project imported from the cloud can only be exported to the same cloud account.
That is, you cannot copy or move a project from one cloud account to other.
For limitations on Shared project refer
.
15.1.3 Building a project with Visualizer actions in Kony Studio
In Visualizer, you can generate the functional preview of a Kony Studio project, and run a Kony Studio specific action-events using
. Similarly, in Kony Studio, you can generate the functional preview of a Visualizer project and run a Visualizer specific action-events using the following steps:
1. In Kony Studio, right-click a Kony Visualizer project and then click Properties. The Application
Properties window appears.
© 2014 by Kony, Inc. All rights reserved 593 of 621
15. Importing and Exporting a Project
2. On the Build tab, select the Use Visualizer Actions check box.
Kony Visualizer User Guide
Version 2.2
3. Click Finish.
15.1.4 Limitations on Exporting to Kony Studio
Following are the limitations on exporting a project to Kony Studio: l
Slider background skins: There are intermittent issues with slider background skins when you import to Kony Studio. The slider background skins are not applied to the widget, once you import.
l
Multiple map widgets on export: Export fails if multiple map widgets are present on the same form.
© 2014 by Kony, Inc. All rights reserved 594 of 621
15. Importing and Exporting a Project
Kony Visualizer User Guide
Version 2.2
l
Notes data lost when exported to studio, and then re-imported into Visualizer: When a project is exporting to Kony Studio, and then re-importing into Visualizer, there are intermittent instances when the Notes data is lost.
l
Version 5.5 specific skin features are lost when exporting to version 5.0 of the Kony Studio: Skin features such as multi-step gradient, shadow, and border gradient are lost on import into version 5.0 of the Kony Studio as they are not supported.
15.2 Importing a Project from Kony Studio
You can import a Kony Studio project into Kony Visualizer using one of the below methods: l
Traditional Import Method: Save a Kony Studio project in your local machine and then import the project into Kony Visualizer.
l
Import from Cloud: Import the project directly from your cloud account.
15.2.1 Traditional Import Method
For importing a Kony Studio project, follow these steps:
Note: Ensure you save the current project (ctrl+shift+s) before importing a project.
1. In Kony Visualizer, from the top-menu bar click Project > Import Project.
2. In the Open window, a. Navigate to the location in your local machine where you have saved the Kony Studio project file.
b. Select the Project.
© 2014 by Kony, Inc. All rights reserved 595 of 621
15. Importing and Exporting a Project
Kony Visualizer User Guide
Version 2.2
c. Click Open to import and open the project into Kony Visualizer.
Note: While importing, if the project has the same name as that of an existing project, system displays warning message.
15.2.2 Import from Cloud
For importing a Kony Studio project from a cloud account, follow these steps:
Note: Ensure you save the current project (ctrl+shift+s) before importing a project.
1. From the top-menu bar, click Project > Import Cloud Project to open Import Project window.
2. All the projects that are shared by your team on the same cloud account are displayed. Rest the pointer on a project to display Import button.
© 2014 by Kony, Inc. All rights reserved 596 of 621
15. Importing and Exporting a Project
Kony Visualizer User Guide
Version 2.2
3. Click Import to download the project into your local drive and open it in Kony Visualizer
Note: If a project with the same name exists in your local drive, system prompts you to choose either to overwrite the existing project or rename the project being imported.
15.2.3 Limitations on Importing from Kony Studio
Following are the limitations on importing a project form Kony Studio: l
Platform specific fonts not applied: Platform specific fonts are not always applied to a widget that uses them when exporting from Kony Studio to Visualizer.
l
Platform specific images not applied: Platform specific images are not always applied to a widget that uses them when exporting from Kony Studio to Visualizer.
l
App Menu icons set in Kony Studio are not showing up in App Canvas after importing: App
Menu icons set in Kony Studio are not showing up in App Canvas after you import to Visualizer.
© 2014 by Kony, Inc. All rights reserved 597 of 621
15. Importing and Exporting a Project
Kony Visualizer User Guide
Version 2.2
l
Skin defaults not applied: Skin defaults specified in Kony Studio are not respected in Visualizer.
l
If you export a project to Kony Studio containing an element (form, pop-up, or widget) with disabled skin and then reimport, the disabled skin gets enabled but with noSkin format.
l
Widget background image lost: For some widgets, skin background images set for various platforms are lost after importing to Visualizer.
l
Segment : Unable to edit the segment structure: When you import a Segment widget from Kony
Studio, there are instances when editing the existing widgets (inside the segment) or adding widgets is not possible.
l
Browser widget in container not visible in canvas: Browser widget placed inside a container in the Kony Studio is not visible in App Canvas after you import into Visualizer.
l
Platform specific skins not importing for Slider widget: When you import a Slider widget from
Kony Studio, the slider specific skins are not applied.
l
Platform specific skins not importing for Switch widget: When you import a Switch widget from
Kony Studio, the slider specific skins are not applied.
l
Width % import issue when total width is less than 100: When you import Kony Studio project containing widgets that are inside an HBox and where the total width percent of these widget is less than 100, certain issues are noticed in the App Canvas and Properties editor.
l
Issues when renaming a Visualizer project prior to export: Renaming Visualizer project results in failure to import into Kony Studio.
l
Unable to see app menu on iPhone in Quick Preview when project imported from Kony Studio.
l
Import fails when Calendar widget cell template is present: If the project that you import contains a Calendar widget cell template, then import into Visualizer fails.
l
Deprecated widgets are not supported.
l
Widget and Skin IDs must be unique (inclusive of case-insensitivity.)
© 2014 by Kony, Inc. All rights reserved 598 of 621
16. Upgrade Kony Visualizer
Kony Visualizer User Guide
Version 2.2
16. Upgrade Kony Visualizer
Kony Visualizer regularly checks for upgrades and notifies if any are available.
To download and install Kony Visualizer upgrade, follow these steps:
1. When you are notified about an upgrade in Visualizer, click the notification button to view the details.
2. Click Download.
When the download is complete, the following message appears:
© 2014 by Kony, Inc. All rights reserved 599 of 621
16. Upgrade Kony Visualizer
Kony Visualizer User Guide
Version 2.2
3. Click Install.
16.1 Upgrading from Visualizer 2.0.1 or earlier versions
Even if you have not regularly upgraded Visualizer, you can upgrade to the latest Visualizer using the
process.
However, while upgrading from 2.0.1 (or earlier versions) of Visualizer, if you receive the error message: Upgrade Failed. Error: Installation failed at git init., follow these steps to upgrade to the latest version of Visualizer:
1. Open a word processor such as Notepad. Type the following:
[user] email = [email protected]
name = Kony Visualizer
2. Save the file as
.gitconfig
, in the following location:
In Windows platforms:
C:\Users\<username>
In Macintosh platforms:
/Users/<username>
3. Upgrade Visualizer by following the steps in
.
© 2014 by Kony, Inc. All rights reserved 600 of 621
16. Upgrade Kony Visualizer
Kony Visualizer User Guide
Version 2.2
4. After successfully upgrading Visualizer, delete the
.gitconfig
file (created in the above steps.)
© 2014 by Kony, Inc. All rights reserved 601 of 621
17. Internationalizing (i18n) Application Content
Kony Visualizer User Guide
Version 2.2
17. Internationalizing (i18n) Application Content
The process of designing or developing an application in such a way that it supports various languages and regions is known as Internationalization. Internationalization is abbreviated as i18n. i18n support for an application has to be defined at the time of designing the application.
This section details the following process: l
Configuring i18n Locales and Adding Keys
l
Assigning an i18n Key to a widget
l
l
17.1 Configuring i18n Locales and Adding Keys
Visualizer supports predefined and custom locales.
To configure the locales, follow these steps:
© 2014 by Kony, Inc. All rights reserved 602 of 621
17. Internationalizing (i18n) Application Content
1. Click Project > Settings from the top-menu of Visualizer.
Kony Visualizer User Guide
Version 2.2
The Project Settings > Application page appears.
2. Select the Enable i18N check box.
3. Click ellipsis.
The Configure Internationalization dialog appears.
© 2014 by Kony, Inc. All rights reserved 603 of 621
17. Internationalizing (i18n) Application Content
4. Click the Open Locales icon.
Kony Visualizer User Guide
Version 2.2
The Configure Locales page appears.
5. From the predefined and custom locales, select the required locales.
Note: For more information on custom locales, see
6. Click OK.
© 2014 by Kony, Inc. All rights reserved
,
604 of 621
17. Internationalizing (i18n) Application Content
Kony Visualizer User Guide
Version 2.2
The Configure Internationalization page with the chosen locales appear. Here, the following locales have been selected: US English (en_US), France ( fr), and Germany (de).
7. Add the keys, and the corresponding values in different locales.
l
Click the plus icon (+), to add a new row.
l
Click delete icon (x), to delete a selected row.
8. Click Finish.
© 2014 by Kony, Inc. All rights reserved 605 of 621
17. Internationalizing (i18n) Application Content
9. Select a default locale for your project.
Kony Visualizer User Guide
Version 2.2
10. Click Apply.
17.2 Assigning an i18n key to a widget
To assign an i18n key, follow these steps:
© 2014 by Kony, Inc. All rights reserved 606 of 621
17. Internationalizing (i18n) Application Content
1. Select a widget.
Kony Visualizer User Guide
Version 2.2
© 2014 by Kony, Inc. All rights reserved 607 of 621
17. Internationalizing (i18n) Application Content
2. Select a locale from the App Canvas.
Kony Visualizer User Guide
Version 2.2
3. Select the key from the Text i18n key list from the widgets properties tab.
4. Repeat the preceding steps to assign i18n keys to required widgets.
17.3 Custom Locales
To add custom locales to your application, follow these steps:
© 2014 by Kony, Inc. All rights reserved 608 of 621
17. Internationalizing (i18n) Application Content
1. Click Project > Settings from the top-menu of Visualizer.
Kony Visualizer User Guide
Version 2.2
The Project Settings > Application page appears.
2. Select the Enable i18N check box.
3. Click ellipsis.
The Configure Internationalization dialog appears.
© 2014 by Kony, Inc. All rights reserved 609 of 621
17. Internationalizing (i18n) Application Content
4. Click Open Locales icon.
Kony Visualizer User Guide
Version 2.2
The Configure Locales page appears.
5. Click the Custom tab.
6. Click the check box in the first empty row.
© 2014 by Kony, Inc. All rights reserved 610 of 621
17. Internationalizing (i18n) Application Content
Kony Visualizer User Guide
Version 2.2
7. Provide the required details.
Note: 1. The Locale field must be of the format aa_AA or aa. For example, jp_JP, or jp would be a valid locale name.
2.The Country field can only contain alphabets .
3. The Language field must necessarily have its first character as an alphabet.
8. Click OK.
17.4 Functional Preview
To view the functional preview of an i18n app, follow these steps:
1. Select a default locale for your application. Refer
Configuring i18N Locales and Adding Keys
for assigning a default locale.
2. Perform the functional preview of an app. For more information on Functional Preview, refer
Functional preview of the app on various locales is shown below
US English (en_US) France (fr) German (de)
© 2014 by Kony, Inc. All rights reserved 611 of 621
18. Visualization Services
Kony Visualizer User Guide
Version 2.2
18. Visualization Services
Visualization Services provides you with the following details: l
Prototypes: List of the apps published to the cloud.
l
Visualizer Projects: List of Visualizer projects uploaded to the cloud.
l
Studio Projects: List of Kony Studio projects uploaded to the cloud.
18.1 Accessing Visualization Services
To view the Visualization services, follow these steps:
1. Go to https://manage.kony.com
, provide your Kony account login credentials.
After validating your credentials, the Manage Clouds page appears.
© 2014 by Kony, Inc. All rights reserved 612 of 621
18. Visualization Services
2. Click Visualizer Services.
Kony Visualizer User Guide
Version 2.2
The Console > Prototypes page appears.
18.2 Prototypes
The Prototypes page lists all the ( Visualizer and Studio) apps that are published to the cloud.
This page provides the following information: l
Name: Name of a Prototype. Click the name to view a list of viewers who have viewed the prototype.
l
Description: Provides description of a prototype.
l
Resource Name: Name assigned while uploading or sharing.
© 2014 by Kony, Inc. All rights reserved 613 of 621
18. Visualization Services
Kony Visualizer User Guide
Version 2.2
l
Resource Type: Either prototype or visualizer. When you publish an app, the resource type is prototype. When you share a project, the resource type is visualizer.
l
Prototype ID: The alphanumeric code required for viewing the functional preview of a prototype.
l
Platforms: Lists the platforms on which you can view the functional preview.
l
Created By: Displays the name of person who has published the prototype for the first time.
l
Created On: Date when the prototype is first published.
l
Last Modified By: Displays the name of the person who has last modified the prototype.
l
Last Modified On: Displays the date when the prototype was last modified.
18.3 Visualizer Projects
The Visualizer Projects page lists all the Visualizer projects that are uploaded to the cloud.
This page provides the following information:
© 2014 by Kony, Inc. All rights reserved 614 of 621
18. Visualization Services
Kony Visualizer User Guide
Version 2.2
l
Name: Displays the name of a Visualizer project uploaded to the cloud.
l
Created By: Displays the name of person who has published the prototype for the first time.
l
Created On: Displays the date when the prototype is first published.
l
Last Modified By: Displays the name of the person who has last modified the prototype.
l
Last Modified On: Displays the date when the prototype was last modified.
l
Notes: Displays the information entered (if any) when the project is last modified.
18.4 Studio Projects
The Studio Projects page lists all the studio projects that are uploaded to the cloud.
This page provides the following information: l
Name: Displays the name of a Visualizer project uploaded to the cloud.
l
Created By: Displays the name of person who has published the prototype for the first time.
© 2014 by Kony, Inc. All rights reserved 615 of 621
18. Visualization Services
Kony Visualizer User Guide
Version 2.2
l
Created On: Displays the date when the prototype is first published.
l
Last Modified By: Displays the name of the person who has last modified the prototype.
l
Last Modified On: Displays the date when the prototype was last modified.
l
Notes: Displays the information entered (if any) when the project is last modified.
© 2014 by Kony, Inc. All rights reserved 616 of 621
19. Support for Legacy Widgets and Old Projects
Kony Visualizer User Guide
Version 2.2
19. Support for Legacy Widgets and Old Projects
This section provides the details information: l
How Visualizer supports legacy widgets.
l
How a project created in earlier versions of Visualizer is upgraded.
19.1 How Visualizer supports legacy widgets
Visualizer supports legacy Kony Studio widgets such as TextBox0, TextArea0, Image0, Segment0,
HorizontalImageStrip0, ImageGallery0, and Form0. Before you import a Kony Studio project containing legacy widgets, the project should be upgraded to Kony Studio 6.0. For more details on upgrading a Kony Studio project, see Kony Studio User Guide .
When a Kony Studio project containing legacy widgets is imported to Visualizer, the following limitations are observed:
1. The legacy widgets may appear distorted on App Canvas.
2. The legacy widgets are unavailable in the Library > Widgets tab.
3. Properties such as Cut, Copy, Paste, Duplicate, and Add to Collection are unavailable for the legacy widgets.
4. The following properties are unavailable for a container widget having legacy widgets: Cut,
Copy, Paste, Duplicate, and Add to Collection.
19.2 How a project created in earlier versions of Visualizer is upgraded
To upgrade a project created in earlier versions of Kony Visualizer, follow these steps:
© 2014 by Kony, Inc. All rights reserved 617 of 621
19. Support for Legacy Widgets and Old Projects
1. Click Project > Import Project.
Kony Visualizer User Guide
Version 2.2
The Open window appears.
2. Click the project and then click Open.
3. Click OK.
© 2014 by Kony, Inc. All rights reserved 618 of 621
20. Keyboard Shortcuts
Kony Visualizer User Guide
Version 2.2
20. Keyboard Shortcuts
Following the keyboard shortcuts that are available for both Windows and Mac platforms.
For the below shortcuts, in Windows use ctrl and in Mac use Command ⌘.
Shortcut key definition
Saves All Ctrl + Shft + S
Ctrl + S
Alt + N
Ctrl + C
Ctrl + D
Ctrl + V
Alt + Left
Alt + Right
Alt + Up
Save active form
Create new project
Copy
Duplicate
Paste
Move Left
Move Right
Move Up
Alt + Down Move Down
Delete (Applicable only for Windows platform) Delete Widget
Alt + F10
F10
Select Previous
Select Next
Alt + F11
F11
Select Parent
Select First Child
© 2014 by Kony, Inc. All rights reserved 619 of 621
21. Flex Layout FAQ
Kony Visualizer User Guide
Version 2.2
21. Flex Layout FAQ
1. Can we convert a VBox form to a Flex form without having to redesign the form?
Currently, you cannot perform automatic conversion between VBox and Flex forms. But with the 2.0 release, you can create a project containing both VBox and Flex form.
2. Why Flex forms are recommended over VBox forms?
A Flex form provides many new features to enhance the UI of an application. You can view some of the new features at our tutorials page ( http://www.kony.com/resources/videos ). We will most likely deprecate the VBox forms in the coming releases. We strongly encourage new applications and application enhancements to begin utilizing the Visualizer 2.0 Flex forms.
3. Can we create an app with both VBox and Flex forms? If so, what are pitfalls in doing so?
Anything that they cannot share (themes, headers, footers, etc.)?
Applications can have both VBox and Flex forms. Headers and footers must have common layout types (VBox or Flex) to be utilized on a form of the same layout type. Headers and footers are supported in Flex forms, but are not the recommended approach for creating these types of
UI elements. With flex, containers can be pinned anywhere using the positioning properties.
4. Is there any overhead in using Flex forms in terms of app size (app is X% bigger, and so on?)
As part of the 2.0 release, the layout engine that Kony uses was redesigned for Flex layout. One of the major considerations in this besides flexibility in the UI was performance. We have generally seen a large performance increase when implementing a UI in Flex containers for
Flex layouts. One use case in an iOS and Android tablet application resulted in a 150% increase in performance others have ranged from 50 to 100%. In regards to application size, there were modifications to framework which will have a slight increase in overall application size, but it is minimal (Kbs).
© 2014 by Kony, Inc. All rights reserved 620 of 621
21. Flex Layout FAQ
Kony Visualizer User Guide
Version 2.2
5. Is there an automated way that syncing of forms from Visualizer to Kony Studio?
We will be releasing solutions in the coming months to address this issue. In the near term, a new import functionality will be exposed to expedite the import process and allow you to only import specific forms, themes, etc. In the longer term, we are working to unify the experiences between Kony Studio and Visualizer so that they can share a common project.
6. Do pop-ups, headers or footers differ or do they work the same way regardless of form type?
Headers and footers are supported in flex forms, but are not the recommended approach for creating these types of UI elements. With Flex, containers can be pinned anywhere using the positioning properties.
7. Are actions created in Visualizer retained when imported to Kony Studio and vice versa?
Currently, actions created in Visualizer and Studio are mutually exclusive. Users have the options to use the Visualizer created events, but they are not retained. In the forthcoming releases, we will be addressing the action synchronization.
© 2014 by Kony, Inc. All rights reserved 621 of 621
डाउनलोड
सार्वजनिक दुवा अद्यतनित केला
आपल्या चॅटचा सार्वजनिक दुवा अद्यतनित केला गेला आहे. You may view and manage your chat links after registration here.
दस्तऐवजाचा सार्वजनिक दुवा
जाहिरात
