AppLab:Interface

Working with App Lab

App Lab is devided into three parts: On the left side you have your app. From here you can press the "Run" button to run your app, and you can switch screens by selecting from the drop-down at the top. In the middle you have your toolbox . This contains all the tools you'll be using to build your app, including screen elements such as buttons and labels, as well as the code that will power those elements. On the right side is your workspace, where you write your code and configure screen elements.

Code Mode vs Design Mode

Above the app area you'll find a button that allows you to switch between code mode and design mode . When you switch between modes, your toolbox and workspace will change to reflect that mode.

In code mode (the default), your toolbox has eight different categories of code blocks that you can add to the workspace on the right. Try selecting different categories to see what blocks are available. The code workspace also allows you to switch between using blocks or text (see Blocks vs Text for more info).

In design mode , your toolbox will contain all the elements you can add to your screen. The workspace is where you can set different options (called properties ) for whichever element you have selected. Once you drag an element to the screen you can change the element's properties in the workspace. See Layout for more on how to build your app screens.

Coding using Blocks or Text

While professional coders typically write code using plain-text, using drag-and-drop blocks is a great way to learn coding without having to worry about the syntax rules of a programming language. As your coding skills improve, you might find it's faster just to type out your code using plain-text. App Lab makes it easy to switch back-and-forth between these two modes so that you can try it at your own pace.

To switch to text mode, click the "show text" button. To switch back to blocks, click "show blocks".

As you can see above, one benefit of text-mode is that you can see more code on the screen at once. It's also easier to make change very quickly, but you have to be careful -- if you make a syntax error, you won't be able to switch back to blocks mode until you fix it.