Difference between revisions of "AppSuite:Wizard framework"

m
Line 15: Line 15:
 
});  
 
});  
 
</pre>
 
</pre>
The function **step()** adds a new step. Each step is separate **Backbone view** instance. The following function calls title() and content() both work on that view; end() just returns to the tour. This allows long definition chains.
+
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 ===
 
=== API ===
 
Bla bla.
 
Bla bla.

Revision as of 12:27, 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

Bla bla.