RUI Libraty Tutorial

• RUI library
  • Hello world
• Used data types: SizeUnit
  • SizeUnit
  • SizeFunc
• Used data types: Color
• Used data types: AngleUnit
• View
  • Tracking property changes
• Events of View
• "id" property of View
• "width", "height", "min-width", "min-height", "max-width", "max-height" properties of View
• "resize" property of View
• "margin" and "padding" properties of View
• "border" property of View
• "outline" and "outline-offset" properties of View
• "radius" property of View
• "shadow" property of View
• Background of View
  • "background-color" property
  • "background-clip" property
  • "background" property
    • Linear gradient
    • Radial gradient
    • Conic gradient
    • Image
• "background-blend-mode" and "mix-blend-mode" properties of View
  • "background-blend-mode"
  • "mix-blend-mode"
• "clip" property of View
  • inset
  • circle
  • ellipse
  • polygon
• "opacity", "tabindex", "z-index", "tooltip", and "visibility" properties of View
  • "opacity" property
  • "tabindex" property
  • "z-index" property
  • "visibility" property
  • "tooltip" property
• "filter" and "backdrop-filter" properties of View
• "semantics" property of View
• Text properties of View
  • "font-name" property
  • "text-color" property
  • "text-size" property
  • "italic" property
  • "small-caps" property
  • "white-space" property
  • "tab-size" property
  • "word-break" property
  • "strikethrough", "overline", "underline" properties
  • "text-line-thickness" property
  • "text-line-style" property
  • "text-line-color" property
  • "text-weight" property
  • "text-shadow" property
  • "text-align" property
  • "text-indent" property
  • "letter-spacing" property
  • "word-spacing" property
  • "line-height" property
  • "text-transform" property
  • "text-direction" property
  • "writing-mode" property
  • "vertical-text-orientation" property
  • "user-select" property
• Transformation properties of View
  • "perspective" property
  • "perspective-origin-x" and "perspective-origin-y" properties
  • "backface-visibility" property
  • "origin-x", "origin-y", and "origin-z" properties
  • "translate-x", "translate-y", and "translate-z" properties
  • "scale-x", "scale-y" and "scale-z" properties
  • "rotate" property
  • "rotate-x", "rotate-y", and "rotate-z" properties
  • "skew-x" and "skew-y" properties
• Keyboard events
• Focus events
• Mouse events
• Pointer Events
• Touch events
• Resize-event
• Scroll event
• ViewsContainer
  • "content" property
• ListLayout
  • "orientation" property
  • "list-wrap" property
  • "vertical-align" property
  • "horizontal-align" property
  • "list-row-gap" and "list-column-gap" properties
  • "order"
• GridLayout
  • "column" and "row" properties
  • "grid-auto-flow"
  • "cell-width" and "cell-height" properties
  • "grid-row-gap" and "grid-column-gap" properties
  • "cell-vertical-align" property
  • "cell-horizontal-align" property
• ColumnLayout
  • "column-count" property
  • "column-width" property
  • "column-gap" property
  • "column-separator" property
  • "column-fill" property
  • "avoid-break" property
  • "column-span-all" property
• StackLayout
• TabsLayout
• AbsoluteLayout
• DetailsView
• Resizable
• TextView
• ImageView
• SvgImageView
• EditView
• NumberPicker
• DatePicker
• TimePicker
• ColorPicker
• FilePicker
• DropDownList
• ProgressBar
• Button
• ListView
  • The "items" property
  • "Orientation" property
  • "wrap" property
  • "item-width" and "item-height" properties
  • "item-vertical-align" property
  • "item-horizontal-align" property
  • "current" property
  • "list-item-style", "current-style", and "current-inactive-style" properties
  • "checkbox", "checked", "checkbox-horizontal-align", and "checkbox-vertical-align" properties
  • ListView events
• TableView
  • "content" property
  • "cell-style" property
  • "row-span" and "column-span" properties
  • "row-style" property
  • "column-style" property
  • "head-height" and "head-style" properties
  • "foot-height" and "foot-style" properties
  • "cell-padding" property
  • "cell-border" property
  • "table-vertical-align" property
  • "selection-mode" property
  • "current" property
  • "allow-selection" property
  • "table-cell-selected" and "table-cell-clicked" events
  • "table-row-selected" and "table-row-clicked" events
• Custom View
• CanvasView
  • Setting the line style
  • Setting the fill style
• CanvasView. Drawing geometric shapes
  • Rectangle
  • Rounded Rectangle
  • Ellipse
  • Path
  • Line
• CanvasView. Text
• CanvasView. Image
• AudioPlayer, VideoPlayer, MediaPlayer
  • "src" property
  • "controls" property
  • "loop" property
  • "muted" property
  • "preload" property
  • "poster" property
  • "video-width" and "video-height" properties
• MediaPlayer events
• MediaPlayer methods
• Popup
  • Popup header
  • Arrow Popup
  • Close Popup
  • Button area
  • Popup alignment
  • Standard Popup
• Animation
  • Animation interface
  • "timing-function" property
• Transition animation
  • Transition animation events
• Animation script
  • "property" property
  • "id" property
  • "iteration-count" property
  • "animation-direction" property
  • Animation start
  • "animation-paused" property
  • Animation events
• Session
• Resource description format
• Resources
• Images for screens with different pixel densities
• Themes
• Standard constants and styles
• Multi-language support