EXO Client is a complete application framework that allows you to develop and deploy HTML5 applications that are truly cross-platform and can run on devices with virtually any form factor from phones and TV remote controls to desktops and laptops to interactive boards and touchtables.

EXO for Developers

As an EXO application developer, you will work in HTML5 and JavaScript. You will use the EXO JavaScript API which is based on a single object with an ample set of child objects, methods, and properties.

Apps Factory-which is itself an EXO application-is the launching pad where you will start creating your own EXO applications. Apps Factory is one of several applications destined for developers.

EXO for Developers

Using the EXO API, Apps Factory and other apps, you will be able to:

  • Create applications using JavaScript with full HTML5 support and deep access to devices
  • Evaluate the user experience on multiple devices, operating systems and form factors
  • Test communication features
  • Publish applications in your private cloud and test them on multiple devices

Apps Factory

Getting Started

Try out existing EXO applications and create your first EXO application by following these steps.

Step 1. Install EXO Client

EXO Client Home page Initially, only the Apps Factory application is installed.

To develop EXO applications, you need to install EXO Client on your development system. You also need to install EXO Client on each of the devices that you want to test your application on.

  • If you have already installed EXO Client on your development system, great! Go to Step 2.
  • If you have not already installed EXO Client: Install it now.
  • If you have not downloaded EXO Client: As part of the registration process as a developer, you should have already received an email with the link to download a development version of the client. If you've lost it, you can get it again by emailing us

Step 2. Create a Single User Account

When EXO Client starts for the first time, log in using the EXO user account that was sent to you previously.

IMPORTANT: You should use the same user account when you log in on all your test devices. By doing so, you will be able to test applications and communication on all your devices.

Create an EXO Client account

Step 3. Download and Try Applications

After you have logged in, you land on the home page of the EXO Client for developers.

To download applications

Here's how to download an application:

  1. Select the Library icon in the task bar on the right side of the screen.

    Getting Started-library

    The My Apps section of the library is displayed.

  2. Browse through the categories in the menu on the left side of the screen.
  3. Select the icon for an application that you would like to download.
    The application page is displayed.
  4. Select the Download button.
    The application is downloaded and its icon is added to the EXO Client Home page. Select the icon to open the app.

Applications to try out

Download and try out some or all of these applications that are available in the library. They will give a feeling for the type of functionality that you can put in your EXO applications.

  • Apps Factory
  • Chat
  • Code Test Box
  • Contacts
  • EXObrowser
  • Font Viewer
  • Icon Factory
  • Notes
  • Touch Log
  • UI Objects

Step 4. Locate Source Code

You can view the source code for any application installed on your system. Applications are installed in the EXOapps folder.

To find out where the EXOapps folder is located on different operating systems, see Locating the EXOapps Folder.

Step 5. Create Your Own Application

Apps Factory is an EXO application that allows you to create applications from templates.

Here's how to start and use Apps Factory to create your first application.

  1. Go the EXO Client Home and select Apps Factory

    add App Button

  2. Select the + button to add a new app.
    The Select a template page is displayed.

    Apps Factory Select Template

  3. Select a template.
    A Create Application page is displayed.

    Apps Factory Select Template

  4. Enter a name for your application and select the Create App button.
    A unique identifier is created for your app based on the name you entered and a random alpha-numeric suffix.
    Congratulations! You have just created your first EXO application.
    It has been added to the Apps menu. A default icon is displayed for it.

    Apps Factory New App Added

Step 6. Test Your App

You can run your new application from Apps Factory.

  1. Select the icon for your app.
    An information page about your new app is displayed.

    Apps Factory App Page

  2. Select the Test button.
    If you created your app from the standard application template, your app will look like this:

    Apps Factory Hello World

  3. To close your app, simply slide its icon to the right off the task bar

Step 7. View the files for your app

The files for your new application have been generated in the EXOapps folder on your system. And the newly created application is installed in the My Apps section of the Library. When an application is in My Apps, you can open and test it on all the devices that you are logged in on with the same user account

  1. Return to Apps Factory by selecting its icon in the task bar.
  2. Select the icon for your app. The information page about your new app will be displayed again.
  3. Select the View Button. The default file viewer for your system will open showing the contents of the folder for your app.

    Getting Started Opening App Folder

Step 8. Look at the Main HTML File for the App

The main HTML file for your application is named with the unique identifier for your app.

If you created your application using the Standard Application template, the file looks like this initially:

Getting Started Hello World Code

Step 9. Start Coding with the EXO API

To add functionality to your new application, you will use the EXO API. To learn about the functionality available to you, see the EXO API Documentation.

Step 10. Edit the Icon for your Application

