Simulation Development

Widgets

Hammer provides many common widgets you need in order to build simulations.

Widgets are namespaced in order to prevent conflicts:

h:button

The h represents the package the widget belongs to. In this example, h refers to the Hammer namespace. On the right side of the colon : is the name of the widget. Widgets are namepaced to prevent conflicts. It is possible that another package may contain a widget called button. However, because its namespace will be different, it will not conflict with any other package or widget in the shared environment. All components follow this principle, not just widgets.

Widgets are built as an AngularJS Directive. You can learn more on this subject under Package Development. The most common widgets you will use are provided by the hammer-application package. Other packages contain widgets specific to their tasks. For, example if you were building a multiple choice item, you would download and install the hammer-sr package which provides widgets for Selected Response items.

Each widget's properties and use method will differ so it is important to read the API documentation for each. Most provide working examples and code snippets that can be used directly in your project to get started.

Important: Widgets by default do not have their own style. This is so the developer can style the widget to match the simulation. Buttons will not look like anything without a style. There are package themes you can install to help minimize the effort in styling a set of widgets for common applications. Click here to learn more about using themes.

timer Exercise: Add a button to a slide

Launch in your browser http://localhost:8080/sandbox/#/tutorials/widget/widget_start. It should open a page with "Widget Tutorial" displayed.

Looking up the button API

The button widget is located in the hammer-application documentation. As mentioned above, most of the widgets you will use will be located in this hammer-application. To look up the API go to Hammer Documentation. Under the Packages section, find hammer-application and click on the on the show button pageview

This will open up the Application Documentation. Here you can click on the Button link to view the documentation for the button. You will see documentation and examples for the button. In the Code section you can see several code examples.

  1. Select and copy the one marked as Button using simple label
  2. Open sandbox/slides/tutorials/widget/widget_start.html
  3. Paste the contents where indicated
  4. Save

Refresh your page and you will see a button being displayed. It won't do anything (yet) but it will. Open http://localhost:8080/sandbox/#/tutorials/widget/widget_finish , you can compare your version with the end result.