Control your webpage with LiveCode HTML5

One of the most requested features for LiveCode HTML5 applications has been to add the ability to interact with the browser’s JavaScript APIs.  In the latest Developer Preview release of LiveCode 9, we’ve added this capability!

You can “do” it

For a long time, the LiveCode do command has had a form which runs the script you give it as a different programming language.  The languages available are listed in the alternateLanguages, depending on which operating system you’re running.  For example, you might do some arithmetic using VBScript on Windows with:

do "result = 1 + 1" as "vbscript"

We have now added “JavaScript” as one of the possible alternate languages in LiveCode HTML5 applications.  You can evaluate a snippet of JavaScript code with the do command, and the result will be set to whatever the result of the JavaScript computation was.

The colours of the rainbow

It’s pretty easy to use this new capability to manipulate the webpage surrounding an HTML5 standalone stack.  As a simple example, you can easily build an app that changes the background colour of the part of the page surrounding it, using the JavaScript DOM (Document Object Model) APIs and some CSS.

First, try out the JavaScript snippet that your app is going to run.  Open an existing HTML5 standalone in a browser, and go to the JavaScript developer console.  Run:

Module.canvas.parentNode.setAttribute("style", "background: hsl(80, 100%, 50%)")

Explanation:

• The Module global variable contains all the information about your app
• It has a canvas field, which is the HTML element where the app is displayed.
• The canvas has a parentNode field, which its parent HTML element.
• We set the style attribute on the element to a CSS snippet that changes its background colour, specifying the colour using a hue, saturation and luminance (HSL) triple.

Your app should now be surrounded by a beautiful green colour!

Jump into LiveCode and create a new stack, and drag a button onto it.  When the button is clicked, the app will animate the web page by cycling through different colours, and when you click it again, it’ll stop.

HTML5 apps can call into JavaScript to change the surrounding web page.

Edit the script of the button.  The script needs some static variables (to hold the animation state), a mouseUp handler to deal with starting and stopping, and a doUpdate handler to do the colour animation by running JavaScript.

local sCycleEnabled
local sHue

-- When the button is clicked, it toggles the
-- animation on or off and updates its label to match
on mouseUp
   put not sCycleEnabled into sCycleEnabled

   if sCycleEnabled then
      set the label of me to "Stop"
      doUpdate
   else
      set the label of me to "Start"
   end if
end mouseUp

-- Each animation tick, gradually cycle through the
-- colours by modifying the colour hue
on doUpdate
   -- The hue is actually an angle in degrees
   put (1 + sHue) mod 360 into sHue

   -- Prepare and run the JavaScript snippet
   local tScript
   put "Module.canvas.parentNode.setAttribute" after tScript
   put "(" & quote & "style" & quote & ", " after tScript
   put quote & 
         merge("background: hsl([[sHue]],100%,50%)") & 
         quote & ")" after tScript

   if the platform is "html5" then
      do tScript as "JavaScript"
   end if

   -- Continue the animation
   if sCycleEnabled then
      send "doUpdate" to me in 100 millisecs
   end if
end doUpdate

If you like, you can check that clicking the button starts and stops as you expect, and possibly add a field to show the JavaScript that the app is executing.

And that’s it. Deploy your app as an HTML5 standalone, open it in a browser, click “Start” and enjoy the pretty colours.

This is just one of the exciting new features coming in LiveCode 9. Try it out now! You can get LiveCode 9 DP 2 via automatic updates from within the IDE (‘Help → Check For Updates’), or download an installer.