Workshop ASP.NET 4.0

Pada tanggal 3 Nov – 11 Nov 2011 telah dilangsungkan pelatihan dengan topik ‘Develop Web Application with ASP.NET 4.0’. Pelatihan ini diikuti kurang lebih 17 peserta yang merupakan pengembang sistem dari KSI (Kantor Sistem Informasi) Universitas Atmajaya Yogyakarta. Instruktur pada pelatihan ini adalah Erick Kurniawan, M.Kom, MCTS, MCPD, MCT.

Pelatihan ini ditujukan untuk membekali peserta agar dapat mengembangkan sistem informasi berbasis web dengan teknologi ASP.NET 4.0

Adapun materi yang disampaikan pada pelatihan ini adalah.

 

Materi

1

ASP.NET Server Control

2

Designing ASP.NET Website

3

Menggunakan Data Binding

4

Databound Control

5

Penggunaan ListView dan DataPager

6

Data Access dengan ADO.NET

7

Object Relational Mapping dengan LINQ to SQL

8

Data Access dengan LINQ to SQL

9

Menggunakan Chart Control

10

Membangun Komponen

11

Data Access dengan WCF Services

12

Navigasi

13

Security

14

Membangun Custom Control

15

ASP.NET AJAX

16

Study Case : E-Commerce Application

Dokumentasi dari pelaksanaan pelatihan diatas

05112011174

11112011191

ASP.NET & JQuery Tips (#3)

Pada tips kali ini kita akan membatasi agar user tidak dapat melakukan perintah cut/copy/paste pada textbox. Pada contoh script dibawah ini kita akan mencoba membatasi user yang akan melakukan copy paste pada textbox password.

1. Buat Web Form dengan nama DisallowCopy.aspx, kemudian tambahkan kode berikut:

clip_image002

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DisallowCopy.aspx.cs" Inherits="DisallowCopy" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>

<html xmlns="http://www.w3.org/1999/xhtml&quot;>
<head runat="server">
    <title>Membatasi Perintah Cut, Copy, dan Paste</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            function () {
                $('#<%=txtNew.ClientID %>').bind('cut copy paste', function (e) {
                    e.preventDefault();
                    alert("Perintah Cut, Copy, dan Paste tidak diijinkan untuk digunakan !");
                });
                $('#<%=txtConfirm.ClientID %>').bind('cut copy paste', function (e) {
                    e.preventDefault();
                    alertalert("Perintah Cut, Copy, dan Paste tidak diijinkan untuk digunakan !");
                });
            }
        );
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align:center;">
        <fieldset><br />
            <label for="txtCurrent">Current Password :</label><br />
            <asp:TextBox ID="txtCurrent" TextMode="Password" runat="server" /><br /><br />

            <label for="txtNew">New Password :</label><br />
            <asp:TextBox ID="txtNew" TextMode="Password" runat="server" /><br /><br />

            <label for="txtConfirm">Confirm New Password :</label><br />
            <asp:TextBox ID="txtConfirm" TextMode="Password" runat="server" /><br /><br />

            <asp:Button ID="btnSubmit" Text="Submit" runat="server" />&nbsp;
            <asp:Button ID="btnReset" Text="Reset" runat="server" /><br /><br />
        </fieldset>
    </div>
    </form>
</body>
</html>

2. Untuk mendisable perintah cut, copy, dan paste dapat digunakan method preventDefault().

3. Jalankan web page diatas, kemudian coba masukan nila pada New Password atau Confirm New Password, dan cobalah untuk melakukan copy, cut, atau paste, maka akan ditampilkan pesan kesalahan.

clip_image003

