Saturday, February 4, 2012

Menggunakan Isolated Storage di Silverlight

Isolated Storage disini maksudnya adalah data yang terisolasi di suatu set direktori tertentu yang samar pada hard drive. Silverlight memberikan isolated storage dengan space sebesar ! MB per domain. Dengan kata lain, jika kita mempunyai beberapa aplikasi yang menggunakan domain yang sama, maka total default spacenya tetap 1 MB. Dengan isolated storage ini kita dapat menyimpan sebuah data dan kemudian mengambilnya lagi, tapi hal ini hanya bersifat sementara. Isolated Storage ini terdapat pada namespace System.IO.IsolatedStorage . Baiklah langsung saja kita coba demokan penggunaan Isolated Storage ini.
  1. Buat sebuah project baru di Silverlight Application dengan nama IsolatedStorageSilverlight.
  2. Tambahkan sebuah TextBox (textBox1), sebuah TextBlock (textBlock1), dan 2 buah Button dimana masing-masing namanya button1 dan button2. Ubah content button1 menjadi Write , sedangkan button2 menjadi Read.
  3. Double click masing-masing button tersebut untuk membuat event handler.
  4. Pada MainPage.xaml.cs , tambahkan using statement berikut :
    using System.IO;
    using System.IO.IsolatedStorage;
  5. Pada event handler button1_Click tambahkan kode berikut :
    using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication())
    {
        using (StreamWriter sw = new StreamWriter(store.OpenFile("MyStore.Text", FileMode.OpenOrCreate, FileAccess.Write)))
        {
            sw.WriteLine(textBox1.Text);
        }
    }
    Kode diatas maksudnya kita menyimpan data yang dimasukkan lewat textBox1 kedalam file Isolated Storage yang bernama MyStore.Text.
  6. Kemudian pada button2_Click tambahkan kode berikut :
    using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication())
    {
        using (StreamReader sr = new StreamReader(store.OpenFile("MyStore.Text", FileMode.Open, FileAccess.Read)))
        {
            textBlock1.Text = sr.ReadToEnd();
        }
    }
    Sedangkan kode diatas maksudnya, kita mengambil data yang disimpan di MyStore.Text tadi.
  7. Terakhir coba jalankan aplikasi (tekan F5), kemudian masukkan input di textBox1 > Klik Write > Klik Read. Maka input yang dimasukkan tadi akan ditampilkan kembali melalui textBlock1.
    is
Terimakasih atas kunjungannya.. Semoga bermanfaat dan tunggu postingan-postingan selanjutnya.. CMIIW
(Sumber : Microsoft Silverlight 4 Step by Step, Laurence Moroney)

Running Silverlight in Desktop

Jika selama ini dari kita masih beranggapan bahwa Silverlight hanya dapat dijalankan di browser saja, maka bisa dapat dipastikan bahwa anggapan tersebut salah. Karena perlu diketahui bahwa ternyata Silverlight juga dapat dijalankan di desktop (Running Outside of the Browser). Dan berikut saya akan membuktikan bahwa Silverlight dapat dijalankan diluar browser.

  1. Buka Visual Studio 2010, buat project baru di Silverlight Application. Disini saya namai project barunya “LatihanSilverlight2”.
  2. Double click button-nya, kemudian kita tambahkan kode berikut didalam event click button tersebut:
    string a = textBox1.Text;
    MessageBox.Show(a);
  3. Kemudian pada Solution Explorer klik kanan LatihanSilverlight2 > Properties.

    silverlight2

    Maka akan tampil pop up window seperti berikut, Check Enable running application out of the browser.

    silverlight3

  4. Jalankan aplikasi (bisa dengan tekan F5). Masukkan input pada textBox, disitu saya coba masukkan input “Silverlight can run in Desktop”, dan klik Button.

    silverlight

Terimakasih atas kunjungannya.. Semoga bermanfaat dan tunggu postingan-postingan selanjutnya.. CMIIW

Friday, February 3, 2012

Split String in C#

Dalam C# kita dapat mengambil beberapa data dari satu input dengan format tertentu, yaitu dengan menggunakan Split. Disini saya telah menetapkan bahwa format input yang akan dimasukkan nanti adalah Nama_JenisKelamin_Alamat , maksudnya dalam sekali input yang dimasukkan saya mengambil 3 data sekaligus yaitu nama, jenis kelamin dan alamat. Langsung saja buka Visual Studio 2010-nya dan buat project baru di WPF Application.
  1. Buat sebuah TextBox dan sebuah Button pada project tersebut. Secara default, nama dari textBox dan Button tersebut adalah textBox1 dan button1 , jadi biarkan saja.
  2. Double click pada button tadi, kemudian tambahkan kode berikut pada event click-nya,
    string input = textBox1.Text;
    string[] data = input.Split('_');
    string nama = data[0];
    string jenisKelamin = data[1];
    string alamat = data[2];
    
    
    MessageBox.Show("Nama : " + nama + "\nJenis Kelamin :" + jenisKelamin + "\nAlamat : " + alamat);
    Maksud dari kode diatas adalah: menyimpan input yang dimasukkan ke textBox tadi kedalam variabel input (tipe data string), kemudian akan dilakukan split jika ditemukan karakter underscore (“_”) dan menyimpannya kedalam array dengan nama data. Seperti yang kita tahu bahwa array dimulai dengan index 0 dan seterusnya, jadi saya menyimpan data[0] di variabel nama, data[1] di variabel jenisKelamin, data[2] di variabel alamat. Terakhir saya menampilkan hasilnya dengan perintah MessageBox.Show().

  3. Jalankan aplikasi dengan tekan F5, kemudian masukkan input sesuai format yang telah saya tetapkan diatas tadi kemudian klik button-nya.

