How do I use the Browser Control?

This lesson describes how to build a simple web page navigator by embedding web browser control and Internet content on a mobile application. The application allows you to access web pages and display their content interactively.

Sample code and screen captures are included.

Mobile Browser Example.livecode

Introduction

A web page navigator allows a user to explore pages on the Internet, using controls to manage the access to page content and using display areas to present web content to the user. This fundamental concept underlies many web page explorers and navigators, although their functionality is usually greatly expanded, compared to that being discussed in this lesson.

Create the Navigation Controls

Create the navigation buttons that allow you to move between the previous and next pages. We are using less than (<) and greater than (>) characters as the buttons labels.

Add the following code to the button that navigates to previous pages:

on mouseUp
	doAction "retreat"
end mouseUp

Add the following code to the button that navigates to next pages:

on mouseUp
	doAction "advance"
end mouseUp

Create the Stop and Reload Controls

Create the stop and reload buttons that allow you to terminate a page load that is taking too long or reload a page that may have updated content. The letter X is used as a label for the button that stops the page load and @ is used as the label for the button that reloads the page.

Add the following code to the button that stops a page load:

on mouseUp
	doAction "stop"
end mouseUp

Add the following code to the button that reloads a page:

on mouseUp
	doAction "reload"
end mouseUp

Create the URL Field

The URL (Uniform Resource Locator) field is a text entry window that allows you to specify the web page you would like to access.

Create the text field with the name URL and add the following code to its script:

on closeField
	goUrl the text of me
end closeField
on returnInField
	focus on nothing
end returnInField

Create the Page Display Area and the Status Field

The previous steps showed you how to set up the controls that allow you to navigate or specify where you would like your browser to point to. This step sets up the controls that allow you to process the information that is returned from the Internet.

First, create a display group with the name Browser. This browser window takes up most of the application area and is used to visualize the content that is downloaded from the Internet.

Next, create a status field with the name Status that allows the application to display information on the loading process. This helps the user identify if he has to take actions to reload a page, terminate loading or wait a bit longer.

Note: There is no code needed for these controls.

The Browser Stack

The Browser Stack

We have now completed implementing the interface that may look something like the figure in this step. Now implement the code that ties the events from the buttons to actions that request page content and display the page content for the user to view.

Note: The code samples that follow should all be placed on the single card of the stack.

Initialize and Destroy the Browser

In order to use the web page navigator, it is first necessary to create an instance of Browser. It is necessary to keep a handle or reference to the instance we created:

# declare the local id of the browser we are creating
local sBrowserId

Once we have a place to store the instance of Browser we can implement the code that initializes Browser and configure its default settings:

# when the card is opened make sure that default settings are configured
on preOpenCard
	# quit if we are not on a mobile device
	if the environment is not "mobile" then
		exit preOpenCard
	end if
   
	# create the browser
	mobileControlCreate "browser"
	put the result into sBrowserId
   
	# set up the basic defaults
	mobileControlSet sBrowserId, "rect", the rect of group "Browser"
	mobileControlSet sBrowserId, "visible", "true"
	mobileControlSet sBrowserId, "url", "https://www.livecode.com"
end preOpenCard

On terminating the web page navigator, it is necessary to destroy the Browser instance:

on closeCard
	if the environment is not "mobile" then
		exit closeCard
	end if
   
	# destroy the browser we created 
	mobileControlDelete sBrowserId
end closeCard

Handling Status Messages

This step discusses how to process status messages that are displayed to the user. This sample web page navigator provides three kinds of messages to the user:

1. The web page has started loading:

# provide a status message that indicates loading has started
on browserStartedLoading pUrl
	put "Started loading:" && pUrl into field "Status"
end browserStartedLoading

2. The web page has finished loading:

# provide a status message that indicates loading has finished
on browserFinishedLoading pUrl
	put "Finished loading:" && pUrl into field "Status"
	put pUrl into field "Url"
end browserFinishedLoading

3. The reason for reloading:

# provides a status message that indicates the reason for loading
on browserLoadRequest pUrl
	answer "Do you want to load:" && pUrl with "Yes" and "No"
	if it is "Yes" then
		pass browserLoadRequest
	else
 		put "Refused:" && pUrl into field "Status"
	end if
end browserLoadRequest

Process User Events

The URL text field and the button scripts pass information to the following two sections of code. These implement a layer of control that lies between the buttons and text field, and the LiveCode engine commands. This design simplifies the code as the local variable sBrowserId does not have to be visible outside of the card.

# a handler that executes an action invoked by the controls
on doAction pAction
	mobileControlDo sBrowserId, pAction
end doAction

# a handler that loads the URL
on goUrl pUrl
	mobileControlSet sBrowserId, "url", pUrl
end goUrl

The Device Experience

The Device Experience

Now that the interface and the code are complete, it is possible to launch the application on a mobile device and navigate the Internet. This example demonstrates what a web page may look like in a LiveCode application.

24 Comments

Mike B

Have been messing with this example on android (after changing iphone to mobile) it works, brings up pages and is fast enough, but double tap to center/zoom doesn't work, can't select text (and no clipboard support in lc mobile yet?) etc. Since I can't select, I can't even use mobilecontroldo to execute javascript to extract the selected text.

Is better support planned for the future?

Hanson Schmidt-Cornelius

Hi Mike,

no, we do not currently have clipboard support for mobile. It is on our list to be added, but we cannot provide a date for this yet.

Kind Regards,

Hanson

Greggory DeVore

