mirror of
https://github.com/google/blockly.git
synced 2026-01-08 17:40:09 +01:00
45 lines
2.0 KiB
Markdown
45 lines
2.0 KiB
Markdown
# Blockly in an Android WebView
|
|
|
|
This code demonstrates how to get Blockly running in an Android app by
|
|
embedding it in a WebView.
|
|
|
|
### BlocklyWebViewFragment
|
|
|
|
Most of the work is done within the fragment class `BlocklyWebViewFragment`.
|
|
This fragment instantiates the WebView, loads the HTML
|
|
(`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
|
|
`copyBlocklyHtmlFile` and `copyBlocklyMoreFiles` tasks.
|
|
|
|
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
|
|
|
|
The `webview.html` loads the block definitions and generator functions directly
|
|
into the page, without support or coordination with the Android classes. This
|
|
assumes the app will always utilize the same blocks. This does not mean all
|
|
blocks are visible to the user all the time; that is controlled by the toolbox
|
|
and workspace files. This should accommodate almost all applications.
|
|
|
|
This does mean loading your own block definitions and generators will involve
|
|
editing the HTML, adding you own `<script>` tag, and possibly removing
|
|
the `blocks_compressed.js` if you do not use any standard blocks.
|
|
|
|
### Connecting a Developer Console
|
|
|
|
While the console output of the WebView will be visible in the Android log
|
|
(i.e., `logcat`), some times a more intrusive approach is required to isolate
|
|
a problem. For instructions on connecting the WebView to Chrome's Developer
|
|
Tools, see this article:
|
|
|
|
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/
|
|
|
|
The WebView must be visible in the connect device or emulator before the
|
|
WebView will included in the list of available pages to connect to. |