Header bars, tabs and tiles · Lessons

An app's card

Most apps on a phone look alike for a reason: a bar across the top with the page's title and a button or two, a row of tabs across the bottom to move between pages, and the page itself between them. People know where to look. Three widgets make this layout, and they work on a desktop just as well. Build the card:

Build it with the Tools palette and the Property Inspector

Make a new stack, or go to an empty card. In Edit mode, drag a Header Bar from the widgets of the Tools palette to the top of the card, stretch it from edge to edge, and name it Header.
Drag a Navigation Bar to the bottom of the card, stretch it from edge to edge too, and name it Tabs.
Drag a classic Field into the space between them and name it Page.

Each bar comes with items to show what it can do: the Header Bar says Title, with a back arrow and a plus, and the Navigation Bar has four tabs with an icon each. They are set in the Property Inspector, or from a script, as properties: a list of names for scripts, of labels for people, and of icons, each a name from the icon library that comes with OXT-Beyond (Icons and SVG). The Header Bar's title is its label:

Your card: a header bar at the top titled Contacts, with a back arrow at the left and a plus at the right; the empty field; and a bar of four tabs at the bottom, Contacts, Favourites, Music and Search, each with its icon, Contacts lit.

The three lists go together, item by item: to make the tabs your own, set all three, such as the itemNames to home,search,favourites,settings, the itemLabels to Home,Search,Favourites,Settings and the itemIcons to home,search,heart,cog, as the Try it yourself at the end does. itemStyle chooses what a tab shows: icons, names (the labels) or both.

Tabs: the Navigation Bar

One tab of a Navigation Bar is always lit, the page the reader is on. A click on another lights it and sends hiliteChanged, as setting its hilitedItem does; hilitedItemName says which. In a real app each tab would go to a card of its own (Cards and navigation), with the bars in a group shown on every card. Here one field stands in for the pages. Put this in the Navigation Bar's script:

ScriptThe script of widget "Tabs"

on hiliteChanged
   put the hilitedItemName of me into tPage
   put "This is the" && tPage && "page." into field "Page"
   set the label of widget "Header" to item (the hilitedItem of me) of the itemLabels of me
end hiliteChanged

Your card: the header bar titled Music, the field saying This is the music page, and the third of the four tabs at the bottom, Music, lit.

As with the Segmented Control (Switches, choices and colours), the widget sends its message once the script that changed it is done, so the wait lets it through before the next line looks. In Run mode, click a tab and watch the title change.

A Header Bar's items are actions, small buttons at its ends, such as Back and Add. A click anywhere on the bar sends it mouseUp, and its mouseAction is the name of the action under the pointer, or empty when the click was on the title. Put this in the Header Bar's script:

ScriptThe script of widget "Header"

on mouseUp
   switch the mouseAction of me
      case "back"
         go back
         break
      case "add"
         ask "What would you like to add?"
         if it is not empty then put return & it after field "Page"
         break
   end switch
end mouseUp

The actions' names and icons are lists, as the tabs' are: set the itemNames to back,add and the itemIcons to angle left,plus for the two it starts with. The first action sits at the left when firstItemLeft is true, as a back arrow should.

Tiles

A Tile is a square button with a big icon and a title, the kind of thing a home screen or a settings page shows in a grid. It lights up when the pointer is over it, and sends mouseUp when clicked. Tiles are easy to make by the dozen from a script (Making controls from a script), as here; from the Tools palette each is dragged and set like any widget:

A single mouseUp handler in the card's script can answer them all, since a message a tile does not handle goes on to its card: the short name of the target says which was clicked.

Palette Actions

The IDE's own palettes, such as the Project Browser, have a bar of small icon buttons along their top; it is the Palette Actions widget, and it is in the Tools palette for your own palettes too. It has two sets of items: nav items on the left, of which one is chosen, like tabs, and action items on the right, like buttons. The nav items show their labels, or their icons when showNavIcons is true. Choosing one sends navSelected or actionSelected with its name:

A thin grey bar across the top of the card: two tabs at its left, List and Grid, with List chosen, and a trash can and a plus at its right.

Try it yourself

Write a command makeTabs that takes a widget name and a list of tab names, such as "home,search,cog", and makes a Navigation Bar across the bottom of the card with those tabs, each using its name as its icon and, with a capital first letter, as its label.

Show a solution

A bar of three tabs across the bottom of the card, Home, Search and Cog, each with its icon, Home lit.

Words in this lesson

Header BarlabelitemNamesitemLabelsitemIconsmouseActionNavigation BarhilitedItemhilitedItemNamehiliteChangedTiletileLabeliconNamePalette ActionsactionNamesactionSelected

Each one finds every lesson that uses it. The Dictionary has the whole story of each, with its syntax and more examples.