Problem with laoding scripts inside webView.

Mikolaj M

unread,

Apr 27, 2021, 8:41:54 AM4/27/21

to Blockly

Hi,

I am working on blockly embeded inside webview on android device. My app uses two fragments to present the blockly workspace to the user. The first one is read and write -able in which user creates the program with blocks from the toolbox and after they're done by means of the READY button they are transferred to the second fragment. This one also embeds blockly insde the webview but the workspace is read only and is used to observe the interpretation of the created program.

The problem is when i try to go back to the first fragment and then again proceed to the second one - everything without closing the application - embeded website throws such error:

I/chromium: [INFO:CONSOLE(1)] "Uncaught ReferenceError: Blockly is not defined", source: file:///android_asset/blockly/webviewPlay.html (1)

It happens for both - read-only and editable websites.

I don't know much about web programming but i think the problem may stem from lack of time for the scripts to load. Another thing which comes to my mind is that maybe previously used website (which should be destroyed with the fragment) is holding script files opened and forbidding newly created website to access it. These are only my private speculations and i have no idea whether they are probable.

My question is how to ensure that blockly website is loaded with all of its scripts?

Thank you for your time!

Andrew n marshall

unread,

Apr 27, 2021, 10:18:39 AM4/27/21

to blo...@googlegroups.com

Well, it's been a long time since I wrote that demo, but let me try...

First, the javascript in the WebView only has one thread. Further, Blocky is be loaded as part loading the HTML (the first <script> is blockly_compressed) into the WebView, if your app runs just like the demo. The result as, by the time the Fragment onViewCreate() is returns the WebView, Blocky should be ready for interacting with future javascript eval calls. It shouldn't be a timing issue. (Nor any resource lock.)

I'm assuming, as separate Fragments, you must also have separate WebView. (Probably a point of optimization, but only when you're comfortable with the web side.)

So.... That probably means the issue is within onViewCreate(). Possibly within webviewPlay.html. Do you mind sharing the contents of those files?

--
You received this message because you are subscribed to the Google Groups "Blockly" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/a51b4bcd-f63f-455a-b4a5-fe6c674c5f62n%40googlegroups.com.

Mikolaj M

unread,

Apr 27, 2021, 2:41:13 PM4/27/21

to blo...@googlegroups.com

First of all,

again thank you immensely for support.

Here are my files :

Fragment.OnCreateView:

(This method looks the same for both fragments. viewModel.workspaceDom... allows me to get blocks from previous workspace as soon as they are obtained from the callback of evaluateJavascript)

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    _binding = ExecuteFragmentBinding.inflate(inflater, container, false)
    WebView.setWebContentsDebuggingEnabled(true)
    mWebView = binding.webView
    mWebView.webChromeClient = WebChromeClient()
    val webSettings = mWebView.settings
    webSettings.javaScriptEnabled = true
    mWebView.loadUrl("file:///android_asset/blockly/webviewPlay.html")
    viewModel.workspaceDom.observe(
        viewLifecycleOwner,
        Observer { newDom ->
            createWorkspaceFromDom((newDom))
        })

webviewPlay.html

(workspace_play.js is

<!DOCTYPE html>
<!-- HTML file to host Blockly in a mobile WebView. -->
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style type="text/css">
        html,
        body,
        #blocklyDiv {
            border: 0;
            height: 100%;
            margin: 0;
            padding: 0;
            width: 100%;
        }
    </style>
    <script src="blockly_compressed.js"></script>
    <script src="kidlang_compressed.js"></script>
    <script src="blocks_compressed.js"></script>



    <!-- TODO: Select msg file based on locale. -->
    <script src="msg/js/en.js"></script>
    <script src="toolbox_standard.js"></script>
</head>

<body>
<div id="blocklyDiv"></div>
<script src="workspace_play.js"></script>

</body>

</html>

workspace_play.js

