Implementasi Klik Tombol dan Binding Properti - Winui C++

Di pelajaran sebelumnya, kita menambahkan tombol pada XAML dan membuat event klik. Fungsi pertama yang kita buat adalah mengubah teks tombol saat tombol diklik.

Pertama, kembali ke file XAML. Berikan nama pada tombol dengan kode x:Name="btnAdd", agar kita bisa mengelola objek tombol dari kode C++ backend.

<Grid>
    <Button x:Name="btnAdd" Content="Click Me" HorizontalAlignment="Center" VerticalAlignment="Center" Click="OnButtonClick"/>
</Grid>Code language: HTML, XML (xml)

Selanjutnya, buka fungsi implementasi OnButtonClick yang ada di MainWindow.xaml.cpp.

Kita bisa mengambil objek tombol secara langsung melalui variabel btnAdd yang sudah dideklarasikan di atas.

Saat tombol diklik, nilai properti Content akan diubah menjadi tulisan “Welcome to FoxDevelop.com”.

Sekarang jalankan proyek untuk melihat hasilnya.

void winrt::WinuiCppDemo::implementation::MainWindow::OnButtonClick(winrt::Windows::Foundation::IInspectable const& sender, 
winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    btnAdd().Content(box_value(L"Welcome to FoxDevelop.com"));
}
Code language: C++ (cpp)

Kita sudah melihat bahwa klik tombol bisa mengubah properti UI. Selanjutnya, kita akan membuat properti bilangan bulat untuk menghitung jumlah klik, nilainya akan bertambah satu setiap kali tombol ditekan. Properti ini kita hubungkan dengan TextBlock di XAML, sehingga tampilan UI akan otomatis menampilkan nilai terbaru.

Binding Properti

Untuk menghindari gangguan dari kode contoh sebelumnya, sebaiknya buat proyek kosong baru untuk latihan.

Ikuti langkah-langkah berikut:

Ubah file XAML dan tambahkan kontrol TextBlock.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WinuiDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinuiDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="WinuiDemo">

    <Grid>
        <TextBlock Text="{x:Bind MyProperty}" FontSize="24"/>
    </Grid>
</Window>
Code language: C++ (cpp)

Kemudian di file .cpp, buat fungsi MyProperty mengembalikan angka tertentu.

namespace winrt::WinuiDemo::implementation
{
    int32_t MainWindow::MyProperty()
    {
        return 100;
    }

    void MainWindow::MyProperty(int32_t /* value */)
    {
        throw hresult_not_implemented();
    }
}
Code language: C++ (cpp)

Setelah itu lakukan build dan jalankan aplikasi.

Terkadang lingkungan pengembangan akan menampilkan error berikut dan proses build akan macet tidak selesai.

Build started at 14:42...
1>------ Build started: Project: WinuiCppDemo, Configuration: Debug x64 ------
1>WindowsAppSDKMLDeploymentMode=Framework
1>MainWindow.xaml.cpp

Pesan error yang muncul adalah sebagai berikut:

#error directive: "C++/WinRT no longer supports pre-standardization coroutines. 
If you use co_await, switch to /await:strict or upgrade to C++20. If you do not,
 remove /await from the compiler flags."Code language: PHP (php)

Upgrade ke C++20

WinUI 3 dan C++/WinRT berbasis coroutine standar. Melakukan upgrade ke C++20 akan sangat memudahkan pemeliharaan kode di masa depan.

Buka menu Properti Proyek → C/C++ → Bahasa → Standar Bahasa C++ lalu pilih opsi C++20.

Lakukan build kembali. Proses ini akan memakan waktu lama karena akan menghasilkan file perantara sebesar 1,3 GB di folder D:\Demos\WinuiDemo\WinuiDemo\x64\Debug, itulah penyebab build lambat. Lama waktu build bergantung pada spesifikasi perangkat PC. Jika build berhasil dan aplikasi dijalankan, angka 100 akan muncul di layar jendela.

int32_t MainWindow::MyProperty()
    {
        return 100;
    }Code language: C++ (cpp)

Layar akan langsung menampilkan nilai yang dikembalikan oleh properti ini.

Implementasi Penambah Hitungan Saat Tombol Diklik

Sekarang tambahkan tombol baru dan hubungkan event klik ke tombol tersebut.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="WinuiDemo.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinuiDemo"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="WinuiDemo">

    <StackPanel Orientation="Vertical">
        <TextBlock Text="{x:Bind MyProperty}" FontSize="24"/>
        <Button Content="Click Me" Click="Button_Click"/>
    </StackPanel>
</Window>
Code language: HTML, XML (xml)

Arahkan kursor teks Button_Click di dalam atribut Click=”Button_Click”, lalu tekan tombol F12. Visual Studio akan otomatis membuat tanda tangan fungsi event di file .h dan .cpp.

void Button_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);

