Difference between revisions of "AppSuite:Wizard framework"

m (Using the registry)
(Events)
Line 79: Line 79:
  
 
=== Events ===
 
=== Events ===
Bla bla.
+
 
 +
====Tour/wizard====
 +
{|
 +
|-
 +
! Event name !! Description
 +
|-
 +
| step:next
 +
| Triggered when moving ahead.
 +
|-
 +
| step:back
 +
| Triggered when moving back.
 +
|-
 +
| step:close
 +
| Triggered when closing the wizard/tour.
 +
|-
 +
| step:done
 +
| Triggered when finishing the wizard/tour.
 +
|-
 +
| before:start
 +
| Triggered before starting the wizard or the tour.
 +
|-
 +
| start
 +
| Triggered when the wizard or the tour has been started
 +
|-
 +
| before:stop
 +
| Triggered before closing the wizard or the tour.
 +
|-
 +
| stop
 +
| Triggered when the wizard or the tour has been closed
 +
|}
 +
 
 +
====Step====
 +
{|
 +
|-
 +
! Event name !! Description
 +
|-
 +
| next / back
 +
| Same as step:next or step:back (see above)
 +
|-
 +
| close / done
 +
| Same as step:close or step:done (see above)
 +
|-
 +
| before:show
 +
| Triggered before showing the step
 +
|-
 +
| show
 +
| Triggered when the step is visible
 +
|-
 +
| before:hide
 +
| Triggered before hiding the step
 +
|-
 +
| hide
 +
| Triggered when the step is hidden
 +
|}
  
 
=== Using the registry ===
 
=== Using the registry ===
 
Bla bla.
 
Bla bla.

Revision as of 12:54, 15 July 2015

Wizard/Tour framework

App Suite UI provides a simple but flexible framework to implement wizards and guided tours. The essence of both a wizard and a tour is a set of steps the end-user walks through. Usually a step is a smaller modal popup.

Simple example

The starting point is the "Wizard" (or "Tour") class defined in io.ox/core/tk/wizard.js. A simple example:

 
require(['io.ox/core/tk/wizard'], function (Tour) {
   new Tour()
   .step()
       .title('Welcome')
       .content('Lorem ipsum dolor sit amet, consetetur sadipscing elitr')
       .end()
   .start();
}); 

The function step() adds a new step. Each step is separate Backbone view instance (DisposableView to be more precise). The following function calls title() and content() both work on that view; end() just returns to the tour (same idea as in jQuery's end()). This allows long definition chains.

API

Function Description
step(options) Add a new wizard/tour step.
start() Start the wizard/tour
title() Append content to the popup title. Handed over to jQuery's append; can be String, DOM element, jQuery set, a function.
content() Append content the popup body. Handed over to jQuery's append; can be String, DOM element, jQuery set, a function.
footer() Append content to the popup footer. Handed over to jQuery's append; can be String, DOM element, jQuery set, a function.
mandatory() Makes a step mandatory. The "close" icon gets removed; escape key no longer works.
toggleNext(state) Enables (true) or disables (false) the "Next" button
toggleBack(state) Enables (true) or disables (false) the "Back" button
isFirst() Returns true if the current step is the first one
isLast() Returns true if the current step is the last one
pointAt(selector) Affects the dialogs location (alignment happens automatically).
spotlight(selector) Sets a spotlight on a given element
modal([state]) Shows a darker backdrop. Default is true.
waitFor(selector) The step waits for a certain element to exist before showing the popup.
navigateTo(id, [options]) The step launches given app (id) before showing the popup. "options" are optional; handed over to ox.launch().
scrollIntoView(selector) This element will be scrolled into view before the popup is shown
beforeShow(callback) Registers for the "before:show" event using once(). The callback's context is the step, i.e. "this" is a backbone view.
end() Go back to parent element, i.e. the Wizard or the Tour.

Events

Tour/wizard

Event name Description
step:next Triggered when moving ahead.
step:back Triggered when moving back.
step:close Triggered when closing the wizard/tour.
step:done Triggered when finishing the wizard/tour.
before:start Triggered before starting the wizard or the tour.
start Triggered when the wizard or the tour has been started
before:stop Triggered before closing the wizard or the tour.
stop Triggered when the wizard or the tour has been closed

Step

Event name Description
next / back Same as step:next or step:back (see above)
close / done Same as step:close or step:done (see above)
before:show Triggered before showing the step
show Triggered when the step is visible
before:hide Triggered before hiding the step
hide Triggered when the step is hidden

Using the registry

Bla bla.