Exercises

Use this page to find all exercises of the course. Each exercise sits at the end of its chapter, and every exercise page ends with a possible solution.

GUI to BUI to DWC

• Exercise: Take an app from GUI to BUI to DWC - Run a BBj program in GUI, BUI and DWC, then change its layout and button attributes. (solution included)

Browser Developer Tools, CSS, and Themes

• Exercise: Add theming support - Create a custom DWC theme with a light and dark mode switch and move your CSS into a separate file. (solution included)

Upgrading Apps to DWC

• Exercise: Replace a grid with the BBjGridExWidget - Install the BBjGridExWidget and show CDStore data in a full-screen grid. (solution included)

DWC Controls With Extended Attributes

• Exercise: Search in a BBjTree - Make a BBjTree scrollable, add a search field and change the leaf icons. (solution included)

Flow Layouts and CSS for Responsive Design

• Exercise: Convert a form to a CSS grid layout - Turn a flow layout contact form into a two-column CSS grid. (solution included)
• Exercise: Lay out a form with CSS Flexbox - Switch a short form from flow layout to a Flexbox column layout. (solution included)

Icon Pools

• Exercise: Add an icon to a static text - Add icons from the DWC icon pools to a BBjStaticText and try different expanse and theme values. (solution included)

Control Validation

• Exercise: Validate an email address - Make the Email field required and add a pattern validation with a regular expression. (solution included)

Embedding Third-Party Components

• Exercise: Embed a third-party component - Pick a component from Ionic or Shoelace and embed it in a BBj program. (solution included)

Advanced Responsive Design

• Exercise: Use media queries - Change the look of one of your programs with a CSS media query on the screen width. (solution included)
• Exercise: Add a transition to a button - Make a button grow on hover and smooth the animation with a CSS transition. (solution included)