When you're ready for a little fun, edit the icon for your application in Apps Factory.

  1. Open Apps Factory.
  2. Select the icon for your application.
  3. Select the Edit Icon button. The Icon Factory opens.
  4. Create an original icon for your application by choosing a pictogram and adjusting it with the tools available in Icon Builder.
  5. Select the checkmark in the lower right corner to update your icon. The icon information is stored in the app.ini file for your application (app.ini is in your app's folder in the exoapps folder).

Supported Devices

When you are developing an EXO application, you do not have to program for different operating systems and form factors. You write your application in HTML5 and JavaScript with calls to the EXO API. The EXOengine will ensure that your application runs properly on all supported operating systems and form factors.

Currently we support the following operating systems and form factors:

Operating Systems

Apple® iOS® (version 6.1 and up)
Apple® Mac® OS X® (version 10.4 and up) [coming soon]
Google Android (version 2.3 and up) [coming soon]
Linux (including Ubuntu) (version 10 and up) [coming soon]
Microsoft® Windows® (7 and up) (Recommended: Internet Explorer® 10)

Form Factors

phones
media players
tablets
laptops and ultra-books
desktops
all-in-one
TV
blackboards
large touch panels
touch tables
in-vehicle computers

Locating the EXOapps Folder

When you install EXO Client on a device, the following files and folders are created on the device:

  • EXOengine binary file - An OS-specific binary file.
  • EXOapps folder - Contains folders for each EXO application installed on the device.
  • EXO.exo file - A cross-OS application file interpreted by the EXOengine. It is located in the EXOapps folder.
  • EXOusers folder - Contains data files for all EXO user accounts on the device.

Importance of the EXOapps folder

Initially after you install EXO Client, the EXOapps folder contains a number of core applications. When you download applications from the application library on the EXOserver and install them on a device, they will be installed in the EXO apps folder.

When you use the Apps Factory application to create your own application, a folder for your application will be created in the EXOapps folder. In Apps Factory, you can view the folder for your application. It will include the main html file for your application and several other files. When you are ready to start coding your application, you will open the html file and get to work.

Location of EXO files on Microsoft Windows

The path to the EXOapps folder:

C:\ProgramData\EXO U\EXO UI\EXOapps

The EXO engine binary is a 32-bit application.

  • On 32-bit systems, the path to the EXO engine binary (and several other essential files) is:
    C:\ProgramFiles\EXO U\EXO UI\EXO.exe
  • On 64-bit systems, the path to the EXO engine binary (and the other files) is:
    C:\ProgramFiles(x86)\EXO U\EXO UI\EXO.exe

Location of EXO files on Apple Mac OS

The path to the EXOapps folder:

/Users/USERNAME/EXOapps/

The path to the EXO engine binary:

/Applications/EXO-UI.app

Location of EXOapps folder on Google Android

Default path to the EXOapps folder:

/mnt/sdcard/Android/data/com.exou.ui.standard/files/EXOapps

Location of EXO files on Linux

The default path to the EXOapps folder:

/home/USERNAME/EXOapps/

The path to the binary file for the EXO engine:

/usr/local/bin/ExoLauncher

Performance and Optimization

Comparative Benchmarks

The only way to optimize applications in a cross-OS situation is to have metrics to define best practices based on performance on all platforms.

Important:The EXO API is conscientiously optimized for the best experience on all the supported platforms. We recommend that you always use the entities of the EXO API when possible, instead of custom code or code copied from the Internet to ensure maximum optimization.

Loading Time and Responsiveness

Users expect applications to open immediately (loading time under 1 second).
If it is not possible, a visual transition can be used. This gives you two extra seconds for loading: one second before the transition and one second after the transition.

If it is not possible to achieve a one or two-second loading time, you should display a progress bar to inform the user that the application is loading. We highly recommend that you render the application or display a splash screen immediately before the application loads its data and media files.

Scripting Optimization

We highly recommend that you take the following key points into consideration. It can make a real difference on some operating sytems. For example, using boolean values in a repetitive loop can add a lot of processing time, drain the battery and slow down the system compared to using integer values.

  • Avoid parseInt. Always use "Math.round" instead. Example: b = Math.round(a)
  • Avoid boolean comparisons which are very slow on certain devices, especially Android. Use integer values instead of boolean values.
  • Avoid testing for undefined elements using "typeof == undefined"
  • Use "for/next" loops rather than other types of loops. Avoid "for/in" loops when possible and when performance is important.

Use Vector Graphics and EXO Apps for Developers

To ensure visuals are sharp on devices of all sizes, EXO uses vector graphics instead of image files for elements such as icons, buttons and so on. We highly recommend that application developers follow this practice as well. We have provided a number of tools and applications to make this easier for you:

  • Apps Factory - Includes an Icon Editor for designing the icon for your application.
  • Font Viewer - Allows you to browse through custom pictogram fonts, select a pictogram and copy it (as a character, unicode or an html SPAN element) to the clipboard so that you can paste it in your application.
  • UI Objects - Showcases the types of elements that you can create using the EXO API.

More Good Practices for Visuals and Graphics

In addition to the use of vector graphics, here are some other good practices:

  • Avoid canvas-based rotation of large images when possible.
  • Never use of alphaShadow when rendering an animation. Uses png with shadow or pre-draw your image once then copy it using drawImage.
  • Limit usage of getImageData to very small sizes.

When creating animations, we recommend that you analyze the performance on different platforms.
You may need to disable visual aspects for some platforms if you want to deliver the best possible user experience on devices with more responsiveness.

Anticipating the Limits

To prevent crashes, bugs and negative user experiences, it is essential to understand the limits, to take them into consideration during the development process, and to test them.

Finding the limits

Each application has its own limitations in two categories: performance and memory.

Performance
The optimization process is essential to take the maximum of the hardware available on the device, and the real limit must be known: will the application run on any device, or will it be restricted to powerful devices?

Memory
The limit of memory is relative to the device and the applications currently running. It is important to use a minimum of memory and to clean-up any unnecessary data during runtime.
Reaching the memory limit can result in a slow-down of the system (for both CPU, GPU or network usage), or in a crash.

Limits to consider

The limits to consider are generally when the user, or the usage of the application can generate increasing amount of data to be managed.

  • Images and media files
  • Settings and user data
  • Query to the server
  • Elements being displayed in the screen
  • Complexity of the drawing and rendering process
  • Time limit with no restart of the application
  • Date or localization resulting in potential issues