Make your own apps that can upload to the web in LiveCode

Getting and sending data around the internet can be a useful trick to be able to do in your own software. We’re going to show you how to grab the content of an HTML file and extract something from it for use in your apps, and we’ll also make a simple tool to update a text file on a web server using FTP. With this you could, for example, create a tool that lets someone safely update one single part of a website with full confidence even if they have zero technical understanding.

The URL keyword is used to refer to a file, both online and locally on your own computer. We use it to fetch the contents of a web page, then take a quick look at extracting something from the results. Click on File > New Mainstack, then drag in a Push Button and a Scrolling Field object from the Tools palette.

Fetching a HTML page is a very straightforward process: saying put URL “http://www.billboard.com/charts/hot-100” into field 1 does the trick (bear with our musical selection for this tutorial), so select the button, click the Code button in the Toolbar, and add that to the on mouseUp script of your button. If you want to check for hiccups, for example, if the page isn’t available, you need to do a little more, such as putting the URL into a variable (variables are temporary storage for keeping track of stuff – see part 2 of our series) and checking the result to see if it’s ‘empty’ (good) or has an error (not good). Finally, if there’s an error, then tell the user what it is.

on mouseUp

put empty into field 1

put URL “http://www.billboard.

com/charts/hot-100″ into theData

if the result is empty

then

put theData into field 1

else

put the result into field 1

end if

end mouseUp

This creates a pile of HTML that isn’t useful to you, so here’s a way to dig through the contents and find something within it. Click the Dictionary icon in the Toolbar, and search for offset . This tells you where something is within some text; offset finds the number of characters in, wordOffset finds the number of words, and lineOffset the number of lines. Let’s use the latter to find where the first <h1> tag is in all that HTML code, so we can grab anything in that particular tag.

The lineOffset function needs two bits of information: the text you’re searching for, and the container to search. If you ‘get’ the line offset, the result is automatically stored in the ‘it’ variable, ready for you to use when you need to say which line you mean. Put these two lines of code after the end if in the above example to extract just the line with the <h1> tag:

get lineOffset(“<h1>”, field 1) set the HTMLtext of field 1 to line it of field 1

Setting the HTMLtext of a field to something instead of just putting the data into it strips out any HTML tags and attempt to apply styles, if relevant. If you have control over the web page you’re grabbing, you could customise it so it supports what you want to do in your app as well as what you want to present in a browser. For example, you could put custom tags or tag elements into key parts of the HTML to make it easier to find and extract data. If that’s not possible (maybe you want to find something in a page you don’t control), you just need to find a logical way to identify the things you want within the HTML code of your nominated page.