Layouts

From PhiWiki
Jump to: navigation, search
Rollover - creating image rollovers and menusHow-To overviewMaster templates - setting up the CD and menu structure

Layouts are a powerful tool in Phi to group and organize your items. In future versions this will also allow you to automatically resize your content for example to the screen sizes of mobile devices. But for now it also enables you to handle i.e. radio buttons in a simple way (the layout acts as a button controller). Also effects like transformations apply to the complete layout.

Linear layouts

With a linear layout you can group items horizontally or vertically.

  1. Clear the page.
    LayoutTools.png
  2. Add a Button item to the page.
  3. Make two copies of the button pressing Ctrl-C and Ctrl-V.
  4. Order them horizontally.
  5. Span a selection box around all buttons by holding down the left mouse button.
    ButtonLayout.png
  6. Choose Layout horizontal from the Tool bar.
  7. Resize the layouted buttons horizontally. What happens?
  8. Add a Radio button to the page.
  9. Copy the radio button two times.
  10. Order them vertically.
  11. Choose Layout vertical from the Tool bar at the top.
  12. Press the right mouse button on the mid radio button item and select Checked from the context menu.
  13. Select both layouts and choose Layout vertical from the Tool bar.
  14. Save your page and reload it in the browser.
  15. Click on the label of a radio button to see the button state switching.

Form layouts

A Form layout provides a two column layout.

  1. Add a Label item to the page.
    FormLayout.png
  2. Add a Line edit item to the page.
  3. Move the line edit beside the label.
  4. Select both items.
  5. Make two copies and order them below each other.
  6. Choose Layout form from the Tool bar at the top.
  7. Right click on the mid label and choose Properties.
  8. Change to the Text tab.
  9. Change the text to longer label. What happens?

In Phi the label will automatically resize to fit the text content. This is perfect if we provide multiple translations in different languages for the same item. A possible translations could occupy much more space for the same label and is respected since v2.0.0. This might be the reason if you can shrink the layout to a certain width only.

  1. Select the layout above and release it by choosing Break layout from the Tool bar.
    SpacerExample.png
  2. Add two Horizontal spacer and place them in one row above the label and line edit.
  3. Ensure that the right corner of the left spacer aligns with the right corner of the labels.
  4. Choose again Layout form from the Tool bar.
  5. If the layout looks weired undo the last action by choosing the item above in the History tool and rearrange the items that the right corners of the labels and the left corners of the line edits align in a column without overlapping each other.
    FormLayoutSpacer.png
  6. Open the property dialog of the left spacer by right clicking the item and choosing Properties from the context menu.
  7. Change the Width to 120px and accept the dialog.
  8. Choose Align right from the Tool bar.
  9. Save the page and reload it in the browser.
  10. Resize the layout to increase the height.
  11. Try different alignments and Width settings for the spacer items and see what changes after saving and reloading it.

Grid layouts

Finally you can layout items in a grid. Ensure the items do not overlap each other nor have to much space in between each other. If a layout looks weird undo or release it and arrange the items more accurate and layout them again.

  1. Release the top layout from the buttons - you should get two layouts, one for the radio buttons and the three buttons.
    GridLayoutExample.png
  2. Add a Text area item to the page.
  3. Arrange them like in the right picture.
  4. Choose Layout grid from the Tool bar at the top.
  5. If the layout looks weired (ie. has overlapping items) undo and rearrange the items and try again.
  6. Open the property dialog for the layout by double clicking.
  7. Switch to the Effects tab and choose Shadow from the Graphical menu.
  8. Accept the dialog.
  9. Save your page and reload it in the browser.
GridLayoutShadow.png

Lessons learned

  • Double clicking an item in the layout opens the property dialog for the layout not for the child item.
  • You can access the property dialog of a child item in a layout by pressing the right mouse button and select Properties from the context menu or by selecting the item ID in the Tool bar and clicking on the Tool icon.
  • The layout becomes a parent of its child items and therefore can act as button controller.
  • Layouts can be nested.
  • In Phi the sizes of labels are automatically resized to fit the content for all available languages you set up this item for.
  • You can use spacer items to create fixed sizes (placeholder items).
  • Font and alignment settings apply to all children if you change them for a layout.

Rollover - creating image rollovers and menusHow-To overviewMaster templates - setting up the CD and menu structure