Skip to main content

Prebuild UI Elements and Utilities

Custom UI Elements
More complex custom views were created that can be plugged in and fit many common interface scenarios. These include DropDownList, RemotesDropdownList, DatePicker, CheckBoxList, etc. The following are implementations of some of the commonly used custom views in Narbase projects.
RemoteDropDownList
var countryDropDownList: RemoteDropDownList<Country>? = null
var country: Country = null
view{
  countryDropDownList = setupRemoteDropDownList(
                    "Select Country",
                    getList = serverCaller::fetchSpecializationsAsync //Network call to return async list of <Country>,
                    itemToString = {
                        it.name
                    },
                    onItemSelected = {
                        it?.let {
                            country = it
                        }
                    },
                    rootStyle = styleDropDownList,
                    viewWidthFactory = { matchParent }
                )
}
PopUpDialog
val dialog by lazy { popUpDialog() }
MainTheme.showDialog (dialog) {
  verticalLayout{
    textView {
      text = "Are you sure you want to delete this?"
    }
    horizontalLayout{
      buttonView {
        text  = "Yes" 
        onClick = {
          //Do something
          dialog.dismissDialog()
        }
      }
      buttonView {
        text  = "No" 
        onClick = {
          dialog.dismissDialog()
        }
      }
    }
  }
}
SearchTextInput
searchTextInput("Search") {
  searchFor(it)
}
fun searchFor(term: String) {
        //Newtork call
}
CheckBox
var isTermsAccepted = false
elegantCheckbox(isSelected = isTermsAccepted ?: false, onChanged = {
  isTermsAccepted = it
})

Utilities
Bindings
Data binding is a concept that allows you to connect the data from your application with the UI. Bindings class attaches an observable to an object. It is used to add implementations on changes to the object. For instance, this could be used to receive and observe input from a text input view.
val studentName = StringBinding()
theme.labeledTextInput(this, "Name", true) {
  text = studentName.value!!
  bind(studentName)
} 
CustomImageUploader

The customImageUploader function returns a url string that should be stored in the respective entity. 

val imageUrl = customImageUploader(null, "Upload Student Photo",
                                style {
                                    width = matchParent
                                    height = wrapContent
                                    padding = "20px 20px".dimen()
                                    backgroundColor = Color.transparent
                                    border = "2px dashed${AppColors.borderColor}"
                                    hover {
                                        border = "2px dashed ${AppColors.borderDarkColor}"
                                    }
                                    borderRadius = 4.px
                                    alignItems = Alignment.Center
                                    opacity = 1.0
                                    display = flex
                                    pointerCursor()
                                }
                            )