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.
You can download the sample stack from this url: https://tinyurl.com/ybmh5zax
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 mouseUpAdd the following code to the button that navigates to next pages:
on mouseUp
doAction "advance"
end mouseUpCreate 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 mouseUpAdd the following code to the button that reloads a page:
on mouseUp
doAction "reload"
end mouseUpCreate 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 closeFieldon returnInField
focus on nothing
end returnInFieldCreate 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
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 sBrowserIdOnce 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 preOpenCardOn 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 closeCardHandling 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 browserStartedLoading2. 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 browserFinishedLoading3. 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 browserLoadRequestProcess 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 goUrlThe 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.
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?