CBA ItemBuilder Workshop: Session 06

Ulf Kroehne

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

Session 06: Hands on ‘Drag and Drop’

Overview Session 06

Create Drag-and-Drop Item

  • Define Variables and Maps
  • Example for drag-and-drop mode DROP_COPY
  • Example for drag-and-drop mode DROP_SWITCH

Concept 1: Same variables, different maps

  • Same page / different page

Your Ideas:

  • ?

Create Value Map

  • Open HandsOnDragAndDropModes and inspect resource (Project > Browse Resources).
  • Configure Value Maps:

Create Variables

  • Create Variables (4 x 4 table and two additional variables):

  • Name schema: V_ (row) _ (column)

  • All variables with default value 0, but

    • V_fixed_1 = 1
    • V_fixed_2 = 2

Create 4 x 4 Field

  • Define a first MapBasedVariableDisplay with the following properties:
    • Width=50, Height=50, Border Width=1
    • Value Display Style=IMAGE, Drop target=true
    • Link Value Map=M_ox_game
  • Use Duplicate or Copy & Paste to create the following structure.
  • Link variables as shown in the figure:

Complete the X-O Game Example

  • Add three additional MapBasedVariableDisplays as shown in the following Figure.
    • Width=50, Height=50, Border Width=1
    • Value Display Style=IMAGE, Drop target=false, Drop source=true
    • Set Drop Mode=DROP_COPY (!)
    • Link variables V_fixed_1, V_fixed_2 and V_fixed_0
    • Link Value Map=M_ox_game to the first two MapBasedVariableDisplays
    • Link Value Map=M_ox_bin to the last MapBasedVariableDisplays
  • Preview ;-)

Prio List

  • Duplicate page1 (i.e., save page as template and create a new page2 from this template).
  • Remove Map-Based Value Displays created for the x-o game.
  • Remove Command and add link to page2 for the button Next on page1.
  • Duplicate button Next on page2, remove command, change the label and add a link to page1.
  • Add a new map M_O (guard 1 = text “prio1”, guard 2 = text “prio2”, guard 3 = text “prio3”).
  • Add three new integer variables (F_O_1=1, F_O_2=2 and F_O_3=3).
  • Add a MapBasedVariableDisplays and configure Drop Mode=DROP_SWITCH, Drop Target=true and Drop Source=true. Set Border Width=1 (and make sure Value Display Type=TEXT).
  • Duplicate 2 times and link to the variables F_O_1-3 and to the map M_O.
  • Preview ;-)

Group Work

End of Session 06: Hands on ‘Drag and Drop’

Helpful to remember:

  • Don’t forget to define the Drag and Drop Mode.
  • MapBasedVariableDisplays can be used with same variables but different maps and on different pages.
  • Let’s learn more about Links and Conditional Links and the CBA ItemBuilder syntax parts in session 07.