JQueryUI

Let’s add some JQueryUI into our application to make it look a little nicer.

Modify the IWML:

ACORN 1.0 IWML 1.0
TUnit1:Unit1
  Cells[]
    SimpleStack[]
      JQUI.AccordionGroup[]
        JQUI.Accordion[] Play
          SimpleStack[]
            Edit:GuessEdit;
            Text:MsgText;
            Text:CountText;
            EOL;
            BS.Button:GuessButton
              ServerEvents:
                Click
              ]
              Text: Guess
            ]
          ]
        ]
        JQUI.Accordion[] Instructions
          Text Enter a number and click Guess.
        ]
        JQUI.Accordion[] About
          Text Where would we be without the Guess demo?
        ]
      ]
    ]
  ]
]

The designer will now look like this:

Run

When we run, we now have an application that uses both Bootstrap and JQueryUI:

And the accordions are fully functional:

Conclusion

Next we will upgrade our application to use dialogs. We will not use the window.alert() that we used before, but instead we will use SweetAlert.