CBA ItemBuilder Workshop: Session 03

Ulf Kroehne

Paris, 2022/11/07 - 2022/11/08

Session 03: Designing Static Pages

Overview Session 03

CBA ItemBuilder Pages

• Page Name and (Advanced) Page Settings
• Dialog Pages (Popups)
• Frame Components
• Links between Pages
• Page Areas and xPages
• Rarely Used Page Types

Page Name

Only letters, digits, and underscores are allowed. The first character must not be a digit.

• Each page within a CBA ItemBuilder project file needs a unique Page Name

  • Defined when creating a new page

  • Changed using the context menu (Project View > Page Settings)

Advanced Page Settings

Most often, pages of type simple are used in the size of the Presentation Size.

All Pages have …

• a page type (simple, web browser and web child, tabfolder and taskbar)

• a page size (defined as Width and Height of the automatically generated Frame component)

Page can be defined as …

• dialog pages (defined as Dialog-property of the Frame component)

Dialog Pages

Examples:

• The X and Y coordinate of the Frame defines the default position.
• Dialog pages configured as Closable can be moved.
• Transparency is used for non-rectangular dialog pages.

The Frame component is used to define properties of the dialog:

1. Popups that prevent all interactions with the underlying page are called MODAL_DIALOG dialog pages (versus DIALOG).

2. Dialog pages can be Closeable (showing a headline with a small x) or not closable (i.e., the test-taker can not close the dialog).

Frame Component

All pages require a Frame and typically contain at least one Panel (or use a PageArea).

• The Frame defines the page size (properties Width and Height of the Frame). A Panel is created by default inside the Frame (of same size and at X=0/Y=0).

• By default, a Frame (and Panel) is automatically generated for each page:

Page Areas

Pages can be embedded into other pages with PageAreas, but only a Frame can contain a PageAreas.

• Instead of Panels, Frames can also contain components of type PageArea.
• PageAreas can be used fur multiple purposes (e.g., to create scrollbars).
• To add a PageArea, the existing Panels need to be (temporary) resized:

X-Page Layouts

If a page part is to be permanently visible, this can be built with so-called X-Page Layouts.

• X-Pages can be place at the left, top, right and bottom and the X-Page layouts (defined for a Task) can allow resize:

• xPage as Tag the specifies a page (i.e., each page can be tagged as X-Page)
• Typically, links will only work within pages and within xPages (see Example)

Item Design Examples (1)

You are probably asking yourself, why is it all so complicated? The answer is simple:

• It doesn’t have to be complicated, as long as you are working with full-page items, you can safely ignore Page Areas and X-Pages.

• Different item designs as illustrated on this slide can be implemented with simple pages.

Item Design Examples (2)

However, to implement more complex item designs even with the CBA ItemBuilder, there are the following mechanisms:

• Page Areas, to insert pages into other pages.
• X-Pages, to keep one part of the page constant while only another part changes.
• Dialog Pages, if an additional information is to be displayed on a page in a window or at a certain place.

Links between Pages

The CBA ItemBuilder provides multiple mechanisms for switching from one page to another.

Links

• Like (regular) hyperlinks, components can be used to link to a different page (e.g., Link-component, Button-component, links embedded in Textfield-components etc.)

Conditional Links

• Like links, but the target page depends on a condition (e.g., a provided response)

The flag for xPages (and the Page Type) are used to structure how links between pages are resolved (e.g., xPages link to xPages, web child pages link to web child pages etc. ).

Now also the obvious: If items are designed with multiple pages, then links can be used to switch between pages.

The CBA ItemBuilder distinguishes two types of links:

• Simple links, where page A always switches to page B.

• Conditional links, which switch from page to another page depending on a definable condition.

Moreover, the page type and the x-page flag are used to resolve links. For instance, links placed on x-pages are changing the x-page, links on web child pages link to other web child pages etc.

Simulated Web Browsers

The CBA ItemBuilder provides two specific page types for simulated web browser (environments): web browser pages that can host web child pages.

Specific components

• Address bar (showing the property URL Text of the current page’s Frame)
• Navigation buttons (home, backward, forward) with history

Rarely Used Page Types

For special purposes, the CBA ItemBuilder provides two additional page types.

• Simulated computer environments (e.g., a Windows desktop): Task Bar Page

• For pages shown as multiple tabs: Tab Folder Page

(See cba.itembuilder.de for details.)

• Note that in the Task Bar Page example the start page is activated, when page 1 (e.g., application one) or page 2 (e.g., application two) are closed.

What Matters?

Pages designed with the CBA ItemBuilder are the starting point for different item designs. Simple pages are the default, and special page types are required only for some exceptions (e.g., Web browsers).

Static Layouts

• Simple Pages, xPage, and Page Areas
• Modal and Regular Dialog Pages

Multiple Pages

• Links and Conditional Links

Finite-State Machine

• Internal States can be assigned to Pages
• Change Pages shown in Page Areas
• Open / Close Dialog Pages

• Simple Simple Pages start the creation of items, and for many examples and applications this is quite sufficient.

• As briefly outlined on the slides, the CBA ItemBuilder provides a sophisticated concept for the use of pages to realize more complex scenarios.

End of Session 03: Static Pages

Helpful to remember

• Simple Pages are the typical page type.
• Each page requires exactly one Frame component.
• Page size is defined as Width and Height of the Frame component.

If you want to show additional information…

• Consider to use a dialog or a modal dialog (at variable positions),
• use a Page Area within a page (at a fixed position),
• or use unsetHidden()-operator (will be described on day two)

If you observe yourself repeating content on different pages…

• Consider either an X-Page layout,
• or to use Page Areas

• Now it’s time for another hands-on in session 04.

• What else have you learned?