Hammer provides many common widgets you need in order to build simulations.
Widgets are namespaced in order to prevent conflicts:
h represents the package the widget belongs to. In this example,
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
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
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.
- Select and copy the one marked as
Button using simple label
- Paste the contents where indicated
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.