Basic UI Elements

Kunafa provides components for all basic views such as textView, ImageView, ButtonView, Table, Form, etc. These also include Layout Views and Scroll Views such as verticalLayout, horizontalLayout, verticalScollLayout, horizontalScrollLayout.

Be sure not to use scroll layouts for websites. They should only be used when developing web apps / mobile apps

UI elements are assigned to the getView() function of a component class. Views are inserted into a tree structure of repetitive parent and child views.

class HelloWorldComponent() : Conponent(){
  override fun View?.getView() : View = verticalLayout {
    textView {
      text = "Hello World"
    }
    textView{
      text = "Hello World Again"
    }    
  }
}

Mount Component

A component can be mounted as UI element in the middle of a Layout view. nIn Kunafa, a Component is an abstract class that represents a piece of UI element on the screen (see Components).

val component = HelloWorldComponent()
// --
// later in the code
// --
verticalLayout {
  mount(component)
  
}

RuleSet

Each Kunafa UI Component takes a style function to which a RuleSet can be assigned where CSS properties are specified. Creating a Ruleset provides a reusable style that standardizes elements within the component. The isVisible and onClick properties can also be assigned to any view. 

private val buttonStyle1 = classRuleSet {
        width = matchParent
        height = 50.px
        border = "2px solid #eaeaea"
        color = Color.black
        borderRadius = 7.px
        fontSize = 12.px
}

private fun View?.textToggle(){
	var toggle = false
	horizontalLayout{
    	style{
        	width = matchParent
        	height = wrapContent
        	justifyContent = JustifyContent.Center
        }
        textView{
        	text = "Hi"
            isVisible = toggle
        }
        buttonView{
        	text = "Go"
            onClick = {
            	toggle = !toggle
            }
            addRuleSet(buttonStyle)
        }
    }
}

Clickable Views

The onClick method is not specific to buttons. It can also be assigned a function in TextViews, ImageViews, and layout views. The following example is an implementation of a clickable image view that opens a url in a new window.

horizontalLayout {
            imageView {
                style {
                    alignSelf = Alignment.Center
                    width = 45.px
                    height = 45.px
                    padding = 6.px
                }
                element.src = "/public/img/link.png"
                onClick = {
                    window.open("https://www.youtube.com/", "_blank");
                }
            }
        }