splitTerimakasih atas kunjungannya.. Semoga bermanfaat dan tunggu postingan-postingan selanjutnya.. CMIIW

Thursday, February 2, 2012

Build Twitter search in Silverlight web application

  1. Buka Visual Studio 2010, klik File > New Project dan klik new Silverlight Application project. Beri nama project-nya FirstSilverlightApplication. s1
    Setelah di klik OK akan muncul pop up window seperti berikut, kita klik OK lagi.
    s2
  2. Setelah loading new project selesai maka yang akan ditampilkan pertama kali secara default adalah MainPage.xaml. Dari sinilah kita akan mendesain aplikasi Silverlight yang kita buat. Tambahkan code berikut didalam tag Grid (membuat sebuah button dan ListBox) :
    <Button Content="Get Tweets" Height="23" HorizontalAlignment="Left" Margin="12,12,0,0" x:Name="GetTweets" VerticalAlignment="Top" Width="75" Click="GetTweets_Click" />
    <ListBox x:Name="TweetList" HorizontalContentAlignment="Stretch" ScrollViewer.HorizontalScrollBarVisibility="Disabled" Margin="12,41,12,12">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <Grid Margin="10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Image}" Grid.Column="0" Margin="3" Width="50" Height="50" Stretch="UniformToFill"/>
                    <TextBlock Text="{Binding Message}" FontSize="14" Margin="3" Grid.Column="1" TextWrapping="Wrap"/>
                </Grid>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

    s3
  3. Tambahkan sebuah class baru dengan cara klik kanan pada Silverlight project dan pilih Add > Class, kasih nama Tweet.cs kemudian ketik code berikut :
    public class Tweet
        {
            public string Message { get; set; }
            public Uri Image { get; set; }
        }
  4. Double click button Get Tweets, lalu kita buat Event Handler untuk button tersebut yang jika di klik akan memanggil Twitter Search. Berikut code-nya :
    public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
            }
            private ObservableCollection<Tweet> _tweets = new ObservableCollection<Tweet>();
    
    
            private void GetTweets_Click(object sender, RoutedEventArgs e)
            {
                WebClient client = new WebClient();
                client.DownloadStringCompleted += (s, ea) => {
                    XDocument doc = XDocument.Parse(ea.Result);
                    XNamespace ns = http://www.w3.org/2005/Atom;
    
    
                    var items = from item in doc.Descendants(ns + "entry")
                                select new Tweet()
                                {
                                    Message = item.Element(ns + "title").Value,
    
    
                                    Image = new Uri((from XElement xe in item.Descendants(ns + "link") where xe.Attribute("type").Value == "image/png" select xe.Attribute("href").Value).First<string>()),
                                };
                    foreach (Tweet t in items)
                    {
                        _tweets.Add(t);
                    }
                };
                client.DownloadStringAsync(new Uri(http://search.twitter.com/search.atom?q=ipb));
    
    
                TweetList.ItemsSource = _tweets;
            }
        }
    Kode diatas maksudnya, pertama kali load hasil ke XDocument yang selanjutnya akan diproses dengan LINQ statement, kemudian select tiap elemen entry dan membuat objek tweet baru. Objek tweet ini akan diisi title element’s value dan query LINQ yang lain mencari link element yang mengandung Image property. Terakhir code melakukan loop untuk tiap hasil yang didapat dan memasukkan kedalam tweet collection.
  5. Tidak lupa kita tambahkan reference dengan cara klik kanan References pada Solution Explorer kemudian klik Add Reference… , pada tab item .NET pilih System.Xml.linq dan klik OK. Lalu kita balik lagi ke MainPage.xaml.cs, dan tambahkan juga references dengan ketik kode berikut (di bagian atas) :
    using System.Collections.ObjectModel;
    using System.Xml.Linq;
  6. Jalankan aplikasi dengan tekan F5 dan klik button Get Tweets.
Terimakasih atas kunjungannya.. Semoga bermanfaat dan tunggu postingan-postingan selanjutnya.. CMIIW
(Sumber : Silverlight 4 in Action , Pete Brown)