How do I load a html file from within the program (using engine). Is this possible?

Hanson Schmidt-Cornelius

Hi Greggory,

have a look at "mobileControlDo" and the action "load htmlText". This allows you to set the HTML that is to be displayed in the browser.

You can also load a file directly from the file system in simulation or on the device by using: "mobileControlSet" tBrowserID, "url", tUrl
tUrl has to be prefixed with "file://" and possible spaces in the path have to be replaced with "%20". You can use the following command to replace the spaces:
replace space with "%20" in tURL

Kind Regards,

Hanson

Jessamy Goddard

Dear Hanson,

Thankyou for directing me to this lesson.
It has solved my problem!!

You are a star!!

With best wishes,
Jessamy Goddard

mathom

Okay. Total noob here. I'm following along fine until I get to "create a display group." What is this and how is it done? Thanks for your help.

James plank

I have been using this browser in an app for ios I'm building and the websites I load are very slow. In fact incredibly slow. Is there any situations you know of hat slows down the loading of URL 's or speeds up?
Basically are there any traps for newbies?
Thanks

Elanor Buchanan

Hi Mathom

You can create a group by adding a control, perhaps a graphic to the stack and then grouping it using the Group button in the menubar. Then you can name the group "Browser" and follow through the steps from there.

I hope that helps.

Kind regards

Elanor

Elanor Buchanan

Hi James

I'm not sure why the websites would be loading slowly. Could you email [email protected], ideally with a sample stack or a full description of how you are creating the browser control and what site you are loading. If you could also let us know what version of LiveCode, OS X, XCode and iOS SDK you are using and what device or simulator you are testing on we will look into it.

Kind regards

Elanor

james plank

<>
I do :-)

Dont load the website first before putting into the mobile browser.
ie DONT do the following, as it waits for the complete site to load before displaying...
Silly me
===================
local sMyUrl

on preOpenCard
local myMess
if the environment is not "mobile" then
exit preOpenCard
end if
-- get the url I want
put newUrl("") into sMyUrl

if sMyUrl is not empty then
load URL sMyUrl with message "myUrlBrowserDownloadFinished"

end if

end preOpenCard
on myUrlBrowserDownloadFinished

if sMyUrl is empty then
answer "Sorry, No Website is available for this property"
go to card "Main"
else

mobileControlCreate "browser"
put the result into sBrowserId

-- Native controls start off invisible
mobileControlSet sBrowserId, "visible", "true"

if the platform is "iphone" then
mobileControlSet sBrowserId, "autoFit", "true"
end if

mobileControlSet sBrowserId, "url", sMyUrl
-- Make sure everything is the right size
resizeStack
--
mobileControlSet sBrowserId, "url", sMyUrl

end if
end myUrlBrowserDownloadFinished

Elanor Buchanan

Hi James

I'm glad you managed to sort it out, thanks for letting us know.

Kind regards

Elanor

Erik

I am wondering if it is possible to display other objects visually on top of the browser. I am trying to position a rectangle over the browser so that I can use it to capture the image inside of that rectangle. Every attempt I have made so far, the Browser seems to come to the front most layer and then every object I have tried is displayed behind it. Is there anyway to show a rectangle on top of the browser window?

Hanson Schmidt-Cornelius

Hi Erik,

the browser object lies at the highest layer when it is displayed. All other LiveCode controls lie at lower layers, so it is not possible to display anything on top of the browser from within LiveCode. - Sorry

Kind Regards,

Hanson

stelios

Is there a way to detect touch events that happen inside the rect of the browser?

Stelios

Is there any way to detect gestures that are happening in the browser window and "pass" them down the hierarchy to LC? For example can we disable gestures on the browser window and have custom code to respond to it?

Hanson Schmidt-Cornelius

Hi Stelios,

yes, you can add the appropriate event handler to the script of the control. In this case the rect of the browser. Try using the mouseUp handler or the mouseMove handler to track events.

Kind Regards,

Hanson

Russell

It is mentioned on a number of fora that iOS does not work with "http" but only "https". I changed to that and also had to specifically choose the Browser inclusion before the lesson worked for me. LC 9, iMac 10.13.5

Regards

Russell

Elanor Buchanan

Hi Russell, yes that is the case now. Because of Apple's ATS requirement we have added a "Disable ATS" option in the Standalone Application Settings, if you want to use http URLs you can check that box. I have updated the sample stack and lesson to use an https URL instead.

You should not have to choose the Browser inclusion if you are following this lesson as that is for the browser widget and this lesson uses a native mobile control, could you double check with the updated example stack?

Thank you.

Elanor

Russell

Hi Elanor,

It is working fine now. Thanks.

Regards

Russell

Rocco Cogliano

Hi. How do you enable the use of the right click in the browser widget? For example to download an image on a html page loaded in the browser. thank you

Elanor Buchanan

Hi Rocco

The menu should show up as expected, if you can't download an image file this could be related to permissions. Can you let us know what OS you are using so we can look into this.

Thank you.

Elanor

Rocco Cogliano

Hi Elanor,
I use Win10.
No menu appears to me when I right-click in the browser widget.

Thank you
Rocco

Elanor Buchanan

Hi Rocco, it sounds like this might be a bug so I have reported it here

https://quality.livecode.com/show_bug.cgi?id=22565

The Development Team will investigate the bug. If you would like to receive updates when the status of the bug changes you can add your email address to the CC list on the bug report.

Elanor

Rocco

Ok Elanor.

Thank you so much.
Rocco

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.