CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-05 08:00:09 +01:00
Code Issues Packages Projects Releases Wiki Activity

Adding demos/mobile/README.md (PR #2058)

Browse Source 
Merge from AnmAtAnm/mobile-readme
This commit is contained in:
Andrew n marshall
2018-09-19 22:54:02 -07:00
committed by GitHub
parent cb8eab2f42 7e107fbcb1
commit d8cbc9ac13
2 changed files with 59 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
demos/mobile/README.md Normal file
View File

@@ -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.

12
demos/mobile/android/README.md
View File

@@ -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