[Accessibility conventions are described at the bottom of the page]
12. Interactive objects
[> 13.][< 11.2.5][^^^]
12.0 Dynamic and interactive object rendering
[> 12.1][> 13.][< 12.][^^][^^^]
An electronic canvas can offer an active presentation of content
[[1] - operator interaction can influence presentation
[[2] - the use of interactive formatting objects can equip the operator to present the content as desired from multiple alternatives
[2] - the state of an interactive object can be reflected based on previous interaction or lack thereof
][1] - dynamically changing presentation
[[2] - not restricted to a single static rendering of the information
]]
Two areas where interactivity can influence presentation
[[1] - reflecting the active state of a linked object using different property values
[[2] - a link can be but hasn't yet been traversed (future potential for visitation)
[2] - a link would be traversed (under a hovering pointer)
[2] - a link that is about to be traversed (has the user interface focus)
[2] - a link that is in the process of being traversed (is active)
[2] - a link has been traversed (past visitation)
][1] - selecting and switching between alternate available presentations using different sub-trees of formatting objects
[[2] - e.g. a dynamically expandable and collapsible table of contents rendering
[2] - HTML pages accomplish this in an imperative fashion with scripting in a programming language
[2] - XSL-FO 1.0 pages accomplish this in a declarative fashion by describing transition paths in a state machine, without having
to implement the imperative logic behind the state machine
]]
Formatting objects related to dynamic properties are:
[[1] - <[multi-properties]> ([6.9.6])
[[2] - the collection of candidate property sets from which exactly one set influences the properties of a formatting object based
on its status or the status of operator interaction
][1] - <[multi-property-set]> ([6.9.7])
[[2] - the set of properties associated with a single possible state of a formatting object or operator interaction
]]
Formatting objects related to dynamic presentation are:
[[1] - <[multi-switch]> ([6.9.3])
[[2] - the collection of candidate formatting object sequences from which exactly one is rendered at any given time based on an interactive
condition that is influenced by the operator while being tracked by the formatter
][1] - <[multi-case]> ([6.9.4])
[[2] - a single formatting object sequence that is a candidate for rendering based on an interactive condition that is influenced
by the operator while being tracked by the formatter
][1] - <[multi-toggle]> ([6.9.5])
[[2] - the definition of those interaction-sensitive objects within a candidate rendered sequence of formatting objects
]]
12.1 Reflecting formatting object state by appearance
[> 12.2][< 12.0][^^][^^^]
12.1.1 Dynamically changing property values
[> 12.1.2][> 12.2][> 13.][< 12.0][^^][^^^]
The formatting object sub-trees sensitive to state reflection are wrapped by a <[multi-properties]> object
[[1] - collects the sets of properties and those descendent areas that are to be sensitive to operator interaction
[1] - may specify default values for properties to be inherited by descendent areas
[1] - each <[multi-property-set]/> object captures the properties for a given state
[[2] - use [active-state]= to specify the state for the collection of properties
][1] - any, some, or all of the following states can have associated properties
[[2] - "link" (unvisited)
[[3] - true when a descendant <[basic-link]> object hasn't yet been visited
][2] - "hover"
[[3] - true when a descendant area is under the influence of some pointing device, yet without activation of the interactivity
][2] - "focus"
[[3] - true when a descendant area is the focus of operator interactivity (e.g. the user has tabbed to the hyperlink rather than
using a pointing device)
][2] - "active"
[[3] - true when a descendant area is being activated by operator interactivity (e.g. the time while the pointing device button is
being pressed before being released)
][2] - "visited"
[[3] - true when a descendant <[basic-link]> object has already been visited
]]]
A <[multi-properties]> object is a neutral construct
[[1] - in general can be used anywhere the formatting objects it wraps can be used
]
The objects that are to be rendered are captured in the <[wrapper]> object
[[1] - merges inherited properties with those sibling properties associated with current state by using merge-property-values() function
[[2] - regular ancestor inheritance during formatting object tree refinement would miss the sibling <[multi-property-set]/> constructs
[2] - this function cannot be used with any other formatting object, nor with a <[wrapper]> that has any other parent object
][1] - may specify any other inheritable properties for descendant constructs
]
[Figure 12.1: Structuring multiple sets of properties for a sequence of formatting objects
An illustration of the nesting structure of multi-properties-related constructs is shown by nested boxes, each labeled with
the formatting object that creates the construct.
The <[multi-properties]> object contains a number of <[multi-property-set]> child objects followed by a <[wrapper]> object.
The <[wrapper]> object contains a number of property attributes and contained rendered formatting objects.
]
12.1.2 <multi-properties> Object
[> 12.1.3][> 12.2][> 13.][< 12.1.1][^][^^][^^^]
Purpose:
[[1] - the collection of candidate property sets from which exactly one set influences the properties of a formatting object based
on its status or the status of user interaction
[[2] - supports reserved states for the <[basic-link]> object
]]
Content:
[[1] - ([6.9.6]) ([multi-property-set]+,[wrapper])
[1] - Child objects (alphabetical):
[[2] - <[multi-property-set]>([6.9.7];[Section 12.1.3 <multi-property-set> Object])
[2] - <[wrapper]>([6.13.4];[Section 4.2.2 <wrapper> Object])
]]
Property sets:
[[1] - [Common Accessibility Properties]([7.5];[Section D.1.2 Common Accessibility Properties])
]
No other properties are defined for this formatting object.
Function of interest:
[[1] - [merge-property-values]() is used on the <[wrapper]> object that is ancestral to the formatting objects being rendered
[[2] - merges the corresponding property from the properties specified for the active <[multi-property-set]> according to its state
]]
Consider the need to reproduce typical browser colors for an unvisited and visited link
[[1] - blue when not yet visited
[1] - purple when already visited
]
[Example 12-1: An example of using dynamic formatting properties
The following example is from samp/multi1.fo:
01 <block>This is a link:
02 <multi-properties>
03 <multi-property-set active-state="link" color="blue"/>
04 <multi-property-set active-state="visited" color="purple"/>
05 <wrapper color="merge-property-values()">
06 <basic-link
07 external-destination="http://www.CraneSoftwrights.com"
08 >http://www.CraneSoftwrights.com</basic-link>
09 </wrapper>
10 </multi-properties>
11 : end of block.
12 </block>
]
12.1.3 <multi-property-set> Object
[> 12.2][> 13.][< 12.1.2][^][^^][^^^]
Purpose:
[[1] - the set of properties associated with a single possible state of a formatting object or user interaction
]
Content:
[[1] - ([6.9.7]) EMPTY
[1] - Referring object:
[[2] - <[multi-properties]>([6.9.6];[Section 12.1.2 <multi-properties> Object])
]]
Required property:
[active-state=]([7.23.1];[Section D.3.3 Property summary])
Optional properties:
[id=]([7.30.8];[Section D.3.3 Property summary])
[F1.1][index-class=]([7.24.1];[Section D.3.3 Property summary])
[F1.1][index-key=]([7.24.2];[Section D.3.3 Property summary])
[Example 12-2: An example of using dynamic formatting properties
Continuing from samp/multi1.fo:
01 <block>This is a link:
02 <multi-properties>
03 <multi-property-set active-state="link" color="blue"/>
04 <multi-property-set active-state="visited" color="purple"/>
05 <wrapper color="merge-property-values()">
06 <basic-link
07 external-destination="http://www.CraneSoftwrights.com"
08 >http://www.CraneSoftwrights.com</basic-link>
09 </wrapper>
10 </multi-properties>
11 : end of block.
12 </block>
]
12.2 Interactively changing the effective flow
[> 13.][< 12.1.3][^^][^^^]
12.2.1 Dynamically changing formatting object sub-trees
[> 12.2.2][> 13.][< 12.1.3][^^][^^^]
The formatting objects participating in two or more renderings with dynamic changes are wrapped by a <[multi-switch]> object
[[1] - separated into individual mutually exclusive conditions
[1] - always exactly one condition shown at a time
[[2] - all other conditions are hidden when not shown
][1] - operator interactivity can change which condition is shown
[[2] - the action of doing so will hide all conditions not being shown
]]
Individual conditions are wrapped by child <[multi-case]> objects
[[1] - one such child per condition
[1] - named for reference purposes as the target of a toggle
[1] - titled for display purposes when selecting from a number of cases
]
Changing which condition is shown is enabled by the <[multi-toggle]> object
[[1] - defines a "hot spot" on a page
[1] - surrounds the flow object sub-trees sensitive to operator interaction
[[2] - the essence of the operator interaction is defined by the formatter
][1] - can have any number of toggles in a given sequence for different behaviors
[[2] - each toggle can only change the current shown state of one other case
[[3] - may provide a list of case names from which the operator can choose
[[4] - the list is documented using the respective case titles
][3] - may cycle around sibling cases in either direction
][2] - can only change states amongst sibling <[multi-case]> objects
][1] - only sensitive areas need be surrounded, not the entire content
]
Descendent <[multi-switch]> objects in <[multi-switch]> objects can make for very rich presentation
[[1] - properties can accommodate an ancestor <[multi-switch]> object being hidden
[[2] - can restore the initial state of the descendent <[multi-switch]> object
[2] - the default is to preserve the active state in the descendant regardless of the behavior of the ancestor
][1] - can be nested to any depth
[1] - the stylesheet writer doesn't need to know programming but does need to understand basic concepts of changing state as in
state machines
]
The XSL-FO instance effectively implements a state machine
[[1] - initial state of which object sequence is shown
[[2] - others are hidden
][1] - transitions to subsequent state triggered by operator interaction
[[2] - showing another, hiding the one
][1] - restoration to initial state on ancestral change of state
[[2] - hiding the ancestor, possibly resetting the descendant
]]
[Figure 12.2: Changes in state reflecting the shown
An illustration of the nesting structure of multi-switch-related constructs is shown by nested boxes, each labeled with the
formatting object that creates the construct.
A single <[multi-switch]> contains two <[multi-case]> objects, each of which has rendered formatting objects and a <[multi-toggle]> object pointing to the other toggle's ancestral case.
Each <[multi-toggle]> construct contains rendered formatting objects.
]
12.2.2 <multi-switch> Object
[> 12.2.3][> 13.][< 12.2.1][^][^^][^^^]
Purpose:
[[1] - the collection of candidate formatting object sequences from which exactly one is rendered at any given time based on an interactive
condition that is influenced by the operator while being tracked by the formatter
]
Content:
[[1] - ([6.9.3]) ([multi-case]+)
[1] - Child object:
[[2] - <[multi-case]>([6.9.4];[Section 12.2.3 <multi-case> Object])
]]
Property sets:
[[1] - [Common Accessibility Properties]([7.5];[Section D.1.2 Common Accessibility Properties])
]
Other optional properties:
[auto-restore=]([7.23.2];[Section D.3.3 Property summary])
[id=]([7.30.8];[Section D.3.3 Property summary])
[F1.1][index-class=]([7.24.1];[Section D.3.3 Property summary])
[F1.1][index-key=]([7.24.2];[Section D.3.3 Property summary])
Property of interest:
[[1] - [auto-restore]= is used to indicate whether this <[multi-switch]> state is restored to its initial state when an ancestral <[multi-switch]> causes this <[multi-switch]> to be hidden
]
The following example is a mockup from samp/timesht.fo:
[Figure 12.3: Dynamic objects example snapshot 1
An image of the formatted timesheet is shown as the following:
[[1] - Monday: 9 hours
[1] - Tuesday: 10 hours
[1] - Wednesday: 6 hours
[1] - Thursday: 10 hours
[1] - Friday: 6 hours
]
]
Status of presentation:
[[1] - the results are presented without any user input
[1] - the stylesheet chooses to use underscore to indicate to the reader the hot text to click on to expand the entry
]
Continuing from samp/timesht.fo:
[Figure 12.4: Dynamic objects example snapshot 2
An image of the formatted timesheet is shown as the following:
[[1] - Monday: 9 hours
[1] - Tuesday: 10 hours
[1] - Wednesday: 6 hours
[1] - Thursday: (10 hours)
[[2] - email: 3 hours
[2] - office: 2 hours
[2] - writing: 2 hours
[2] - profdev: 3hours
][1] - Friday: 6 hours
]
]
Status of presentation:
[[1] - the operator has clicked on "Thursday", thus bringing up the drop-down timesheet values
[1] - the stylesheet again chooses to use underscore to indicate to the reader the hot text to click on to expand the entry
[1] - the stylesheet has used indentation to indicate to the reader that "Thursday" can be clicked on to collapse the entry
]
Continuing from samp/timesht.fo:
[Figure 12.5: Dynamic objects example snapshot 3
An image of the formatted timesheet is shown as the following:
[[1] - Monday: 9 hours
[1] - Tuesday: 10 hours
[1] - Wednesday: 6 hours
[1] - Thursday: (10 hours)
[[2] - email: 3 hours
[2] - office: 2 hours
[2] - writing:
[[3] - pfux: 2 hours
][2] - profdev: 3hours
][1] - Friday: 6 hours
]
]
Status of presentation:
[[1] - the operator has clicked on "writing", thus bringing up the drop-down timesheet values
[1] - collapsing the "Thursday" again will restore the original state of "writing" to be collapsed
]
[Example 12-3: Mockup of interactive markup
An excerpt from samp/timesht.fo:
01 <list-block>
02 ...
03 <multi-switch auto-restore="true">
04 <multi-case case-title="Roll-up writing"
05 case-name="roll-up" starting-state="show">
06 <list-item>
07 <list-item-label><block>-</block></list-item-label>
08 <list-item-body start-indent="body-start()">
09 <block text-decoration="underline">
10 <multi-toggle switch-to="roll-down"
11 >writing: 2 hours</multi-toggle>
12 </block>
13 </list-item-body>
14 </list-item>
15 </multi-case>
16 <multi-case case-title="Roll-down writing"
17 case-name="roll-down" starting-state="hide">
18 <list-item>
19 <list-item-label><block>-</block></list-item-label>
20 <list-item-body start-indent="body-start()">
21 <block>
22 <multi-toggle switch-to="roll-up"
23 >writing: </multi-toggle>
24 </block>
25 <list-block>
26 <list-item>
27 <list-item-label><block>-</block></list-item-label>
28 <list-item-body start-indent="body-start()">
29 <block>pfux: 2 hours</block>
30 </list-item-body>
31 </list-item>
32 </list-block>
33 </list-item-body>
34 </list-item>
35 </multi-case>
36 </multi-switch>
37 ...
38 </list-block>
]
12.2.3 <multi-case> Object
[> 12.2.4][> 13.][< 12.2.2][^][^^][^^^]
Purpose:
[[1] - a single formatting object sequence that is a candidate for rendering based on an interactive condition that is influenced
by the operator while being tracked by the formatter
[[2] - comprised of interaction-sensitive (using <[multi-toggle]>) and interaction-insensitive (using other) formatting objects
]]
Content:
[[1] - ([6.9.4]) (#PCDATA|[%inline;]|[%block;])*
[1] - Child objects (alphabetical):
[[2] - [%block;]([6.2];[Section 3.4.2 Block-level objects])
[2] - [%inline;]([6.2];[Section 3.4.3 Inline-level objects])
][1] - Referring object:
[[2] - <[multi-switch]>([6.9.3];[Section 12.2.2 <multi-switch> Object])
]]
Property sets:
[[1] - [Common Accessibility Properties]([7.5];[Section D.1.2 Common Accessibility Properties])
]
Other required properties:
[case-name=]([7.23.3];[Section D.3.3 Property summary])
[case-title=]([7.23.4];[Section D.3.3 Property summary])
Other optional properties:
[id=]([7.30.8];[Section D.3.3 Property summary])
[F1.1][index-class=]([7.24.1];[Section D.3.3 Property summary])
[F1.1][index-key=]([7.24.2];[Section D.3.3 Property summary])
[starting-state=]([7.23.10];[Section D.3.3 Property summary])
[Example 12-4: Mockup of interactive markup
Again from the excerpt of samp/timesht.fo:
01 <list-block>
02 ...
03 <multi-switch auto-restore="true">
04 <multi-case case-title="Roll-up writing"
05 case-name="roll-up" starting-state="show">
06 <list-item>
07 <list-item-label><block>-</block></list-item-label>
08 <list-item-body start-indent="body-start()">
09 <block text-decoration="underline">
10 <multi-toggle switch-to="roll-down"
11 >writing: 2 hours</multi-toggle>
12 </block>
13 </list-item-body>
14 </list-item>
15 </multi-case>
16 <multi-case case-title="Roll-down writing"
17 case-name="roll-down" starting-state="hide">
18 <list-item>
19 <list-item-label><block>-</block></list-item-label>
20 <list-item-body start-indent="body-start()">
21 <block>
22 <multi-toggle switch-to="roll-up"
23 >writing: </multi-toggle>
24 </block>
25 <list-block>
26 <list-item>
27 <list-item-label><block>-</block></list-item-label>
28 <list-item-body start-indent="body-start()">
29 <block>pfux: 2 hours</block>
30 </list-item-body>
31 </list-item>
32 </list-block>
33 </list-item-body>
34 </list-item>
35 </multi-case>
36 </multi-switch>
37 ...
38 </list-block>
]
12.2.4 <multi-toggle> Object
[> 13.][< 12.2.3][^][^^][^^^]
Purpose:
[[1] - the definition of those interaction-sensitive objects within a candidate rendered sequence of formatting objects
[[2] - specifies which candidate sequence is to be the rendered sequence as a result of the interaction
]]
Content:
[[1] - ([6.9.5]) (#PCDATA|[%inline;]|[%block;])*
[1] - Child objects (alphabetical):
[[2] - [%block;]([6.2];[Section 3.4.2 Block-level objects])
[2] - [%inline;]([6.2];[Section 3.4.3 Inline-level objects])
]]
[[1] - must be a descendant of <[multi-case]>
]
Property sets:
[[1] - [Common Accessibility Properties]([7.5];[Section D.1.2 Common Accessibility Properties])
]
Other optional properties:
[id=]([7.30.8];[Section D.3.3 Property summary])
[F1.1][index-class=]([7.24.1];[Section D.3.3 Property summary])
[F1.1][index-key=]([7.24.2];[Section D.3.3 Property summary])
[switch-to=]([7.23.11];[Section D.3.3 Property summary])
[Example 12-5: Mockup of interactive markup
Again from the excerpt samp/timesht.fo:
01 <list-block>
02 ...
03 <multi-switch auto-restore="true">
04 <multi-case case-title="Roll-up writing"
05 case-name="roll-up" starting-state="show">
06 <list-item>
07 <list-item-label><block>-</block></list-item-label>
08 <list-item-body start-indent="body-start()">
09 <block text-decoration="underline">
10 <multi-toggle switch-to="roll-down"
11 >writing: 2 hours</multi-toggle>
12 </block>
13 </list-item-body>
14 </list-item>
15 </multi-case>
16 <multi-case case-title="Roll-down writing"
17 case-name="roll-down" starting-state="hide">
18 <list-item>
19 <list-item-label><block>-</block></list-item-label>
20 <list-item-body start-indent="body-start()">
21 <block>
22 <multi-toggle switch-to="roll-up"
23 >writing: </multi-toggle>
24 </block>
25 <list-block>
26 <list-item>
27 <list-item-label><block>-</block></list-item-label>
28 <list-item-body start-indent="body-start()">
29 <block>pfux: 2 hours</block>
30 </list-item-body>
31 </list-item>
32 </list-block>
33 </list-item-body>
34 </list-item>
35 </multi-case>
36 </multi-switch>
37 ...
38 </list-block>
]
This is an accessible version of Crane's commercial training material.
The content has been specifically designed to assist screen reader software
in viewing the entire textual content. Figures are replaced with text
narratives.
Navigation hints are in square brackets:
[Tx.x] and [Fx.x] are textual representations of the applicability icons;
[digit] indicates list depth for nested lists;
[link [URL]] indicates the URL of a hyperlink if different than link;
[EXAMPLE] indicates an example listing of code;
[FIGURE] indicates the presence of a figure replaced by its description;
[>] jumps forward;
[<] jumps backward;
[^] jumps to start of the section;
[^^] jumps to the start of the chapter;
[^^^] jumps to the table of contents.
Suggestions for improvement are welcome:
[info@CraneSoftwrights.com]
Book sales: [http://www.CraneSoftwrights.com/links/trn-acc.htm]
Information: [http://www.CraneSoftwrights.com/links/info-acc.htm]
This content is protected by copyright and, as there are no means to protect
this accessible version from plagiarism, please do not make any
commercial edition available to others.
+//ISBN 978-1-894049::CSL::Courses::PFUX//DOCUMENT Practical Formatting Using XSL-FO 2008-01-27 17:30UTC//EN
Practical Formatting Using XSL-FO
Seventh Edition - 2008-01-27
ISBN 978-1-894049-19-1
Copyright © Crane Softwrights Ltd.