Template Review
A hat shop is opened with the assistance of the App to Market template

By Heather Laine

Although I work here in Customer Support at RunRev, as many of you will know I am not myself a programmer. I merely channel information :) Apparently this makes me the perfect person to review the new App Template stack created by our very own Ben Beaumont. As a complete novice, I will do all the things I "shouldn't" do, and see what happens and whether the stack can recover. Will I actually create an app? Lets find out...

I've started by downloading the package, and examining its contents. It seems to have a LiveCode stack, a folder of images, and a tutorial video. Naturally, as nobody ever reads instructions, I go straight to open the stack. What have we here?

Right. Looks quite pretty, what can I do with it? Let's try clicking on this big plus sign. Immediately a dialog pops up to tell me I'm navigating to a new screen, and what would I like to call it? Fine, lets see, I think we'll go shopping. I type "shop". Next I am presented with a long list of possible icons I might use for this card. After some study, I decide "credit-card" seems appropriate.

The credit card icon is neatly added to my navigation bar. So far, so good. What else can I do? I guess my app should do something, so lets see if I can add a button that takes me to a website. Easy, surely.

click to zoom image

1.) Drag out a button from the tools palette

2) Name the button "Visit Hat Shop" in the name and label field - the label field is what shows in the button, the name is what you would refer to it as in your script. I figured this out after first changing it in the "name" field and seeing nothing happen to my button...

3) Add some code to the button. Here I confess my first attempt failed. I wrote

on mouseUp
   go url "https://www.google.co.uk/#q=hats"
end mouseUp

Duh. A few minutes of reading the docs later, I figured out that "go" should be "launch"

The correct code:

on mouseUp
   launch url "https://www.google.co.uk/#q=hats"
end mouseUp
      

4) Hit Apply.

Switch to run mode and ... whaddya know! success! My First App.

I am proud. I show it around the office. But wait... I'm sure there is more that could be done here. At the moment, my "shop" card is still showing the title "New Card". I'd like it to say "Edinburgh Hat Shops". How hard can it be? First I try naming it by clicking on the header, and entering "Edinburgh Hat Shops" in the label field. No dice. I try clicking around a bit, find an "inspect" button in the Properties Inspector, and attempt to enter the name in the Field "New Card". Hmmm. Oh dear. I think I've broken it. There is a script error. Time to watch the video? Maybe...

Right. That seems quite clear. Lucky there is a reset button on the settings screen. A few minutes of recreating my stack later (its much faster second time round!), I open the card script from the object menu, and change the code so that instead of

set the headerTitle of this stack to "New Card" 

it reads:

set the headerTitle of this stack to "Edinburgh Hat Shops" 

Navigate away, navigate back, and my title has changed. While I am on the settings page, I decide to change the color of my theme to blue:

That worked without issues. I see I could also have changed this on the card script, along with various other parameters which can be set from the settings page without scripting:

on preOpenCard
   set the theme of this stack to "blue"
   set the headerTitle of this stack to "Edinburgh Hat Shops"
   set the headerButtonBackVisible of this stack to false
   set the headerButtonAddVisible of this stack to false
   set the headerButtonUploadVisible of this stack to false
   set the headerButtonDeleteVisible of this stack to false
   set the navigationSelectedItem of this stack to the cNavID of \
         me
end preOpenCard

Maybe that will do for my first app. Lets build it into a standalone. First save the app, then go to file/standalone application settings. I'll build this for Mac, because that's what I'm using, and I do not have LiveCode set up for iOS. Can I add an app icon? I check the box in the settings, and navigate to "app-icons" in my templates folder. Hmm. Greyed out. Isn't there something I have to do to produce a Mac app icon? A spot of discussion in the office reveals that yes, I need a .icns file. A little research on google, and I have converted my .png from the app template icons pack to the appropriate format.

And build... For your edification and delight, you may download my first app here. Not bad, for an afternoons work.

So, could I have done this in an afternoon without the template? Definitely not. It took me long enough to work out how to add the button and url, trying to figure out how to create a navigation bar would have taken me a week. At least. The pre-made icons make it really easy to add new navigation items. Obviously, all the coding in this template could be done by a smart coder in short order, but for me, as a novice, it enabled me to produce something reasonably good looking that would otherwise be beyond me.

The App Template pack is included in the App to Market Kit covered in article 2 of this newsletter.