APLIKASI MENGGUNAKAN DESIGN PATTERN MVVM

UJIAN AKHIR SEMESTER

Pemrograman Lanjut

DISUSUN OLEH :

Nanda Atika Hariani 17.11.1701

PRODI INFORMATIKA
UNIVERSITAS AMIKOM YOGYAKARTA
YOGYAKARTA
2019
APLIKASI

Model
Pada model ini di deklarasikan Item penjualan yang terdiri atas Id, NamaBarang, Jumlah, Harga,
DiskonPersen, Total.
Variabel di atas akan menjadi variable utama kita.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;

namespace LatihanMVVM
{
public class ItemPenjualan
{
public ItemPenjualan()
{
DiskonPersen = 0;
}

public long Id { get; set; }

public string NamaBarang { get; set; }

public int Jumlah { get; set; }

public decimal Harga { get; set; }

public decimal DiskonPersen { get; set; }

public decimal Total()

{
decimal total = Jumlah * Harga;
return total - (DiskonPersen / 100 * total);
}
}
}

View
View di buat berdasarkan model yang telah di buat di atas view disini menggunakan tipe xml yang
di sebut xaml, view ini juga di dukung class c#

<Window x:Class="LatihanMVVM.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="356" Width="528">

<Window.Resources>
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="20" />
<Setter Property="FontFamily" Value="Myriad Pro" />
<Setter Property="FontWeight" Value="SemiBold" />
<Setter Property="Background">
<Setter.Value>
 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF508FC4" Offset="0" />
<GradientStop Color="#FF6F94AD" Offset="1" />
<GradientStop Color="#FFC7F3FF" Offset="0.302" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Foreground">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF5252CE" Offset="0" />
<GradientStop Color="#FF0000DB" Offset="0.953" />
<GradientStop Color="#FF6363CB" Offset="0.337" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>

<Style TargetType="Label">
<Setter Property="FontSize" Value="14" />
</Style>

<Style TargetType="TextBox">
<Setter Property="Language" Value="in-IN" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border x:Name="customBorder"
Background="{TemplateBinding Background}" CornerRadius="5" BorderThickness="2"
BorderBrush="Gray">
<ScrollViewer x:Name="PART_ContentHost"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsKeyboardFocused"
Value="True">
<Setter TargetName="customBorder"
Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10"
ShadowDepth="0" Color="#578EC9"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsKeyboardFocused"
Value="False">
<Setter Property="Foreground" Value="Gray" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

<Style TargetType="Button">
<Setter Property="Background" Value="#DEF2FC" />
<Setter Property="Foreground" Value="Black" />
<Setter Property="FontSize" Value="15"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="10" ShadowDepth="0"
Color="#578EC9"/>
</Setter.Value>
</Setter>
<Setter Property="Template">
 <Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="customBorder"
Background="{TemplateBinding Background}" CornerRadius="4" BorderThickness="2"
BorderBrush="Gray">
<ContentPresenter Content="{TemplateBinding
Content}" HorizontalAlignment="Center" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="#2394CC"
/>
<Setter Property="Foreground" Value="White"
/>
</Trigger>
<Trigger Property="IsPressed"
Value="True">
<Setter Property="Effect" Value="{x:Null}" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Effect">
<Setter.Value>
<BlurEffect Radius="3" />
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>

<Grid>
<Label Content="Nama Barang:" Height="29" HorizontalAlignment="Left"
Margin="0,49,0,0" Name="label2" VerticalAlignment="Top"
HorizontalContentAlignment="Right" Width="107" />
<TextBox Height="23" HorizontalAlignment="Stretch"
Margin="112,55,12,0" Name="textBox1" VerticalAlignment="Top" />
<Label Content="Jumlah:" Height="27" HorizontalAlignment="Left"
Margin="1,86,0,0" Name="label3" VerticalAlignment="Top" Width="106"
HorizontalContentAlignment="Right" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="113,90,0,0"
Name="textBox2" VerticalAlignment="Top" Width="62" />
<Label Content="Harga:" Height="28" HorizontalAlignment="Left"
Margin="12,122,0,0" Name="label4" VerticalAlignment="Top"
HorizontalContentAlignment="Right" Width="95" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="113,127,0,0"
Name="textBox3" VerticalAlignment="Top" Width="124" />
<Button Content="Simpan" Height="27" HorizontalAlignment="Left"
Margin="207,228,0,0" Name="button1" VerticalAlignment="Top" Width="82" />
<Label Content="Diskon (%):" Height="33" HorizontalAlignment="Left"
Margin="12,161,0,0" Name="label5" VerticalAlignment="Top"
HorizontalContentAlignment="Right" Width="95" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="113,165,0,0"
Name="textBox4" VerticalAlignment="Top" Width="62" />
<Label Content="Total:" Height="33" HorizontalAlignment="Left"
Margin="12,194,0,0" Name="label6" VerticalAlignment="Top"
HorizontalContentAlignment="Right" Width="95" />
<Label Content="Label" Height="28" HorizontalAlignment="Left"
Margin="113,194,0,0" Name="label7" VerticalAlignment="Top" Width="402" />
<TextBlock Height="28" HorizontalAlignment="Stretch" Name="textBlock1"
Text="Tambah Item Penjualan" VerticalAlignment="Top" TextAlignment="Center"
Margin="0,12,0,0" />
 <Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFB7CEFF" Offset="0.192" />