//Initializing toolbox...
var toolbox = document.getElementById("toolbox");
//... and options for workspace
var options = {
    trashcan: false,
   toolbox: toolbox,
   collapse: true,
   comments: true,
   disable: true,
   maxBlocks: Infinity,
   maxInstances: {
      'flow_def_proc_a': 1,
      'flow_def_proc_b': 1,
      'flow_def_proc_c': 1
   },
   trashcan: true,
   horizontalLayout: false,
   toolboxPosition: 'start',
   css: true,
   media: './media/',
   rtl: false,
   readOnly: true,
   move:{
            scrollbars: {
                horizontal: true,
                vertical: false},
            drag: true,
            wheel: false},


   sounds: true,
   oneBasedIndex: true
};
//Inject workspace
var workspacePlayground = Blockly.inject('blocklyDiv', options);

function textToWorkspace(text){
var xml = Blockly.Xml.textToDom(text);
Blockly.Xml.domToWorkspace(xml, workspacePlayground);
}

You received this message because you are subscribed to a topic in the Google Groups "Blockly" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/blockly/vPhS8svw7MY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blockly+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CAPrP5Rpp-BLWi4EpvXr0jLFhkfvOaHnzb_3DGoW3y2u9rRVBJA%40mail.gmail.com.

Andrew n marshall

unread,

Apr 27, 2021, 4:13:13 PM4/27/21

to blo...@googlegroups.com

I've not dealt with view binding, and I'm wondering if this case might be doing something it shouldn't, prior to setting up the WebView correctly.

Can you try excluding the WebView from the view binding code by adding this to the layout XML:

tools:viewBindingIgnore="true

And update the layout inflate code accordingly.

But this is just a guess. Let me know whether that changes anything.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CACtr8%2BNZ7LanpkLPxjvwB7eETCnnQ0bjQ5wjEyAZ0YhzJ0OTfw%40mail.gmail.com.

Andrew n marshall

unread,

Apr 28, 2021, 12:08:27 AM4/28/21

to blo...@googlegroups.com

Another question...

Are you disabling the observer when the fragment pauses?

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/CACtr8%2BNZ7LanpkLPxjvwB7eETCnnQ0bjQ5wjEyAZ0YhzJ0OTfw%40mail.gmail.com.

Mikolaj M

unread,

Apr 28, 2021, 11:28:28 AM4/28/21

to Blockly

I see there are some problems with observers.

My code generated form blockly duplicates. I need more time to investigate what is exactly wrong but i definitely messed something up with the observers. As for view binding I changed it but it didn't seem to solve anything.

Thanks for pointing out the observers. I'll try to comment more about the problem as soon as i find out what is causing the mess :)

Also, maybe you have a better idea how to manage this situation. I dedicate first fragment to editing the code and the second one to observing how the user-built program affects the phone (that's my use case for blockly :) ) Current problem is how to move one workspace (blocks with ids) to other fragment. Right now i am highly dependent on many observers but maybe there is a better approach, what do you think?

As always, thank you for your time and replies!

Mikolaj M

unread,

Apr 28, 2021, 3:39:06 PM4/28/21

to Blockly

Okay i found another thing which maybe helpful:

Every time i go back from the ExecutingFragment back to EditingFragment i create another instance of the webview. I will see what are the consequences of such behavior.

Mikolaj M

unread,

Apr 28, 2021, 3:39:48 PM4/28/21

to Blockly

Andrew n marshall

unread,

Apr 28, 2021, 9:45:48 PM4/28/21

to blo...@googlegroups.com

If these two fragments are loaded into the same container in the UI, you may want to try using CSS in the WebView to switch between two workspaces in the same webpage, in the same WebView.

WebViews are very heavy objects in the view hierarchy, as is their initialization.

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/49db0ab5-786b-48b6-9f73-cef2215c950fn%40googlegroups.com.

Andrew n marshall

unread,

Apr 28, 2021, 9:47:37 PM4/28/21

to blo...@googlegroups.com

However, if you continue with the current two Fragment approach, try to use hide instead of remove/replace in your fragment transaction.

On Wed, Apr 28, 2021, 12:39 PM Mikolaj M <miko...@gmail.com> wrote:

To view this discussion on the web visit https://groups.google.com/d/msgid/blockly/49db0ab5-786b-48b6-9f73-cef2215c950fn%40googlegroups.com.

Reply all

Reply to author

Forward