6.6 Graphical Concrete Syntax and Edit Operations
6.6.2 Graphical Concrete Syntax for the GUI Model
The graphical concrete syntax of the GUI metamodel is very compact because the 6.47
set of graphical concrete syntax elements is pretty small. Tables6.2to6.12show the mapping of the abstract syntax (AS) (cf. Figure6.5) to the graphical concrete syntax (GCS). The GCS type denotes to which graphical syntax type the abstract syntax element is mapped, i.e., node, node with compartment(s), or node with label. The GCS example row of the following tables shows an example of the respective graphical concrete syntax element. The context value indicates in which context and how often the graphical concrete syntax element may occur. Finally, the edit operations describe which operations can be performed on the diagram and which settings can be made in the properties view.
The abstract classes SelectablePage, ListablePage, and MenuablePages are not mapped 6.48
to graphical concrete syntax elements. The same applies for the enumeration types.
TABLE6.2: Mapping of the abstract syntax element PageContainer
AS The abstract syntax element PageContainer shapes the di-
agram canvas and thereby directly or indirectly contains all other graphical concrete syntax elements.
GCS (Type) Canvas
GCS (Example) not applicable
Context none
Edit operations
Diagram operations
The Canvas element provides the creation of Page, StyleSettings, and Menu elements.
Property settings
The properties editor provides no further property settings.
TABLE6.3: Mapping of the abstract syntax element StyleSetting
AS The abstract syntax element StyleSetting and its con-
tained elements like PageStyleSettings, RGBColor, ListStyleSet- tings, MenuStyleSettings, and SelectionStyleSettings shapes are mapped to the graphical concrete syntax element StyleSetting.
GCS (Type) Node with compartments
GCS (Example) (A) Empty StyleSetting (B) Fully modelled StyleSetting StyleSetting(node) StyleSetting.rgbColors (compartment) StyleSetting.listStyle, StyleSetting.menuStyle, StyleSetting.selectionStyle, StyleSetting.pageStyle (compartment)
Context Arbitrarily often inside a PageContainer compartment
Edit operations
Diagram operations
The StyleSetting element provides the creation of all contained sub-elements according to the cardi- nality given by the abstract syntax model.
Property settings
The properties editor supports the setting of the features backgroundColor and fontColor.
TABLE6.4: Mapping of the abstract syntax element RGBColor
AS The abstract syntax element RGBColor is mapped to the graph-
ical concrete syntax element RGBColor.
GCS (Type) Node with label
GCS (Example)
RGBColor(node) ’Color ’RGBColor.name’ (’ RGBColor.red’,’
RGBColor.green’,’ RGBColor.blue’)’
Context Arbitrarily often inside a StyleSettings.rgbColors compartment
Edit operations
Diagram operations
The RGBColor element provides no further edit op- erations within the diagram.
Property settings
The properties editor supports the setting of the features red, green, blue, and name.
TABLE6.5: Mapping of the abstract syntax element ListStyleSettings
AS The abstract syntax element ListStyleSettings is mapped to the graphical concrete syntax element StyleListSettings.
GCS (Type) Node
GCS (Example)
ListStyleSettings(node)
Context At most once inside a StyleSettings.listStyle compartment
Edit operations
Diagram operations
The StyleListSettings element provides no further edit operations within the diagram.
Property settings
The properties editor supports the setting of the features showSeparator, separatorColor, and listStyle.
6.6. Graphical Concrete Syntax and Edit Operations 81
TABLE6.6: Mapping of the abstract syntax element MenuStyleSettings
AS The abstract syntax element MenuStyleSettings is mapped to
the graphical concrete syntax element StyleMenuSettings.
GCS (Type) Node
GCS (Example)
MenuStyleSettings(node)
Context At most once inside a StyleSettings.menuStyle compartment
Edit operations
Diagram operations
The StyleMenuSettings element provides no further edit operations within the diagram.
Property settings
The properties editor supports the setting of the features fixedMenu and menuStyle.
TABLE6.7: Mapping of the abstract syntax element SelectionStyleSettings
AS The abstract syntax element SelectionStyleSettings shapes the graphical concrete syntax element StyleSelectionSettings.
GCS (Type) Node
GCS (Example)
SelectionStyleSettings(node)
Context At most once inside a StyleSettings.selectionStyle compartment
Edit operations
Diagram operations
The StylePageSettings element provides no further edit operations within the diagram.
Property settings
The properties editor supports the setting of the feature selectionColor.
TABLE6.8: Mapping of the abstract syntax element PageStyleSettings
AS The abstract syntax element PageStyleSettings shapes the graph- ical concrete syntax element StylePageSettings.
GCS (Type) Node
GCS (Example)
PageStyleSettings(node)
Context Exactly once inside a StyleSettings.selectionStyle compartment
Edit operations
Diagram operations
The StyleSelectionSettings element provides no fur- ther edit operations within the diagram.
Property settings
The properties editor supports the setting of the features frame, framecolor, imagePosition, and textPo- sition.
TABLE6.9: Mapping of the abstract syntax elements Page
AS All abstract syntax elements which inherit only from the ele- ment Page are mapped respectively to equally named elements of the graphical concrete syntax. The static label above the icons indicates the type of the page. The dynamic label below the icon denotes its object name.
GCS (Type) Node with label
GCS (Example) (A) EditPage ...a (B) MapPage Page(node) Page.name
a CustomPage, LoginPage, MediaPage, ARPage, TakePicturePage
Context Arbitrarily often inside a PageContainer compartment
Edit operations
Diagram operations
The elements provide no further edit operations within the diagram.
Property settings
The properties editor supports the setting of the pageStyle and the name property. By default, the first pageStyle element in a diagram will be assigned automatically.
TABLE6.10: Mapping of the abstract syntax element Menu
AS The abstract syntax element Menu corresponds to the element
Menu of the graphical concrete syntax. The dynamic label below the icon denotes its object name.
GCS (Type) Node with label
GCS (Example)
Menu(node)
Menu.name
Context Arbitrarily often inside a PageContainer compartment
Edit operations
Diagram operations
The Menu element provides no further edit opera- tions within the diagram.
Property settings
The properties editor supports the setting of the features menuStyle and name.
6.6. Graphical Concrete Syntax and Edit Operations 83
TABLE6.11: Mapping of the abstract syntax element MenuablePage
AS The abstract syntax elements ViewPage and ProcessSelectorPage are mapped to equally named elements of the graphical con- crete syntax.
GCS (Type) Node with label
GCS (Example)
(A) ViewPage (B) ProcessSelectorPage
Page(node)
Page.name
Context Arbitrarily often inside a PageContainer compartment
Edit operations
Diagram operations
The elements provide no further edit operations within the diagram.
Property settings
The properties editor supports the setting of the features pageStyle, menu, and name. By default, the first menu element in a diagram will be assigned automatically.
TABLE6.12: Mapping of the abstract syntax element ListablePage
AS The abstract syntax elements ListPage and SelectableListPage are mapped to equally named elements of the graphical concrete syntax.
GCS (Type) Node with label
GCS (Example)
(A) ListPage (B) SelectableListPage
Page(node)
Page.name
Context Arbitrarily often inside a PageContainer compartment
Edit operations
Diagram operations
The elements provide no further edit operations within the diagram.
Property settings
The properties editor supports the setting of the feature listablePageStyle for both page types. The features selectablePageStyle and multiSelection are only supported for the SelectableListPage, while the feature menu is only supported for the ListPage.
As apparent by the GCS types in Tables6.2to6.12, the graphical concrete syntax
6.49
provides only nodes and no connection types. This is because connection types (e.g., arrows between nodes) often imply an execution order or processing sequence. Since the GUI model defines neither the internal structure of pages nor their invocation order, we refrain from using graphical syntax elements that could imply this. Rela- tions between objects can only be expressed by assignments in the properties editor (cf. Figure6.6band6.6c) or by using the compartment mechanism of a node. The latter variant is used for the StyleSetting element.