This shows you the differences between two versions of the page.

Link to this comparison view

create_model [2016/09/22 02:35] (current)
Line 1: Line 1:
 +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.
 +  - First click on "File List" on the [[Design Pane|Design Pane]] which should take you to [[FileList|FileList]].
 +  - 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.
 +  - 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.
 +  - Next [[CreateStateNode|create a state node]] to represent each of the 5 web pages.
 +    * [[ProductList|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|ShoppingCart]] - listing the items in the shopping cart.
 +    * [[ProductDetail|ProductDetail]] - detailed description of a product.
 +    * [[Checkout|Checkout]] - to capture the payment information.
 +    * [[ThankYou|ThankYou]] - after the purchase is completed.
 +  - For each state node, [[CreateTransitionNode|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|ProductList]] page:
 +    * [[AddItem|AddItem]] - link that adds the item to the shopping cart and takes you to "​[[ShoppingCart|ShoppingCart]]"​ page.
 +    * [[ViewDetail|ViewDetail]]- link that takes you to "​[[ProductDetail|ProductDetail]]"​ page.
 +    * [[ShowShoppingCart|ShowShoppingCart]] - link that takes you to "​[[ShoppingCart|ShoppingCart]]"​ page.
 +    * [[CheckoutLink|Checkout]] - link that takes you to the check out 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|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.
QR Code
QR Code create_model (generated for current page)