Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Removed outdated references to releases

...

The Appcelerator Studio LiveView tool displays updates of your application as you actively add, modify or replace the files in the project, such as changing your code in the Editor.  LiveView LiveView should be used to quickly preview changes in your application's UI, not for code intensive modifications.

...

To use LiveView, make sure the LiveView option is enabled before running your application.  After After Studio builds your application, Studio launches the LiveView tool to monitor your project for changes, then communicates them with the device or simulator.  Make Make changes to your project and as soon as you commit them, the device or simulator updates with your changes.

...

  1. In the Project Explorer view, select your project and verify that the LiveView icon  is toggled on. If not, click the icon to toggle it on.
  2. In the global tool bartoolbar, select Run from the Launch Mode drop-down list and select an Android or iOS target (emulator, simulator or device) from the Target drop-down list.
  3. If the Launch Automatically option is enabled under the Target drop-down list, the application will be automatically launched after the device is selected.  If If not, you need to click the Launch button to start the build process.

Studio starts the LiveView tool, which monitors changes to your project to update the application in the simulator or on device.  In In the example below, the default mobile project is launched with LiveView enabled.

...

Once the application launches, you can make modifications to your project.  LiveView LiveView waits for you to commit changes to your project before triggering an update.

...

  • Modifying a file in the Resources directory of the project.  Graphic Graphic assets may not update automatically; you may need to rebuild your application.
  • Adding a file to the Resources directory of the project.  TThe application may not be able to resolve the path to the new asset while its running; you may need to rebuild your application if you are adding files.

After you save or add your changes, LiveView restarts your application from the initial UI state.  This This includes changing or adding JavaScript files, non-graphical assets (text, HTML, etc.) and graphic assets.

For example, in the default mobile application, the tab group starts with Tab 1.  If If you were on Tab 2 when you committed commit your changes, the application restarts (but not relaunches) and displays Tab 1.

In the example below, the win1, tab1 and label1 objects have been modified.  The The changes are committed when saving app.js and displayed to the iOS simulator.

...

If there is a coding error in the changes, LiveView displays an error message in the simulator, device and in the Console view.  In In the example below, the code contains a typo related to the name of a Label object and reports an error stating that it cannot find a reference to the variable.  In In the code, a myLabel object is created but is trying to add the yourLabel object, which is not defined, to the window.

...

Excerpt

After adding a file and rebuilding, project fails to run

To resolve this issue, clean the project and terminate all node instances :

  1. From the menu bar, select Project > Clean.... Make sure your project is selected and click OK.
  2. From a terminal, run killall node
  3. Rerun the project.

File Server unavailable

If you receive the following error message while running LiveView: "File Server unavailable. Host Unreachable @ <IP_ADDRESS>:<PORT_NUMBER>. Please ensure your device and computer are on the same network and the port is not blocked:"

  1. Check to make sure your computer and device are on the same wireless network.
  2. LiveView requires the following ports to be open: 8323 and 8324.
  3. Prior to Studio 3.2.0, replace any const keywords with var in your JavaScript files.
  4. Try accessing the socket address stated in the error message using a browser on your device. It should return something similar to
    {"pid":13792,"path":"C:\\Users\\demo\\Documents\\Appcelerator_Studio_Workspace\\demoProject\\","uptime":1900.319,"alloy":false}

Prevent Android devices from sleeping

If your Android device keeps turning off (entering into sleep mode), you can toggle the "Stay Awake" feature in the developer options.