ASP.NET & JQuery Tips (#2)

Pada tips kali ini kita akan membuat auto focus pada textbox pertama dan berpindah tab dengan menggunakan tombol enter. Pada beberapa kasus tertentu, seperti aplikasi POS (Point Of Sale), user membutuhkan berpindah tab dengan menekan tombol enter.

1. Tambahkan Web Form dengan nama FocusEnter.aspx, kemudian tambahkan kode berikut:

clip_image002

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FocusEnter.aspx.cs" Inherits="FocusEnter" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Auto Focus dan Enter Tab</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('input:text:first').focus();
            $('input:text').bind("keydown", function (e) {
                if (e.which == 13) {
                    e.preventDefault();
                    var nextIndex = $('input:text').index(this) + 1;
                    $('input:text')[nextIndex].focus();
                }
            });
            $('#btnReset').click(function () {
                $('#form')[0].reset();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <fieldset>
            <br />
            <label for="txtNama">Nama :</label><br />
            <asp:TextBox ID="txtNama" runat="server" /><br /><br />

            <label for="txtAlamat">Alamat :</label><br />
            <asp:TextBox ID="txtAlamat" runat="server" /><br /><br />

            <label for="txtPhone">Phone :</label><br />
            <asp:TextBox ID="txtPhone" runat="server" /><br /><br />

            <label for="txtEmail">Email :</label><br />
            <asp:TextBox ID="txtEmail" runat="server" /><br /><br />

            <asp:Button ID="btnSubmit" Text="Submit" runat="server" />&nbsp;
            <asp:Button ID="btnReset" Text="Reset" runat="server" /><br /><br />
        </fieldset>
    </div>
    </form>
</body>
</html>

2. Method bind() digunakan untuk menambahkan event handler ‘keydown’ kedalam textbox, kemudian cek jika ada penekanan tombol enter (kode 13), maka index akan ditambah untuk berpindah textbox.

3. Jalankan page diatas, maka pertama kali halaman diload textbox paling awal akan aktif, dan anda dapat berpindah tab dengan menekan tombol enter.

clip_image003

ASP.NET & JQuery Tips (#1)

Pada tips kali ini kita akan membahas penggunaan JQuery untuk memanipulasi server control pada ASP.NET. Hasil yang diharapkan adalah pengalaman interaktivitas yang lebih baik untuk pengguna tanpa tambahan overhead di sisi server.

Untuk mendownload library JQuery anda dapat mengakses alamat http://jquery.com. Ada beberapa tipe file yang dapat didownload yaitu:

  • Minified version : versi ini lebih disarankan untuk digunakan untuk lingkungan produksi karena memiliki ukuran file yang lebih kecil sehingga hanya dibutuhkan waktu yang sedikit untuk melakukan download.
  • Uncompressed version : versi ini disarankan digunakan untuk lingkungan development, mempunyai ukuran yang lebih besar daripada minified version, tapi cocok untuk kebutuhan debugging pada fase development.

Ada dua cara untuk menggunakan JQuery library yaitu:

  • Menggunakan library yang sudah dihosting seperti CDN (Community Development Networks) yang disediakan oleh vendor seperti Microsoft dan Google.
  • Mendownload library JQuery dan menambahkan pada direktori aplikasi anda.

Penggunaan CDN lebih disarankan karena memiliki keuntungan dari segi performance karena mekanisme caching dan parallelism, namun jika anda hendak mendeploy aplikasi tersebut pada Intranet, maka disarankan mendownload dan mengkopi library tersebut pada direktori lokal aplikasi anda.

Berikut adalah beberapa contoh penggunaan JQuery dengan ASP.NET.

Menambahkan Default Teks pada TextBox

1. Buat ASP.NET Website dengan nama SampleJQuery1

clip_image002

2. Setelah website berhasil dibuat anda dapat melihat bahwa pada solution explorer sudah terdapat folder script yang berisi library JQuery.

clip_image003

3. Tambahkan web form baru tanpa memilih master page pada Website yang anda buat, beri nama halaman tersebut DefaultTeks.aspx. Kemudian tambahkan kode berikut:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Menambahkan Default Teks</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var searchBox = $('#<%=txtSearch.ClientID %>');
            searchBox.focus(function () {
                if (searchBox.val() == this.title) {
                    searchBox.removeClass("teksDefault");
                    searchBox.val("");
                }
            });
            searchBox.blur(function () {
                if (searchBox.val() == "") {
                    searchBox.addClass("teksDefault");
                    searchBox.val(this.title);
                }
            });
            searchBox.blur();
        });
    </script>
    <style type="text/css">
        .teksDefault { font-style:italic; color:#CCCCCC; }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="text-align:center;">
        <fieldset>
            <asp:TextBox ID="txtSearch" ToolTip="Masukan Keyword disini"
            CssClass="teksDefault" Width="200px" runat="server" />
            <asp:Button ID="btnSearch" Text="Search" runat="server" />
        </fieldset>
    </div>
    </form>
</body>
</html>

4. ClientID adalah id unik yang digenerate oleh ASP.NET untuk memberi nama server control ketika dirender agar tidak terjadi duplikasi ketika control tersebut diulang.

5. Pada saat event focus() akan dicek apakah textbox mempunyai nilai sama dengan title (tooltip akan dirender menjadi atribut title), jika nilai sama maka textbox akan dikosongkan.

6. Pada saat event blur() dicek apakah nilai pada textbox kosong, jika kosong maka nilai akan diset sama seperti nilai pada atribut title.

7. Jika halaman tersebut dijalankan maka anda akan melihat bahwa textbox control yang anda buat memiliki nilai default yang otomatis akan menghilang ketika user memasukan inputan.

clip_image004

Nantikan contoh penggunaan ASP.NET & JQuery pada tips berikutnya

Buku Membangun Aplikasi Mobile dengan Qt SDK

coverbuku

Telah terbit Buku Membangun Aplikasi Mobile dengan Qt SDK, bagi yang tertarik bisa mendapatkan buku ini di Toko Buku terdekat.

Buku Membangun Aplikasi Mobile dengan Qt SDK ini ditujukan untuk pengembang aplikasi mobile atau mahasiswa yang ingin mempelajari konsep dan fundamental dari Qt SDK untuk mengembangkan aplikasi Mobile untuk target platform Symbian dan MeeGo.

Qt SDK sudah sejak lama digunakan untuk mengembangkan aplikasi lintas platform yang mudah digunakan, powerfull, scalable, reliable, dan mempunyai performa yang sangat bagus. Qt SDK juga memiliki koleksi class library yang lengkap dan konsisten didukung oleh dokumentasi yang komprehensif. Class library tersebut berisi semua function yang dibutuhkan untuk mengembangkan aplikasi. Qt SDK juga menyediakan IDE (Integrated Development Environment) Qt Creator yang membantu mengurangi pekerjaan developer dengan meningkatkan produktifitas penulisan kode untuk pengembangan yang bersifat RAD (Rapid Application Development).

Buku ini banyak membahas konsep dan teknis pemrograman C++ dan Qt SDK untuk pengembangan aplikasi mobile mulai dari dasar sampai tingkat menengah seperti penggunaan Pointer, Class dan Object, library Qt Core, Qt File, Qt XML, Qt Database, Qt GUI, Qt Webkit, Qt Network, dan Qt Mobility. Buku ini juga membahas penggunaan Qt Quick yaitu sebuah teknologi baru untuk membuat desain antar muka dan aplikasi yang intuitif, mudah digunakan, dan mempercepat proses pengembangan program. Studi kasus yang disediakan di akhir bab akan memudahkan pembaca untuk memahami dan mempraktekan materi yang sudah dibahas pada bab-bab sebelumnya.

Buku ini juga ditulis menggunakan bahasa sederhana yang mudah dipahami dan juga disertai dengan contoh-contoh praktis yang dapat langsung dicoba. Untuk lebih memudahkan pembaca, pada buku ini juga disertakan DVD penunjang berisi semua program yang dibutuhkan untuk mengerjakan contoh pada buku ini dan source code dari contoh latihan yang ada.

Buku VB 2010

cepat mahir VB

Setelah menunggu selama kurang lebih 6 bulan akhirnya buku saya Visual Basic 2010 sudah bisa naik cetak, buku yang mempunyai tebal 300 halaman ini diterbitkan oleh Penerbit Andi.

Buku ini berisi konsep dasar dan berbagai fitur terbaru yang ada di VB 2010 dan Visual Studio 2010. Buku ini juga menyertakan Studi Kasus diakhir bab sehingga pembaca diharapkan dapat mengimplementasikan materi yang sudah dipelajari di bab-bab sebelumnya dalam sebuah aplikasi yang nyata.

Beberapa Fitur yang dibahas pada buku ini adalah :

  • Fitur baru VS 2010.
  • Object Oriented Programming (OOP).
  • Windows Form.
  • Error Handling.
  • ADO.NET
  • LINQ (Language Integrated Query)
  • Entity Framework .
  • Report.
  • Studi Kasus (Simple POS).

Windows Phone 7 VB Tutorial (WP7 with WCF REST Services)

Pada tutorial kali ini kita akan membuat WCF REST Services sederhana yang dapat di-consume oleh aplikasi WP7.

 

Creating WCF REST Services

1. Pertama kita akan membuat REST Services sederhana. Caranya buat empty Web Site.

2. File → New → Web Site → ASP.NET Empty Web Site → beri nama SimpleREST.

image

3. Klik kanan pada project → Add → New Item → pilih WCF Services → beri nama Service1.svc.

image

4. Buka web.config kemudian tambahkan tag berikut pada <system.serviceModel>

<system.serviceModel>
    <behaviors>
        <serviceBehaviors>
            <behavior name="">
                <serviceMetadata httpGetEnabled="true" />
                <serviceDebug includeExceptionDetailInFaults="false" />
            </behavior>
        </serviceBehaviors>
    </behaviors>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
</system.serviceModel>

5. Klik kanan pada Service1.svc kemudian pilih View Markup.

image

6. Kemudian tambahkan file konfigurasi berikut

<%@ ServiceHost Language="VB" Debug="true" Service="SimpleREST.Service1" CodeBehind="Service1.svc.vb"
Factory="System.ServiceModel.Activation.WebServiceHostFactory" %>

7.Definisikan kontrak service yang akan anda buat pada file IService1.vb

Imports System
Imports System.ServiceModel
Imports System.ServiceModel.Web
Imports System.Runtime.Serialization
Imports System.Text
Imports System.Collections.Generic
Imports System.Linq

' NOTE: You can use the "Rename" command on the context menu to change the interface name "IService1" in both code and config file together.
<ServiceContract()>
Public Interface IService1

    <OperationContract()>
    <WebGet(UriTemplate:="GetData/{a}", RequestFormat:=WebMessageFormat.Xml,
            ResponseFormat:=ServiceModel.Web.WebMessageFormat.Xml,
            BodyStyle:=ServiceModel.Web.WebMessageBodyStyle.Bare)>
    Function GetData(ByVal a As String) As String

End Interface

8. Kemudian definisikan method service yang akan anda buat pada file Service1.svc.vb. Buat sebuah method dengan nama GetData() yang akan mengembalikan nilai bertipe string.

Public Class Service1
    Implements IService1

    Public Function GetData(ByVal a As String) As String Implements IService1.GetData
        Return String.Format("Hello {0} this message from REST Services", a)
    End Function

End Class

9.Jalankan service yang sudah anda buat dengan cara klik kanan pada ‘Service1.svc’ kemudian pilih View in browser.

10.Lengkapi urlnya sebagai berikut untuk memanggil service dengan nama GetData yang sudah anda buat.

http://localhost:2531/Service1.svc/GetData/Erick

image

11. Service1.svc adalah nama service, GetData adalah nama method, dan ‘Erick’ adalah nilai dari parameter. Hasil dari pemanggilan service diatas adalah:

image

Cara Pemanggilan Service dari WP7

Setelah selesai membuat REST service yang akan diconsume, sekarang kita akan membuat aplikasi client pada Windows Phone 7 yang digunakan untuk mengakses service tersebut.

1. Buat project Silverlight for Windows Phone 7 dengan nama WP7RestConsume.

image

2. Tambahkan beberapa textbox, textblock dan tombol kedalam tampilan design sebagai berikut:

image

<!–ContentPanel – place additional content here–>
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="35,25,0,0" Name="TextBlock1" Text="Parameter :" VerticalAlignment="Top" />
    <TextBox Height="72" HorizontalAlignment="Left" Margin="142,6,0,0" Name="ParameterTextBox" Text="" VerticalAlignment="Top" Width="308" />
    <Button Content="Call Rest Service" Height="72" HorizontalAlignment="Left" Margin="148,66,0,0" Name="CallRestButton" VerticalAlignment="Top" Width="241" />
    <TextBlock Height="30" HorizontalAlignment="Left" Margin="72,152,0,0" Name="TextBlock2" Text="Result :" VerticalAlignment="Top" />
    <TextBlock Height="123" HorizontalAlignment="Left" Margin="148,152,0,0" Name="ResultTextBlock" Text="" VerticalAlignment="Top" Width="302" TextWrapping="Wrap" FontSize="28" />
</Grid>

3. Tambahkan referensi System.Runtime.Serialization.

image

4. Double click pada tombol CallRestButton, kemudian tambahkan kode berikut untuk mengambil nilai yang dikembalikan dari service.

Imports System.Runtime.Serialization

Partial Public Class MainPage
    Inherits PhoneApplicationPage

    ' Constructor
    Public Sub New()
        InitializeComponent()
    End Sub

    Private Sub CallRestButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles CallRestButton.Click
        Dim proxy As New WebClient
        Dim strUri = String.Format("http://localhost:2531/Service1.svc/GetData/{0}",
                                   ParameterTextBox.Text)
        AddHandler proxy.OpenReadCompleted, AddressOf proxy_OpenReadCompleted
        proxy.OpenReadAsync(New Uri(strUri))
    End Sub

    Private Sub proxy_OpenReadCompleted(ByVal sender As Object, ByVal e As OpenReadCompletedEventArgs)
        Dim sr As New DataContractSerializer(GetType(String))
        Dim strResult = sr.ReadObject(e.Result).ToString
        ResultTextBlock.Text = strResult
    End Sub

End Class

5. Pastikan bahwa sebelum anda menjalankan program services harus sudah jalan. Sesuaikan url pada program dengan url services yang anda jalankan.

6. Tekan F5 untuk menjalankan programnya.

image

Windows Phone 7 VB Tutorial (Consuming REST Services)

Windows Phone 7 secara default tidak mendukung penyimpanan data pada local database (seperti SQL CE atau SQLite), jadi jika anda ingin bekerja dengan data di WP7 anda dapat mengkonsumsi data tersebut dari Cloud yang berupa services.

Aplikasi yang akan kita buat pada tutorial kali ini yaitu SimpleTwitterClient yang akan mengkonsumsi data dari services yang disediakan oleh Twitter.

Simple Twitter Client

1. Buka Visual Studio 2010.

2. Pilih bahasa VBSilverlight for Windows PhoneWindows Phone Application → beri nama SimpleTwitterClient.

image

3. Pada MainPage.xaml tampilan XAML Editor, tambahkan kode xaml berikut untuk mengganti ApplicationTitle.

<!–TitlePanel contains the name of the application and page title–>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7 App" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Twitter Client" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

    

4. Dari menu toolbox tambahkan textbox, button, dan listbox control.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="UserNameTextBox" Text="" VerticalAlignment="Top" Width="316" />
    <Button Content="Lookup" Height="72" HorizontalAlignment="Left" Margin="296,6,0,0" Name="LookupButton" VerticalAlignment="Top" Width="160" />
    <ListBox Height="517" HorizontalAlignment="Left" Margin="12,84,0,0" Name="MessageListBox" VerticalAlignment="Top" Width="438" />
</Grid>

image

5. Double click pada button LookupButton untuk menambahkan kode berikut

Private Sub LookupButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles LookupButton.Click
    Dim wc As New WebClient
    AddHandler wc.DownloadStringCompleted, AddressOf wc_DownloadStringCompleted
    Dim strUri = String.Format("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name={0}",
                               UserNameTextBox.Text)
    wc.DownloadStringAsync(New Uri(strUri))
End Sub

6. Class WebClient digunakan untuk mengambil services yang disediakan oleh twitter. Pada kode diatas kita mengambil informasi message dari user tertentu. Jika anda jalankan link dari REST services twitter yang ada diatas misal ketikan url berikut : http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=erickkurniawan

image

7. Maka services yang anda panggil akan menghasilkan output berupa dokumen xml seperti gambar diatas. Dokumen tersebut berupa informasi posting dari user ‘erickkurniawan’.

8. Untuk mengakses dokumen XML tersebut dari WP7 kita akan menggunakan LINQ to XML. LINQ to XML akan memudahkan anda untuk memanipulasi dokumen XML.

9. Untuk dapat menggunakan LINQ to XML anda harus menambahkan referensi System.Xml.Linq kedalam aplikasi yang anda buat.

10. Pada solution explorer klik kanan pada ReferencesAdd Reference → tambahkan System.Xml.Linq.

image

image

11. Tambahkan kode untuk menggunakan namespace System.Xml.Linq.

Imports System.Xml.Linq

12. Pada contoh program ini kita akan mengambil beberapa informasi yang akan ditampilkan yaitu Message, Username, dan ImageSource. Untuk kebutuhan tersebut buat class baru dengan nama TwitterItem.vb.

image

Class TwitterItem
    Public Property UserName As String
    Public Property Message As String
    Public Property ImageSource As String
End Class

13. Tambahkan kode pada event wc_DownloadStringCompleted untuk mengambil data yang kita inginkan dari dokumen XML hasil kembalian twitter services.

Private Sub wc_DownloadStringCompleted(ByVal sender As Object, ByVal e As DownloadStringCompletedEventArgs)
    If Not e.Error Is Nothing Then Exit Sub

    Dim xmlTweet = XElement.Parse(e.Result)
    MessageListBox.ItemsSource = From tweet In xmlTweet…<status>
                                      Select New TwitterItem With {
                                          .UserName = tweet.<user>.<screen_name>.Value,
                                          .Message = tweet.<text>.Value,
                                          .ImageSource = tweet.<user>.<profile_image_url>.Value
                                      }
End Sub

14. Pada MainPage.xaml, bagian MessageListBox tambahkan kode berikut

          <ListBox Height="517" HorizontalAlignment="Left" Margin="12,84,0,0" Name="MessageListBox"
                   VerticalAlignment="Top" Width="438">
              <ListBox.ItemTemplate>
                  <DataTemplate>
                      <StackPanel Orientation="Horizontal" Height="132">
                          <Image Source="{Binding ImageSource}" Height="72" Width="72" VerticalAlignment="Top" Margin="0,8,8,0"/>
                          <StackPanel Width="370">
                                <TextBlock Text="{Binding Message}"Foreground="Orange" FontSize="24" TextWrapping="Wrap" />
                                <TextBlock Text="{Binding UserName}"TextWrapping="Wrap" FontSize="22" />
                          </StackPanel>
                      </StackPanel>
                  </DataTemplate>
              </ListBox.ItemTemplate>
          </ListBox>

15. Tekan F5 untuk mendeploy program kedalam WP7 emulator dan menjalankannya, output dari program dapat dilihat pada gambar dibawah ini.

image