name: portada
class: portada-slide, center, middle

# Compose

.footnote[<%= teacher_name%>]

<%= teacher_slides_start %>

---
# Compose UI
- Llibreria kotlin que permet crear interfícies gràfiques
    - Jetpack Compose UI - Android
    - Compose Multiplatform / Jetbrains
        - Desktop
        - iOs
        - Experimental
            - Wasm
        - Compose - Web

---
# Compose Multiplatform
- https://github.com/JetBrains/compose-multiplatform
- Documentació de jetpack compose és més potent
- Kotlin Multiplatform
(Per creació d'aplicacions reactives desktop UI.)
    - Mateix codi per diferents plataformes

---
# Crear projecte
Utilitzarem un template
- https://github.com/mateu-at-itb/M78ExercicesProjectTemplate

---
# Iniciar applicació:

- Desktop
```bash
./gradlew :composeApp:run
```
- Android: Play des de Android Studio
- iOs: Requereix d'un Mac

---
# Iniciar applicació:
## Hot Run

---
# Carpetes
- composeApp: conté aplicació
    - commonMain: codi multiplataforma
    - androidMain/iosMain/jvmMain: codi específic

---
# HelloWorld

Crea el fitxer HelloWorldApp.kt a common

```
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable

@Composable
fun HelloWorldApp() {
    Text("Hello World")
}
```

---
# HelloWorld

Modifica el fitxer App.kt per a que cridi la funció HelloWorldApp()

```
@Composable
internal fun App() = AppTheme {
    HelloWorldApp()
}
```

Torna a fer corre l'aplicació

---
# Funcions Composable
- Les funcions Composable defineixen la UI
- Tindran l'anotació __@Composable__
- Primera lletra majuscules
- No retornen elements "emeten" elements de la UI al Compose runtime system per renderitzar-les
  - Creen un arbre que representa la interfície que serà posteriorment renderitzada

---
# Text
Mostra un text per pantalla

```kotlin
Text("Hello")
```

---
# Preview
- __@Preview__ -> Ens permet veure les vistes prèvies del nostre disseny.
    - import androidx.compose.desktop.ui.tooling.preview.Preview
- Cal tenir instal·lat el plugin _Compose Multiplatform IDE Support_ a l'Android Studio

---
# Text
Algunes opcions de Text
```kotlin
Text("Text", style = MaterialTheme.typography.titleLarge,)

Text("Text", color = Color.Red)

Text("", fontSize = 2.em)

Text("", fontWeight = FontWeight.Bold)
```

---
# Layout
- Cal indicar com organizar els elements, per a què no es pintin en el mateix lloc.
- __Column__  permet organizar els elements de forma vertical.
- __Row__ per organizar els elements de manera horizontal.
- __Box__ per apilar elements.

---
# Layouts: Column

```
@Composable
fun App() {
    Column{
        Text("Hello")
        Text("World")
    }
}
```

---
# Layouts: Row

```
@Composable
fun App() {
    Row{
        Text("Hello")
        Text("World")
    }
}
```

---
# Modifiers
- Modifiquen el comporatment d'un Composable

```
@Composable
fun App() {
    Column(modifier = Modifier.background(Color.Yellow)){
        Text("Hello")
        Text("World")
    }
}
```

---
# Modifiers

```
@Composable
fun App() {
    Column(modifier = Modifier.background(Color.Yellow).fillMaxWidth()){
        Text("Hello")
        Text("World")
    }
}
```

---
# Modifiers

```
@Composable
fun App() {
    Column(modifier = Modifier.background(Color.Yellow).fillMaxWidth()){
        Text("Hello",
            modifier = Modifier.align(Alignment.CenterHorizontally))
        Text("World")
    }
}
```

---
# Modifiers
- fillMaxSize/Width/Height
- size/width/height
- padding
- background

---
# Column/Row
- Aligment i arrangement

```
@Composable
fun App() {
    Column(modifier = Modifier.background(Color.Yellow).fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally){
        Text("Hello")
        Text("World")
    }
}
```

---
# Column/Row

```
@Preview
@Composable
fun App() {
    Column(modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
        ){
        Text("Hello")
        Text("World")
    }
}
```

---
# Button

```kotlin
Button(onClick = { }){
    Text("Register")
}
OutlinedButton(onClick = { }){
    Text("Exit")
}
```

---
# Exercices
- HelloWorld
- Welcome

---
# Resources
- Recursos de l'aplicació: commonMain/composeResources
  - Text (Els textos han de ser traduïbles)
    - values/strings.xml
  - Imatges
    - drawable

```kotlin
val stringValue = stringResource(Res.string.resourceKey)
Image(
    painter = painterResource(Res.drawable.myImage),
    contentDescription = null
)
```

---
# Other material components
```
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun App() {
    Column(modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ){
        Text("Text")
        Icon(Icons.Default.Add, "add icon")
        Button(onClick = { println("Clicked!") }){
            Text("Button")
        }
        FloatingActionButton(onClick = { println("clicked") }){
            Icon(Icons.Default.Add, "add")
        }
        Checkbox(false, onCheckedChange = { })
        TextField("textField", onValueChange = { })
        Chip(onClick = {}){Text("chip")}
        Image(
            painter = painterResource(Res.drawable.myImage),
            modifier = Modifier.size(100.dp),
            contentDescription = null
        )
        Card() {
            Text(text = "Hello, world!")
        }
    }
}
```

---
# Scaffold
```kotlin
Scaffold(
        topBar = { 
            TopAppBar(
                title = { Text("App Bar Title")}, 
                navigationIcon = {Icon(Icons.AutoMirrored.Filled.ArrowBack, "back")}) },
        floatingActionButton = {
            FloatingActionButton(onClick = {}){
                Icon(Icons.Default.Add, "add")
            }
        }
    ) { paddingValues ->
        Column (Modifier.padding(paddingValues)){
            Text("Screen Content")
        }
    }
```

---
# Other material components
- [Material3 components](https://m3.material.io/components)
- [App Material Catalog](https://play.google.com/store/apps/details?id=androidx.compose.material.catalog)

---
# Exercices
- Resource
- Contact

---
# LazyColumn 
- Llista vertical en la que es pot fer scrolling i que només composa els items visibles. 
  - LazyRow

```
@Composable
fun App() {
    val numbers = List(10){it}

LazyColumn {
        items(numbers){number ->
            Text(number.toString())
        }
    }
}
```

---
# Exercices
- MessagesList