Kony Studio Equivalents in Quantum Visualizer
The Kony Studio product line has evolved to a new user interface and expanded functionality in Quantum Visualizer. In addition to its many new and improved features, virtually all of the same functionality is available, but many of those familiar Kony Studio features are accessed differently in Quantum Visualizer. This topic shows you how to accomplish in Quantum Visualizer what you are familiar with doing in Kony Studio.
NOTE: In Kony Studio 6.5, you could port a project from one platform to another, and to channels within the target platform. However, issues would arise due to the wide variations in form factors from one platform and channel to another. In Quantum Visualizer, universality across platforms and channels is achieved through the use of
Feature Locations
The following table outlines where different features are located in the respective user interfaces of Kony Studio and Quantum Visualizer.
|
Feature |
In Kony Studio |
In Kony Visualizer |
| Application assets | Navigator View → <App Name> | Project Explorer → Assets tab |
| Clone All | Skins View → Clone All icon | Project Explorer → Skins tab → <widget type> → right-click <skin name> (e.g. btnFocus) → Fork |
| Collections | N/A | Library Explorer → Collections |
| Custom Widgets | Navigator View → <App Name> → customwidgets | Quantum VisualizerLibrary pane →Widget tab → Custom Widget section |
| Emulators (configure) | Emulators View → <Platform> → <Channel> → right-click emulator → Edit | Product menu → Emulators & Devices Configuration or Window menu → Preferences → Quantum Visualizer → Emulators |
| Emulators (display) | Window menu → Show View → Emulators | Preview menu → Launch Emulator |
| Events/ Actions |
Events are added and edited by selecting a widget and then navigating to the Event section in the Widget Properties View |
Global actions can be created and accessed from Project Explorer → Project tab → <Channel>, and open in the Action Editor Actions created for a specific widget are accessed by selecting the widget, followed by Properties Editor → Action tab |
| Flex Properties | Flex Properties View | Properties Editor → Look tab → Flex section |
| Font (change) | Skins view → navigate to widget type → navigate to channel and platform → double-click → Font tab | Select widget → Properties Editor → Skin tab → Fonts section |
| Fork a Skin | Skins View → <widget type> → right-click <skin name> (e.g. btnFocus) → Fork |
Project Explorer → Skins tab → <widget type> → right-click <skin name> (e.g. btnFocus) → Fork or Properties Editor → Skin tab → General section → Platform ellipsis button→ Select platforms → OK |
| Forms | Applications View → <App Name> → forms | Project Explorer → Project tab → <Channel> → Forms |
| Hierarchical view of forms and widgets | Outline view | Project Explorer → Project tab |
| Images | Applications View → resources | Project Explorer → Assets tab |
| Modules | Applications View → <App Name> → modules | Project Explorer → Project tab → Modules |
| Offline Services | Applications View → <App Name> → offline services |
Set up as a service on Quantum Fabric that is then synced locally |
| Popups | Applications View → <App Name> → popups | Project Explorer → Project tab → <Channel> → Popups |
| Projects/ Applications | Multiple applications can be open at one time | Only one project can be open at a time |
| Review/ Comments | Not Available | Properties Editor → Review tab |
| Search (forms, widgets, and skins) | Search menu → Search | Project Explorer → Search tab |
| Search (modules) | Search menu → Search | Edit menu → Find/Replace (Search in Quantum Visualizer) |
| Services in use by the application | Applications View → <App Name> → services Also: The Services View |
Project Explorer → Quantum Fabric |
| Skins | The Skins view | Project Explorer → Skins tab |
| Splash Screen | File → Application Properties → Splash Screen tab | Opened from Project Explorer → Project tab → <Channel>, and once opened, configured from Properties Editor → Splash Screen tab |
| Templates | Applications View → <App Name> → templates | Project Explorer → Templates tab → Components |
|
Themes |
The Skins view → Theme drop-down list | Project Explorer → Skins tab → Theme drop-down list |
| Web_module | Applications View → <App Name> →web_module |
Handled as a part of services in the Quantum Fabric Console Project Explorer → Project tab → Quantum Fabric |
| Widgets | Widgets Palette | Library Explorer → Widgets tab |
| Widget Properties | Widget Properties View | Properties Editor |
Service Definition
The following table outlines where service definition features are located in the respective user interfaces of Kony Studio and Quantum Visualizer.
|
Feature or Task |
In Kony Studio |
In Quantum Visualizer |
| Access and edit service definitions | Right-click app name in the Applications View, and then click Open Service Definition. | Project Explorer → Project tab → Quantum Fabric → Integration → Configure New button or Use Existing button |
| Sync Configuration |
Window menu → Show View → Other → Kony Studio → SyncConfiguration |
Project Explorer → Project tab → Quantum Fabric → Synchronization |
Form Editor
The following table outlines where various form editing features are located in the respective user interfaces of Kony Studio and Quantum Visualizer.
|
Feature or Task |
In Kony Studio |
In Quantum Visualizer |
| Create a new form | Applications View → <App Name> → forms → right-click <channel> → New Flex Form | Project Explorer→ Project tab → <channel> → right-click Forms → New Form → Flex Form |
| Form editing |
Uses the Form Designer |
Uses the Visualizer Canvas |
| Mapping Editor |
Open the Event Editor → right-click Action Sequence → select to invoke a service, navigate to a form, or add mapping → Open Mapping Editor |
Open the Action Editor → open an Action Sequence → right-click an action → Open Mapping Editor |
| Open a form | Applications View → <App Name> → forms → <channel> → double-click form | Project Explorer→ Project tab → <channel> → click Forms arrow → Click Form |
| Quick Preview | Click Preview in the Form Designer → select the platform and channel → open Emulators View → right-click emulator → click Open in Preview |
The Visualizer Canvas is always in preview mode. From the drop-down lists at the top of the canvas, select the platform, channel, and device you want |
| Side-by-Side view |
Not available |
Window menu → Arrange → Side By Side |
| Toggle BVR (beyond visible range) Toggles between limiting what's viewable on the canvas to what a user would see on the screen, and displaying all application elements of a form, regardless of their position |
Not available |
On the Visualizer Canvas, click BVR to place and view application items beyond what's visible on the device screen. Click BVR again to limit the canvas display to the device screen To pan in BVR mode, you can press the space bar and drag.
|
| Toggle Orientation Toggles the device preview between portrait and landscape orientations |
Not available | At the top of the Visualizer Canvas, click the Toggle Orientation icon |
| Toggle Shell Toggles the device preview between displaying just the screen, and displaying the device's shape and dimensions beyond the screen |
Not available | At the top of the Visualizer Canvas, click the Toggle Shell icon |
Authentication and Licensing
In Kony Studio, you were prompted for authentication and licensing when Kony Studio started. With Quantum Visualizer, you are prompted for authentication and licensing when you first build a project, giving you the ability to use Quantum Visualizer offline.
Best Practices for using GIT and SVN Repositories
In your development streams, we recommend the following best practices in coordinating the use of both Quantum Visualizer and Kony Visualizer Classic.
- Since both editions of Quantum Visualizer use the same file format, they can share a common GIT or SVN repository.
- You should maintain separate workspaces for Quantum Visualizer projects and Kony Visualizer Classic projects.
To illustrate, your workspace work flow should look like this:
Import and Export
The following table outlines how import and export features function in the respective user interfaces of Kony Studio and Quantum Visualizer.
|
Feature or Issue |
In Kony Studio |
In Quantum Visualizer |
| File Format Compatibility |
Since Kony Studio used the .kl file format and Visualizer uses the JSON file format, moving a project between one and the other required converting between the two formats, resulting in inconsistencies |
Both Quantum Visualizer: Quantum Visualizer and Kony Visualizer Classic: Kony Visualizer Classic uses the JSON file format for seamless importing and exporting of projects between the two. |
| Importation of actions from earlier versions of Visualizer |
When imported into Kony Studio, did not copy the actions of projects made with earlier versions of Visualizer |
The "Designer Actions" created in earlier versions of Quantum Visualizer, when imported into Kony Visualizer Classic, are replicated as "Developer Actions" for seamless integration and optimal functionality |
| Imported Assets |
Imported project is copied by reference but is not actually added to the workspace |
Imported project is copied to the workspace |
Using Skins
The following table outlines differences in how skins are used in the respective user interfaces of Kony Studio and Quantum Visualizer.
|
Feature or Task |
In Kony Studio |
In Quantum Visualizer |
| Assigning skins |
Assigned from the Widget Properties through a multi-click process |
Assigned from the Skin tab of the Properties Editor for improved work flow |
| Common skins vs. widget-specific skins |
Widgets, when added, automatically assume the default, common skin. |
Widgets, when added, are automatically assigned their own unique, widget-specific skin |
Utilities
The following table describes the differences in certain utilities between Kony Studio and Quantum Visualizer.
|
Feature |
In Kony Studio |
In Quantum Visualizer |
| Build Diff Tool | Applications View → right-click App name→ Utilities → Launch Build Diff Tool | Deprecated. Obsolete in Quantum Visualizer |
| Form Merge Tool |
For comparing forms and porting elements from one form to another to create functional parity across forms |
This tool is deprecated since any form can be easily duplicated |
| Manage Custom Fonts |
Skin View → right-click skin → Edit → Font tab → Platform Specific Font Names |
Copy fonts directly into the project's Fonts folder |
| Platform Porting |
For porting an application created in one platform to another platform |
Deprecated. With flex layouts, Quantum Visualizer dynamically renders from one platform to another, and can be copied seamlessly to other channels |
Custom Widget Import
In Kony Studio, custom widgets could be exported as a .zip file and then imported into a different project. This functionality is not available in Quantum Visualizer. As an alternative, you can add custom widgets. For more information, see Add Custom Widgets.
Code Editor
The following table illustrates a couple of the main differences in how the Code Editor functions between Kony Studio and Quantum Visualizer.
|
Feature or Task |
In Kony Studio |
In Quantum Visualizer |
|
Code outline |
Displayed in a separate panel |
Displayed inline |
|
Syntax Highlighting |
Partially supported |
Supported for the following languages: C, C#, C++, CSS, HTML4, HTML5, Java, JavaScript, LESS, Objective C, Python, Ruby, Sass, SCSS, XML |
Search and Replace
In Quantum Visualizer, you can search and replace code, and you can also jump to a code element's definition, such as a function. For more information, see Find and Replace and Jump to the Definition of a Code Element.
Local Preview
The following table outlines the differences in how previews are handled locally between Kony Studio and Quantum Visualizer.
|
Feature or Task |
In Kony Studio |
In Quantum Visualizer |
| Functional Preview Requests |
Handled by Jetty |
Handled by the Node.js runtime environment |
| Publish Destination |
KonyServer |
Quantum Fabric |
| Publish Model |
Applications and services published individually |
In Quantum Fabric, you create a Quantum Fabric app to which you add services that you publish. When you're ready to publish the Quantum Visualizer app, you bind it to the Quantum Fabric app that contains the services that you want to use. After publishing the Quantum Visualizer app, it accesses the published Quantum Fabricservices. |