Slides are much like an HTML page. In addition to standard web elements, you can also declare:
- Hammer Widgets
- Hammer Virtuals
- Hammer Actions
- Hammer Events
- Custom Scripts
- Custom Styles
Slides are widget containers. Slides not only can contain other widgets, they can contain other slides; because a slide is a widget. Popups, tooltips and other views can each be represented by slides. Let's take an application, like a word document editor to see how we might break it down into slides.
In this example we can see there exists four slide containers, though in a real-world example there would be more. The slide application is our base slide. It contains the other slides. Each of the slide containers can swap their view areas with other content without refreshing the page. For example, the "slide toolbar" will have many content items representing its display in order to represent the selected tab. Same with the document area.
The popup grabs a slide and displays it in as a floating widget on the screen. It should be possible to simulate most environments based on this concept.
Currently most slides contain a screenshot as a static background that represents that portion of the view. Widgets such as hotspots (buttons without a display) are then placed on top of the screenshot to simulate the real environment. By doing this we cut down on the amount of strings that need to be translated into different languages.
timer Exercise: Adding content to a slide
In this exercise, you will add some content to an empty slide.
Launch in your browser
http://localhost:8080/sandbox/#/tutorials/slide/slide_start. It should open a page with
"Slide Tutorial" displayed. The URL indicates where this slide is relative to your
slides folder in the sandbox. We can see here that this slide is located in
slides directory is the default
directory for our slides.
Open this file in your project. The outer tag for your slides is
You will also notice an XML Namespace declaration. This is used internally by Hammer to determine the
type of content this file represents. The namespace for a slide is
Your exam will load many HTML and XML files. The only way to differentiate one file from another is define an internal namespace. In previous versions of Hammer we also used these namespaces to auto-complete widgets, actions and other behaviors. We have not currently implemented auto-completion in this version of Hammer, but it is setup to if needed at a later time.
The content area supports your standard HTML as well as Hammer and Angular components. To see the content change, add the following tag, below the header:
<content xmlns:h="http://certiport.com/hammer/sdk/hammer" class="hammer-sim"> <h3>Slide tutorial</h3> <div>Hello, world!</div> </content>
Open http://localhost:8080/sandbox/#/tutorials/slide/slide_finish to see end result.
Your slide should not display the following: