Mobile Apps 2023W Lecture 19

Notes

March 22
--------

Integrating webview with HNTree

we have composable functions that we can copy over, but how should the app actually work?

Should start up as a web browser with a URL bar, with a button to the side of the URL bar that says "History".  Clicking on the button will switch the view to the History view.  If the user taps on a specific past URL, visit the page (potentially with confirmation)

What's the strategy?
 - first, change the webviewCompose app to have a URL bar and a history button
 - then, copy code over to historyviewer

Why?
 - separate complexity of interface design from "backend" (core functionality) design


My general strategy - get to "working code" ASAP, never have something that doesn't run for too long
 - if you don't do this, conceptual issues can persist for way too long

Code

package carleton.comp2601.webviewcompose

import android.os.Bundle
import android.view.ViewGroup
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.viewinterop.AndroidView

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Calling the composable function
            // to display element and its contents
            MainContent()
        }
    }
}

// Creating a composable
// function to display Top Bar
@Composable
fun MainContent() {
    var curURL by remember { mutableStateOf("https://news.ycombinator.com") }

    Scaffold(
//        topBar = { TopAppBar(title = {Text("COMP 2601")})},
        topBar = { URLBar(curURL = curURL, updateURL = { curURL = it }) },
        content = { MyContent(curURL = curURL, updateURL = { curURL = it }) }
    )
}

@Composable
fun URLBar(curURL: String, updateURL: (String) -> Unit) {
    var newURL = ""

    TextField(
        value = curURL,
        //onFocusChange = { updateURL(newURL) },
        //onValueChange = { updatedURL: String -> newURL = updatedURL},
        onValueChange = updateURL,
        label = { Text("Enter URL here") }
    )
}

// Creating a composable
// function to create WebView
// Calling this function as
// content in the above function
@Composable
fun MyContent(curURL: String, updateURL: (String) -> Unit){


    // Adding a WebView inside AndroidView
    // with layout as full screen
    AndroidView(factory = {
        WebView(it).apply {
//            layoutParams = ViewGroup.LayoutParams(
//                ViewGroup.LayoutParams.MATCH_PARENT,
//                ViewGroup.LayoutParams.MATCH_PARENT
//            )
            webViewClient = WebViewClient()
            loadUrl(curURL)
        }
    }, update = {
        it.loadUrl(curURL)
    })
}

// For displaying preview in
// the Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainContent()
}