Samples DaysEvent (Silverlight 2.0) Part 2
Membuat User Control DayEdit
Dalam membuat usercontrol DayEdit beberapa control Silberlight 2.0 yg saya gunakan antara lain :
- DataGrid, tempat menampilkan data Event
- DatePicker, untuk menentukan tgl event
- Button Control, untuk melakukan aksi CRUD.
Sebagai informasi tambahan dalam detail XAML DayEdit.Xaml juga terdiri beberapa control yg tidak kelihatan secara langsung seperti Grid, Stack Panel Control dan Child content control dalam Datagrid termasuk DataGridTextBoxColumn sebagai control untuk definisi dalam menampilkan kolom dalam datagrid.
Dalam silverlight 2.0, jika menambahkan DataGrid Control menggunakan Drag-Drop via toolbox maka VS2008 memudahkan kita dgn menambahkan xmlns dengan alias nama my untuk memudahkan kita menambahkan control yg dibutuhkan.
xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data".
<UserControl xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
x:Class="SampleDayEvents.DayEdit"
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml Ketika kita ingin melakukan penambahan langsung via VS editor cukup mengetik "<my: maka akan muncul inteliisense window dengan tipe control yg diinginkan.
XAML DayEdit
Untuk memudahkan memasukan data event dan melakukan CRUD, saya membuat kombinasi control sebagai panel aksi dari transaksi event, Grid sendiri dibagi oleh 2 row. Row pertama merupakan panel aksi dan row selanjutnya merupakan tempat DataGrid.
<Grid x:Name="LayoutRoot" Background="DarkGray" Grid.Row="2" Grid.Column="1" >
<Grid.RowDefinitions>
<RowDefinition MaxHeight="30"></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Height="100" >
<DatePicker x:Name="dtpDay" VerticalAlignment="Top" Margin="10,8,0,0"></DatePicker>
<TextBlock Text="New Event :" FontSize="12" VerticalAlignment="Top" Margin="8" Foreground="White"/>
<TextBox x:Name="txtNewEvent" Width="240" Height="20" Text="" VerticalAlignment="Top" Margin="0,8" FontSize="12"/>
<Button x:Name="btnAddNewEvent" Height="20" VerticalAlignment="Top" Margin="8,8" FontFamily="Arial" FontSize="12" Content="New" Width="48" />
<Button x:Name="btnRemoveEvent" Height="20" VerticalAlignment="Top" Margin="0,8" FontFamily="Arial" FontSize="12" Content="Delete" Width="48" />
<Button x:Name="btnSave" Height="20" VerticalAlignment="Top" Margin="5,8" FontFamily="Arial" FontSize="12" Content="Save" Width="48"/>
</StackPanel>
<my:DataGrid x:Name="dayGrid" Grid.Column="0" Grid.Row="1" AutoGenerateColumns="False" GridlinesVisibility="All"
CanUserResizeColumns="True" HeadersVisibility="All" IsReadOnly="False" RowDetailsVisibility="Visible" SelectionMode="SingleFullRow" RowHeight="50" >
<my:DataGrid.Columns>
<my:DataGridTextBoxColumn
Header="Event Name"
Width="250"
DisplayMemberBinding="{Binding EventName}"
FontSize="20" />
<my:DataGridTextBoxColumn
Header="Desription"
Width="320"
DisplayMemberBinding="{Binding EventDetail}"
FontSize="14" />
</my:DataGrid.Columns>
</my:DataGrid>
<Border BorderBrush="Black" BorderThickness="4" CornerRadius="4,4,4,4" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Width="640" Height="480" VerticalAlignment="Stretch" />
</Grid>Dalam contoh diatas saya mendefinisikan datagrid untuk setiap column yg ingin saya tampilkan saja, pada contoh proyek ini saya tidak menginginkan EventDate ada dalam DataGrid maka yg saya lakukan adalah :
- Set AutoGenerationColumns -> False
- Membuat definisi DataGrid.Columns dan Jenis column yg ingin saya gunakan, karena saya hanya ingin menampilkan data string umum, saya hanya menggunakan DataGridTextBoxColumn dan melakukan set property yg sesuai dengan keinginan saya.
- Untuk Melakukan Set Column ke DataGridTextBoxColumn gunakan DisplayMemberBinding dengan format "{Binding NamaProperty"} , untuk proyek ini kita hanya menggunakan 2 property dari MyEvent yakni : EventName dan EventDetail
Code Interaksi
Sewaktu pertama kali usercontrol melaksanakan load event akan melakukan initialisasi data ke dalam MyDB object, lalu memanggil fungsi filter untuk tanggal hari ini.
private void InitializeData(DateTime valueDate)
{
DateTime dt = valueDate;
// Get MyEvent Collection
listEvents = db.LoadData();
// Filter By Selected Date
UpdateViewGridByDate(dt);
}
/// <summary>
/// Filter List by Date
/// </summary>
/// <param name="value"></param>
public void UpdateViewGridByDate(DateTime value)
{
var result = from e in listEvents
where (e.EventDate == value)
select e;
MyEventList filterList = MyDB.ListToObserveCollection(result.ToList());
BindGrid(filterList);
}
Setelah itu binding ke DataGrid, perlu dicatat bahwa saya tidak melakukan binding langsung via ListEvents object yg berasal dary fungsi LoadData, karena saya ingin event yg ditampilkan berdasarkan tgl yg sedang aktif dan hal ini berlangsung jika user merubah tanggal dari DatePicker.
private void BindGrid(MyEventList eventList)
{
// Assign to ItemSource
try
{
dayGrid.ItemsSource = eventList;
}
catch (Exception ex)
{
Debug.WriteLine(ex.ToString());
}
}
Ketika memilih tanggal baru via DatePicker Control dilakukan validasi kondisi dalam event DateSelected dari DatePicker Control dan menggunakan DatePickerDateChangedEventArgs untuk mendapatkan nilai tanggal yg baru dipilih lalu update DataGrid.
void dtpDay_DateSelected(object sender, DatePickerDateChangedEventArgs e)
{
// Check if Date value is available
if (e.AddedDate.HasValue)
{
UpdateViewGridByDate(e.AddedDate.Value);
}
else
{
throw new Exception("Please Select Date First");
}
}
Sewaktu insert dengan menekan button NewEvent yg melakukan initiialisasi object baru MyEvent dan memasukan dalam koleksi event ListEvent melakukan UpdateGrid
void CreateNewEvent(string eventName, DateTime eventDate)
{
MyEvent newItm = new MyEvent { EventDate = eventDate, EventName = eventName, EventDetail = "" };
// Add New Event
listEvents.Add(newItm);
// Filter It
UpdateViewGridByDate(eventDate);
}
Fungsi HtmlWindow Alert & Confim
Di Silverlight 2.0, Class HtmlWindow ada di System.Windows.Browser.HtmlWindow namespace, jgn lupa untuk menggunakannya tidak perlu di instantiate, karena sealed class maka cukup lakukan seperti ini,
System.Windows.Browser.HtmlWindow window = System.Windows.Browser.HtmlPage.Window;
Banyak juga fungsi bermanfaat yg dapat digunakan.
Sewaktu menghapus data dengan menekan button Delete, yg saya lakukan adalah mengambil nilai dari SelectedItem property dari DataGrid dan melakukan Casting ke MyEvent Object dan memanggil fungsi RemoveEvent. Tak lupa saya menggunakan HtmlWindow object untuk berinteraksi sewaktu menghapus dengan fungsi Confirm dan Alert.
void btnRemoveEvent_Click(object sender, RoutedEventArgs e)
{
if (dtpDay.SelectedDate.HasValue)
{
MyEvent itm = (MyEvent)dayGrid.SelectedItem;
string removeConfirm = string.Format("Delete {0} ?", itm.EventName);
if (window.Confirm(removeConfirm))
RemoveEvent(itm);
else
window.Alert("You've Just cancelled Delete Item..!");
}
else
window.Alert("Don't Forget Select Date!");
}
void RemoveEvent(MyEvent delItem)
{
listEvents.Remove(delItem);
UpdateViewGridByDate(dtpDay.SelectedDate.Value);
}
Update data dengan menekan button Save akan melakukan update melalui fungsi Update() dari MyDB dan langsung menyimpan XML file.
void btnSave_Click(object sender, RoutedEventArgs e)
{
db.Update(listEvents);
}
Pada bagian ini saya sudah menyampaikan bagaimana :
- Membuat UserControl Sederhana
- Menggunakan Datagrid
- Menggunakan Fungsi pada Class HtmlWindow