Managing dialogs (multiple screens): Customizing the Fade-In/Out Transition

The Mosaic framework implements functionality to manage multiple Dialogs. During the runtime of the GUI application, the user can navigate between the diverse Dialogs forth and back. If desired, you can create and configure transition objects determining animations to be performed when the Dialogs are presented or dismissed again. Once the transition object is available, you can pass it in the argument list in the invocation of the method PresentDialog(), DismissDialog() or SwitchToDialog().

This chapter describes how to create and configure an object for the Fade-In or Out Dialog Transition. This transition represents an animation affecting the opacity of the respective Dialog GUI components. When using the transition to show the Dialog, the Dialog is automatically arranged within predetermined area of its owner component (per default in center of the owner). This transition object is thus ideal wherever the Dialog component should smoothly appear or disappear in context of another component.

The following sections are intended to provide you an introduction and useful tips of how to deal with the Fade-In or Out Dialog Transition object. For the complete reference please see the documentation of the Effects::FadeInOutTransition class.

Add new 'Fade-In or Out' Dialog Transition object

Depending on your application case, you have the option to add the Transition object as an embedded object directly to a GUI component or to add it as an autoobject to a unit. The first case is suitable if you want the Transition object to be used only locally within the GUI component. The second case, in turn, is appropriate if you intend to share the Transition object among multiple GUI components like a kind of common resource.

To add a new Transition object do following:

Depending on your preferred option switch to the Composer page for the respective GUI component class or the unit where you want to add the Transition object.

Then ensure that the Templates window is visible.

In Templates window switch to the folder Effects.

In the folder locate the template Fade-In or Out Dialog Transition.

Drag & Drop the template into the Composer window:

Eventually name the new added Transition object.

Inspect the 'Fade-In or Out' Dialog Transition object

As long as the Transition object is selected you can inspect and modify its properties conveniently in the Inspector window as demonstrated with the property Duration in the screenshot below:

This is in so far worth mentioning as the following sections describe diverse features of the Transition object by explicitly referring to its corresponding properties. If you are not familiar with the concept of a property and the usage of Inspector window, please read first the preceding chapter Compositing component appearance.

Configure how to arrange the Dialog within its owner

When the transition is used to show a Dialog, the transition uses diverse constraint properties to calculate the adequate position where to arrange the Dialog within the boundary area of its owner. Per default, the Dialogs are centered within the available area.

First at all, with the property Alignment you can determine how the Dialogs should be arranged vertically and horizontally. For example, you can decide to arrange the Dialogs to appear always aligned to the bottom-left corner of their respective owners. Or, you configure the transition to align the Dialogs to their owners top edge and to center them horizontally.

The property Alignment is declared as Effects::DialogAlignment, a set data type, which means that you can activate and deactivate the various alignment options individually. For example, deactivating the option AlignHorzCenter and activating the option AlignHorzLeft will configure the transition to always arrange the Dialogs aligned to the left edge of their respective owners. Similarly, the constraints for the vertical alignment can be configured individually.

With the properties MarginLeft, MarginTop, MarginRight, MarginBottom you can limit the boundary area of the owner components intended to arrange the Dialogs. For example, if you want the Dialogs to always appear centered in the upper area of their respective owners, configure the property MarginBottom accordingly. The following figure demonstrates the effect of the here described configuration properties:

Configure the duration of the transition

Per default, the Fade-In or Out Transition takes 500 ms for its animation. With the property Duration you can specify another value in milliseconds.

Configure the buffered mode of the transition

During the animation, the Transition object modifies the opacity of the affected Dialog component. As described in the section Control the visibility of nested components, modifying the opacity of the GUI component is per default applied directly to every view nested within this component.

This behavior can be changed if you set the property Buffered to the value true. Now, the affected Dialog component will manage temporarily an off-screen image of its actual content. Then this image is used to display the component instead of drawing its contents again and again during the transition animation. As consequence, the screen update is optimized.

CAUTION

Please consider, that with enabling the buffered mode, the Transition object will cause the affected Dialog component to reserve memory for an internal bitmap to store its image inside. The size of the bitmap corresponds to the actual size of the component. In other words, a 200x100 pixel large Dialog component will be buffered with a 200x100 pixel large bitmap. Assuming you are working with the RGBA4444 (16-bit per pixel) Platform Package, then the bitmap would occupy ~40 KB of the RAM. Thus, if RAM is a scarce resource in your target device, you should use the buffering mode with prudence.