GUI Development

Property Inspector in Livecode on Mac OS XIn LiveCode you typically design your user interface first then add code directly to each object. LiveCode comes with 23 fully customizable interface objects. These include all the standard interface objects you would expect, including buttons, text fields, menus, data grid, bitmap & vector graphics and multimedia player.

To create objects, simply drag them out from the Tools palette. To edit them, choose the pointer tool in the top right of the Tools palette and double click them to edit their properties.

Native Themes

Interface elements automatically take on the correct look and feel on many of the platforms we support. For example, a standard push button will look correct on Windows, Mac OS X or Linux automatically and without making any changes to your code. This generally makes it possible to create beautiful, native applications for each of the platforms we support. For more details on native theme support for each specific platform, please see the page for the Deployment Pack for that platform.

Custom Skins

Linux and Mac OS X Applications from the Same Source Code

Each interface object is fully customizable. For example, you can replace the standard OS look in a checkbox and replace both the checked and unchecked state with a custom image of any size, you can build a completely custom scrollbar object or use an alpha blended image to create a custom shape for a window (where supported by the OS). For more details on creating custom skins, see the page on Multimedia Features.

Complete Programmatic Control Over your User Interface

Another unique benefit of LiveCode is its’ ability to create, modify or delete interface objects from code. You can create, edit or delete every aspect of your user interface from code, even in a standalone executable application. This makes LiveCode ideal for applications where you want to create a custom layout tool, or automatically generate a user experience based on XML or the contents of a database.

For example, to create a button called “Hello World”, 200 pixels from the left and 200 pixels from the top of your window:

set the location of the templateButton to 200,200
set the name of the templateButton to “Hello World”
create button

To learn the language property name so you can refer to a property in code, hover over the property you want to adjust in the Property Inspector. A tooltip showing the language name for that property will appear. If you need more help adjusting that property from code, look it up in the Language Dictionary. It’s as simple as that.