4 PLATFORM INDEPENDENT ANALYSIS AND DESIGN
4.6 Presentation
4.6.1 Metamodel
The backbone of the presentation metamodel is depicted in Figure 60. A presentation class is a specialized class which represents a Web page or a part of it, when presentation classes are composed. Each presentation class is associated to exactly one node from the naviga-tion model. For each presentanaviga-tion class the physical layout may be defined by providing either one or both of the attributes cssClass and cssStyle (see below). A presentation prop-erty is a specialized propprop-erty that can be associated to a propprop-erty of a node. Only compos-ite presentation properties are allowed and the type of a presentation property is con-strained to either presentation classes or user interface elements.
User interface elements are specialized classes that represent the user interface elements in a Web page. Different types of user interface elements are distinguished, see Figure 61.
Anchors represent links in a Web page, and optionally a format expression may be defined for specification of the label that the anchor should have (see below). Other (abstract) su-per types of user interface elements are output elements, input elements and static ele-ments. For each user interface element the physical layout may be defined by providing either one or both of the attributes cssClass and cssStyle (see below).
Output elements allow the presentation of dynamic data. Two types of output elements are defined, see Figure 62. Text elements allow the presentation of arbitrary data that can be
Model Driven Software Engineering for Web Applications
represented as text. Image elements allow the output of images which are accessible by a URL. If the data corresponds to relative URLs then a base URL must be defined.
Static elements present static information on a Web page, see Figure 62. Static information is not calculated from the content model, but must be defined at design time. Static texts present text that is defined by the attribute text at design time, and static images present images, whose URL is defined at design time by the attribute url.
Input elements are user interface elements that are used for capturing input data from the user, see Figure 63. Textual input is represented by the user interface element text input.
This includes all kind of input that can be parsed from a string, as for example numbers.
Enumeration input is especially used for capturing the choice out of the enumeration liter-als of an enumeration. Finally, a selection user interface element is used for a selection of objects out of a collection of objects. An optional format property can be defined to specify how the objects of the collection should be presented as a string.
PresentationProperty PresentationClass cssClass[0..1] : String cssStyle[ 0..1] : St ring f or mat[ 0..1] : Str ing
Property Node
{ordered, subsets ownedAttribute}
{subsets class}
Class
+navigationProperty 0..1 +node
1
+presentationClass 1
+presentatioProperties
*
Figure 60. Metamodel for presentation modeling (backbone)
141
UIElement cssClass[0..1] : String cssStyle[ 0..1] : St ring
Anchor f ormat[ 0..1] : St ring
OutputElement InputElement StaticElement Class
Figure 61. Metamodel for presentation modeling (user interface elements)
OutputElement StaticElement
Image url[ 0..1] : St ring
StaticImage url : String
Text StaticText
text : String
Figure 62. Metamodel for presentation modeling (output and static elements)
EnumerationInput Selection form at[0..1] : String TextInput
InputElement
Figure 63. Metamodel for presentation modeling (input elements)
Constraints
For each navigation class, access primitive or process data class exactly one presentation class must be defined.
Model Driven Software Engineering for Web Applications
context Node inv NodePresentationClassDefined :
not self.isAbstract and ( self.oclIsKindOf( ProcessClass ) implies self.inLinks->isEmpty() ) implies PresentationClass.allInstances()->one( pc | pc.node = self )
Inheritance is not allowed for presentation classes.
context PresentationClass inv PresentationClassInheritance : self.parents()->isEmpty()
The type of a presentation property must be either a user interface element or a presenta-tion class.
context PresentationProperty inv PresentationPropertyType :
self.type.oclIsKindOf( UIElement ) or self.type.oclIsKindOf( PresentationClass )
If type of a presentation property is a static element then no navigation property must be defined. The presentation properties of the presentation class for a process class have to be associated to a process property. On the other hand, the presentation properties of the pres-entation class for an access primitive must not define a navigation property. For all other cases the presentation property must be associated to a navigation property.
context PresentationProperty inv PresentationPropertyNavigationProperty : if self.type.oclIsKindOf( StaticElement ) then
self.navigationProperty->isEmpty()
else if self.class.node.oclIsKindOf( ProcessClass ) then self.navigationProperty.oclIsKindOf( ProcessProperty )
else if self.class.node.oclIsKindOf( AccessPrimitive ) then self.navigationProperty->isEmpty()
else
self.navigationProperty.oclIsKindOf( NavigationProperty ) endif endif endif
Inheritance is not allowed for user interface elements.
context UIElement inv UIElementInheritance : self.parents()->isEmpty()
A user interface element must be the type of exactly one presentation property of a presen-tation class with composite aggregation kind.
context UIElement inv UIElementContainment :
let ps : Set( PresentationProperty ) = PresentationProperty.allInstances()->select( p | p.type = self ) in
ps->size() = 1 and
ps->forAll( p | p.isComposite and p.class.oclIsKindOf( PresentationClass ) )
143
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) is a standard by the World Wide Web Consortium (W3C) for adding style, or physical layout, to Web documents [CSS]. Style sheets describe how documents should be presented on screens or on other media. Documents can be arbitrary XML documents and especially (X)HTML documents. CSS is the default style sheet lan-guage for the Web.
CSS defines styles in a declarative way. The language elements are selectors and property definitions. Selectors express when a style definition should be applied. A style definition consists of a list of property definitions of the format “property-name:property-value”.
Property classes are for example fonts, colors, margins or borders. For detailed information about CSS see [CSS].
Within this work the use of CSS is supported in two variants which may even be com-bined. The first variant is the direct assignment of a CSS style definition to a presentation class or a user interface element by defining the attribute cssStyle. The following style definition renders all the text within a presentation class with the text color blue:
<<presentation class>>
Projec tManager <<presentatio n class>>
cssStyle="color:blue"
The second variant is the use of style classes by assigning the name of a style class to the attribute cssClass. The styles for all elements of a specific class can then be defined glob-ally by using a class selector. For detailed information where this style definition has to be made see 6.2.4.2 .
Formatting Expressions
For the anchor and the selection user interface element a formatting expression can be de-fined in order to provide the labels required by these user interface elements, see 4.1.3. The context for references to the properties of an object is in the case of an anchor the actual target object. In the case of a selection it is the actual object of the collection that should be rendered on the user interface. For example, a possible format expression for the anchor of the project index could be “#${id} - ${name}”. The text outside the “${}” expressions represents the static part of the resulting text and the text inside is evaluated at runtime by querying the id and name properties of the actual item that should be displayed in the in-dex.
Model Driven Software Engineering for Web Applications
Notation
The appropriate notation for the presentation model is a stereotyped composite structure diagram for each presentation class with the user interface elements as parts with the corre-sponding multiplicities. Equally, regular class diagrams can be used. For a definition of the corresponding UML profile see A.5.