Erick Kurniawan

Tutorial kali ini akan membahas bagaimana mengintegrasikan dan menggunakan DevExpress .NET MAUI Controls dengan Visual Studio 2022.

Jika anda mencari third party control untuk project .NET MAUI, anda dapat mempertimbangkan untuk menggunakan DevExpress .NET MAUI, salah satu alasannya adalah DevExpress menyediakan control ini secara gratis, dan dapat digunakan secara komersial. Komponen yang disediakan mendukung dua platform yang berbeda yaitu Android dan IOS.

DevExpress mengklaim bahwa komponen yang mereka sediakan memiliki performa yang bagus karena dibangun secara native. Jadi kontrol IOS dibangun menggunakan bahasa Objective-C dan kontrol Android dibangun menggunakan Kotlin sehingga akan memiliki performa native.

Adapun beberapa fitur dan komponen yang disediakan oleh DevExpress dan dapat digunakan adalah sebagai berikut:

– Material Design Theme
– DataGrid
– Collection View
– Chart & Gauges
– Scheduler
– Data Editor dan Form
– Tab & Popup
– Bottom Sheet & Shimmer

Menggunkan Komponen DevExpress

Untuk menggunakan komponen DevExpress, anda dapat mendowload dari NuGET package manager jika ingin menambahkan komponennya satu persatu secara manual. Alternatif yang kedua adalah menggunakan DevExpress .NET MAUI Project Template menggunakan extension yang disediakan oleh Visual Studio 2022.

Berikut adalah tampian pada NuGET Package Manager

Untuk menambahkan extension pada Visual Studio 2022, pada menu pilih Extension – Manage Extensions.

Setelah menambahkan MAUI DevExpress extension, anda sudah dapat membuat project MAUI DevExpress dengan cara membuat project baru pada Visual Studio 2022.

Pada Visual Studio 2022 pilih create a New Project, kemudian pilih

Beri nama Project dan Solution yang akan dibuat, kemudian anda dapat memilih kontrol apa saja yang akan dimasukan pada project. Anda dapat memilih tiga macam layout yang sudah disediakan, yaitu: blank, tabbed, dan flyout. Untuk target platform anda juga dapat memilih salah satu Android atau IOS.

Setelah memilih kontrol yang akan digunakan pada aplikasi yang dibuat, maka akan dibuat project MAUI yang sudah menggunakan Flyout template dan beberapa DevExpress komponen yang dipilih.

Dapat dilihat project template yang dihasilkan sudah menggunakan MVVM pattern. Pattern ini adalah salah satu pattern yang direkomendasikan untuk digunakan pada .NET MAUI Project.

Jalankan aplikasi pada emulator untuk melihat halaman apa saja yang sudah dihasilkan dari DevExpress Project template.

Halaman yang dibuat menggunakan Project MAUI DevExpress template sudah cukup lengkap untuk memualai membuat project awal, karena sudah memiliki halaman basic yang dibutuhkan seperti Login, Menu (Flyout), dan kontrol DevExpress yang diperlukan dalam pengembangan aplikasi.

Pada beberapa halaman yang sudah dibuat, dapat dilihat beberapa kontrol DevExpress sudah digunakan seperti pada halaman login yang menggunakan DevExpress Editor. Untuk menambahkan library DevExpress pada halaman tambahkan referensi berikut:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:dxe="clr-namespace:DevExpress.Maui.Editors;assembly=DevExpress.Maui.Editors"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="true"
             x:Class="Mobile.MAUIApp.Views.LoginPage">

DevExpress Editor akan digunakan untuk membuat form login yang menampilkan username dan password.

        <Grid ColumnSpacing="20" Padding="15" VerticalOptions="Center">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <dxe:TextEdit Text="{Binding UserName}" LabelText="Login" Margin="0" />
            <dxe:PasswordEdit Text="{Binding Password}" LabelText="Password"  LabelFontSize="Small" Margin="0" Grid.Row="1" />
            <Button Text="Log In" Command="{Binding LoginCommand}" Margin="0,10,0,0" Grid.Row="2"/>
        </Grid>

Dapat dilihat pada contoh diatas bahwa kita dapat menggunakan kontrol PasswordEdit yang ada pada DevExpress untuk membuat textbox spesifik untuk inputan password. Pada tutorial selanjutnya akan dibahas penggunaan komponen di .NET MAUI DevExpress yang lebih kompleks seperti Grid, CollectionView dan Chart.