Ren arkitektur og designmønstre i praksis · Lektion

Presenters og View Models

Forstå, hvordan Presenters formaterer data fra Use Cases til View Models, der egner sig til visning i brugergrænsefladen.

Lektion 1 af 411 trin

Presenters og View Models er en gratis Ren arkitektur og designmønstre i praksis-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Ren arkitektur og designmønstre i praksis, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Ren arkitektur og designmønstre i praksis-kurset indeholder 4 lektioner i alt.

Præsentation af data for brugere

I Clean Architecture er det yderste lag dedikeret til frameworks og drivere, hvilket omfatter vores brugergrænseflade (UI). Hvordan får vi effektivt data fra vores centrale forretningslogik (brugssager) vist på skærmen?

Det er her, præsentere og visningsmodeller kommer ind i billedet. De fungerer som vigtige adaptere, der bygger bro mellem din applikations kerne og dens visuelle repræsentation.

Præsentantens formål

En præsentant er et mellemled, der har ansvaret for at forberede data til brugergrænsefladen. Den modtager det "rå" output fra en brugssag, som ofte består af forretningsentiteter eller specifikke dataoverførselsobjekter (DTO'er) fra applikationslaget.

Den omformer output fra brugssagen til et format, der er egnet til brugergrænsefladen.
Den håndterer præsentationslogik, f.eks. formatering af datoer eller sammenkædning af strenge.
Den indeholder IKKE forretningsregler eller datatilgangslogik.

Hvad er en visningsmodel?

En visningsmodel er en simpel datastruktur, der er designet specifikt til en enkelt visning eller UI-komponent. Den indeholder kun de data, der er nødvendige for at gengive visningen, og ikke mere.

Det er en "dum" databeholder uden adfærd.
Den har kun egenskaber, der er relevante for brugergrænsefladen.
Den afkobler brugergrænsefladen fra kernedomænets objekter, så brugergrænsefladen bliver enklere.

Tænk på den som en skabelon for præcis det, din skærm skal vise.

Præsentant og visningsmodel i praksis

Sådan arbejder præsentere og visningsmodeller typisk sammen i et flow i Clean Architecture:

En brugerhandling udløser en brugssag (f.eks. "Hent brugeroplysninger").
Brugssagen udfører forretningslogik og producerer et resultat (f.eks. et UserOutputData-objekt).
Resultatet sendes til en præsentant.
Præsentanten omdanner UserOutputData til en UserViewModel.
Brugergrænsefladen bruger og viser derefter UserViewModel direkte.

Hvorfor denne adskillelse er vigtig

Brug af præsentere og visningsmodeller giver betydelige arkitektoniske fordele:

Uafhængig brugergrænseflade: Din centrale applikationslogik behøver ikke kende til eller bekymre sig om, hvordan data vises.
Testbarhed: Præsentere er simple objekter, så deres omdannelseslogik er nem at enhedsteste uden et UI-framework.
Fleksibilitet: Du kan ændre dit UI-framework, f.eks. fra et gammelt framework til et nyt, uden at ændre dine brugssager eller entiteter.

Eksempel: output fra en brugssag

Lad os se på en brugssag, der henter brugeroplysninger. Den kan returnere et dataobjekt som dette med rå oplysninger:

public class UserOutputData {
    private String firstName;
    private String lastName;
    private String email;
    private long registrationTimestamp; // epoch seconds

    public UserOutputData(String firstName, String lastName, String email, long registrationTimestamp) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.email = email;
        this.registrationTimestamp = registrationTimestamp;
    }

    public String getFirstName() { return firstName; }
    public String getLastName() { return lastName; }
    public String getEmail() { return email; }
    public long getRegistrationTimestamp() { return registrationTimestamp; }
}

Design af visningsmodellen

I vores brugergrænseflade vil vi vise brugerens fulde navn og en pænt formateret registreringsdato. Det rå tidsstempel fra UserOutputData kan ikke vises direkte. Derfor opretter vi en UserViewModel specifikt til dette formål:

public class UserViewModel {
    private String fullName;
    private String formattedRegistrationDate;

    public UserViewModel(String fullName, String formattedRegistrationDate) {
        this.fullName = fullName;
        this.formattedRegistrationDate = formattedRegistrationDate;
    }

    public String getFullName() { return fullName; }
    public String getFormattedRegistrationDate() { return formattedRegistrationDate; }
}

Opbygning af præsentanten

Lad os nu oprette en UserPresenter. Dens opgave er at tage UserOutputData og omdanne det til UserViewModel samt håndtere nødvendig formatering eller præsentationslogik.

import java.time.Instant;
import java.time.ZoneId;
import java.time.format.DateTimeFormatter;

