View Visibility

There are many cases where we need to hide some non-relevant views from the application page like error messages, menu or list items, loading indicators, collapsible sections, conditional content display and more. For this purpose each view has a property called "visibility".

Property	Type	Description
"visibility"	`int`	The view visibility status

That property has only three possible values:

0 - The view is visible
1 - The view is invisible but still take up space
2 - The view is not visible and does not take up any space

The library has a dedicated constants for these values which are rui.Visible, rui.Invisible, and rui.Gone.

When describing user interface in resource files we must use the following corresponding text constants: visible, invisible, and gone.

The best way to retrieve the value of that property is to use the global GetVisibility() function.

To demonstrate that property lets create a login page with error message which will be displayed when wrong credentials will be supplied. In first part we describe our UI structure in "mainView.rui" resource description file, this will be our root window of the application:

RUI

GridLayout {
    width = 100%,
    height = 100%,
    background = image {
        src = "background.jpg",
        fit = cover,
    },
    cell-vertical-align = center,
    cell-horizontal-align = center,
    content = ListLayout {
        gap = 0.5em,
        orientation = up-down,
        content = [
            EditView {
                id = "user-name",
                radius = 1em,
                hint = "Username",
                opacity = 0.8,
            },
            EditView {
                id = "user-pwd",
                radius = 1em,
                hint = "Password",
                edit-view-type = "password",
                opacity = 0.8,
            },
            TextView {
                id = "error-msg",
                text = "Please check your username and password.",
                text-color = red,
                visibility = invisible,
            },
            Button {
                width = 5em,
                id = "login-btn",
                content = "Login",
            }
        ]
    }
}

Then we have to construct our root view when user opens our application page and setup event handlers. Remember that event handlers can only be assigned in the source code.

// Creation of the root view for the session
func (app *appSession) CreateRootView(session rui.Session) rui.View {
    rootView := rui.CreateViewFromResources(session, "mainView")

    // Setting text changed event handler
    if view := rui.ViewByID(rooView, "user-name"); view != nil {
        view.Set(rui.EditTextChangedEvent, credentialsChangedEvent)
    }

    // Setting text changed event handler
    if view := rui.ViewByID(rooView, "user-pwd"); view != nil {
        view.Set(rui.EditTextChangedEvent, credentialsChangedEvent)
    }

    // Setting login button clicked event handler
    if view := rui.ViewByID(rooView, "login-btn"); view != nil {
        view.Set(rui.ClickEvent, loginClickedEvent)
    }

    return rootView
}

And finally define our event handlers.

// Handler of the text changes in user name and password edit views
func credentialsChangedEvent(editView rui.EditView, newText, oldText string) {
    // Getting the root view of the session
    rootView := editView.Session().RootView()

    // Hide error message if user changed credentials text
    if errMsgView := rui.ViewByID(rootView, "error-msg"); errMsgView != nil {
        if rui.GetVisibility(errMsgView, "") == rui.Visible {
            errMsgView.Set(rui.Visibility, rui.Invisible)
        }
    }
}

// Handler for login button
func loginClickedEvent(view rui.View, event rui.MouseEvent) {
    // Getting the root view of the session
    rootView := view.Session().RootView()

    // Get user name and password
    userName := rui.GetText(rootView, "user-name")
    userPassword := rui.GetText(rootView, "user-pwd")

    // Show error message if credentials are not valid
    if !credentialsValid(userName, userPassword) {
        if errMsgView := rui.ViewByID(rootView, "error-msg"); errMsgView != nil {
            if rui.GetVisibility(errMsgView, "") != rui.Visible {
                errMsgView.Set(rui.Visibility, rui.Visible)
            }
        }
    }

    // Proceed further
}

// Logic for credentials verification
func credentialsValid(userName string, userPassword string) bool {
    return false
}

When we launch that application and open its page an error message will not be shown initially:

But when start playing with input fields and press login button it will appear. Every time we'll update our credentials error message will be hidden but still occupy the space: