User Guide For Open UX Foundation Developer Kit

Overview

Introduction Cisco Open UX Foundation Developer Kit is a standalone application for web application developers to develop, test and debug the web applications. This guide describes how to use the Open UX Foundation Developer Kit.

Audience This guide is intended for web application developers who develop applications for Open UX. [

Document Version This is the first formal release of this document.

2 OL-31064-01

Overview

Overview Cisco Open UX Foundation Developer Kit (OUXFDK) is a standalone application for web application developers to develop, test, and debug the web applications. The user interface for the Cisco Open UX Foundation Developer Kit appears as follows:

Item Description

Help Launch the help window.

Preferences Configure the Open UX portal and remote app portal and other user preferences.

View View the simulator in full-screen mode. You can also use F11 to toggle between full-screen and normal modes.

Background video Enable or disable the playback of background video in the simulator window.

New OUX WebApp Create boilerplate code for hosted and packaged web applications.

Import OUX WebApp Import an existing web application from the local file system.

OL-31064-01 3

Overview

Start/stop simulator Start or stop the simulator. Start the simulator to run the different kinds of web applications like EPG and third-party web applications and launch the configured Bootstrapper Application (BSA).

Note: BSA connects to the Open UX Portal and shows all applications. It also provides launch points for tasks such as installing and uninstalling applications and so on. Click the button again to stop the simulator if it is already running.

Applications Listing Shows a list of local apps or running apps so that user can perform the various operations See Application Listing (on page 8) for more information.

Portal Simulation Environment

Shows a list of applications that are created or imported and deployed into the Open UX portal.

OUX Simulation Environment

Shows a list of applications that are launched and running either in the foreground or background.

Unity Simulator The area where the applications UI is rendered.

Clear Clear the output window.

Save Save the logged content in the output window.

4 OL-31064-01

New OUX Web App

New OUX Web App Cisco Open UX Foundation Developer Kit supports creation of both packaged apps and hosted apps.

For packaged apps, all app files are bundled and compressed into a single zip file and are deployed into the app portal. When the user downloads the file for installation, it downloads all the app files and stores them locally. This option is good for offline web apps.

For hosted apps, the app files are actually hosted on the server. Only the manifest and icon files are bundled and deployed into the app portal. When the user downloads the files for installation, only the manifest and icon files are installed. When the user launches the app, the app files are pulled from the hosted server.

The New OUX WebApp wizard will help Cisco Open UX Foundation Developer Kit users to create boilerplate code for both packaged and hosted apps. This boilerplate code includes the default manifest file, icon filem and other useful directories to store resources like scripts, css, images and docs.

As soon as you create a web app, it is deployed into the Open UX portal and will be available for users to install on the BSA Portal page.

Creating a Web Application 1 Click New OUX WebApp to open the New OUX WebApp window. 2 Type the web application name. 3 Select the preferred directory to store the new web application. 4 Type a description for the web application. 5 Select the application category from the drop down 6 Enter the launch url for the web application.

n For hosted applications, the launch url can be an externally hosted URL (such as http://www.cisco.com) or it can be a file name such as index.html. In the case of file names, the developer hosts the html file on the local web server and uses the file as the launch point. Users do not need to host the application on an external web server.

n For packaged applications, the launch url should be a local url like index.html.

7 Select an icon image for the web application. If you do not select an icon image, the default icon will be used.

8 Click Create to create the boiler plate code for web application. The fields which are marked with (*) are mandatory.

9 Start the simulator, if it is not already running.

OL-31064-01 5

New OUX Web App

After you create a new web application, the application will be deployed in the Open UX Portal and will be listed in the BSA Portal for installation.

6 OL-31064-01

Import OUX WebApp

Import OUX WebApp Cisco Open UX Foundation Developer Kit lets you import an existing web app from the file system. The manifest.json must be present in the selected directory before Cisco Open UX Foundation Developer Kit will deploy the app into the Open UX portal.

Importing a Web Application 1 Click Import OUX WebApp menu option. A dialog box opens. 2 Select the application directory where the manifest.json file is located.

3 Select manifest.json and click Open to import the web application into Cisco

Open UX Foundation Developer Kit. A message will let you know whether the import was successful.

4 If the manifest.json file is not valid, an error will appear. Please check the output window for detailed information on the error.

5 Start the simulator, if it is not already running.

OL-31064-01 7

Import OUX WebApp

After you import a new web application, the application will be listed in the BSA Portal for installation.

8 OL-31064-01

Application Listing

Application Listing Application Listing contains two tabs.

Portal Simulation Environment shows the applications created or imported locally, and OUX Simulation Environment shows any applications that are currently running. You can right-click on any application to reload it, switch between running applications, debug applications side-by-side, explore application source files, or close or destroy the application.

Destroying Web Application Cisco Open UX Foundation Developer Kit lets you destroy the web application, meaning that you remove the application contents and remove it from the portal simulation environment. 1 Click Portal Simulation Environment. 2 Select the application to be destroyed. 3 Right-click on selected application, and select Destroy.

4 Cisco Open UX Foundation Developer Kit prompts you to confirm that you want

to destroy the selected web application. 5 Confirm that you want to destroy the web application. The application will be

removed from the listing and the portal simulation environment, and its temporary contents will be removed from the file system.

Republishing Web Application Cisco Open UX Foundation Developer Kit lets you automatically republish the latest updates done to the application to the Open UX portal. 1 Click Portal Simulation Environment.

OL-31064-01 9

Application Listing

2 Select the application to be republished. 3 Right-click on the selected application, and select Republish.

Explore Web Application Cisco Open UX Foundation Developer Kit launches the file explorer to view application’s source files. 1 Click Portal Simulation Environment. 2 Select the application to be explored. 3 Right-click on selected application, and select Explore.

Switch Between OUX Simulations Click on OUX Simulation Environment, and double-click on the application to bring it to foreground. This will shift the focus to the selected application.

Debug or Inspect the OUX Simulation Follow these steps to debug the web applications running inside Cisco Open UX Foundation Developer Kit: 1 Click OUX Simulation Environment, and right-click on the application you

want to debug. 2 Right-click on the application you want to debug, and select DevTools and then

Inspect. The web inspector will launch in a separate tab so that you can debug the application.

Close the Running Application Follow these steps to close a running web application: 1 Click OUX Simulation Environment.

10 OL-31064-01

Application Listing

2 Right-click on the application to be closed, and select Close. The running application will be stopped, and the state will be changed from RUNNING to NOT RUNNING.

Reload an OUX Simulation Follow these steps to reload a running application: 1 Click OUX SIMulation Environment. 2 Right click on the application you want to reload, and select DevTools and then

Reload to load the modified code or scripts.

OL-31064-01 11

Start or Stop Simulator

Start or Stop Simulator Click the Start/stop simulator toggle button to start the simulated runtime environment to run the various applications like EPG or third-party web applications. BSA is the application which lets you access the other applications that are deployed either locally or in the remote application portal. Cisco Open UX Foundation Developer Kit will launch BSA when you start the simulator.

12 OL-31064-01

Output Window

Output Window The output window shows the Cisco Open UX Foundation Developer Kit progress and detailed information on each operation. This information is useful for debugging. You can choose the level of logging detail that you would like to see by selecting the various levels from the drop-down menu.

Cisco Open UX Foundation Developer Kit supports three different log levels:

Debug Provides e detailed information on each operation. Developers often prefer this option .

Warning Provides critical and warning messages that are logged during the course of each operation.

Critical Only provides critical or fatal messages.

Click Clear to clear the output window.

Click Save to save the log content to a file on the local file system. If necessary, you can send this file to testers or developers for further debugging.

OL-31064-01 13

Preferences

Preferences Use Preferences to customize the developer kit based on your needs. These preferences persist across the Cisco Open UX Foundation Developer Kit life cycle.

Configure Configure various user preferred settings like Open UX and remote app portals and port numbers used and other settings for Cisco Open UX Foundation Developer Kit.

Add/Modify App Portal You can use Add/Modify App Portal to configure the application portals and use multi-portal BSA to select your choice of app portal at runtime. This lets you add, edit, or remove application portals.

Add an Application Portal 1 Click the Preferences menu and select Configure - > Add/Modify App Portal.

A dialog box appears to list the existing application portals.

14 OL-31064-01

Preferences

2 Click Add. A dialog box prompts you to enter the portal details.

3 Enter the portal Details and click OK. The newly added portal appears in the

Configure App Portal dialog box 4 Click OK to complete the operation.

Edit an Existing Portal 1 Click the Preferences menu and select Configure -> Add/Modify App Portal. A

dialog box appears to list the existing application portals. 2 Select the portal you want to edit and click Edit. A dialog box displays the portal

details. 3 Edit the portal details and select OK. The updated portal details appear in the

Configure App Portal dialog box. 4 Click OK to complete the operation.

OL-31064-01 15

Preferences

Remove an Existing Portal 1 Click the Preferences menu and select Configure -> Add/Modify App Portal. A

dialog box appears to list the existing application portals. 2 Select the portal you want to remove and click Remove. 3 Click OK to complete the operation.

Configure Simulator Properties You can dynamically configure simulator properties such as Server IP address, Server Port, RESTful API Port, Videoscape Open API Port, Device Cluster Port, Document Root after you install the Open UX Foundation Developer Kit. Choose Preferences -> Configure to set these properties. 1 To change server properties (Server IP Address, Server Port), uninstall all of the

installed apps in library. 2 Click Preferences and select Configure -> Simulator. 3 Edit required fields. Switch to the Simulator Server tab to change Videoscape

Open API Port or Device Cluster Port. 4 Click OK to complete the operation. A message box appears, asking you to

restart the simulator. 5 Click the required action.

16 OL-31064-01

Enable and Disable Background Video

Enable and Disable Background Video You can click the View menu and select Enable or Disable Background video to enable or disable the background video. When you enable background video, the Open UX Foundation Developer kit chooses one video from the OUXFDK video library and plays it in a loop to give the simulation of continuous video stream. If the web application has the transparent background option set, then the background video is visible in the background while the user navigates through the application.

OL-31064-01 17

Enable Fullscreen Mode

Enable Fullscreen Mode If you want to view the simulator window in a full-screen mode, you can either click the View menu and select Fullscreen, or you can press F11. Press F11 again to return to normal view.

18 OL-31064-01

About

About To view information about this program, select Help -> About. The About dialog will appear.

OL-31064-01 19

Key Mappings

Key Mappings The following table contains key mappings to complete operations in the main simulator window (BSA application).

Key Function

Left, Right Move between Portal / Library or Applications within Portal / Library

Enter Enter into Portal or Library or Application

Backspace Exit from the current state to the previous menu (like exiting from the application listing to Portal or Library)

M Exit from a running application view, back to Portal or Library

20 OL-31064-01

Known Issues

Known Issues Problem: Platform Simulator Server, which simulates Videoscape Open APIs, functions inaccurately with the 64-bit version of Node.js.

Solution: Use the 32-bit version of Node.js only.

Problem: While a web application is being debugged through the web inspector, reloading the application may cause the OUXFDK to fail and terminate.

Solution: Quit web inspector before reloading the web application.

Problem: Web inspector window not launched when invoked from the OUX Simulation Environment pane.

Solution: Launch web inspector window by invoking the contextual menu from the application web view.

OL-31064-01 21

For Information

For Information

If You Have Questions If you have technical questions, contact Cisco Services for assistance. Follow the menu options to speak with a service engineer.

Americas Headquarters Cisco Systems, Inc. 170 West Tasman Drive San Jose, CA 95134-1706 USA

http://www.cisco.com

Tel: 408 526-4000 800 553-6387

Fax: 408 527-0883 Cisco and the Cisco logo are trademarks or registered trademarks of Cisco and/or its affiliates in the U.S. and other countries. To view a list of Cisco trademarks, go to this URL: www.cisco.com/go/trademarks. Third party trademarks mentioned are the property of their respective owners. The use of the word partner does not imply a partnership relationship between Cisco and any other company. (1110R) Product and service availability are subject to change without notice.

© 2014 Cisco and/or its affiliates. All rights reserved. April 2014 Part Number OL-31064-01