Learn to report on UML models through pictures
By Colin Coates
Version 11 of Sparx Enterprise Architect included significantly enhanced reporting facilities. This was worthy of some celebration, and so I contributed an article to the Sparx Community that illustrated the improvements through a couple of UML diagrams. This was quite well received, and resulted in me being featured in a Community Author Spotlight on sparxsystems.com (thanks, Scott)!
Emboldened by all this action around reporting on models using the functionality that’s already built into Sparx Enterprise Architect, I decided to apply immersive language learning techniques in both the refresh of our classroom based training materials, along with a brand new e-learning course (email us for details via firstname.lastname@example.org).
So the idea is to enable learning how to use Sparx Enterprise Architect through (UML) pictures. So what does that look like? Here is a taster, around the “Publish as HTML” functionality of Sparx Enterprise Architect.
Overview of reporting
Sparx Enterprise Architect provides two built-in reporting mechanisms:
- Generate Documentation
- HTML Report
About Generate Documentation
Generate Documentation is used to publish complete and fully formatted documents in a variety of file formats, that are also suitable for printing in hardcopy. The use of report templates enables a fine degree of control over presentation of contents. Report contents can be selected, searched for and filtered. Sub-templates can be used to include contents based on advanced selections, SQL queries and/or scripted functions.
About Generate HTML Report
HTML Reports are used to publish models as a collection of HTML pages and images, automatically structured into a hierarchy of directories. HTML reports can be shared on a Web server, or conveniently zipped into an archive for distribution via email. HTML reports offer relatively limited support for customizing the report content and presentation when compared with the functionality for Generate Documentation.
Publish as HTML process
- You can right-click a package in the project browser, or right-click a Master Document element on a Documentation diagram, to begin publishing a HTML report.
- Click Documentation | HTML report.
- The Publish as HTML dialog window is displayed.
About the Publish as HTML dialog
The Publish as HTML window is relatively simple to navigate, assuming a top to bottom and left to right workflow. Let’s get started with a scenario for publishing a basic HTML report.
Generate a HTML report
- The Publish as HTML window is displayed.
- Use the keyboard to type something like C:\Users\ccoates\Documents\MyReport into the Output to edit field.
- Click Generate.
- Click View.
Example HTML report
Your first report features the content of your model, formatted according to the default HTML template selections. This includes the Sparx Enterprise Architect logo branding. You can now continue to create a custom HTML template that will replace the default logo with customized company branding.
Select your header image and re-publish
- Use your keyboard to type something like C:\Users\ccoates\Pictures\example.jpg into the Header Image edit field (alternatively, you could click the ellipsis button and browse for an image file).
- Click Generate.
Problem: mismatched image and frame heights
You will see that the Dunstan Thomas logo is too large to fit within the available frame. You could just resize the logo image, but that might contravene the rules set by your companies marketing and branding departments. As a better alternative, you will now resize the frame to fit around the selected logo image.
Create HTML template
- Click to expand the Document Generation | Web Style Templates
- Right-click Web Style Templates; a menu is displayed.
- Click Create HTML Template.
- Use the keyboard to type MyReport into the Enter Value edit field.
- Click OK.
Change height of .IndexBody
- The HTML and CSS Style Editor window is displayed.
- Click the CSS – Main item in the list of Templates.
- Press Control-F on your keyboard to start a text search, and then type “.IndexBody” and the enter key. If you need more help, please see below for the detailed section on “Find and replace”.
- Use the keyboard to replace top: 61px with something like top: 91px (actually, the new image height + 1).
- Continue onto Change height of .IndexHeader.
Change height of .IndexHeader
- Click inside the Current Modified Template edit field.
- Press the Control and F keys on your keyboard (the standard Windows keyboard shortcut to start a search).
- Search for the text .indexHeader; refer to the section below about Find and replace, if you need more help.
- Change height: 60px to match the height of your selected image, like in the example sequence diagram below.
- Click Save.
- Click Close.
Find and replace
- The Find and Replace window is displayed.
- Use the keyboard to type .indexHeader into the Find what edit box.
- Click (to set) the Match whole word check-box.
- Click the Find Next
Re-publish and check image
- Use right-click to open the Publish as HTML
- Click Generate.
- Click View.
The finished HTML report
The framing of the HTML page has been resized to fit the company logo. This concludes the basic introduction to how to create custom HTML report templates.