Add Local HTML Content

With Kony Visualizer, you can leverage your existing web apps and other HTML content, incorporating it right into your project. Accessed through the Browser widget, such content is packaged locally within the completed app so that it is always available. You can also integrate it with Kony Fabric to make the most of Kony's powerful services integration.

The local HTML content that you add to your project can be used for a traditional web app, or embedded within a native app. If you want, you can use the local HTML content across all platforms and channels.

For more information, refer to the following topics:

Add Existing HTML Content to a Project

Create New HTML Content for a Project

Open a Resource's Folder

Add HTML Content to an App Screen

Preview HTML Content

Disable Live Rendering

Add Existing HTML Content to a Project

If you have existing web content, you can integrate it into your Kony Visualizer project.

To add existing HTML content to a project, do the following:

1. Using your computer's folder browser, navigate to the files and folders you want to add to your Kony Visualizer project.
2. In Kony Visualizer, on the Project Explorer, on the Project tab, expand the Web category. A folder displays called Localfiles.
3. Click the context menu arrow of the Localfiles folder, and then click Resource Location. The folder opens in a new window of your computer's folder browser.
4. Switch to the folder browser window that contains the files and folders you want to add to your Kony Visualizer project, select them, and then copy them.
5. Switch to the folder browser window for the Localfiles folder, and then paste the files you copied.
6. To see the added files reflected in Kony Visualizer, on the File menu (the Project menu in Kony Visualizer), click Refresh.

Alternately, you can import HTML content by clicking the context menu arrow of the Localfiles folder, clicking Import File(s), navigating to the files and folders you want to import, selecting them, and then clicking Open.

Create New HTML Content for a Project

You can create different kinds of web-related files to your local HTML content, and then edit them within Kony Visualizer. The Intellisense capabilities of the Code Editor simplify the creation of code by recommending completed code based on the incomplete code you have typed.

To create new HTML content for a project, do the following:

1. On the Project Explorer, on the Project tab, expand the Web category. A folder displays called Localfiles.
2. Click the context menu arrow of the Localfiles folder, and then click any of the following options:
   New Folder
   New JS File
   New HTML File
   New CSS File
3. Enter a name for the new folder or file, and then click OK.

In the case of a new file, it opens in the Code Editor, where you can begin coding it.

Open a Resource's Folder

All the web-based resources of your project reside in folders in your workspace. With Kony Visualizer, you can open the folder location of any resource from the Project Explorer.

To open a resource's folder, do the following.

• In the Project Explorer, click the context menu arrow of any resource, and then click Resource Location.

The folder where that resource is located opens.

Add HTML Content to an App Screen

Once you have imported or added local HTML content to your project, you make it accessible within your app by associating it with a browser widget.

To add HTML content to an app screen, do the following:

1. Display on the Visualizer Canvas the browser widget that you want you want to associate your HTML content with.
2. On the Project Explorer, on the Project tab, expand the Web category, and then click Localfiles.
3. Locate the HTML file you want to associate with the browser widget, and then drag it onto the browser widget. The widget's Master Data property is updated to associate with the HTML file you selected.
4. On the Project Explorer, click the Project tab.
5. Locate and open the container widget in the form you want to add the HTML content to.
6. On the Library Explorer, on the Widget tab, under Advanced Widgets, click and drag a Browser widget onto the container widget.
7. In the Properties Editor, click the Browser tab, and then click the Master Data Edit button. The Master Data dialog box displays.

Note: You can also open the Master Data dialog box by double-clicking the browser widget.

8. Select Local File, click Browse, navigate to and select the HTML file you want, and then click OK. The path to the file is represented by a relative path to the HTML content file you want, where the Localfile folder is the root. For example, if the file you want is called Home.htm and is located in a folder called Source, the relative path would be as follows:
   \Source\Home.htm
9. Click OK.

Alternately, you can add HTML content to an app screen by doing the following:

1. On the Project Explorer, click the Project tab.
2. Locate and open the container widget in the form you want to add the HTML content to.
3. On the Library Explorer, on the Widget tab, under Advanced Widgets, click and drag a Browser widget onto the container widget.
4. In the Properties Editor, click the Browser tab, and then click the Master Data Edit button. The Master Data dialog box displays.

Note: You can also open the Master Data dialog box by double-click the browser widget.

5. Select Local File, click Browse, navigate to and select the HTML file you want, and then click OK. The path to the file is represented by a relative path to the HTML content file you want, where the Localfile folder is the root. For example, if the file you want is called Home.htm and is located in a folder called Source, the relative path would be as follows:
   \Source\Home.htm
6. Click OK.

Preview HTML Content

You can preview HTML content within Kony Visualizer, or using an external browser. Within Kony Visualizer, you can also use the side-by-side functionality to preview the HTML in one pane while viewing and editing the HTML code in the other pane.

To preview HTML content, do the following:

1. On the Project Explorer, on the Project tab, expand the Web category, expand the Localfiles folder, and then locate the HTML file you want to preview.
2. Click the file's context menu arrow, and then do one of the following:
• Click Open Preview. The file displays within the Visualizer Canvas.
• Click Launch in external browser. The file opens in a new instance of your computer's default web browser.

To preview HTML content side by side, do the following:

1. Enable the HTML preview feature. To do so, do the following, depending on whether you're using Kony Visualizer or Kony Visualizer Classic:
• Kony Visualizer. On the Edit menu, click Preferences. From the left pane of the dialog box, click General, and then set Enable HTML Preview to Yes. Click Apply.
• Kony Visualizer Classic. On the Window menu, click Preferences. From the left pane of the dialog box, click Kony Visualizer, and then set Enable HTML Preview to Yes. Click Apply, and then click OK.
2. On the Project Explorer, on the Project tab, expand the Web category, expand the Localfiles folder, and then click the HTML file you want, opening it as a tab in the Code Editor.
3. On the Project tab, click the HTML file's context menu arrow, and then click Open Preview. The file previews on the Visualizer Canvas, and a second pane opens displaying the HTML code. Changes you make to the HTML code and then save are reflected in the preview.

If you prefer not to enable the HTML Preview setting but still want to preview the HTML and view the HTML code side by side, you can manually preview the content.

To manually preview HTML content side by side, do the following:

1. On the Project Explorer, on the Project tab, expand the Web category, expand the Localfiles folder, and then click the HTML file you want, opening it as a tab in the Code Editor.
2. On the Project tab, click the HTML file's context menu arrow, and then click Open Preview. The file previews on the Visualizer Canvas.
3. On the Window menu, point to Arrange, and then click Side By Side. A new pane opens to the right of the existing pane.
4. From the pane on the left, drag the tab of the HTML file you opened onto the right pane. When the edges of the right pane glow blue, drop the file onto the pane.

The preview of the HTML file appears on the left pane while the code of the HTML file appears on the right pane. Changes you make to the HTML code and then save are reflected in the preview.

Disable Live Rendering

Once you have associated a local HTML file with a browser widget, you may not want the contents of the HTML file to be perpetually rendering on the Visualizer Canvas, especially if the HTML content is complex and requires an inordinate amount of your computer's resources. In such a case, you can disable the browser widget's live rendering functionality.

To disable live rendering, do the following:

1. Right-click the browser widget for which you want to disable live rendering, and then click Disable Preview. The browser widget takes on a gray background, and only displays the name of the HTML file associated with it.
2. To re-enable live rendering, click the context menu arrow, and then click Enable Preview.

 

 

 

 

 

Rev	Author	Edits
7.1	NMK	NMK

Copyright © 2013 Kony, Inc. All rights reserved.