This directory contains three examples of running the Blockly library on mobile devices. The html/ directory is a example of configuring a webpage for touch devices, with a Blockly workspace that fills the screen.

The mobile/html/ is also the basis for the Android and iOS demos. Each native app copies this demo into the app's local resources, and required Blockly library files, and hosts them in an embedded WebView.

Thus, developers can quickly iterate within the mobile/html/ directory, and see changes in both the Android and iOS native apps.

Running the Mobile HTML Demo

Before running the mobile HTML demo, you need to create some symbolic links in your local file system. Run the mobile/html/ln_resources.sh file from the mobile/html/ directory. This mimics the relative locations of the Blockly files seen when loading the page in a native app's embedded WebView.

After doing this, opening mobile/html/index.html should open normally, filling the page with one large Blockly workspace.

The Android App

Build and Run

Open the demos/mobile/android/ directory in Android Studio. The project files in the directory should be ready to build and run the demo in an emulator or connected device.

Android Copy Tasks

If you edit the mobile/html/ demo to include new files, you will need to update the native app project files to also copy those files.

In the Android project, two Gradle tasks are responsible for the copies. In mobile/android/app/build.gradle, the tasks copyBlocklyHtmlFile and copyBlocklyMoreFiles configure the copy actions.

The iOS App

Build and Run

Open the demos/mobile/iOS/ directory in XCode. The project files in the directory should be ready to build and run the demo in a simulator or connected device.

iOS Copy Script

The XCode project call out to mobile/ios/cp_resources.sh to copy the required HTML and related files. If you've edited the mobile/html/ demo to require new files, update this script to copy these files, too.