V UIDocumentationGalleryTutorialsFrequently Asked Questions
V UIDocumentationGalleryTutorialsFAQ



V UI

Introduction

V UI is a cross-platform UI toolkit written in the V programming language for Windows, macOS, Linux, Android, and soon iOS and the web (JS/WASM). V UI uses non-native widgets on all platforms based on gg which is based on sokol.

Getting started

To install v ui simply type the following line in a terminal: v install ui This installs all the needed files to the folder ~/.vmodules. All the examples are provided at the locaion ~/.vmodules/ui/examples.

A minimal example

The following example is very basic and expresses the main structure of an ui file.

Mimimal example
image 
   1  import ui
   2  
   3  window := ui.window(
   4      width: 200
   5      height: 200
   6      title: 'V UI minimal example'
   7      layout: ui.column(
   8          children: [
   9              ui.button(text: 'Hello from V UI'),
  10          ]
  11      )
  12  )
  13  ui.run(window)

First of all, the code following the first line import ui is automatically inserted in the body of the implicit fn main() function (this is a feature offered by v). In the above example, a ui.Window instance is created and then run.

Main concepts about the visual part

In v ui there are widgets (implementing interface ui.Widget) to create the visual part of the application.

The widgets implementing the interface ui.Layout are more specifically called "layouts". There are three main layouts:

  • ui.Stack layout (with its derived versions ui.Column and ui.Row layouts) to locate widgets side by side
  • ui.CanvasLayout to locate widgets at any positions
  • ui.BoxLayout to locate widgets in some boxes

In fact, ui.Window is also considered as a ui.Layout.

A field children is provided to gather all the widgets of a layout.

Also notice that, if you want your ui application to be dynamic (with resizing feature for instance) the layout (or alternatively, the first element of the window children) has to be a ui.Stack (i.e. ui.Column or ui.Row), ui.BoxLayout and ui.CanvasLayout.

By considering the structure of the layouts with its children, a v ui application has a structure very similar to an html document.

Completing the minimal example for user interaction

When having a button, it is natural to expect click interaction.

Mimimal example
image 
   1  import ui
   2    window := ui.window(
   3          width: 200
   4          height: 200
   5          title: 'V UI minimal example'
   6          layout: ui.column(
   7              children:[
   8                ui.button(text: "Hello from V UI", on_click: fn (b &ui.Button) {b.ui.window.message("Hello V UI world!")})
   9              ]
  10          )
  11    )
  12    ui.run(window)

Now, by clicking on the button, a message appears.

Next steps

This was a short introduction to get quickly started to v ui. The next steps are then to: