Composició

#Introducció

Compose utilitza un model d’interfície d’usuari (UI) declaratiu que utilitza funcions que es componen d’altres funcions que prenen dades i emeten elements d’UI.

Aquestes funcions et permeten definir la UI de la teva aplicació mitjançant codi, descrivint quin aspecte hauria de tenir i proporcionant les dependències respecte a les dades, en lloc d’haver de centrar-te en la construcció de la UI (inicialitzant un element, afegint aquest a un element superior, etc.).

#Entorn de treball

Crea un projecte “JVM GUI Application (Compose Multiplatform) amb Idea.

Si obres el fitxer module.yaml pots veure que el mòdul està configurat per Compose.

Les dependències $compose.* es declaren amb una sintaxi especial de referència al catàleg de biblioteques de l’eina Compose.

product: jvm/app

dependencies:
  - $compose.desktop.currentOs

settings:
  compose: enabled

#Catàlegs de biblioteques

Un catàleg de biblioteques associa claus a coordenades de biblioteques (inclosa la versió) i permet afegir les mateixes biblioteques com a dependències a múltiples mòduls sense haver de repetir les coordenades ni les versions de les biblioteques.

Els catàlegs de la cadena d’eines es defineixen implícitament i contenen biblioteques predefinides relacionades amb la cadena d’eines corresponent. El nom d’un catàleg d’aquest tipus correspon al nom de la cadena d’eines corresponent a la secció de configuració.

Per exemple, les dependències dels frameworks de Compose Multiplatform són accessibles mitjançant el catàleg $compose: Referència DSL - Compose

Totes les dependències d’aquests catàlegs solen tenir la mateixa versió, que és la versió de la cadena d’eines.

Per utilitzar dependències dels catàlegs, fes servir la sintaxi $<catalog-name>.<key> en lloc de les coordenades.

dependencies:
  - org.jetbrains.kotlinx:kotlinx-datetime:0.6.2
  # Compose dependencies
  - $compose.foundation
  - $compose.material3
  - $compose.desktop.currentOs

#Hot Reload

Amper és compatible amb Hot Reload, que permet veure canvis de la UI en temps real sense reiniciar l’aplicació.

Utilitza l’opció CLI --compose-hot-reload-mode quan executes qualsevol mòdul Compose amb almenys la plataforma JVM.

 .\amper run --compose-hot-reload-mode

#Integració amb l’IDE

Quan executes la teva aplicació des de l’IDE, pots obtenir recompilació i recàrrega automàtica basada en canvis del sistema de fitxers, utilitzant el plugin Amper per a IntelliJ.

Per configurar-ho, no has de fer res, el plugin detecta automàticament la presència de Compose Hot Reload i activa la funcionalitat.

#DevelopmentEntryPoint

També és possible executar componibles específics com a mode Compose Hot Reload.

Per fer-ho, has de posar l’anotació @DevelopmentEntryPoint a la funció composable sense paràmetres.

Apareixerà una icona clicable al marge esquerre del composable:

#Limitacions actuals

• Has d’assegurar-te que jvm és una de les plataformes del mòdul.
• Amper no observa el sistema de fitxers, per tant, les recàrregues automàtiques només estan disponibles quan s’utilitza l’IDE.

#Pendent

• Documentation - Hot Reload

#Funcions componibles

Les funcions componibles són el bloc de construcció bàsic de Compose.

Una funció composable és una funció que emet Unit i que descriu alguna part de la teva interfície d’usuari. La funció pren algunes dades d’entrada i genera el que es mostra a la pantalla.

Per a més informació sobre les componibles, consulta la documentació del model mental de Compose.

Per crear una funció componible només has d’afegir l’anotació @Composable al nom de la funció:

@Composable
fun Greeting(name: String) {
    Text("Hello $name")
}