<GradientStop Color="White" Offset="1" />
<GradientStop Color="#FF1648AD" Offset="0" />
</LinearGradientBrush>
</Grid.Background>

</Grid>
</Window>

Dari kode view yang Panjang di atas jika di generate akan menghasilkan tampilan seperti ini:

View Model
View model ini menampung nilai yang ada di views sehingga command tidak perlu mengakses
setiap control yang ada di view secara langsung
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.ComponentModel;

namespace LatihanMVVM
{
class ItemPenjualanViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;

private ItemPenjualan model;

public ItemPenjualanViewModel(ItemPenjualan itemPenjualan = null)

{
this.model = itemPenjualan ?? new ItemPenjualan();
}
 public string NamaBarang
{
get { return model.NamaBarang; }
set
{
if (value != model.NamaBarang)
{
model.NamaBarang = value;
PropertyChanged(this, new
PropertyChangedEventArgs("NamaBarang"));
}
}
}

public int Jumlah

{
get { return model.Jumlah; }
set
{
if (value != model.Jumlah)
{
model.Jumlah = value;
PropertyChanged(this, new
PropertyChangedEventArgs("Jumlah"));
PropertyChanged(this, new
PropertyChangedEventArgs("Total"));
}
}
}

public decimal Harga

{
get { return model.Harga; }
set
{
if (value != model.Harga)
{
model.Harga = value;
PropertyChanged(this, new
PropertyChangedEventArgs("Harga"));
PropertyChanged(this, new
PropertyChangedEventArgs("Total"));
}
}
}

public decimal DiskonPersen

{
get { return model.DiskonPersen; }
set
{
if (value != model.DiskonPersen)
{
model.DiskonPersen = value;
PropertyChanged(this, new
PropertyChangedEventArgs("DiskonPersen"));
PropertyChanged(this, new
PropertyChangedEventArgs("Total"));
}
}
}

public string Total

 {
get
{
decimal? total = model.Total();
if (!total.HasValue)
{
return "-";
}
else
{
return total.Value.ToString("C");
}
}
}

public ItemPenjualan Model

{
get { return this.model; }
}
}
}

Menghubungkan view , view model dan model

untuk menghubungkan ketiga komponen ini kita hanya perlu mengganti kode pada
mainwindow.xaml.cs menjadi seperti in dan ketiga komponen akan terhubung.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace LatihanMVVM
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new ItemPenjualanViewModel();
}
}
}
Binding
Perubahan pada view akan langsung di perbaharui dengan melakukan binding, pada kode program
ini dilakukan binding pada property Text milik TextBox untuk mengisi nama barang dengan
property NamaBarang milik ItemPenjualanModelView selaku source-nya. Secara
default, binding pada TextBox adalah two-way binding. Dengan demikian, setiap kali pengguna
mengubah nilai TextBox tersebut , maka (setelah lost focus) nilai
property ItemPenjualModelView.NamaBarang akan diperbaharui. Begitu juga sebaliknya, bila saya
melakukan perubahan nilai ItemPenjualanModelView.NamaBarang di kode program, maka
isi TextBox tersebut akan diperbaharui.
...
<Label Content="Nama Barang:" ... />
<TextBox Name="textBox1" ... Text="{Binding Path=NamaBarang}"/>

<Label Content="Jumlah:" ... />

<TextBox ... Text="{Binding Path=Jumlah, StringFormat={}{0:#,0}}"/>

<Label Content="Harga:" ... />

<TextBox ... Text="{Binding Path=Harga,
StringFormat={}{0:C}}"/>

<Label Content="Diskon (%):" ... />

<TextBox ... Text="{Binding Path=DiskonPersen, StringFormat={}{0:#.#}}"/>

<Label Content="Total:" ... />

<Label .... Content="{Binding Path=Total}" />

Tampilan akhir aplikasi

di dalam tampilan ini semua komponen telah muncul dan dapat diisi sesuai dengan format
deklarasi variabel.