Intuitive User Interface Features

Here at Altova we like to share user interface features across products to give the MissionKit a consistent look and feel, and to help users leverage experience gained using one tool to get up to speed more quickly with the others. In version 2012 we introduced new visual alignment guides in both UModel and MapForce to make it easy to work very rapidly, yet still produce a neat, organized result that communicates effectively with other team members. As users drag elements in the diagram window, alignment snap lines appear automatically to allow any component to align with any other component. UML class diagram in Altova UModel In the UModel class diagram shown above, the developer has collapsed the properties and operations compartments to concentrate on class associations. As the CheckingAccount subclass is dragged upwards on the screen, a visual alignment guide appears and offers instant snap-to alignment with the other subclasses of the Account class. Complex data mappings in Altova MapForce might include dozens of components, functions and constants, and visual alignment guides can help organize the mapping view. In the screenshot below, the developer used alignment guides to collect split-name functions together, while concat functions are aligned in a separate group. Altova MapForce data mapping Constructing the mapping diagram this way can greatly clarify the developer’s intent when multiple complex string manipulations are needed! Of course, aligned components also improve the value of printed diagrams that become part of the permanent documentation for UModel and MapForce projects. We also understand that not everyone likes to work the same way. If you prefer not to see guide lines and to turn off automatic alignment, this feature can be deselected in the Tools / Options menu selection in both UModel and MapForce. If you’d like to see for yourself how intuitively tools in the Altova MissionKit 2012 work together, click here to download a free trial!

Tags: , , , , ,

Get More Mileage from Your StyleVision Designs with Dynamic Selection of CSS Files

One of the great things about StyleVision is the flexibility that it affords. With StyleVision you can design visually sophisticated stylesheets and reports for output to multiple formats including HTML, PDF, and Authentic electronic forms. Now StyleVision makes it even easier to accommodate different formatting needs in a single design with dynamic selection of CSS files – a new feature introduced in StyleVision 2012.

Although you can still manage virtually all formatting tasks from the StyleVision design itself, dynamic selection of CSS files means that you can create a single template for use in multiple situations. To demonstrate, we’ve created an invoice for the fictional Nanonull Corporation for which the design changes based on the number of days that have elapsed between the invoice issue date and the due date. Although we could have used XPath to change the formatting of each element based on the number of days that have elapsed, in this case it is more efficient to create individual CSS files that apply to different scenarios.

Below is the invoice that we designed in StyleVision. Notice that beyond the bold headings it is almost devoid of formatting – we’ll be applying formatting based on the number of days that have elapsed between the invoice issue date and the due date via CSS files.

Now we can create our CSS files in XMLSpy, Altova’s XML editor with integrated support for editing CSS2 and CSS3.

First we’ll create a CSS file for invoices with due dates after the invoice issue date (i.e., invoices that are not overdue). Here we’ve simply created the body selector with a yellowish background and the Nanonull logo and a header class.

Now we’ll create a more elaborate CSS for overdue invoices. The body selector will include a past due image, the paragraph selector will have 20 point bold red font, and the header and small header classes will have red bold font in different sizes.
Now we can assign the CSS files to the StyleVision design and subsequently assign classes to different design elements.
In StyleVision, we simply click add new CSS file in the Design Overview and navigate to the CSS files we created in XMLSpy – StyleVision supports multiple CSS files in the same design.
Our design now looks like this – notice that formatting from both CSSRegular and CSSOverdue have been applied in StyleVision design view.
However we would like to assign the CSS file based on the distance between the invoice issue date and the due date. Therefore, we’ll right click on the arrow next to the CSS file in the Design Overview and choose Select One CSS File with XPath (below).
This will invoke the Select CSS File Using XPath dialog box (below). We can use XPath in this dialog box to select the appropriate CSS file based on dynamic input – here we’ve instructed StyleVision to use the CSSOverdue.css file if the invoice due date precedes the invoice issue date and the CSSRegular.css file in all other cases.
Here is the complete XPath we entered into the Select CSS File Using XPath dialog box above.
Now we can assign the classes defined in the CSS files to individual design elements in the StyleVision design.
Here we’ve assigned the paragraph containing the text “Invoice” to the class “header “ in the Styles pane – based on the contents of our CSS files this text will appear in red 20 point bold font for overdue invoices and black 20 point bold for invoices whose due date is in the future.
Likewise, we’ll assign the invoice due date to the class “small header.”
Now we’re ready to preview the invoice.
Below is the HTML preview for an overdue invoice – note that the text “Invoice” and the due date are in red bold font and that Past Due image is stamped in the middle.

