Clean Architecture & Design Patterns in Practice · 课时

表示器与视图模型

理解表示器如何将用例中的数据格式化为适合在用户界面中展示的视图模型。

第 1 / 4 课11 个步骤

表示器与视图模型 是 CoddyKit 上的免费 Clean Architecture & Design Patterns in Practice 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Clean Architecture & Design Patterns in Practice 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Clean Architecture & Design Patterns in Practice 课程共包含 4 节课。

本课时的部分内容尚未翻译，以英文显示。

Presenting Data to Users

In Clean Architecture, the outermost layer is dedicated to frameworks and drivers, which includes our user interface (UI). How do we effectively get data from our core business logic (Use Cases) to display on the screen?

This is where Presenters and View Models step in. They act as crucial adapters, bridging the gap between your application's core and its visual representation.

The Presenter's Purpose

A Presenter is an intermediary responsible for preparing data for the UI. It receives the 'raw' output from a Use Case, which often consists of business entities or specific data transfer objects (DTOs) from the application layer.

It transforms Use Case output into a UI-friendly format.
It handles presentation logic, such as formatting dates or combining strings.
It does NOT contain business rules or data access logic.

What is a View Model?

A View Model is a simple data structure specifically designed for a single view or UI component. It contains only the data needed to render that view, nothing more.

It's a 'dumb' data container with no behavior.
It only has properties relevant to the UI.
It decouples the UI from core domain objects, making the UI simpler.

Think of it as a blueprint for exactly what your screen needs to show.

Presenter & View Model in Action

Here's how Presenters and View Models typically work together in a Clean Architecture flow:

A user action triggers a Use Case (e.g., 'Fetch User Details').
The Use Case executes business logic and produces a result (e.g., a UserOutputData object).
This result is passed to a Presenter.
The Presenter transforms the UserOutputData into a UserViewModel.
The UI then directly consumes and displays the UserViewModel.

Why This Separation Matters

Using Presenters and View Models provides significant architectural advantages:

UI Independence: Your core application logic doesn't need to know or care about how data is displayed.
Testability: Presenters are plain objects, making their transformation logic easy to unit test without needing a UI framework.
Flexibility: You can change your UI framework (e.g., from an old framework to a new one) without altering your Use Cases or Entities.

Example: Use Case Output

Let's consider a Use Case that fetches user details. It might return a data object like this, containing raw information:

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; }
}

Designing the View Model

For our UI, we want to display the user's full name and a nicely formatted registration date. The raw timestamp from UserOutputData isn't directly displayable. So, we create a UserViewModel specifically for this purpose:

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; }
}

Building the Presenter

Now, let's create a UserPresenter. Its job is to take the UserOutputData and convert it into the UserViewModel, handling any necessary formatting or presentation logic.

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);
    }
}

Running the Presenter Flow

Here's a complete, runnable example demonstrating how a Use Case might return data, which is then processed by a Presenter and prepared for display by the UI.

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 Your Knowledge

Which of the following best describes the primary role of a View Model in Clean Architecture?

在交互式课程中回答

Presenting Your Data Cleanly

In this lesson, we explored how Presenters and View Models play a vital role in the presentation layer of Clean Architecture.

Presenters act as data chefs, transforming Use Case output into UI-friendly formats.
View Models are simple, UI-specific data structures, containing only what's needed for display.
This separation boosts testability, maintains UI independence, and allows for flexible UI changes.

By using these patterns, your application's core logic remains pristine, unburdened by presentation details, making your system more robust and maintainable.

免费开始

用 AI 导师学习 Clean Architecture & Design Patterns in Practice — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 12
课程: 48

免费开始学习查看完整课程

常见问题解答

「表示器与视图模型」课时是免费的吗？

是的 — 「表示器与视图模型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Clean Architecture & Design Patterns in Practice 课程的其余内容，请升级到 CoddyKit PRO。 Clean Architecture & Design Patterns in Practice 课程共包含 4 节课。

「表示器与视图模型」这节课中我会学到什么？

理解表示器如何将用例中的数据格式化为适合在用户界面中展示的视图模型。你通过在浏览器中直接运行的动手代码来练习 Clean Architecture & Design Patterns in Practice，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Clean Architecture & Design Patterns in Practice 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Clean Architecture & Design Patterns in Practice 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「表示器与视图模型」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Clean Architecture & Design Patterns in Practice 课中编写并运行代码吗？

能。每节 Clean Architecture & Design Patterns in Practice 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Clean Architecture & Design Patterns in Practice