📱 Comprendre le rôle du Contrôleur dans l'architecture MVC avec Jetpack Compose

Dans une architecture logicielle MVC (Model-View-Controller),
le contrôleur joue le rôle de médiateur entre la vue et le modèle,
orchestrant la logique utilisateur et les interactions.

Mais qu’en est-il avec Jetpack Compose ?
Compose ne suit pas strictement le modèle MVC, mais une variante moderne : MVVM (Model-View-ViewModel).
Le contrôleur, dans ce contexte, change de forme, mais pas de fonction.

📌 Le contrôleur, un rôle toujours essentiel

Avec Jetpack Compose, le ViewModel assume la responsabilité que le contrôleur avait traditionnellement dans une architecture MVC. Il :

• 📦 Gère l’état de l’interface utilisateur.
• 🧠 Réagit aux événements de l’utilisateur.
• 🌐 Coordonne les interactions avec le modèle (accès aux données, API, etc.).

🎯 Exemple pratique : une interface de connexion

Voyons un exemple simple dans lequel un ViewModel agit comme un contrôleur réactif dans Jetpack Compose.

🧱 LoginViewModel.kt

class LoginViewModel : ViewModel() {
    var uiState by mutableStateOf(LoginUiState())
        private set

    fun onUsernameChanged(newUsername: String) {
        uiState = uiState.copy(username = newUsername)
    }

    fun onPasswordChanged(newPassword: String) {
        uiState = uiState.copy(password = newPassword)
    }

    fun onLoginClicked() {
        if (uiState.username == "admin" && uiState.password == "admin") {
            uiState = uiState.copy(isLoggedIn = true, error = null)
        } else {
            uiState = uiState.copy(error = "Identifiants incorrects")
        }
    }
}

data class LoginUiState(
    val username: String = "",
    val password: String = "",
    val isLoggedIn: Boolean = false,
    val error: String? = null
)

🖼️ LoginScreen.kt

@Composable
fun LoginScreen(viewModel: LoginViewModel = viewModel()) {
    val state = viewModel.uiState

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center
    ) {
        TextField(
            value = state.username,
            onValueChange = viewModel::onUsernameChanged,
            label = { Text("Nom d'utilisateur") }
        )

        Spacer(modifier = Modifier.height(8.dp))

        TextField(
            value = state.password,
            onValueChange = viewModel::onPasswordChanged,
            label = { Text("Mot de passe") },
            visualTransformation = PasswordVisualTransformation()
        )

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = viewModel::onLoginClicked) {
            Text("Se connecter")
        }

        state.error?.let {
            Text(text = it, color = Color.Red)
        }

        if (state.isLoggedIn) {
            Text("Bienvenue, ${state.username} !", color = Color.Green)
        }
    }
}

🔍 Conclusion

Dans Jetpack Compose, le contrôleur traditionnel de l’architecture MVC est remplacé par le ViewModel,
qui gère l’état et les interactions de manière réactive.
Cette évolution permet de tirer parti des avantages de la programmation déclarative tout en gardant une structure claire et maintenable.

📚 Ressources supplémentaires

• Guide officiel Jetpack Compose
• Architecture MVVM avec Jetpack Compose