Now let’s look at the same invoice with a due date in the future – note the yellow background, Nanonull logo, and that “Invoice” and the due date appear in black.

The ability to select a CSS file based on dynamic input opens up a wealth of possibilities and makes your StyleVision designs even more adaptable. With this feature, you can make formatting changes on the fly via the CSS files associated with a design – especially handy for designs with many elements.
Created a great project using the StyleVision stylesheet and report designer or any of Altova’s other tools and want to show it off? Please share your story with other Altova users by commenting on this blog post.
If you think it would make a great case study please visit the Altova case studies page – if we use your story you’ll receive a $200 Amazon gift card. We’d love to hear from you!

XML Editor Supports HTML5 and CSS3

The Altova MissionKit Web tools received an important update with our recent Version 2012 release: support for HTML5 and CSS3. You’ll find support updated to include the most recent versions of these Web standards in both XMLSpy 2012 (and higher) for code editing and StyleVision 2012 for graphical stylesheet and report design.
Let’s focus on the HTML5 and CSS3 editors in XMLSpy here – StyleVision functionality will be covered in a future article.

HTML5 Editor

XMLSpy has long supported editing of HTML4 and, of course, XHTML – and now those intelligent coding features extend to HTML5.
If you’re already an XMLSpy user, you’ll immediately recognize the helpful syntax coloring, source folding, and line numbering in advanced Text View when you open your HTML5 file for editing. As you type, you’re presented with valid HTML5 element and attribute choices in a drop down menu as well as in static entry helper windows, so you can complete code in your preferred working style. At the same time, code completion helps you work faster while ensuring elements are closed properly.
These intelligent editing features are applicable to the version of HTML you’re working with – when you open an existing HTML5 document or start a new file from scratch, all the HTML5 elements and attributes are immediately available in the entry helper windows and drop down menu. Some of the most notable new elements in HTML5 include:

  • <video> and <audio> for media playback
  • <canvas> for dynamic rendering of 2D images
  • <article>, <section>, <header>, <footer>, and <nav> for including richer semantic information to describe content
  • <calendar>, <date>, <time>, and other form control elements
  • And so on

XMLSpy includes an integrated Browser View that lets you see the results of your HTML5 coding immediately. The Browser View renders your page using your installation of Internet Explorer directly in XMLSpy…
…but also allows you to immediately view your HTML5 Web page in an instance of any browser you have installed on your machine.
This allows for quick testing and debugging to ensure cross-browser compatibility.
To get an idea of how some of the new HTML5 features look in action, check out the simple HTML5 example document that is supplied in the XMLSpy 2012 Examples folder and linked from the Example project. To learn more about HTML, there are many excellent resources on the Web, including

CSS3 Editor

Working hand-in-hand with the HTML5 editor is the XMLSpy CSS3 editor, which also provides syntax coloring and entry helpers, as well as bookmarking and source folding in Text View.
A CSS Outline window displays an outline of the document organized by its selectors listed in groups. Each group can be collapsed and expanded, and clicking a selector in the CSS Outline highlights it in the document. CSS Properties and HTML elements entry helpers are shown in windows as well as context sensitive drop-down menus, and XMLSpy even includes screen tips that provide a definition of each property and its possible values as you type.

You can take advantage of XMLSpy’s integrated Browser View here, too, to see the results of your CSS edits immediately in a linked HTML page.


Why XMLSpy for HTML?

Sure, XMLSpy is known for all things XML, but it’s also a clear choice for HTML development. HTML5 and CSS3 editing in XMLSpy is facilitated by support for related technologies including XML, XSLT, WSDL, and others, as well as integrated project management functionality, support for popular version/source control systems, and Microsoft® SharePoint® Server integration – giving you all the tools you need to develop the next generation of Web sites and apps.

We’d love to hear how you’re using HTML5 now – please drop us a line by leaving a comment below.

Tags: , , , ,