Cara penulisannya sama persis dengan contoh sebelumnya. Selanjutnya kita butuh variabel anggota privat bertipe int32_t untuk menyimpan jumlah klik tombol.

Pertama, tambahkan properti bilangan bulat di file header MainWindow.xaml.h untuk menampung nilai hitungan.

Properti yang didefinisikan di file .idl hanyalah antarmuka untuk akses luar, kita harus membuat kolom privat sendiri untuk menyimpan data asli.

Ketika kita tulis Int32 MyProperty di IDL, kelas akan mengekspos properti Int32 yang bisa dibaca dan ditulis untuk komponen luar.

Kompiler akan otomatis menghasilkan metode virtual Get/Set dan event perubahan properti bernama MyPropertyChanged

int32_t m_myPropValue = 0; // Variabel privat untuk simpan jumlah klik!Code language: C++ (cpp)

#pragma once

#include "MainWindow.g.h"

namespace winrt::WinuiDemo::implementation
{
    struct MainWindow : MainWindowT<MainWindow>
    {
    private:
        int32_t m_myPropValue = 0; // Simpan nilai dari MyProperty

    public:
        MainWindow()
        {
            // Objek Xaml tidak boleh memanggil InitializeComponent di dalam konstruktor.
            // Lihat referensi: https://github.com/microsoft/cppwinrt/tree/master/nuget#initializecomponent
        }

		
		//fungsi getter & setter
        int32_t MyProperty();
        void MyProperty(int32_t value);

        //Fungsi event klik tombol
        void Button_Click(winrt::Windows::Foundation::IInspectable const& sender, winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e);
    };
}

namespace winrt::WinuiDemo::factory_implementation
{
    struct MainWindow : MainWindowT<MainWindow, implementation::MainWindow>
    {
    };
}


Code language: C++ (cpp)

Sekarang ubah fungsi getter dan setter di file .cpp. Di dalam handler klik, ambil nilai saat ini dengan MyProperty(), tambah satu lalu masukkan kembali. Ada satu hal yang sangat penting:

this->Bindings->Update(); Baris ini tidak boleh dihilangkan sama sekali. Kode ini memberitahu semua elemen UI yang terhubung dengan properti ini untuk memuat ulang tampilan; tanpa baris ini angka di layar tidak akan pernah berubah.

#include "pch.h"
#include "MainWindow.xaml.h"
#if __has_include("MainWindow.g.cpp")
#include "MainWindow.g.cpp"
#endif

using namespace winrt;
using namespace Microsoft::UI::Xaml;

// Informasi lengkap tentang WinUI, struktur proyek dan template: http://aka.ms/winui-project-info.

namespace winrt::WinuiDemo::implementation
{
    int32_t MainWindow::MyProperty()
    {
        return m_myPropValue; //mengambil nilai m_myPropValue
    }

    void MainWindow::MyProperty(int32_t  value)
    {
        m_myPropValue = value; //menyimpan nilai ke m_myPropValue
        this->Bindings->Update(); // Paksa refresh semua binding x:Bind di halaman agar tampilan UI terupdate
    }
}

void winrt::WinuiDemo::implementation::MainWindow::Button_Click(winrt::Windows::Foundation::IInspectable const& sender,
 winrt::Microsoft::UI::Xaml::RoutedEventArgs const& e)
{
    MyProperty(MyProperty() + 1);//update nilai m_myPropValue, tambah 1
}
Code language: C++ (cpp)

Lakukan build ulang dan jalankan aplikasi kembali.

Di perangkat saya, proses build memakan waktu sangat lama, lama atau cepatnya tergantung spesifikasi PC masing-masing.

Build started at 15:29...
1>------ Build started: Project: WinuiDemo, Configuration: Debug x64 ------
1>WindowsAppSDKMLDeploymentMode=Framework
1>App.xaml.cpp
1>MainWindow.xaml.cpp

Proses kompilasi C++ menghasilkan banyak file perantara, di komputer saya build tidak selesai lebih dari sepuluh menit di awal.

Pukul 15:40 waktu lokal build akhirnya selesai dan jendela aplikasi terbuka, seluruh proses memakan waktu 11 menit penuh. Beberapa kali saya mengira program macet dan hampir menutup Visual Studio.

Hasil Akhir Saat Dijalankan

Pelajaran ini selesai sampai sini. Hari ini kita mempelajari dua poin utama: pertama cara menjalankan logika backend dan mengubah isi tampilan ketika tombol diklik, kedua mekanisme binding properti yang membuat UI otomatis terbaru ketika nilai properti backend berubah.

Previous: Analisis kelas jendela dan implementasi aksi klik tombol

Next: Pengaturan menu sisi kiri dan pemuatan halaman jendela utama selesai

Binding Properti

Upgrade ke C++20

Implementasi Penambah Hitungan Saat Tombol Diklik

Hasil Akhir Saat Dijalankan

Tinggalkan Balasan Batalkan balasan