To create a model for this tutorial, we use the set of static/dummy web pages that comes with the download package. There are 5 web pages all together and the model we will be creating will look like http://TestOptimal.com/img/SimpleWebStore.png. Please note the state id and transition event id are case sensitive and these ids will be used to construct the script function names.

  1. First click on “File List” on the Design Pane which should take you to FileList.
  2. Create a new model by clicking on “New” button. The new model is created from “_template” model which should look like http://TestOptimal.com/img/WebStoreNew.jpg. Enter “MyWebStore.scxml” in the “File Name” field and “My WebStore Tutorial” in “Description” field. Click on “Save” button.
  3. Set the mbt property for the model by clicking on the “mbt …” node. Set the “App URL” field to “http://localhost:8888/testApp/test_Main.html”. Select either HtmlUnit plugin or Selenium plugin.
  4. Next create a state node to represent each of the 5 web pages.
    • ProductList - the entry page that shows list of products the user can browse and add them to the shopping cart. Set this node to be the initial and final state.
    • ShoppingCart - listing the items in the shopping cart.
    • ProductDetail - detailed description of a product.
    • Checkout - to capture the payment information.
    • ThankYou - after the purchase is completed.
  5. For each state node, create transitions with each transition representing one link or button on the page. Note we only need to create the outgoing transitions that take you to another page. For example, below are the transitions for ProductList page:

You can delete the node by right-mouse click on the node label and select “Delete” from the popup menu. The node property can be changed in the PropertyTab by clicking on the node label.

When you finish entering all nodes and their transitions, you have created the MBT model for a web application.

Print/export
QR Code
QR Code create_model (generated for current page)