Commit d9987ac6 authored by Koen van der Veen's avatar Koen van der Veen
Browse files

init cvu docs

parent d3fd6bdb
Pipeline #4941 passed with stages
in 6 minutes and 39 seconds
Showing with 423 additions and 0 deletions
+423 -0
# CVU: Actions
The following actions are supported in CVU.
Action | Arguments names and types | Description
---- | ---- | ----
back | | loads the previous view in the current session
addDataItem | template:DataItem | add an item based on a template
openView | view:View arguments:ViewArguments | opens a new view based on a literal view definition
openViewByName | name:String viewArguments:ViewArguments | opens a view by name
toggleEditMode | | toggles edit mode in the renderer/editor in the current view
toggleFilterPanel | | shows and hides the filter panel
star | | toggles the starred property on the current or a selection of data items
showStarred | | filters the current view to show only the elements that are starred
showContextPane | | show the context pane
showNavigation | | show the main navigation
share | | (not implemented yet)
duplicate | | duplicate the current data item
schedule | | (not implemented yet)
addToList | name:String | (not implemented yet)
delete | | delete the current or selection of data items
setRenderer | name:Renderer | change the renderer that is displaying the content
select | | select one or more data items (not implemented)
selectAll | | select all data items (not implemented)
unselectAll | | unselect all data items (not implemented)
openLabelView, | | (not implemented)
showSessionSwitcher | | show the session switcher
forward | | load the next view in the current session
forwardToFront | | load the topmost view in the current session
backAsSession | | load the previous view in a new session (copies the history)
openSession | session:Session | loads a new session based on a literal session definition
openSessionByName | name:String | loads a new session by name
addSelectionToList | | (not implemented)
closePopup | | closes a subview that is opened in a popup
noop | | does not execute an action (can be used as a placeholder while working on a view)
# CVU Expression Language
The following expressions are currently supported in CVU.
## Arithmetic Operators
```python
(5 + 10 * 4 - 3 / 10) / 10 # result: 4.470000000000001
```
## And and Or conditional statements
```python
true and false # result: false
true or false # result: true
```
## And and Or to select values
```python
.age > 18 and "Ask an adult question?" # result: only when the age is over 18 the text is displayed
.title or "Untitled Note" # result: a string with the title or "Untitled Note" when title is not set
```
## Conditions
```python
true ? 'yes' : 'no' # result: 'yes
true ? false and true ? -1 : false or true ? 'yes' : 'no' : -1 # result: 'yes
```
## Comparison
```python
true = false # result: false
true != false # result: true
5 > 10 # result: false
10 >= 5 # result: true
5 < 10 # result: true
10 <= 5 # result: false
```
## Variable Lookup and function execution
```python
.bar and bar.foo(10) and bar[foo = 10] or shouldNeverGetHere"
```
## Plus and minus variable modifier
```python
-5 + -(5+10) - +'5' # result: -25
```
## Negation
```python
!true # result: false
```
## Strings
```python
'asdadsasd\\'asdasd' # result: "asdadsasd'asdasd"
```
## Type conversion
```python
5 + '10.34' + true # result: 16.34
0 ? -1 : 1 ? '' ? -1 : 'yes' : -1 # result: -1
```
## String mode
```python
"Hello {fetchName()}!"
"Hello {.firstName} {.lastName}"
"{fetchName()} Hello"
```
## Edge traversal
```python
.label[] # Returns a list of items that are connect with edge type label
._label[] # Returns a list of edges with edge type label
.label # Returns the first item with edge type label
.label[.firstName = "James"] # Returns a list of item for which firstName is "James"
._label[.sequence > 3] # Returns a list of edges for which sequence is larger than 3
._~label # Returns the first reverse edge for which edge type is label
._~label[] # Returns a list of reverse edges for which edge type is label
.~label # Returns an item connected via a reverse edges for which edge type is label
.~label[] # Returns a list of items connected via a reverse edges for which edge type is label
```
## Variables and Properties
The available variables change based on the context. For instance certain renderers make additional variables available. The following variables are always available.
```python
me # A reference to the Person item that represents the user
context # A reference to the context instance
context.showSessionSwitcher # A boolean to toggle the session switcher
context.showNavigation # A boolean to toggle the navigation
sessions # A reference to all the sessions
sessions[i:Number] # a reference to a session in the list of all sessions
currentSession # A reference to the current session
session # A reference to the current session
session.name # The name of the session
session.editMode # Whether the session is in edit mode
session.showContextPane
session.showFilterPanel
session.screenshot
currentView # A reference to the current view
view # A reference to the current view
view.name
view.datasource
view.datasource.query
view.datasource.sortProperty
view.datasource.sortAscending
view.contextPane
view.userState
view.userState.<key>
view.viewArguments
view.viewArguments.<key>
view.resultSet
view.activeRenderer
view.backTitle
view.searchHint
view.actionButton
view.titleActionButton
view.editActionButton
view.sortFields
view.filterButtons
view.contextButtons
view.renderConfig
view.emptyResultText
view.title
view.subtitle
view.filterText
view.searchMatchText
singletonItem # A reference to the current single item, when in a single item view
singletonItem.<field>
```
## Functions
```python
setting(path:String) # Returns the value of a setting. e.g. setting('device/upload/cellular')
item() # Returns the context item i.e. synonymous with {{.}}
item(typeName:String, uid:Number) # Returns a specific item of a type with uid. e.g. item(Person, 10920823990)
debug(message1:Any[, message2:Any[, ...]]) # Prints one or more variables in the debug console e.g. debug(item())
min(value1:Number, value2:Number) # Returns the lowest value. e.g. min(5, 0) -> 0
max(value1:Number, value2:Number) # Returns the largest value. e.g. max(5, 0) -> 5
floor(value:Number) # Returns the closes smaller integer. e.g. floor(5.3) -> 5
ceil(value:Number) # Returns the closes larger integer. e.g. floor(5.3) -> 6
```
## Methods for types
```python
item.describeChangelog() # Short description of how this item was changed since it was created
item.computedTitle() # A title for this item
item.edge(edgeType:String) # An alternative way to get an edge, via a string
item.edges(edgeType:String) # An alternative way to get a list of edges, via a string
string.uppercased # turn the string to all caps
string.lowercased # turn the string to all lower case
string.camelCaseToWords # change a camel cased string to words. e.g. helloBeautifulWorld -> Hello Beautiful World
string.plural # not implemented (currently only adds an s to the end)
string.firstUppercased # first letter is upper cased
string.plainString # strip all HTML
string.count # the number of characters in the string
date.format() # format the date based on the user defined setting for a long date format
date.format("time") # format the date based on the user defined setting for time
date.format(format:String) # format the date based on a formatting string. e.g. date.format("YYYY HH:mm")
date.timeSince1970 # retrieve the number of milliseconds of the date since 1/1/1970
date.timeSinceNow # retrieve the number of milliseconds of the date from now
edge.source # fetch the source item of the edge
edge.target # fetch the target item of the edge
edge.item # fetch the target item of the edge
edge.label # the label of the edge
edge.type # the type of the edge (e.g. "brother")
edge.sequence # the sequence number of an edge that is in an ordered list of edges
edges.count # the number of edges in the list
edges.first # the first edge in the list
edges.last # the last edge in the list
edges.items # a list of items that the list of edges point to
```
\ No newline at end of file
# CVU: supported view definitions
The following view definitions are currently supported in CVU.
## Sessions
```css
[sessions = "name"] {
[session] {
}
}
```
## Session
```css
[session = "name"] {
[view] {
}
}
```
## View
### selector based on a list of the same types
```css
Person[] {
title: "{firstName} {lastName}"
}
```
Use `*[]` to apply to a list of any datatypes
Use `mixed[]` to apply to a list of mixed datatypes
### selector based on the data item type and its properties
```css
Person {
title: "{firstName} {lastName}"
}
```
Use `*` to apply to any data item
## Renderer
```css
[renderer = list] {
press: openView
}
```
## Datasource
Selects where data is loaded from, to display in this view.
```css
[datasource = pod] {
query: "Person"
}
```
## Color
The CVU language has built-in support for named colors that support dark and light mode. These colors can be defined using a color selector and can then be used in place of #333 style literal colors. In fact literal colors in views are highly discouraged. Users of views can override named colors in their settings, which they cannot do for literal colors.
```css
[color = "background"] {
light: #330000
dark: #ff0000
}
[color = "highlight"] {
light: #000
dark: #fff
}
```
## Style
Similarly styles can be combined into named sets that can then be applied to UI elements.
```css
[style = "my-label-text"] {
border: background 1
color: highlight
}
/* Example usage */
Text {
style: my-label-text
}
```
## Language
Language selectors are used to specify text used in views in various natural languages, by replacing the text with variables. Here's an example:
```css
[language = "English"] {
sharewith: "Share with..."
addtolist: "Add to list..."
duplicate: "Duplicate"
showtimeline: "Show Timeline"
timelineof: "Timeline of this"
starred: "Starred"
all: "All"
}
[language = "Dutch"] {
sharewith: "Deel met..."
addtolist: "Voeg toe aan lijst..."
duplicate: "Dupliceer"
showtimeline: "Toon Tijdslijn"
timelineof: "Tijdslijn van deze"
starred: "Favoriete"
all: "Alle"
}
/* Example usage */
Text {
text: "$sharewith"
}
```
\ No newline at end of file
# CVU UI elements
In CVU, UI elements are built by defining a nested collections of elements. Here follows the complete list of all UI elements definitions and their description.
Element Name | Description
----- | -----
VStack | Element that stacks its children vertically
HStack | Element that stacks its children horizontally
ZStack | Element that stacks its children on top of eachother
EditorSection | Element that renders as a section in the general editor
EditorRow | Element that renders as a row in a section in the general editor
EditorLabel | Element that renders a label in a row in the general editor
Button | Element that renders a button in the user interface. Buttons connect to
FlowStack | Element that horizontally stacks its children and wraps to the next line at the end of the container.
Text | Element that renders text on the screen
Textfield | Element allows a user to change text
ItemCell | Element that renders a data item as if it was displayed in a specific renderer
SubView | Element that renders a view inside another view
Map | Element that displays content on a map
Picker | Element that allows a user to choose from a list of options
SecureField | Element that allows a user to change text while keeping the entry private
ActionButton | Element that
MemriButton | Element that displays a cononical representation of a data item
Image | Element that displays an image
Circle | Element that renders a circle
HorizontalLine | Element that renders a horizontal line
Rectangle | Element that renders a rectangle
RoundedRectangle | Element that renders a rounded rectangle
Spacer | Element that maximizes the space between elements in a stack
Divider | Element that renders a divider line
Empty | Element that does not render anything
## Element properties
The following element properties are supported in CVU.
Property | Possible values | Description
---- | ---- | ----
resizable | String | set do "stretch", "fit", "fill" to determine how the element is resized (esp. Image)
show | Boolean | whether to show the element or not. Use an expression to toggle visibility (e.g. {{labels.count}}).
alignment | String | set to "center", "top", "left", "bottom", "right" to set the alignment of children of the stack element.
align | String | set to "center", "top", "left", "bottom", "right" to set the alignment of the element relative to their siblings in a stack.
textalign | String | set to "left", "center", "right" to determine how text is aligned.
spacing | Number | sets the space between elements in a stack.
title | String | sets the title of an element.
text | String | set the text of a Text element
image | String, File, URL(not supported yet) | sets the image location of an Image element
nopadding | Boolean | sets whether to display padding in a section in the general editor
press | Action | sets the action to be executed when the user presses the button
bold | Boolean | sets whether the text is rendered bold
italic | Boolean | sets whether the text is rendered italic
underline | Boolean | sets whether the text is rendered underline
strikethrough | Boolean | sets whether the text is rendered strikethrough
list | Array | sets a list to iterate over (used by FlowStack, ForEach (not supported yet))
viewName | String | sets the name of the view to display in the SubView
view | View | sets a literal definition of a view to load in the SubView
viewArguments | Dict | sets a dict of named arguments to pass to an ItemCell or SubView
location, | Location | sets a location to render on the Map element
address | Address | sets an address to render on the Map element
systemname | String | sets the system name of the image to display in the Image element
cornerradius | Number | sets the rounding of the corners of the element
hint | String | sets the hint to display in a TextField to inform a user what to type
value | String | sets the value of a form element
datasource | String | sets the datasource of a view
defaultValue | String | sets the default value of a form element
empty | String | sets the empty message displayed in a text element
style | Array, String | sets the style classes to apply to the element
color | Color | sets the text color of an element
font | Number String | sets the size of the font and the boldness: "thin", "ultrathin", "regular", "semibold", "medium", "bold"
padding | Array, Number | Set the distance between the content of the element and its edge. Either one number for all edges, or one for each.
background | Color | sets the color of the background of the element
rowbackground | color | sets the color of the background of the row in the list renderer
border | Color Number | sets the color of the border and its size
margin | Array, Number | Set the distance between the edge of the element and its neighbors and parent. Either one number for all edges, or one for each.
shadow | Array |
offset | Number Number | Sets the x and y offset
blur | Number | Sets the level of blur between 0 and 1
opacity | Number | Sets the opacity of the element between 0 and 1
zindex | Number | Sets the zindex controling which element is rendered on top of the other
minWidth | Number | Sets the minimal width of the element
maxWidth | Number | Sets the maximal width of the element
minHeight | Number | Sets the minimal height of the element
maxHeight | Number | Sets the maximal height of the element
N.B. Each of these properties can be calculated using the CVU expression language.
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment