Mind <Your .NET> Talk

Samples DaysEvent (Silverlight 2.0) Part 1

Contoh ini merupakan demo aplikasi silverlight 2.0 menggunakan HTML page, dalam implementasinya transaksi dalam file XML dan disimpan dalam Isolated Storage.

Contoh program ini akan menghasilkan tampilan seperti ini  :

LayOut DayEdit UserControl

Terdiri dari beberapa control seperti dengan rincian tujuan :

• Calendar Control -> menentukan tanggal event
• TextBox Control -> input nama Event
• 3 Button Control -> yg berfungi untuk Insert, Delete dan Save event
• DataGrid Control -> Menampikan data dan melakukan edit data

Arsitektur

Class pendukung contoh ini terdiri dari :

• MyEvent, class yg mendifinisikan property dari event
• MyDB, class yg berisikan fungsi untuk membuka dan menyimpan XML file yg berisi event yg sudah terdefinisikan dalam class MyEvent.
• Dan yg terakhir adalah usercontrol class yg merupakan implementasi dari XAML berikut eventsdan methods yg terkandung di dalamnya.

Menyiapkan Class MyEvent dengan Two-Way Binding

Class MyEvent terdiri dari  3 properties yakni  :

1. EventDate,  Informasi tgl dari Event tsb
2. EventName, Informasi Nama event 
3. EventDetails, Tambahan detil dari event

Hasil dari Class sederhana MyEvent seperti ini :

public class MyEvent
    {
        public DateTime EventDate { get; set; }
        public string EventName { get; set; }
        public string EventDetail { get; set; }
    }

Perlu diperhatikan dalam class ini saya tidak melakukan initialisasi variable untuk masing2 property yg pada umumnya kita lakukan, hal ini merupakan salah satu fitur terbaru dari C# di .NET 3.5 yg memberikan keleluasaan kita untuk tidak melakukan definisi dari private field, fitur ini disebut Automatic properties, yg mana compiler akan menyediakan secara otomatis untuk kita. Jika tertarik untuk mengetahui bagaimana hal tsb terjadi anda dapat melihat penjelasan dari Bart De Smet di halaman ini. 

Scott Guhtrie juga menyediakan informasi detail ttg penggunaan ini anda dapat juga melihat penjelasannya lebih lanjut di halaman ini.

Dalam penyempurnaan proyek ini, nantinya class Myevent akan mempunyai sedikit perubahan dikarenakan karena kita ingin memudahkan implementasi kita dengan koleksi dari MyEvent class. Umumnya saya menggunakan List<T> implementasi dari Collection Generic untuk mempersiapkan koleksi pada class umumnya, namun disarankan agar menggunakan ObservableCollection yg dapat memudahkan melakukan automatic binding ke control. Sedangkan pada Silverlight terdiri dari 3 Jenis  binding yakni :

1. OneTime, binding yg dilakukan sekali waktu dari sumber data.
   
   Contoh : Get Data() -> Bind to Control
   
2. One-Way, binding yg dilakukan sekali waktu dari sumber data dan perubahan berikutnya yg dilakukan pada source data.
   
   Contoh : GetData() -> Save On Local Object -> Binding Control() via Local Object
   Lakukan perubahan dalam Local Object -> Binding Control()
   
3. Two-Way, binding yg dilakukan jika dalam pelaksanaannya terjadi perubahan dalam source data maupun target control.
   
   Bentuk sederhananya adalah "binding yg terjadi di dalam target control maupun source data"
   misalnya interaksi dalam datagrid setelah di binding, user sewaktu-waktu dapat kapan saja melakukan CRUD dalam target control, berikut juga dari source data yg dilakukan pada waktu bersamaan.

Namun perlu dicatat bahwa untuk menggunakan teknik Two-Way binding, anda perlu melakukan implementasi INotifyPropertyChanged pada object anda , jika tidak maka object binding akan diperlakukan OneTime binding. INotifyPropertyChanged  ada dalam System.Componentmodel.

Maka selanjutnya dengan implementasi INotifyPropertyChanged class  MyEvent akan menjadi seperti ini :

public class MyEvent : INotifyPropertyChanged
   {
       public DateTime EventDate { get; set; }

       private string _eventName;
       public string EventName 
       {
           get { return _eventName; } 
           set 
           {
               _eventName = value; RaisePropertyChanged("EventName");
           } 
       }
       private string _eventDetail;
       public string EventDetail
       {
           get { return _eventDetail; }
           set
           {
               _eventDetail = value; RaisePropertyChanged("EventDetail");
           }
       }
       private void RaisePropertyChanged(string propertyName)
       {
           if (PropertyChanged != null)
               PropertyChanged(this, new PropertyChangedEventArgs(propertyName));  
       }

       #region INotifyPropertyChanged Members

       public event PropertyChangedEventHandler PropertyChanged;

       #endregion
   }

Dalam implementasi INotifyPropertyChanged,  beberapa perubahan dilakukan yakni implementasi interface PropertyChangedEventHandler, fungsi RaisePropertyChanged ,  serta property EventName  ditambahkan private field serta melakukan eksekusi RaisePropertyChanged sewaktu melakukan set untuk notifikasi property yg berubah.

