|
Create a new Balsamiq report (Advanced) |
|
|
|
|
|
||
|
Create a new Balsamiq report (Advanced) |
|
|
|
|
|
|
Create a new Balsamiq report (Advanced)
|
Create a new Balsamiq report (Advanced) |
|
|
|
|
|
||
|
Create a new Balsamiq report (Advanced) |
|
|
|
|
|
|
This tutorial shows you how to create a new report template for Balsamiq mockups using the powerful built-in report designer (it is highly recommended to work through the Generate a report - Balsamiq tutorial first).
Note: You can apply any techniques shown here to existing report templates simply by displaying the Report View, selecting the report in the Discovered Reports list, and clicking the Edit button,
or by clicking Edit Report... in the Navigator and selecting the report template you wish to edit.
To create a new Balsamiq report, click the New Report... link on the Navigator. The Report View will be displayed if not already, and you will be prompted to select a Report Provider - double click the Balsamiq Report Provider
entry. The Report Designer will then be displayed.
Ensure that you already have the Balsamiq mockups loaded in Looksie from the previous tutorial.
The Report Designer is displayed as a separate window.
The report design
We will now build a report template that completely mimics the supplied BalsamiqWithLinks report template used in the previous quick start:
| • | Has a Report Header (displayed only on the first page) |
| • | Has a Thumbnails section - essentially a visual table of contents |
| • | Has a Details section - full sized image of each mockup and a list of all the Button controls in the mockup along with an image. |
| • | Displays a watermark in the background |
| • | Has clickable links in the thumbnail and full-sized images that let you jump to the appropriate full-sized image quickly |
| • | Displays a bookmark tree to quickly jump to an image. |
This tutorial covers a lot of area, and is very likely one of the most complex reports you will build.
Note: Detailed documentation on the Report Designer is available here
. Additionally, an extensive knowledge base is available on the DevExpress.com website, the developer of the Report Designer.
Initial setup and thumbnails section
| 1. | Right click the mouse in the Report workspace, and from the popup menu select Insert Band -> ReportHeader. Also insert a Detail Band. The Detail band should be resized to basically have a height of zero (0). This is only required for this particular example, otherwise the report will be empty when run. |
| 2. | From the Tool Box, drag and drop a Label control onto ReportHeader band area. Double click this label, and change the text to 'Balsamiq Test Report'. Select all the text in the label (or just ensure the label is selected). Using the Font section on the Ribbon, change the Font to Verdana, and size 16. You may need to resize the label to ensure it is big enough. |
| 3. | We now need to add the bands for the thumbnails. On a blank part of the workspace, right click to display the context menu, and select Insert Detail Report -> Unbound. A new band DetailReport has been added to the report. It has a child (indented) band called Detail1. |
You will now have the following band structure:
ReportHeader - displayed on the first page
Detail - empty (really just a placeholder)
DetailReport - repeated band for the thumbnails of each mockup
Detail1 - where will insert the title and thumbnail image of a mockup
| 4. | Next, right click on the Detail1 band area and add a new band - GroupHeader. |
A band called GroupHeader1 will be inserted above the Detail1 band.
From the Tool Box, drag and drop a Label control onto the GroupHeader1 band area. Double click this label, and change the text to 'Thumbnails'. Change the font to Verdana, size = 16, and set to Bold and Underline.
Resize the GroupHeader1 band to remove unnecessary white-space.
In the Field List, scroll down until you can see ShortFilename and Image (it's a long list), they are direct children of the top level Mockups item.
| 5. | Drag ShortFilename on to the Detail1 band area and set font as desired. |
Drag Image on to the Detail1 band area, resize as wanted, and set the sizing mode to Zoom Image using the Smart Tag (or in the Property Grid - just click on the Picture Box that was created when Image was dropped onto the band, locate the Sizing property in the list, and change it to Zoom Image).
| 6. | Let's test what we have done so far. |
Click the Print Preview tab on the Ribbon to generate the report. You will see the Balsamiq window quickly open and close as the images are generated.
The report will then be displayed. You should see a report that look roughly looks like this (the order of the mockups may not be the same in yours, it is dependent on the order they were loaded into Looksie.
We can control the sorting via FileGroups or by simply sorting by file name.):
| 7. | Now we are going to use column mode on the thumbnails so we can fit them across horizontally. |
Click the Report Designer tab on the Ribbon, click the Smart Tag icon the Detail1 band header (click a band header to display the Smart Tag icon), and make the following changes to the band settings:
Multi-Column Mode = Use column count
Multi-Column Direction = First Across, then Down
Column Count = 2
The area to the right of the content in GroupHeader1 and Detail1 bands will now be grayed out.
| 8. | Click the Print Preview tab on the Ribbon again to preview the report - you will now see the thumbnails and mockup title span two columns. |
Adding Mockup details section
| 9. | Now we are going to add the details section, where there will be a full-sized image of mockup as well as a list of all the Button controls. |
Insert a new unbound Detail Report. Change the Data Member to Mockups -> #Buttons
Insert Band -> GroupHeader - results in a GroupHeader2 band being added.
Insert Detail Report -> #Buttons - results in a DetailReport2 + Detail3 band being added.
On Detail3 band, Insert Band -> GroupHeader - results in GroupHeader3 band being added
Drop a Label from the Tool Box onto GroupHeader2 and set the text to Full Size and change text settings as desired.
Ensure Detail2 band is selected (click on it).
From the Field List, drop ShortFilename onto Detail2 band area.
Drop Image onto Detail2 band area, and set sizing mode to Auto-Size. Auto-Size means the image control will resize to the actual size of the image.
It is STRONGLY recommended to manually resize the image control to the size of your mockups. Unlike Balsamiq PDF export, each page in the report is the same size and it not scaled to the size of the mockup.
Drag a Label onto GroupHeader3 and change the text to 'Controls'.
Click on the Detail3 band, and from the Field List (#Buttons should already be highlighted now), expand #Buttons, and drag Text, Height, and Image onto Detail3.
Change the sizing mode of the Image picture box to Auto-Size.
| 10. | Do a Print Preview. You will now see the Thumbnails section and the Full Size section. Notice that you can also see a summary of all the Buttons as well as the image. |
You may have to play around with the full sized image to get it right.
Bookmarks and clickable links
| 11. | Nearly there. We will now create bookmarks and make the images and mockup names in the Thumbnail section link through to the full sized image. |
Click the 'Thumbnails' label in GroupHeader1 band. In the Property Grid, locate Bookmark in the Navigation category. Set it to 'Thumbnails'.
Change Name to 'ThumbnailsLabel'.
Click the Image picture box in Detail1 band. In the Property Grid, locate Parent Bookmark in the Navigation category. Set it to 'ThumbnailsLabel'.
In the Data category, change Tag to 'CreateLinks:{ShortFilename}'. This is special markup code for the report generator. It will create links on the image to the full sized mockup ShortFilename label placed further down the report.
Expand Bookmark under (Data Bindings), and in the Binding drop down box, select ShortFilename (the displayed tree is identical to the Field List)
Click the '[ShortFilename]' label in Detail1 band.
Change Tag text to 'Link:{ShortFilename}'.
Click the 'Full Size' label in GroupHeader2 band. In the Property Grid, locate Bookmark in the Navigation category. Set it to 'Full Size'.
Change Name to 'FullSizeLabel'.
Click the '[ShortFilename]' label in Detail2 band.
Change Tag text to 'Link:{ShortFilename}'.
Click the Image picture box in Detail2 band. In the Property Grid, locate Parent Bookmark in the Navigation category. Set it to 'FullSizeLabel'.
In the Data category, change Tag to 'CreateLinks:{ShortFilename}'.
Expand Bookmark under (Data Bindings), and in the Binding drop down box, select ShortFilename (the displayed tree is identical to the Field List)
Now preview the report - you will see the Bookmarks tree on the left of the report, and red boxes around the clickable areas in the mockup images.
You can also click the Mockup short filename label to jump to the full sized image.
| 12. | On the Property Grid, ensue looksieReport1 is selected, scroll down the properties list until you find the category Data, and change the Data Source to None. |
Explained |
The loaded mockups are the source data for the report. Usually, a report will just utilize source data once, but in this case we are repeating the use of the source data (mockups) - once for the thumbnails, and once for the full-sized image sections. So we are now creating two separate parts of the report. For more on Report Bands check out this introduction here |
Report Done
Don't forget to save the report, the best place is the XemWare\Looksie\Reports directory under your My Documents directory.
If you have any trouble, refer to the BalsamiqWithLinks report template that ships with Looksie.