The layout tool allows you to design the pages that make up your app. A page contains widgets such as button, labels, or images.
This document explains what each part of Layout tool does, and how it can be used to build your app.
- For a basic step-by-step introduction to the layout tool, try the Tutorial 1: Hello World help page.
- To find out more about the widgets available in AppFurnace, see the Widgets help page. Note that at the time of writing, not all widgets yet have a help page. We're working on this!
Diagram showing the main parts of the Layout tool.
The canvas, in the center of the Layout tool, shows the widgets on the currently-selected page (or scroll area, read more about scroll areas here). It serves both as a preview of what you'll see on that page in your app, and also as a place where you can add, edit, and delete widgets. You'll be spending a good proportion of your time using AppFurnace working with the canvas.
- To place widgets on the canvas, select the widget type from the left column of the widgets panel, and drag a widget from the right-hand column of the widgets panel to the canvas.
Once a widget is selected the properties (things you can change) of the widget are shown in the property box on the right of the screen.
To move widgets, simply click and drag them around the canvas.
- For finer control, you can use the arrow keys to move selected widgets one pixel at a time around the canvas.
- If you hold the shift key while using the arrow keys, widgets will be moved 10 pixels at a time.
- As an alternative you can use the size & position property tab in the property box to type in a new size.
Using the size property tab
Selected widgets show a small gripper icon on the bottom-right. If you click and drag this, you can resize the widget. You can also make the widget wider by dragging the right edge, or taller by dragging the bottom edge. You can't drag the left or top edge however.
A selected button showing the resize gripper on the bottom right
As an alternative you can use the size & position property tab in the property box to type in a new size.
Selecting multiple widgets
You can select multiple widgets, useful for dragging several widgets at once, in one of two different ways.
- by holding the CMD (Mac) or CTRL (PC) buttons while you click on widgets.
- by clicking and dragging on the canvas, you can 'draw' a selection rectangle.
Dragging out a selection rectangle to select multiple widgets
To delete widgets, select them, and then click the delete button on the toolbar. Alternatively, press the backspace key on your keyboard.
The property box displays the properties (things you can change) of the selected widget. Note that if no widgets are selected, or if more than one widget is selected, the property box will be hidden.
The main parts of the property box.
Each type of widget (Button, image, label) will have a slightly different set of properties and property tabs.
The left-most tab, labelled settings displays the most-commonly used properties. For a button, this is the text (what's shown on the label) and the navigate settings (which page is shown when the button is pressed). Other widgets will have different properties.
- To find out more about what a property does, hover over the property and an (i) icon will appear. Click this and a pop-up help window will show a description of the property. If you'd rather read about all the properties in one go, click the (i) at the top right of the property box.
- The best way to learn about properties however, is to try them out. Trying dragging on a default button widget and play with all the options.
- To learn about the Save as style button see the Working with styles section below.
The tabs are displayed across the top of the screen. These provide access to the various tools that AppFurnace offers. When you first create a new app, the Layout tool will be displayed. To get back to the layout tool if you're looking at the help, files, code, or location tools, click the Layout tab. The tab bar works the same way for each of the tools.
The toolbar is displayed at the top of the screen under the Tabs and contains a series of buttons that perform useful actions.
In order, from left to right, these are:
|Description||Keyboard (Mac)||Keyboard (PC)|
|Undo||Undoes the last action that was performed.
This is useful if you have made a mistake.
|Redo||Redo the last action that was undone.||CMD-Shift-Z||CTRL-Shift-Z|
|Delete||Delete all selected widgets. You can't delete a page with this button, use the Delete button in the Page List||Backspace||Backspace|
|Copy||Stores a copy of the selected widgets. Use Paste to copy them onto the canvas.||CMD-C||CTRL-C|
|Paste||Pastes the copied widgets onto the canvas.||CMD-V||CTRL-V|
|Select / Select All||Select all widgets on the current canvas.||CMD-A||CTRL-A|
|Select / Select None||Deselect all selected widgets on the current canvas.||CMD-Shift-A||CTRL-Shift-A|
|Order||Is used for moving widgets in front of or behind other widgets. See Arranging widgets on the screen for more details.||CMD-Shift-A||CTRL-Shift-A|
|Layout & Align||Contains options for arranging widgets on the screen, for example, aligning edges with those of other elements or centering widgets on the canvas. See Arranging widgets on the screen for more details.|
|Screen Setup||Brings up the Screen Setup dialog. This is where you can control the orientation of your app (landscape or portrait mode). You can also choose whether the status bar is shown. The status bar displays the time and battery life at the top of the device's screen.|
The left-hand column of the widgets panel shows the widgets that are available to use in your app. You may find the list of widgets varies from what is shown above. When you select a widget, the right-hand panel will display a preview of the widget at the top. We call this preview widget the 'default widget'. For some widgets, such as Button, it'll also display a list of Styles in a scrollable list underneath the default widget. You can learn more about styles in a help document that we'll add soon.
You can put the widget onto the canvas by simply dragging and dropping the widget from the right hand column to the canvas. This'll work with either the default widget or any of the styles. If you want to find out more about a widget, hover over the left-hand column and an (i) icon will appear. Click this icon and a pop-up help dialog will appear with more information about that widget.
Pop-up help dialog for the button widget.
The page list shows all of the pages in your app. You can use the page list to add new pages, or edit, duplicate or delete them. Additionally you can decide which page should be shown when your app starts up (the home page).
Add new pages
- To add a new page, click the Add button under the Pages heading
- To delete the currently-selected page click the Delete button under the Pages heading. Remember that the Delete button on the toolbar will only delete widgets, not pages.
Quite often in your app, you may want to have a few pages that look very similar. Rather than creating each page from scratch you can create the page once, and then duplicate it.
- To duplicate a page, click the Duplicate button under the Pages heading.
Change the order of pages
You can re-arrange the order of the pages by clicking and dragging pages to the new location.
Setting the home page
The home page is the page that is shown when your app starts up. The home page is always the first page in the list, and is indicated by a house icon. To change the home page, click and drag the new home page to the top of the list.
Working with styles
Default widget vs Style widget
If you drag one of the button styles from the widgets panel to the canvas, such as the shiny-blue style, you may notice that the property box displays less tabs than if you drag the default button.
- The reason for this is that a widget with a style hides all the properties that make up the style (color, font, background image).
- Note: Once you have pressed the Customize button the widget is now no longer a widget with a style. This means that if you change the style later on, then your button's appearance will not change.
Making a new style
After a while playing with the properties of a button (or any other widget) you may end up with something that looks really great. If you think you might want to make a lot of other buttons the same as this, you can save the button's properties as a style.
Saved styles appear under the 'styles' heading on the right-hand side of the widgets panel. You can then simply drag these onto the canvas any time you want to use them. Note that each type of widget has its own set of styles, you can't use a Button style on a Label, for example.
Here's how to make a style:
- Select a widget that's not using a style. If the widget is using a style, you'll want to press the Customize button shown at the top of the property box (see above).
- Change the properties of the widget until you're happy with how it looks.
- Click the Save as style button.
- Type in a name for your new style and click the OK button.
- If you scroll the right-hand column of the widget panel down, you'll see your new button style in the list. Drag this to the canvas to make a new button widget with the same style.
Deleting a style
To delete a style, click the style on the widget panel. You'll see a small cog icon appear in the bottom-left of the panel. Click this, and select the Delete menu option that pops up.
Note that any widgets that use the style in the whole app will have the style removed from them (they'll return to looking like the default widget). This can't be undone so proceed with care!
If you don't like the styles that come pre-loaded, you're free to delete these too.
Using the delete style menu option.
Changing a style
Imagine this scenario for a moment, you're building a cool app for your company and you've used the shiny-blue Button widget dozens of times on various pages. The boss comes over and announces that that, from now on, all buttons must be red rather than blue. Luckily as you have used a style, you don't have to go hunting though your app manually changing every single button from blue to red.
Here's what you would do.
- Select any button that uses the style you want to change.
- Press the Customize button at the top of the property box. Notice that the button changes from Customize to Save as style.
- Bring up the Shape tab, and change the color from blue to red by clicking the Pick button next to the color property and choosing red on the dialog that pops up.
- Press the Save as style button
- The Save as style dialog appears.
- Notice that shiny-blue is listed underneath the Overwrite existing heading. Select this, and click OK.
Of course now the name of the style doesn't make a lot of sense. Thankfully this is easy to change.
Renaming a style
- In the left-hand side of the widgets panel, ensure that Button is selected.
- Scroll the right-hand part of the panel down until you can see the shiny-blue style (which should now be red if you followed the steps above).
- Click the style, and then click the cog icon that appears at the bottom-left of the panel. This brings up the Style menu.
- Choose Rename from the style list.
- Choose a new name, and click OK.