Chris' Cairo Blog

CairoPNGImageView How-To

Cairo PNG Image View

An instance of a CairoPNGImageView

  1. Select the Cairo PNG Image icon from the Palette (circled in red above) and drop it onto your canvas.
    • The initial state of this view is shown above. Since there isn’t a model assigned to it, you’ll get an empty square.
  2. From the Cairo PNG Image Basics tab, enter the accessor method selector in the Aspect: field.
    • There are two possible approaches when assigning  your accessor method selector.
      • Static
        • Use the CairoPNGImageTool to install an image on the class side of your application model.
        • Enter the method name of the image selector in the Aspect: field and press Apply.
        • Your image should appear on the canvas.
      • Dynamic
        • Just enter the accessor method selector to be used during runtime in the Aspect: field.
        • Your accessor method should return a value holder on the following wrapper hierarchy
          • CairoTransparencyGridWrapper on a CairoTransformWrapper on a CairoPNGImage
        • Yes…the view’s model is part of its own visual wrapper hierarchy.
        • To see an example of the view used to display a dynamic PNG model, look at the CairoPNGImageTool application model found in the CairoUtilityToolsKit package. You’ll see how a CairoPNGImage gets dynamically wrapped to become the view’s model.

Option Tabs

Cairo PNG Image Basics

Aspect: used to enter the accessor method selector.
ID: The identifying name for the view.
Automatically resize for image: Used to automatically resize the container bounds when defining static images.
Layout for full transform: Resizes the bounds of the view to allow for full widget transformation (e.g. rotation, scale, etc…)
Image Size (Pixels): Initialized with image bounds when using static PNG images.


Show Layout Container Border: Used to enable / disable the layout wrapper’s border.
Show Transparency Grid: Used to enable the view’s transparency checker board grid.
Grid size: Sets the grid size of the transparency grid.
Layout Container Scroll Bars: Enables / disables the layout wrapper’s scroll bars.
Initially Invisible: Controls image visibility at runtime.


The various controls in this tab behave the same way as traditional VisualWorks components. Please see your VisualWorks documentation for details.


The various controls and mouse trackers in this tab are described in the Transform Tab page.


Leave a Comment »

No comments yet.

RSS feed for comments on this post.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at

%d bloggers like this: