Reload Guides

Home

MoSync Reload Quick-Start

MoSync® Reload is a tool for the rapid development of mobile applications in HTML5 and JavaScript for iOS, Android and Windows Phone mobile platforms. With MoSync Reload you can quickly edit your HTML/JS/CSS code and rapidly run it on one or multiple devices. Just like in the Web browser. Forget long build times!

Note: This guide helps you getting started using MoSync Reload. To get started with HTML5/JS development in the MoSync SDK, check out the Getting Started with HTML5 and JavaScript guide.

What is MoSync Reload?

MoSync Reload lets you develop apps in HTML5 and JavaScript on your desktop machine and instantly see the result on any number of devices or emulators. It’s just like pressing “reload” in a web browser, but for native mobile apps!

You can access native features such as camera, file system and sensors and create user interfaces using real native UI components.

Once you are happy with the application you have developed, you can use the MoSync SDK to take your project as-is, and build standalone applications for distribution through App Store, Android Market and Windows Marketplace.

Reload has three parts:

  • Reload Client: A client application installed on your emulators or devices
  • Reload Server: A server running on your PC/Mac/Linux machine
  • Reload Development UI: A user interface with development tools which you run in a web browser on your PC/Mac/Linux machine ("UI Client"). This UI installs with the Reload Server. Starting the server automatically launches the Development UI.

Download Reload

To use Reload, you need to install the Reload server on a desktop machine, and then install the Reload client app on one or more devices or emulators.

Download the Reload package from the MoSync Reload download page to get started. This download contains bot the Reload Server/Development UI, and the Reload Client. It is however often the most convinient to install the Reload Client directly from the App Store of your device (see instructions below).

Installing the Reload Development UI/Server

On Windows

  1. Download the latest version of MoSync Reload for Windows and unzip it.
  2. Move the contents of the unzipped file to a suitable location, for example C:/Reload. (Below we will call this the "install-dir".)

On OS X

  1. Download the latest version of MoSync Reload for OS X.
  2. Download and mount the Reload disk image.
  3. Open the disk image and drag the Reload server application to your Applications folder.
  4. Optional: open the Applications folder and drag the Reload icon to the Dock for easy access.

On Linux

  1. Download the latest version of MoSync Reload for Linux and extract it.
  2. Move the contents of the unzipped file to a suitable location, for example /home/yourName/Reload.
  3. If you have problems starting the Reload server, make sure it has executable file rights set.

Installing the Reload Client on a Device

The easiest way to install the MoSync Reload Client on a device is to download and install it from Google Play, Windows Phone Marketplace, or Apple App Store. Search in the App stores for "MoSync Reload".

If you install the Reload Client this way, you do not need Visual Studio, or Xcode, or the Android SDK at all. unless you want to use the emulators in those SDKs. In this case a "manual" install is needed (see below).

Installing the Reload Client on a Simulator/Emulator

When using a Simulator or an Emulator you usually cannot install apps from the App Stores. In this case, you need to use the development tool for the target platform to build and install the Reload Client. This method can also be used as an alternative to installing the Reload Client on a device.

The Reload download package includes Reload Client projects for XCode (iOS), Visual Studio (Windows Phone), and an installable Reload Client .apk file for Android. If you’re using an Android device or emulator, you just need to install the provided .APK on it. For iOS and Windows Phone, you need to build the client using XCode or Visual Studio. Thus you need to download these SDKs, or ask friend with access to them to build the reload client app for you.

Once you’ve installed the client on a device, you will not need access to the platform SDKs when using Reload. So, for instance, if you have an iPhone but no Mac, you only ask a Mac owner to build the application and install it on your phone, and then you can get on with development. However, in order to use emulators, you will need to have the platform SDKs installed.

Detailed instructions follow below.

Install in the iOS simulator on OS X

  1. Drag the iOS Client project folder from the Reload disk image to the desktop.
  2. Open the iOS Client project folder.
  3. Open the ReloadClient xcodeproj. (Xcode opens.)
  4. In Xcode, select the ReloadClient project from the left-hand navigation tree.
  5. Select the iPhone Simulator as the target.
  6. Run the project. When the project has been built, the simulator will open, running the Reload Client.