public class UserPresenter {
    public UserViewModel present(UserOutputData outputData) {
        // Combine first and last name for display
        String fullName = outputData.getFirstName() + " " + outputData.getLastName();

        // Format the timestamp into a readable date string
        Instant instant = Instant.ofEpochSecond(outputData.getRegistrationTimestamp());
        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm")
                                            .withZone(ZoneId.systemDefault());
        String formattedDate = formatter.format(instant);

        return new UserViewModel(fullName, formattedDate);
    }
}

Kørsel af præsentantens flow

Her er et komplet eksempel, der kan køres, og som viser, hvordan en brugssag kan returnere data, der derefter behandles af en præsentant og gøres klar til visning i brugergrænsefladen.

import java.time.Instant;
import java.time.ZoneId;
import java.time.format.DateTimeFormatter;

// Simulate Use Case Output
class UserOutputData {
    private String firstName;
    private String lastName;
    private String email;
    private long registrationTimestamp;

    public UserOutputData(String firstName, String lastName, String email, long registrationTimestamp) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.email = email;
        this.registrationTimestamp = registrationTimestamp;
    }

    public String getFirstName() { return firstName; }
    public String getLastName() { return lastName; }
    public String getEmail() { return email; }
    public long getRegistrationTimestamp() { return registrationTimestamp; }
}

// View Model for UI
class UserViewModel {
    private String fullName;
    private String formattedRegistrationDate;

    public UserViewModel(String fullName, String formattedRegistrationDate) {
        this.fullName = fullName;
        this.formattedRegistrationDate = formattedRegistrationDate;
    }

    public String getFullName() { return fullName; }
    public String getFormattedRegistrationDate() { return formattedRegistrationDate; }
}

// Presenter logic
class UserPresenter {
    public UserViewModel present(UserOutputData outputData) {
        String fullName = outputData.getFirstName() + " " + outputData.getLastName();

        Instant instant = Instant.ofEpochSecond(outputData.getRegistrationTimestamp());
        DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm")
                                            .withZone(ZoneId.systemDefault());
        String formattedDate = formatter.format(instant);

        return new UserViewModel(fullName, formattedDate);
    }
}

public class Main {
    public static void main(String[] args) {
        // 1. Simulate Use Case returning data
        UserOutputData userData = new UserOutputData(
            "Alice", "Smith", "alice@example.com", 1678886400L // March 15, 2023 12:00:00 PM UTC
        );

        // 2. Presenter transforms data
        UserPresenter presenter = new UserPresenter();
        UserViewModel viewModel = presenter.present(userData);

        // 3. UI "displays" the ViewModel
        System.out.println("Displaying User Profile:");
        System.out.println("Name: " + viewModel.getFullName());
        System.out.println("Registered: " + viewModel.getFormattedRegistrationDate());
    }
}

Test din viden

Hvilken af følgende beskriver bedst en visningsmodels primære rolle i Clean Architecture?

Besvar den i den interaktive lektion

Ren præsentation af dine data

I denne lektion har vi undersøgt, hvordan præsentere og visningsmodeller spiller en vigtig rolle i præsentationslaget i Clean Architecture.

Præsentere fungerer som datakokke, der omdanner output fra brugssager til formater, der er egnede til brugergrænsefladen.
Visningsmodeller er simple, UI-specifikke datastrukturer, der kun indeholder det, der er nødvendigt til visning.
Denne adskillelse øger testbarheden, bevarer brugergrænsefladens uafhængighed og gør fleksible ændringer af brugergrænsefladen mulige.

Ved at bruge disse mønstre forbliver din applikations kern logik ren og fri for præsentationsdetaljer, hvilket gør systemet mere robust og nemmere at vedligeholde.

Gratis at komme i gang

Lær Ren arkitektur og designmønstre i praksis med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 48

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Presenters og View Models” gratis?

Ja — hele teksten til “Presenters og View Models” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Ren arkitektur og designmønstre i praksis-kurset, skal du opgradere til CoddyKit PRO. Ren arkitektur og designmønstre i praksis-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Presenters og View Models”?

Forstå, hvordan Presenters formaterer data fra Use Cases til View Models, der egner sig til visning i brugergrænsefladen. Du øver dig i Ren arkitektur og designmønstre i praksis med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Ren arkitektur og designmønstre i praksis?

Der kræves ingen tidligere erfaring. Ren arkitektur og designmønstre i praksis på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “Presenters og View Models”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Ren arkitektur og designmønstre i praksis-lektion?

Ja. Alle Ren arkitektur og designmønstre i praksis-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Ren arkitektur og designmønstre i praksis