5. How to build your own UI prototype

You can build your own UI prototype using SUIP. You must prepare the input information inside a directory having the name of the new project (myprj for instance). The input information for myprj are the class diagram and the collaboration diagrams corresponding to the different scenarios of the system at hand.

The directory myprj must include (see Figure 1):

The description of Scenarios of a given use case UseCasei, can be found in the sub-directory CollDs of UseCasei which contains a list of constrained collaboration diagrams (Colld1/Colld1.CCollD, Colld2/Colld2.CCollD, ,Colldm/Colldm.CCollD). The directories Colldi will also contain files representing partial Statechart specifications of the objects involved in Colldi.CCollD.

A constrained CollD must respect the grammar described in Section 6.2.

In SUIP, constraints are used to specify the interaction between the user and the system. In this release of SUIP, we support two kinds of constraints: inputData and outputData constraints. An inputData constraint means an information entry from the user, and an outputData constraint represents a flow of information to the user. In respect to the grammar of constrained CollDs, a message constraint is put between braces {constraint(parameter)}. The parameter of the constraint indicates the style of interaction (widget type).

When the parameter is a class attribute, the type of this attribute and the kind of constraint defines the widget type (for instance, in the Library system, the constraint {inputData{Reader.id)} generates an inputField widget because the attribute id of the class Reader is of type string, and the constraint {outputData{Reader.id)} generates a textField widget).

For inputData constraints, if the parameter of this constraint is a class method, the widget generated will be a button (for instance, in the Library system, the constraint {inputData{Loan.save)} generate a widget button with save as name).

Figure 1: Structure of a new project.

 

 

You can then run SUIP on your new project for all use cases of the system:

java Suip myprj.

Or for a specific use case (UseCasei for example):

java Suip myprj UseCasei

UI prototypes will be generated in the directory UIobjects built by SUIP. This directory will contain the list of user interface objects (UIO) found in the system. UIOs are marked in CollDs with an "*".

To visualize the prototype for a UIO, you must:

  1. create a new empty project in the environment of Visual Cafe,
  2. menu File à New project à Empty project

  3. insert the Java files generated for the UIO (found in myprj/UIobjects/UIO/) into this new project,
  4. menu Insert à Files into project

  5. execute the project in Visual Cafe. You can directly refine the frames generated in the interface builder of Visual Cafe.

menu Project à Execute