Seni Bina Bersih & Corak Reka Bentuk dalam Amalan · Pelajaran

Pembentang dan Model Paparan

Fahami cara Pembentang memformat data daripada Kes Penggunaan menjadi Model Paparan yang sesuai untuk dipaparkan dalam UI.

Pelajaran 1 daripada 411 langkah

Pembentang dan Model Paparan ialah pelajaran Seni Bina Bersih & Corak Reka Bentuk dalam Amalan percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Seni Bina Bersih & Corak Reka Bentuk dalam Amalan, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Seni Bina Bersih & Corak Reka Bentuk dalam Amalan merangkumi sejumlah 4 pelajaran.

Mempersembahkan Data kepada Pengguna

Dalam Seni Bina Bersih, lapisan paling luar dikhususkan untuk rangka kerja dan pemacu, termasuk antara muka pengguna (UI) kita. Bagaimanakah kita memindahkan data daripada logik perniagaan teras kita (Kes Penggunaan) untuk dipaparkan pada skrin?

Di sinilah Pembentang dan Model Paparan memainkan peranan. Kedua-duanya bertindak sebagai penyesuai penting yang menghubungkan teras aplikasi anda dengan perwakilan visualnya.

Tujuan Pembentang

Pembentang ialah perantara yang bertanggungjawab menyediakan data untuk UI. Ia menerima output 'mentah' daripada Kes Penggunaan, yang biasanya terdiri daripada entiti perniagaan atau objek pemindahan data (DTO) khusus daripada lapisan aplikasi.

Ia mengubah output Kes Penggunaan kepada format yang sesuai untuk UI.
Ia mengendalikan logik persembahan, seperti memformat tarikh atau menggabungkan rentetan.
Ia TIDAK mengandungi peraturan perniagaan atau logik capaian data.

Apakah itu Model Paparan?

Model Paparan ialah struktur data ringkas yang direka khusus untuk satu paparan atau komponen UI. Ia hanya mengandungi data yang diperlukan untuk menghasilkan paparan tersebut, tidak lebih daripada itu.

Ia ialah bekas data 'dungu' tanpa tingkah laku.
Ia hanya mempunyai sifat yang berkaitan dengan UI.
Ia memisahkan UI daripada objek domain teras, lalu menjadikan UI lebih ringkas.

Anggaplah ia sebagai pelan bagi perkara tepat yang perlu dipaparkan pada skrin anda.

Pembentang & Model Paparan Beraksi

Beginilah biasanya Pembentang dan Model Paparan bekerjasama dalam aliran Seni Bina Bersih:

Tindakan pengguna mencetuskan Kes Penggunaan (contohnya, 'Dapatkan Butiran Pengguna').
Kes Penggunaan melaksanakan logik perniagaan dan menghasilkan keputusan (contohnya, objek UserOutputData).
Keputusan ini dihantar kepada Pembentang.
Pembentang mengubah UserOutputData menjadi UserViewModel.
UI kemudian menggunakan dan memaparkan UserViewModel secara langsung.

Mengapa Pemisahan Ini Penting

Penggunaan Pembentang dan Model Paparan memberikan kelebihan seni bina yang ketara:

Kebebasan UI: Logik aplikasi teras anda tidak perlu mengetahui atau mengambil berat tentang cara data dipaparkan.
Kebolehujian: Pembentang ialah objek biasa, menjadikan logik penukarannya mudah diuji secara unit tanpa memerlukan rangka kerja UI.
Fleksibiliti: Anda boleh menukar rangka kerja UI anda (contohnya, daripada rangka kerja lama kepada yang baharu) tanpa mengubah Kes Penggunaan atau Entiti anda.

Contoh: Output Kes Penggunaan

Mari kita pertimbangkan Kes Penggunaan yang mendapatkan butiran pengguna. Ia mungkin mengembalikan objek data seperti ini, yang mengandungi maklumat mentah:

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

Mereka Bentuk Model Paparan

Untuk UI kita, kita mahu memaparkan nama penuh pengguna dan tarikh pendaftaran yang diformat dengan kemas. Cap masa mentah daripada UserOutputData tidak boleh dipaparkan secara langsung. Oleh itu, kita mencipta UserViewModel khusus untuk tujuan ini:

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

Membina Pembentang

Sekarang, mari kita cipta UserPresenter. Tugasnya adalah mengambil UserOutputData dan menukarkannya kepada UserViewModel, sambil mengendalikan sebarang pemformatan atau logik persembahan yang diperlukan.

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

Menjalankan Aliran Pembentang

Berikut ialah contoh lengkap yang boleh dijalankan, yang menunjukkan bagaimana Kes Penggunaan mungkin mengembalikan data, kemudian data itu diproses oleh Pembentang dan disediakan untuk dipaparkan oleh 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());
    }
}

Uji Pengetahuan Anda

Antara berikut, yang manakah paling tepat menerangkan peranan utama Model Paparan dalam Seni Bina Bersih?

Jawab dalam pelajaran interaktif

Mempersembahkan Data Anda dengan Kemas

Dalam pelajaran ini, kita meneroka bagaimana Pembentang dan Model Paparan memainkan peranan penting dalam lapisan persembahan Seni Bina Bersih.

Pembentang bertindak seperti cef data, dengan mengubah output Kes Penggunaan kepada format yang sesuai untuk UI.
Model Paparan ialah struktur data ringkas yang khusus untuk UI dan hanya mengandungi perkara yang diperlukan untuk paparan.
Pemisahan ini meningkatkan kebolehujian, mengekalkan kebebasan UI dan membolehkan perubahan UI dilakukan dengan fleksibel.

Dengan menggunakan pola ini, logik teras aplikasi anda kekal bersih dan tidak dibebani butiran persembahan, lalu menjadikan sistem anda lebih kukuh dan mudah diselenggara.

Percuma untuk bermula

Pelajari Seni Bina Bersih & Corak Reka Bentuk dalam Amalan dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pembentang dan Model Paparan” percuma?

Ya — teks penuh “Pembentang dan Model Paparan” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Seni Bina Bersih & Corak Reka Bentuk dalam Amalan, tingkat taraf kepada CoddyKit PRO. Kursus Seni Bina Bersih & Corak Reka Bentuk dalam Amalan merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pembentang dan Model Paparan”?

Fahami cara Pembentang memformat data daripada Kes Penggunaan menjadi Model Paparan yang sesuai untuk dipaparkan dalam UI. Anda berlatih Seni Bina Bersih & Corak Reka Bentuk dalam Amalan menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Seni Bina Bersih & Corak Reka Bentuk dalam Amalan?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Seni Bina Bersih & Corak Reka Bentuk dalam Amalan di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.

Berapa lamakah pelajaran “Pembentang dan Model Paparan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Seni Bina Bersih & Corak Reka Bentuk dalam Amalan ini?

Ya. Setiap pelajaran Seni Bina Bersih & Corak Reka Bentuk dalam Amalan menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Pembentang dan Model Paparan
Menyesuaikan Diri dengan Rangka Kerja Web
Menguji Lapisan Persembahan
Objek Sederhana dan Sempadan Paparan

← Kembali ke Seni Bina Bersih & Corak Reka Bentuk dalam Amalan