From 7e107fbcb1902dadb13dc17bdd06c1978f0ae742 Mon Sep 17 00:00:00 2001 From: Andrew n marshall Date: Wed, 19 Sep 2018 22:14:18 -0700 Subject: [PATCH] Adding demos/mobile/README.md Also updateing demo/mobile/android/README.md --- demos/mobile/README.md | 53 ++++++++++++++++++++++++++++++++++ demos/mobile/android/README.md | 12 ++++---- 2 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 demos/mobile/README.md diff --git a/demos/mobile/README.md b/demos/mobile/README.md new file mode 100644 index 000000000..bab09606b --- /dev/null +++ b/demos/mobile/README.md @@ -0,0 +1,53 @@ +# Blockly on Mobile Devices + +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 mimicks 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. diff --git a/demos/mobile/android/README.md b/demos/mobile/android/README.md index b03837ecf..31f968fea 100644 --- a/demos/mobile/android/README.md +++ b/demos/mobile/android/README.md @@ -7,18 +7,18 @@ embedding it in a WebView. Most of the work is done within the fragment class `BlocklyWebViewFragment`. This fragment instantiates the WebView, loads the HTML -(`assets/blockly/webview.html`), and provides a few helper methods. +(`assets/blockly/webview.html`, copied from `demos/mobile/html/index.html`), +and provides a few helper methods. ### Copying web assets with gradle This android project copies the necessary files from the main Blockly repository (i.e., parent directory). In `app/build.gradle`, note the -`copyBlocklyWebFiles` task and `preBuild.dependsOn copyBlocklyWebFiles` line. +`copyBlocklyHtmlFile` and `copyBlocklyMoreFiles` tasks. -In your own project, these files can be placed directly in the `assets/blockly` -directory without the copy step. However, if you do use the copy step, make -sure you adapt the copy paths appropriately. Additionally, you may want to -update your `.gitignore` or similar file. +In your own project, the HTML and related files can be placed directly in the +`assets/blockly` directory without the copy step. However, using the copy tasks +simplifies the synchronization with an iOS app using the same files. ### Loading Block Definitions and Generator functions