Local Storage Menggunakan MVVM

Siang...

Sekarang saya akan membahas tentang pembuatan aplikasi local storage menggunakan MVVM. Yang saya maksud dengan local storage disini bukan isolated storage melainkan kita hanya memanggil data yang kita buat. Data ini bersifat statis tidak bisa kita update secara berkala. Bagi yang belum tahu metode MVVM silahkan baca disini.



Kita langsung saja mengcoding..

1) Kita buat project baru klik file -> new project -> windows phone app.

2) Buat folder Model dan folder ViewModel.

3) Buat class Nidji.cs di dalam folder Model dan buat class NidjiViewModel.cs di dalam folder ViewModels.

4) Tambahkan code dibawah ini pada Nidji.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace PhoneApp6.Model
{
    public class Nidji
    {

        public string judul { get; set; }
        public string gambar { get; set; }
        public string message { get; set; }
    }
}

5) Selanjutnya tuliskan code dibawah ini pada NidjiViewModel.cs

using PhoneApp6.Model;

using System;

using System.Collections.Generic;

using System.Collections.ObjectModel;

using System.Linq;

using System.Text;

namespace PhoneApp6.ViewModels

{

    public class NidjiViewModel

    {

        MainPage main;

        public NidjiViewModel()

        {

            this.NidjiItems = new ObservableCollection<Nidji>();

        }

        public ObservableCollection<Nidji> NidjiItems { get; private set; }

        public bool isnidjiLoaded

        {

            get;

            private set;

        }

        public void setMain(MainPage main)

        {

            this.main = main;

        }

        public void LoadNidji()

        {

            this.NidjiItems.Add(new Nidji() { judul = "Nidji", gambar = "/Assets/laskarpelangi.jpg"});

            this.isnidjiLoaded = true;

        }

    }

}

6) Pada MainPage.xaml di konten tambahkan code ini

<ListBox x:Name="lbnidji" Margin="15,0,0,0"  VerticalAlignment="Top" Height="460">

                <ListBox.ItemTemplate>

                    <DataTemplate>

                        <StackPanel Orientation="Horizontal">

                            <Image Margin="0,20,0,0" Source="{Binding gambar}"/>

                            <TextBlock 

                                Text="{Binding judul}" Foreground="DarkRed" FontFamily="Segoe WP Semibold" FontSize="35" Margin="10,20,0,0"/>

                        </StackPanel>

                    </DataTemplate>

                </ListBox.ItemTemplate>

            </ListBox>

7) Selanjutnya di MainPage.xaml.cs tambahkan ini.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Navigation;

using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

using PhoneApp6.Resources;

namespace PhoneApp6

{

    public partial class MainPage : PhoneApplicationPage

    {

        

        private ViewModels.NidjiViewModel nidjii;

        // Constructor

        public MainPage()

        {

            InitializeComponent();

            nidjii = new ViewModels.NidjiViewModel();

            this.Loaded += new RoutedEventHandler(nidji_Loaded);

            // Sample code to localize the ApplicationBar

            //BuildLocalizedApplicationBar();

        }

        private void nidji_Loaded(object sender, RoutedEventArgs e)

        {

            if (!nidjii.isnidjiLoaded)

            {

                nidjii.setMain(this);

                nidjii.LoadNidji();

            }

            lbnidji.ItemsSource = nidjii.NidjiItems;

        }

}

    }

}

Maka kita akan mendapatkan hasil seperti ini

Untuk source code bisa didownload di http://sdrv.ms/1aiQLiE

Sekian dari saya..

Terimakasih telah mengunjungi blog saya...