Install in the Android Emulator on Linux or OS X

The Reload Server includes a copy of the Android Debug Bridge (adb). To install the Reload Client on the Android emulator on a Linux machine or an Apple Mac running OS X:

  1. Start the Android Emulator through the Android Virtual Device Manager (AVD).
  2. Open a terminal window.
  3. On OS X, go to the Android Client folder in the disk image.On Linux, go to the Android Client folder under your Reload installation directory.
  4. Type:
    ../server/bin/[Linux/Mac]/adb install ReloadClient.apk 

Install in the Android Emulator on Windows

To install the Reload Client on the Android emulator on a Windows machine:

  1. Start the Android Emulator through the Android Virtual Device Manager (AVD). Wait until the emulator has fully loaded.
  2. Open the Windows command shell (cmd) and execute the following command:
   "install-dir\server\bin\win\android\adb.exe" install "install-dir\Android Client\ReloadClient.apk"

where install-dir is the path where you installed MoSync Reload. For example:

 "C:\Reload\server\bin\win\android\adb.exe" install "C:\Reload\Android Client\ReloadClient.apk"

Install in the Windows Phone Emulator on Windows

To install the Reload Client on a Windows Phone Emulator you need first to install Microsoft Visual Studio and the Windows Phone SDK.

  1. Download Reload for Windows. If you're using Windows 7 or 8, right click the downloaded zip file and choose properties and press Unblock to avoid security warnings and build errors in Visual Studio. Then extract the contents of the zip file into your preferred location.
  2. Open the Visual Studio project in the WindowsPhone Client folder located in your Reload folder.
  3. Press the run button on Visual Studio to install the app and run it on the emulator.

Running Reload

The Development UI in MoSync Reload 1.0 is designed for use with WebKit-compatible browsers such as Google Chrome and Apple Safari. In other browsers, such a Mozilla Firefox, the weinre tool is not available, and some functionality may not be available. If your default browser is not WebKit-compatible, kindly open the Reload Development UI manually in Chrome or Safari.

Mac OSX

MoSync Reload supports Mac OS X 10.7+. In the Mac download you get a DMG image, which includes an .app package that you can copy into the Application folder on your machine. Then all you need to do is to double click on the Reload icon to run Reload Server/UI on your Mac.

When launching Reload, a server log window is opended, and the UI opens in your default browser.

Windows

On Windows you receive a zip file that includes the client projects and an executable file for the Reload server and UI. Double clicking the executable file Reload.exe starts the server, opens server log window, and the also opens the UI in your default web browser.

If the Reload UI/Server does not start, check the following:

  • If you are running Windows Firewall or a similar program, it may block Evented I/O for JavaScript. You will need to allow access to this feature on private networks.
  • On some Windows machines, launching ReloadLuncher.exe might result in a complaint about node.js even if it was successfully installed. In this case change the environment variable created by the node.js installer by removing the last blackslash from the variable. That is, update the path from [install-dir]\nodejs\ to [install-dir]\nodejs.
  • The downloaded client project files may be marked unsafe and blocked by Windows. If this is the case, trying to build the client will result in the error "mosyncRuntime.dll cannot be loaded". The solution is here. (In short, unblock the mosyncRuntime.dll and any other file that cannot be found/loaded.)

Linux

Reload is tested on Ubuntu Linux 10.10+ and Kubuntu Linux 10.10+, and needs either GNOME or KDE. The Linux download is a tarball with all the required files. To run Reload on Linux, extract the package, then open a terminal window and go to the extracted folder and type:

#> ./reload

The reload shell script starts the server. The server log is displayed in the same terminal window.To start the UI, open a WebKit browser and navigate to the following address:

http://localhost:8283

Stopping the Reload Server

To quit the Reload Server, close the terminal window(s) that were opended when starting the server. If you launched Reload Server from the command line, use CTRL-C to terminate. 