Saya juga menyediakan koleksi dari MyEvent yg dinamakan MyEventList yg merupakan implementasi dari ObservableCollection<MyEvent>,  tidak lupa ditambahkan attribute XmlRoot di class header yg akan dijelaskan pada paragraf selanjutnya.

Menyiapkan Helper Class In Out XML

MyDB class berfungsi sebagai tools untuk memudahkan dalam mengambil file di IsolatedStoraged  dan menyimpannya kembali, selain itu jg ada fungsi LoadData dgn nilai balik berupa ObservableCollection.

Saya menggunakan XElement object untuk menyimpan isi XML file tsb, selain itu kita jg bisa melakukan dengan object lainnya seperti XDocument Object.

Fungsi LoadXML

IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication();

               // Create new file
               if (isoStore.FileExists(_file))
               {
                   // Initialize the IsolatedStoraged
                   IsolatedStorageFileStream isoStream = 
                       new IsolatedStorageFileStream(_file, FileMode.Open, isoStore);

                   // Create the text Reader
                   TextReader reader = new StreamReader(isoStream);
                   

                   // Load File To Element
                   exml = XElement.Load(reader);

Fungsi selanjutnya fungsi LoadData(), dengan syntax LINQ untuk menghasilkan koleksi event yg ada File XML.

Fungsi LoadData

public MyEventList LoadData()
       {
           if (exml == null)
               return new MyEventList();

           // Select By Date Value
           var events = from itmEvent in exml.Descendants("MyEvent")                         
                        select new MyEvent
                        {
                            EventDate = (DateTime)itmEvent.Element("EventDate"),
                            EventName = (string)itmEvent.Element("EventName"),
                            EventDetail = (string)itmEvent.Element("EventDetail")
                        };
           // Convert List To MyEventList
           return ListToObserveCollection(events.ToList());                                     
       }

Saat ini result dari implementasi LINQ belum dapat melakukan transalasi ke dalam bentuk ObservableCollection ( mohon dikoreksi ) , akhirnya saya membuat fungsi sederhana yaitu ListToObserveCollection untuk melakukan konversi dari List<T> ke ObservableCollection secara manual.

Fungsi untuk menyimpan XML file ke IsolatedStorage merupakan fungsi umum untuk menyimpan dengan cara melakukan serialisasi terhadap object Events.

    
    // Create Serializer
    System.Xml.Serialization.XmlSerializer xmls = new System.Xml.Serialization.XmlSerializer(typeof(MyEventList));

    // Find Where IsolatedStoraged 
    IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication();
                    
    // Create new file return to Stream
    IsolatedStorageFileStream isoStream = new IsolatedStorageFileStream(_file,FileMode.Create, isoStore);
                                 
    // Create new xmlWriter
    XmlWriter xw = XmlWriter.Create(isoStream);  

    // Serialized it
    xmls.Serialize(xw, events);

    // Close xmlWriter
    xw.Close();                

ATTRIBUTES XmlRoot

Diharapkan MyEvent akan menghasilkan file XML yg  seperti ini :

 

Contoh dibawah adalah bagaimana hasil penyimpanan dari fungsi diatas, perlu diketahui bahwa dalam penyimpanan dalam file xml telah ditambahkan xmlns secara otomatis, dalam root file tsb kita dapat melihat bahwa jka kita tidak memberikan attribute XmlRoot pada class MyEvent XmlWriter akan menambahkan nama ArrayOf + nama class dalam root element file XML.

<ArrayOfMyEvent xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <MyEvent>
    <EventDate>2008-03-27T00:00:00+07:00</EventDate>
    <EventName>New Event 1</EventName>
    <EventDetail />
  </MyEvent>
  <MyEvent>
    <EventDate>2008-03-27T00:00:00+07:00</EventDate>
    <EventName>New Event 2</EventName>
    <EventDetail />
  </MyEvent>
</ArrayOfMyEvent>

Agar dapat menghasilkan root seperti yg kita harapkan tambahkan attribute XmlRoot seperti contoh dibawah ini

[XmlRoot(ElementName="MyEvents")]

maka hasilnya akan seperti :

<MyEvents xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
  <MyEvent>
    <EventDate>2008-03-27T00:00:00+07:00</EventDate>
    <EventName>New Event 1</EventName>
    <EventDetail />
  </MyEvent>
  <MyEvent>
    <EventDate>2008-03-27T00:00:00+07:00</EventDate>
    <EventName>New Event 2</EventName>
    <EventDetail />
  </MyEvent>
  <MyEvent>
    <EventDate>2008-03-27T00:00:00+07:00</EventDate>
    <EventName>Nambah Event</EventName>
    <EventDetail />
  </MyEvent>
</MyEvents>

• Helper Class XML Ke IsolateStorage
• Implementasi Class Event dan Koleksinya
  • Implementasi ObservableCollection dan IPropertyNotifyChanged Interface
• Penggunaan XmlRoot attributes

Share this post: | | | |