The image contains different types of components:
Web Pages - Each web page on the diagram represents one page in the web application being created.
Partial Pages - These are contained within full pages and can be refreshed independently using AJAX.
Controllers - A Controller is a server side component in the deployed web application. These are responsible for orchestration functions and ensuring the relevant data is available to display the required pages. This may involve communicating with remote web services and databases.
Third party service calls - These components can be used to make calls to third party services from the client, without having to make a server roundtrip.
Actions - Actions are used to create connections between pages, partial pages, third party services and controllers to indicate the screen flow within the application. Each action can be performed by the component from which the action originates. Action names can be viewed by hovering over the action links on the screen.
You can create and amend the application map using the controls within the palette on the left hand panel. You can click on any component within the application map to display additional details on the right hand panel. The selected component is always highlighted in yellow. You can move components around by simply clicking and dragging them to achieve the desired layout.
The main controls used for creating the application map include:
Add Full Page - This adds a new web page to the application. You can create a full page by dragging and dropping the full page control on to the diagram. You can change the default page name by double-clicking the page image or using the right-click context menu and selecting the Rename option. The web page name must be unique.
Add Partial Page - This adds a new partial page to the application. You can create partial pages using the same approach as described above for creating full pages. Please note that creating partial pages also creates an integrated server Controller (see below), used to serve the contents of the partial page. It may take a few extra seconds to complete the server-side setup, so please be patient.
Add Controller - This adds a new controller to the application. You can add controllers by dragging and dropping the Controller control onto the diagram. The new name for the controller can be changed using double-click and the name must be unique.
Add third party service - This adds a new asynchronous third party service to the application, which can be called from the browser client. Again, you can create these services by dragging and dropping the control from the palette onto the diagram in the middle. The new name for the third party service must be unique and can be changed by double-clicking the icon on the diagram.
Add Action - This allows you to specify an action between the different components. To specify that a particular component can call a another component on the diagram, we click on the originating component to select it first and drag the action from the palette to the required target component. The same process is used for all combinations of links between components. Please note that you cannot add an action from a component to itself.
Delete - You can right-click to pop-up the context menu and select the Delete option to delete components from the diagram.