Open LiveCode.

From the pull-down menu, select File, and then select New Main Stack.

You now have a new main stack that you can start using for your mobile app. The next step is to set the stack's size properties to match the mobile environment your app will support. Using the property inspector, select Size & Position, and make the necessary adjustments based on the following table:

Create a new main stack.

Select the stack's card and drag an image area to display the web information.

Select the image and then select the Group icon on the toolbar to make the image a group.

Select the group and set the following properties:

At the card level, enter the following code:

local browserID

Create a preOpenCard handler with the following code:

  on preOpenCard
    mobileControlCreate "browser"
    put the result into browserID
    mobileControlSet browserID, "visible", \
          "true"
        mobileControlSet browserID, "url", \
          "http://www.packtpub.com"
      end preOpenCard

Create a Username: label for content.

Create a Password: label for content.

Create a text entry field and name it fldUsername.

Create a text entry field and name it fldMaskedPassword.

Create a text entry field and name it fldUnmaskedPassword. Set this field's visible property to false.

Add the following code to the fldMaskedPassword field:

on keydown pKey
  put...

Drag a button to your card.

Right-click on the button and select Property Inspector.

On the property inspector, select Graphic Effects from the pull-down menu (Basic Properties is the default selection).

Select the type of glow you desire (inner or outer).

Set the properties associated with the outer glow as detailed in the following table:

The following screenshot gives you an overview of these properties:

Set the properties associated with the inner glow as detailed in the following...

Create a new main stack.

Drag a button to the stack's card.

Select, with a single click, the button you want to modify.

Right-click on the button and select Property Inspector.

Using the property inspector, select, Icons & Border. This will bring up the interface shown in the following screenshot:

Select the button state you want to modify. An explanation of each state is in the following table:

Use the get command in LiveCode to obtain an object's property. For example, use the following code to get a button's label:

get the label of btn "myButton"

To use a property, you can put it into a temporary variable for later use:

local tText
put the label of btn "myButton" into tText

You can also get an object's property as part of a conditional statement such as in the following example that evaluates a button's label:

if the label of btn "myButton" is...

Create a main stack.

Drag any object onto the stack's card (for example, a button).

Select an object that you wish to add custom properties to.

Right-click on the object and select Property Inspector.

Using the property inspector, select Custom Properties. You should see an interface similar to the one displayed in the following screenshot:

Click on the plus sign to add a new custom property:

Enter a name for the custom property and click on OK. For example, you might want to use a button to represent a book in a game. Add the custom properties, bookTitle, bookYear, bookAuthor, bookPublisher, until your display matches the following screenshot:

Next, we will add content...

Create a new main stack.

Drag two or more objects on the stack's card. For example, drag two button objects to the card.

Select the objects you want to align. To do this, click on the first object, and then, while holding the Shift key, click on the remaining objects you want to align. When you are finished selecting the objects, release the Shift key.

Create a new main stack.

Drag a button to the stack's card.

Change the name of the new button to testButton.

To make an object, such as a button, visible, use the following syntax:

  set the visible of <object type> <"object name"> to true

So, for example, if you have a button named testButton, your code will be as follows:

  set the visible of btn "testButton" to true

To hide the example button from step 4, enter the following code:

  set the visible of btn "testButton" to false

To toggle a button's visibility, add the following...

Create a new main stack.

Drag a new button to the stack's card.

Assign the following code to the new button:

on mouseUp
  ask "What is your name?" with "Type here" \
    titled "getting your input" 
end mouseUp

Execute the code to see the results.

Create a new main stack for a mobile application.

Add three buttons across the top named Safe, Secure, and Restricted.

Add a button named Reset Log at the bottom-center of the card.

Create a scrolling text field named fldLog to fill the remainder of the card.

Set the background color of the fldLog field to black.

Set the foreground color of the fldLog field to yellow. This will be the color of the text entered into the log.

Set text size of the fldLog field to 14.

Set the traversalOn property to false (deselect the Focusable checkbox in the Basic Properties section of the property inspector).

When you complete steps 1 to 5, your...

Create a new main stack.

Drag a text input box to the stack's card.

Add the following code to the text input box:

on keyDown theKey
  if theKey is in "abcdefghijklmnopqrstuvwxyz" then
    pass keyDown
  else
     beep
    end if
  end keyDown