Masters

Home » Tutorials » Masters
November 24, 2014 Tutorials No Comments

Masters make creating similar screens much easier. Instead of copy-pasting the original screen, you create a master and apply it on number of screens. What is more, any changes made on a master are automatically propagated to all derived screens.

Create a Master *

In this example, we want to mockup a simple website called “Employee Database”.

First, create new master. It’s empty when just created:

Create new master from screen tree on the right

Add a web header to the master:

  • Click on image below to see it in full size.
  • I have used an icon for simple logo, and List for the blue background.
  • Change Form’s caption to “Web”, effectively that’s the name of our master.

Website header is a good case for using masters

Create Empty Screens and Apply a Master *

Create 3 screens and apply our “Web” master to each. Now you have 3 new screens which are empty but for the same header – the one they derived from the master:

  • Click “New Screen” button above the Screen Tree three times.
  • Right-click on each screen and choose “Apply Master…” command
  • From a dialog, choose “Web” master we created few moments ago.

Apply master from right-click menu

What you have is:

  • 3 empty screens with exactly the same web header.

Add Widgets to Screens *

Now let’s add some widget to our screens. I have created 3 mockups, for the following web pages:

Website homepage:

  • Change form caption to “Homepage”.
  • Add few graphics via Icon widget.
  • Add few headings and texts, use dummy “Lorem ipsum” text to generate content.
  • Add few links.
  • Click on image to see it in full size:

Wireframe of a website homepage

Download page:

  • Change Form’s caption to “Download”.
  • Add Mac and Windows graphics (use Icon widgets).
  • Add some text and Download buttons.
  • Click on image to see it in full size:

Mockup of a download page

Contact page:

  • Change Form’s caption to “FAQ”.
  • Add a number of Headings and texts.
  • Click on image to see it in full size:

Wireframe of a FAQ page

Make Changes on the Master *

Let’s go to the master and make a different logo.

  • Click on the master on “Masters” panel.
  • Double-click the Icon widget with the logo and choose another graphics.

Changed heading on Master screen

Changes Propagate to All Derived Screens *

Now check your screens:

  • Logo change have propagated to all of them.

Heading changes propagated from master to Home page

Heading changes propagated from master to Download page

Heading changes propagated from master to FAQ page