We saw already the use of panels in dashboards; the same technique can be applied to mobile development with an added feature: on mobile devices we can take advantage of the swipe gesture to change between a panel and the other. Additionally, we can design a small panel to be hidden at execution time, and display it as a pop-up information window with more details, for example, when the user taps an attribute.
We will modify the 40 iPad Landscape Portrait views document from the previous recipe; so you need to have completed it before going further. Start by saving that document with a new name: 41 iPad Landscape Portrait with Panels.
Open the document 41 iPad Landscape Portrait with Panels in design mode:
- Be sure that the landscape view is selected (that is, you see the light blue background). From the Insert menu click on Panel Stack.
- In the warning message that appears click on No.
- Drag the cross cursor to draw a rectangle, when you release the mouse button a new gray panel stack is created.
- See that there's a toolbar just above the title of the stack, click on the next-to-last button with an a|b icon (tool tip: Rename Panel).
- In the Rename Panel dialog, type
First Panelas Name and click on OK. - Again, on the toolbar look for the fourth button from the left (tool tip: Add Panel) and click on it, notice that the title has changed.
- Repeat steps 4 and 5 to name this as
Second Panel. - Repeat step 6, then 4 and 5 to add a third panel and rename it (hum…)
Third Panel. - With the second and third buttons on the stack toolbar (tool tips: Display Previous Panel and Display Next Panel) you can move between panels, go back to First Panel.
- When the Panel is active, click on the button with a green plus icon on the left just below the title bar.
- From the drop-down menu, choose Shape and then Rectangle, answer No to the warning.
- A new dark gray rectangle is created and selected inside the First Panel, resize it so that it covers all the space inside this panel.
- Right-click inside the Rectangle shape and click on Properties and Formatting….
- Go to Format | Color and Lines, set Fill | Color to Dark Blue and click on OK.
- Move the cursor to the stack title bar and click it so that the stack toolbar appears.
- Now go to the Second Panel and click the green plus icon below the title.
- Repeat steps 11 to 14 using Light Blue as Fill | Color value.
- Go to the Third Panel using the Display Next Panel button.
- And yes…create another rectangle shape to fill the entire Third Panel, giving it the Pale Blue fill color.
- Move back to the First Panel and save the document, overwriting the existing number 41, and run the newly saved document.
- In the Web Interface, you can move between panels with the small arrows positioned on the right and left of the stack title bar.
- In the iPad, you swipe your finger on the panel to switch from one to another. Isn't it cool?
Panel stacks are another way of putting a lot of information on a document without crowding the interface, letting the user move around and flip through panels as they please. With the added capability of touch screens this component gets a lot easier to handle.
Each panel is actually a document in itself where you can put grids, graphs, and all other objects.
Designing documents in the Web Interface needs a little time to get used to the various controls, and—especially on small screens—a lot of patience for the correct positioning on the canvas.
The same result can be obtained from the desktop application, where you have a similar Document Editor. Try it yourself and decide which is more comfortable for you. Sometimes, you may need to use one or the other depending on your target platform and audience.