To exit the Reload Development UI, just close the page in the Web Browser.

Connecting Clients to Reload

To connect your clients to the Reload server you will need to have them connected to the same local network (WiFi). Start the Client on the device/emulator and type in the IP address for the server in the edit box. The IP address is displayed in the lower-left corner of the Development UI, and is also shown in the instructions under the Quick Start tab:

Note: If running the Reload client app in the Android emulator and connecting the server running on the same machine (localhost), use the IP address: 10.0.2.2

Projects and the Workspace

The Development UI for Reload lets you manage your projects and reload them on the connected clients.
The project list displays all the project located in your current workspace, which is simply a directory on your hard drive. By default, this will be a folder named MoSync_Reload_Projects located in your home directory.

This screenshot shows a project in the project list, which has been selected by clicking on it:

Reloading Projects

Select a project and click the Reload button to reload the project on connected devices. All the files in the LocalFiles subdirectory of the project directory are bundled into a single file, which is extracted on the device to the application’s local file system. The file index.html is then displayed by the app.

The Inspect button will also reload your project, but with the code set up for use with the weinre inspection tool. Note that the inspect option also instruments your JavaScript code, to catch runtime errors.

Creating Projects

On the top of the project list, there are buttons to create projects and change workspace:

New Project creates a new project in the currently selected workspace (a workspace is just a folder on the disk).

Change Workspace opens a dialog to select a folder. You can also type in a new folder location to create a new workspace.

Refresh will scan the current workspace folder and update the project list in case projects have been created or deleted on the file system (using the file manegement tools of the operating system).

Editing Projects

When selecting a project, several action items are also displayed:

Open opens a folder that shows the files in the project.To edit project files (HTML/CSS/JavaScript files), you can use your favourite text editor. Reload does not force you to switch to a new editor. You can also drop in and edit media files, like images and sounds. If you have an existing HTML5 project, drop the files here to get up and running. Note: The main HTML file must be named index.html.

Rename opens a dialog to input a new project name.

Delete deletes all the project files on disk.

Tools in the Reload UI

The Reload UI contains the following tools, each available under its own tab:

Quick Start displays a guide that helps you to get started with using Reload.

Weinre (Beta) is an industry standard HTML/JS web inspector to help debug applications. This is the first Release of Reload that comes with weinre, and we provide it as a beta feature. Note that for weinre to work, you must reload your project with the Inspect button.

Workbench is a JavaScript evaluation tool that you can use to instantly run JavaScript code on connected devices. The JaavScript Workbench is useful for experimenting with code, debugging, and for learning coding. Please, see the JavavaScript Workbench Tutorial for further details.

Log displays log messages printed by mosync.rlog, error messages and results from code evaluated in the Workbench. To print a log message here from your JavaScript code, just use: mosync.rlog("Hello World")

API Reference gives you the documentation for the MoSync JavaScript APIs. They give you access to native features such as camera, sensors, file system, and native UI components.

Creating a Quick Test App

Follow these steps to test that MoSync Reload is set up correctly:

  1. In the Reload Development UI, click the "New Project" button to add a new project.
  2. Select the Web based Project Type.
  3. Name the project. (It is usually best to use only alphanumeric characters and underscores.)
  4. Click the Create button. The project appears in the Projects list.
  5. Select the project by clicking at it in the list.
  6. Make sure you have a device/emulator running the Reload Client connected.
  7. Click the Reload button. The project should be sent to all the connected clients (emulators and devices), and launch.
  8. Click the Finder button next to the new project's name. The /LocalFiles folder will open showing you the HTML, CSS, and JavaScript files for this project.
  9. Open the index.html file in a text editor.
  10. Make and update to the HTML/JS code, for example, change the heading text in the document body.
  11. Save the file.
  12. Click the Reload button next to the project's name.
  13. The updated project should be sent to all the connected clients (simulators and devices), and run, showing the new heading text.

That's how quick and easy it is to edit and reload apps across multiple clients using MoSync Reload!

MoSync Reload 1.1
Copyright © 2013 MoSync AB
www.mosync.com