DesignOps - Conventions

Official Content
This documentation is valid for:

Conventions are useful for the essential difference between a designer profile and a developer profile.

In some cases, designers are creating and drawing without considering abstractions. Some of these drawings in the implementation must be, for example, an image. Therefore, the internal details of those components are not imported to GeneXus.

The freedom while designing is so great that there is no single heuristic that allows us to understand today the true meaning of what is drawn. This is why there are conventions to allow the design to be transmitted unambiguously to implementation.

Conventions

Ignore layer

Used when you draw a draft that you do not want to be imported by GeneXus.

Prefix _ (underscore)
Applies to Any element
Example Conventions - Ignore
Notes 1) Since some elements in the application are intended to be standard, the following set of keywords also ignores a layer: 'keyboard', 'status bar'

Static content

Used for defining static content (e.g. a section title) that will be interpreted by GeneXus as a TextBlock. 

Prefix static
Applies to  Text element
Example Conventions - Static

Dynamic content

Used for defining dynamic content (e.g. a customer name) that will be interpreted by GeneXus as a read-only Variable.

Prefix  (none)
Applies to  Text element
Example Conventions - Dynamic

Editable content

Used for defining editable content (i.e. user input) that will be interpreted by GeneXus as an editable Variable.

Prefix input
Applies to  Text element
Example Conventions - Edit
Notes 1) The import process cannot infer if the value associated with an input field is a preset value or if it is an invite message. Let your developer know which case is being displayed, so he/she can customize the appropriate colors for each case. GeneXus will not set a value associated to an input field; instead, it will use that value as an invite message.

Button control

Used for defining buttons that will be interpreted by GeneXus as a Button control. Also, if the layer defines a link, GeneXus will interpret a call action to the panel defined by the target artboard; otherwise, it will display a dummy message. 

Prefix button
Applies to  Group
Example Conventions - Button

Combo control

Used for defining a combo-box control that will be interpreted by GeneXus as a Variable with Control Type = Combo Box.

Prefix combobox
Applies to  Group
Example Conventions - Combobox

Check control

Used for defining a check-box control that will be interpreted by GeneXus as a Variable with Control Type = Check Box.

Prefix checkbox
Applies to  Group
Example Conventions - Checkbox

Radio-button control

Used for defining a radio-button control that will be interpreted by GeneXus as a Variable with Control Type = Radio Button. The elements defined in the group will be the items of the radio-button.

Prefix radiobutton
Applies to  Group
Example Conventions - Radiobutton

Tabs control

Used for defining tabs controls that will be interpreted by GeneXus as a Tab control. The elements defined in the group are just two: a group for the tab-strip and a group for the tab-content.

Prefix tabs
Applies to  Group
Example Under construction
Notes 1) Selected tab-item in the tab-strip must be differentiated from other tab-items (e.g. by changing its font-color).
  2) The tab-content variation must be designed in separated Artboards sharing the same prefix. For instance, you want to design a panel "Attraction" containing a tab with "About" and "Directions" items, then you should design the two Artboards and named them as "Attraction - About" and "Attraction - Directions", both of them will be equal except for the tab-content section and the tab-item style.
  3) Limitation: The tab-strip must be defined as a group (not as a symbol).

List & Carousel

Used for defining a list (vertical scroll) or carousel (horizontal scroll) that will be interpreted by GeneXus as a Grid control with the appropriate item orientation. 

Prefix grid (vertical | horizontal)
Applies to  Group
Example Conventions - Grid
Notes 1) When orientation is not indicated in the naming convention, GeneXus will try to infer it.
  2) It is highly recommended that you use symbols as items of the list (reusability).
Important: Designs for mobile admit instances of different Symbols (displayed as different layouts), but design for Web admit instances of just one Symbol (because only admits a single layout) and other instances different from the first Symbol's instance will be ignored. In both cases (mobile or web designs), text and image overrides are allowed, but style overrides does not.

Navigation bar

Used for rendering the navigation bar for a mobile app panel that will be interpreted by GeneXus as the Application Bar of the target panel.

Prefix navigation
Applies to  Group
Example Conventions - Naviagation
Notes 1) Does not apply for web applications.

Navigation tab

Used for rendering a navigation tab for mobile apps that will be interpreted by GeneXus as a Menu object referencing multiple target Panels.

Prefix tabbar
Applies to  Group
Example Under construction
Notes 1) Does not apply for web applications.
  2) Each tab-item must be grouped and each group name must match exactly with the Artboard's name being displayed (or the first one you linked it with other Artboards). For instance, if the navigation tab has an item for displaying the Artboard named "User Profile", then that item (the layer-group) must be also named "User Profile" too.

Scope

Generators   .NET, .NET Core, Java, Android, Apple, Angular

See also

Availability

These conventions are available as of GeneXus 17.