How to extend HTML5 apps with javascript

Monkey Targets Forums/HTML5/How to extend HTML5 apps with javascript

Warpy

(Posted 2011) [#1]

semar asked on the blitzbasic forums how to extend monkey apps with functions written in javascript.

Here's an example, which has a simple game updating a highscore table written in HTML.

I'll go through a much simpler example in this post.

First of all, create a javascript file called externs.js, with the function we want to use:

function addUp(a,b)
{
  return a+b;
}

The basic idea is to use the Extern command to tell monkey what the function is called. Here's the monkey code:

Import "externs.js"  'tell the compiler to include the code from externs.js in the compiled app

Extern
  Function myFunc:Int(a:Int,b:Int)="addUp"    'instances of myFunc are rewritten to 'addUp' in the compiled javascript

Public

Function Main()
  Print myFunc(1,2)   'call the external function
End

And that's that!

To go the other way, and call monkey functions from javascript code, you just need to know that function names have 'bb_<appname>' put in front of them when they're compiled. So if your monkey source is in the file "myapp.monkey", its functions will be compiled to bb_myapp_<function>.

The monkey compiler doesn't bother compiling functions that it doesn't think will be called by the program, so if you have a function that's only ever called by external code, you need to add something like

If 1=0
  myFunction()
EndIf

somewhere in your monkey code.

GW_	(Posted 2011) [#2]

Thanks!

I confirmed that this works with 'stdcpp' too.

The big drawback is as soon as you turn on 'Strict' It fails.

marksibly

(Posted 2011) [#3]

Hi,

> you just need to know that function names have 'bb_<appname>' put in front of them when they're compiled.

Use this at your own risk - the bb_ 'munging' prefix may well change in future - or a future -obfuscate param may completely randomize symbols!

I'll do a doc on writing native stuff eventually, but there are several curly related issues (like this) to be dealt with first.

For now, just use mojo as a template for implementing native modules, which provides a simple mechanism to call in and out of native code.

Anything 'trickier' may or may not break in future.

dopeyrulz

(Posted 2011) [#4]

Looking through the mojo code, the use of a generic Import for multiple platforms is pretty cool:

Import "<path>/<module>.${TARGET}.${LANG}"

Replace <path> and <module> as required.

Example:
Import "native/mojo.${TARGET}.${LANG}"

Files in the native sub-folder:
mojo.android.java
mojo.flash.as
mojo.glfw.cpp
mojo.html5.js
mojo.ios.cpp
mojo.xna.cs

Raz	(Posted 2011) [#5]

Thanks Warpy, that sounds like it could be handy for Highscore submission :)

charlie

(Posted 2011) [#6]

I'm getting the following error trying to run this on my mac:

ReferenceError: $ is not defined
/Users/c-knight/Desktop/extern/extern.monkey<248>
/Users/c-knight/Desktop/MonkeyPro31/modules/mojo/app.monkey<54>

Why is that then?

Cheers
Charlie

Warpy

(Posted 2011) [#7]

That means jQuery isn't loaded. Can you check that the <script> tag loading jQuery is at the top of MonkeyGame.html? It loads the library off google's servers; you could try downloading jQuery yourself and using a local copy.

charlie

(Posted 2011) [#8]

Ah, ok. I hadn't copied the MonkeyGame.html file into the build folder.

Cheers
Charlie

probson

(Posted 2017) [#9]

Does anyone have a copy of the file example here as feel would be useful for my students.