In general, when developing user interfaces there is always the issue where to start and how to start. Is the starting point the data model which dictates the development of the user interfaces or is it the user interfaces which the data model needs to follow. Best practice shows that the following development process is a good base to work with in an iterative manner.

Process And Use Case Definition

At the beginning of any application development the requirements of what the software should do are to be collected and defined. If the Bridge targets process driven applications, it makes most sense to start eliciting requirements by defining the process to be automated. Having the process definition, allows now to define the use cases describing the human- and system interactions with this process. Though Use Case definitions are, at the beginning of a project, rarely compiler relevant, they give a first impression, which kind of actions have to be covered by the UI prototype to be developed. Later on, the Use Cases can be enhanced by security models, defining the service access rules of the involved actors.

UI Prototype

At this stage, the requirements of the applications user interface are defined as a functional UI prototype. However, designing a UI within the BRIDGE modeling environment excludes any considerations towards CI/CD or visual designs. It is about defining windows and UI elements which are needed for a human actor, the end user, to work with the software. The goal is to define how the user interacts with the software. The CI/CD is defined in a later stage by allowing designers to specify the look and feel using standard state-of-art web technologies like CSS and JavaScript. Creating UI prototypes with MagicDraw does not mean to create functioning web based GUI applications in a first step. The idea is to get a quick, navigable prototype to understand and clarify the applications behavior. For this reason, MagicDraw allows to use hyperlinks which link e.g. views with controller elements. This enables a more close feeling to a user experience of the application to build but still is of a static character. Such a prototype can be built in a quite agile manner, in some cases even together with the business expert responsible for specifying the requirements.
The UI prototype is the base for further development and, prepared properly, the base for transforming it into a running application using the MagicDraw UI prototype Importer. Please refer to the next chapter explaining in detail how to use the importer.

The Iterative Implementation

After the initial import of the functional prototype, the application is in a raw but executable state. All the important elements like message objects, UI state machines, user interfaces are generated and linked as designed in the prototype. At this point the user interfaces can be refined by adding special events and signals, specific designs or custom JavaScripts adding more complex functionality. Further it is the step where the back end services are integrated which will populate the user interfaces with data and handle data transfers to the back end systems. As described, the refinement of the application as well as the implementation of application services (SOAP, Database, Flat Files etc) is in most cases an iterative process.