Configuring an Accordion Menu
It is possible to create accordion menus, in which hidden contents are displayed by touching the screen.
After changing the Display/Collapsed of layout objects with visibility animation, the switch object location will be automatically adjusted by the Stack Panel and the object display will change.
For information about the function displaying hidden objects on screen, refer to the following.
Operation When Visibility Animation is Set Up
Example Operation
Touch the switch on the Stack Panel to display a collapsed layout object; the objects aligned thereafter will be moved downward. Touch the switch again to collapse the layout object.
Setting Workflow
This
setting example explains the procedure for setting an accordion menu
in addition to a screen created with "Configuring a Screen with
Multiple Sections.
Configuring
a Screen with Multiple Sections
Add Variables
Add a variable storing the [Visibility] property of the layout object.
Project Explorer: [Variables] → [All Variables]
Add the below variable(s).
;){kind=link}
Variable Properties
[Name] |
[Data Type] |
[Initial Value] |
Var2 |
[INT] | 2 |
Var3 |
[INT] | 2 |
Add Contents
Project Explorer: [Screen Design] → [Contents]
Add the below contents.
;){kind=link}
Content Properties
[Content ID] |
[Screen Type] |
2 |
[Scroll Canvas] |
3 |
[Scroll Canvas] |
4 |
[Scroll Canvas] |
To set the content color, click the drawing area in the document view and set in the property window.
When
designating colors with ID, the displayed colors will vary depending
on the [Color Set] in the [Tool Chest].
Color
Set
Project Explorer: [Screen Design] → [Contents] → [Content2]
Scroll Canvas Properties
Tab |
Property |
Value |
||
[Basic] |
[Fill] | [Color] | [Value] | ID:26 |
Project Explorer: [Screen Design] → [Contents] → [Content3]
Scroll Canvas Properties
Tab |
Property |
Value |
||
[Basic] |
[Fill] | [Color] | [Value] | ID:27 |
Project Explorer: [Screen Design] → [Contents] → [Content4]
Scroll Canvas Properties
Tab |
Property |
Value |
||
[Basic] |
[Fill] | [Color] | [Value] | ID:28 |
Set Up Parts/Layout
Project Explorer: [Screen Design] → [Screens] → [Screen2]
Drag and drop the following objects from the [Tool Chest] to the Layout Object - Stack Panel (name: StackPanel1).
;){kind=link}
- Switch Object (Name: Switch2)
- Layout Object - Stack Panel (Name: StackPanel2)
- Switch Object (Name: Switch3)
- Layout Object - Stack Panel (Name: StackPanel3)
Switch Object (Name: Switch4 to Switch7)
When aligning the Switch Object (name: Switch3) and Stack Panel (name: StackPanel3), drag and drop them to the outside of the Stack Panel (name: StackPanel2) so that they do not overlap with it. With the Stack Panel (name: StackPanel1) selected, double-click the relevant object in the [Tool Chest] to align it without overlapping.
Switch Object (Name: Switch2) Properties
This switch changes the accordion menu display. When the switch is touched, the [Visibility] property of the Layout Object - Stack Panel (name: StackPanel2) is changed to 0 (Display) or 2 (Collapsed).
Tab |
Sub Tab |
Property |
Value |
|
|---|---|---|---|---|
[Function] |
[Touch] | [Operation] |
[Type] |
[Word] |
[Operation] |
[XOR] |
|||
[Source] |
2 |
|||
[Destination] |
[Variable] [Name]: Var2 |
|||
Layout Object - Stack Panel (Name: StackPanel2) Properties
Tab |
Property |
Value |
[Basic] |
[Orientation] |
[Vertical] |
| [Height] | 100 |
|
| [Visibility] | [Variable] [Name]: Var2 |
Switch Object (Name: Switch3) Properties
This switch changes the accordion menu display. When the switch is touched, the [Visibility] property of the Layout Object - Stack Panel (name: StackPanel3) is changed to 0 (Display) or 2 (Collapsed).
Tab |
Sub Tab |
Property |
Value |
|
|---|---|---|---|---|
[Function] |
[Touch] | [Operation] |
[Type] |
[Word] |
[Operation] |
[XOR] |
|||
[Source] |
2 |
|||
[Destination] |
[Variable] [Name]: Var3 |
|||
Layout Object - Stack Panel (Name: StackPanel3) Properties
Tab |
Property |
Value |
[Basic] |
[Orientation] |
[Vertical] |
| [Height] | 100 |
|
| [Visibility] | [Variable] [Name]: Var3 |
Switch Object (Name: Switch4) Properties
Align the switch on top of the Layout Object - Stack Panel (name: StackPanel2).
Tab |
Sub Tab |
Property |
Value |
|
|---|---|---|---|---|
[Function] |
[Touch] | [Operation] |
[Type] |
[Word] |
[Operation] |
[Set] |
|||
[Source] |
1 |
|||
[Destination] |
[Graphical Object] [Screen/Content]: ContentDisplay1 [Source Property]: ScreenId |
|||
[Shape] |
[Size/Location] | [Width] |
200 |
|
[Height] |
50 |
|||
[Object Alignment] |
[Horizontal] |
Right-aligned |
||
Switch Object (Name: Switch5) Properties
Align the switch on top of the Layout Object - Stack Panel (name: StackPanel2).
Tab |
Sub Tab |
Property |
Value |
|
|---|---|---|---|---|
[Function] |
[Touch] | [Operation] |
[Type] |
[Word] |
[Operation] |
[Set] |
|||
[Source] |
2 |
|||
[Destination] |
[Graphical Object] [Screen/Content]: ContentDisplay1 [Source Property]: ScreenId |
|||
[Shape] |
[Size/Location] | [Width] |
200 |
|
[Height] |
50 |
|||
[Object Alignment] |
[Horizontal] |
Right-aligned |
||
Switch Object (Name: Switch6) Properties
Align the switch on top of the Layout Object - Stack Panel (name: StackPanel3).
Tab |
Sub Tab |
Property |
Value |
|
|---|---|---|---|---|
[Function] |
[Touch] | [Operation] |
[Type] |
[Word] |
[Operation] |
[Set] |
|||
[Source] |
3 |
|||
[Destination] |
[Graphical Object] [Screen/Content]: ContentDisplay1 [Source Property]: ScreenId |
|||
[Shape] |
[Size/Location] | [Width] |
200 |
|
[Height] |
50 |
|||
[Object Alignment] |
[Horizontal] |
Right-aligned |
||
Switch Object (Name: Switch7) Properties
Align the switch on top of the Layout Object - Stack Panel (name: StackPanel3).
Tab |
Sub Tab |
Property |
Value |
|
|---|---|---|---|---|
[Function] |
[Touch] | [Operation] |
[Type] |
[Word] |
[Operation] |
[Set] |
|||
[Source] |
4 |
|||
[Destination] |
[Graphical Object] [Screen/Content]: ContentDisplay1 [Source Property]: ScreenId |
|||
[Shape] |
[Size/Location] | [Width] |
200 |
|
[Height] |
50 |
|||
[Object Alignment] |
[Horizontal] |
Right-aligned |
||