access ANKO sqlite DB inside ANKO layout component

Question

I want to access my ANKO SQLite database, inside of my AnkoComponent. However I get prompted with an error within the scope of the component, and in the activity using the AnkoComponent it works just fine.

This is my ANKO SQLite database

package com.example.jokegenerator

import android.content.Context
import android.database.sqlite.SQLiteDatabase
import org.jetbrains.anko.db.*

class DatabaseOpenHelper(context: Context) :
        ManagedSQLiteOpenHelper(context, "Database", null, 2) {


    companion object {
        private var instance: DatabaseOpenHelper? = null

        @Synchronized
        fun getInstance(ctx: Context): DatabaseOpenHelper {
            if (instance == null) {
                instance = DatabaseOpenHelper(ctx.getApplicationContext())
            }
            return instance!!
        }
    }

    override fun onCreate(db: SQLiteDatabase) {
        // Here you create tables
        db.createTable("Jokes", true,
            "id" to INTEGER + PRIMARY_KEY + UNIQUE,
            "joke" to TEXT)
        db.insert("Jokes",
            "joke" to "Humor is not for everyone")
    }

    override fun onUpgrade(db: SQLiteDatabase, oldVersion: Int, newVersion: Int) {
        db.dropTable("User", true)
    }
}

val Context.database: DatabaseOpenHelper
    get() = DatabaseOpenHelper.getInstance(getApplicationContext())

This is the activity using the ANKO layout component, from where the component should use the database inside of a button. I have Commented inside AnkoComponent's code, to specify.

class JokeActivityUI : AnkoComponent<JokeActivity> {

    override fun createView(ui: AnkoContext<JokeActivity>) = with(ui) {
        verticalLayout {
            textView {

            }.lparams(width = matchParent) {

            }
            var getRndJoke = button {
                text = "get random joke!"


                onClick {
                    database.use{ //prompted with error written below!

                    }


                }
            }.lparams(width = matchParent) {

            }
            button {
                text = "create a joke"
                onClick {
                    startActivity<CreateJokeActivity>()
                }
            }.lparams(width = matchParent) {

            }
            button {
                text = "frontpage"
                onClick {
                    startActivity<MainActivity>()
                }
            }.lparams(width = matchParent) {

            }
        }
    }
}

However I am prompted with an error message saying:

public val Context.database: DatabaseOpenHelper defined in com.example.jokegenerator in file Database.kt

But inside of the activity using the layout I can use the database just fine

class JokeActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        JokeActivityUI().setContentView(this)


        database.use { //works just fine in this scope
            val dbJokes = database.use {
                select("Jokes")
            }


        }
    }
}

Answer 1

Why not access it from Activity? I think better to keep UI only focus on UI.

First, create lateinit var in JokeActivityUI called getRndJoke

class JokeActivityUI : AnkoComponent<JokeActivity> {

     lateinit var getRndJoke: Button

     ...
}

Then assign variable getRndJoke to the button

getRndJoke = button {
   text = "get random joke!"
}.lparams(width = matchParent)

So, you can easily access database in Activity like this:

class JokeActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        JokeActivityUI().setContentView(this)

        JokeActivityUI().getRndJoke.onClick {

           database.use {
              ...
           }
        }
    }
}

Extra: I think better to create instance JokeActivityUI like this:

val ui = JokeActivityUI()