Windows Phone 7 Tutorial (VB) Part 2

Simple WP7 Silverlight Application

Pada tutorial kali ini akan dibahas pembuatan aplikasi-aplikasi yang sederhana menggunakan Silverlight for Windows Phone 7. Adapun aplikasi yang akan dibuat adalah :

  • Simple Web Browser
  • Simple Image Viewer
  • Simple Media Player

Simple Web Browser

Pada tutorial kali ini kita akan membuat sebuah Web Browser sederhana dengan menggunakan Windows Phone 7 Silverlight Application.

    • Buat project Silverlight for Windows Phone dengan nama SimpleWebBrowser.
    • Ubah ApplicationTitle dan PageTitle sebagai berikut:
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="Windows Phone 7" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Web Browser" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

    • Tambahkan textbox dengan nama BrowserTextBox.
    • Tambahkan button dengan nama BrowserButton
    • Tambahkan web browser control dengan nama MyWebBrowser.
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <TextBox Height="72" HorizontalAlignment="Left" Margin="6,6,0,0" Name="BrowserTextBox" Text="" VerticalAlignment="Top" Width="290" />
    <Button Content="Browse" Height="72" HorizontalAlignment="Left" Margin="290,6,0,0" Name="BrowserButton" VerticalAlignment="Top" Width="160" />
    <phone:WebBrowser HorizontalAlignment="Left" Margin="12,84,0,0" Name="MyWebBrowser" VerticalAlignment="Top" Width="438" Height="517" />
</Grid>

    • Double click pada tombol BrowserButton kemudian tambahkan kode berikut:
Private Sub BrowseButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles BrowserButton.Click
    Dim webUri As New Uri(BrowserTextBox.Text, UriKind.Absolute)
    If Not webUri Is Nothing Then
        MyWebBrowser.Navigate(webUri)
    End If
End Sub

    • Jalankan aplikasi pada emulator dengan menekan tombol F5, kemudian tulis alamat url pada textbox.

image

 

Simple Image Viewer

Pada tutorial kali ini kita akan membuat sebuah aplikasi image viewer sederhana menggunakan Silverlight App di Windows Phone 7.

    • Buat project Silverlight for Windows Phone baru dengan nama SimpleImageViewer.
    • Pada langkah selanjutnya kita akan membuat struktur data yang digunakan untuk menyimpan data image yang akan ditampilkan.
    • Klik kanan pada Project di solution explorer → Add → New Item → pilih Code File → beri nama Gambar.vb.

image

  • Tambahkan kode berikut kedalam Gambar.vb
Public Class Gambar
    Public Property FileName As String
    Public Property FileGambar As ImageSource
End Class

    • Pada MainPage.xaml tambahkan listBox kedalam ContentPanel, beri nama GambarListBox.
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <ListBox Height="595" HorizontalAlignment="Left" Margin="12,6,0,0" Name="GambarListBox" VerticalAlignment="Top" Width="438">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Width="150" Stretch="Uniform"
                               HorizontalAlignment="Center"
                               Source="{Binding FileGambar}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

    • Klik kanan pada project – pilih Add – New Folder – beri nama images untuk folder yang dibuat.
    • Klik kanan pada folder images – pilih Add – Existing Item – tambahkan 4 file image, kemudian ubah nama file image menjadi berurutan untuk memudahkan pemanggilan.

image

    • Pada MainPage.xaml.vb tambahkan dua method yang akan digunakan untuk mengambil gambar yang ada pada folder images dan memasukannya kedalam object collection untuk ditampilkan dalam list.
Private Function GetGambar(ByVal fileName As String) As ImageSource
    Return New BitmapImage(New Uri(String.Format("images/{0}", fileName),
                                   UriKind.Relative))
End Function

Private Function GetGambars() As ObservableCollection(Of Gambar)
    Dim lstGambar As New ObservableCollection(Of Gambar) From {
        New Gambar With {.FileGambar = GetGambar("1.jpg"), .FileName = "1.jpg"},
        New Gambar With {.FileGambar = GetGambar("2.jpg"), .FileName = "2.jpg"},
        New Gambar With {.FileGambar = GetGambar("3.jpg"), .FileName = "3.jpg"},
        New Gambar With {.FileGambar = GetGambar("4.jpg"), .FileName = "4.jpg"}
    }
    Return lstGambar
End Function

' Constructor
Public Sub New()
    InitializeComponent()
    GambarListBox.ItemsSource = GetGambars()
End Sub

    • Tekan F5 untuk menjalankan aplikasi pada emulator.

image

Simple Media Player

Pada tutorial kali ini kita akan membuat sebuah program media player sederhana untuk memainkan file video pada Windows Phone 7.

    • Buat project Silverlight for Windows Phone dengan nama SimpleMediaPlayer.
    • Tambahkan sebuah button dan media element control kedalam MainPage.xaml.
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Button Content="Play" Height="72" HorizontalAlignment="Left" Margin="143,6,0,0" Name="PlayButton" VerticalAlignment="Top" Width="160" />
        <MediaElement Height="517" HorizontalAlignment="Left" Margin="12,84,0,0" Name="MyMediaElement" VerticalAlignment="Top" Width="438" />
    </Grid>

    • Tambahkan file .wmv kedalam aplikasi anda. Klik kanan pada project – pilih Add – Existing File – masukan file .wmv (misal Wildlife.wmv).
    • Tambahkan kode berikut pada event PlayButton_Click untuk menjalankan file video tersebut.
Private Sub PlayButton_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs) Handles PlayButton.Click
    MyMediaElement.Source = New Uri("Wildlife.wmv", UriKind.Relative)
    MyMediaElement.Play()
End Sub

  • Tekan F5 untuk menjalankan aplikasi yang anda buat pada emulator.

image

ASP.NET Tips: Menambahkan Konfirmasi Delete Pada GridView

Tips ini dibuat berdasarkan request dari Intan purnama sari yang bertanya bagaimana cara menambahkan Konfirmasi ketika tombol delete pada GridView dipilih.

Untuk menambahkan konfirmasi delete pada GridView anda dapat membuat custom class yang mengoverride ButtonField yang ada pada GridView.

  1. Tambahkan Class dengan nama DeleteButton.cs pada web aplikasi anda. Buat class ini dalam namespace MyControl. tulis kode berikut:
   1: using System;

   2: using System.Collections.Generic;

   3: using System.Linq;

   4: using System.Web;

   5: using System.Web.UI.WebControls;

   6:  

   7: /// <summary>

   8: /// Summary description for DeleteButton

   9: /// </summary>

  10:  

  11: namespace MyControl

  12: {

  13:     public class DeleteButton : ButtonField

  14:     {

  15:         private string confirmText = "Hapus Record Ini ?";

  16:         public string ConfirmText

  17:         {

  18:             get { return confirmText; }

  19:             set { confirmText = value; }

  20:         }

  21:  

  22:         public DeleteButton()

  23:         {

  24:             this.CommandName = "Delete";

  25:             this.Text = "Delete";

  26:         }

  27:  

  28:         public override void InitializeCell(DataControlFieldCell cell, DataControlCellType cellType, DataControlRowState rowState, int rowIndex)

  29:         {

  30:             base.InitializeCell(cell, cellType, rowState, rowIndex);

  31:             if (cellType == DataControlCellType.DataCell)

  32:             {

  33:                 WebControl button = (WebControl)cell.Controls[0];

  34:                 button.Attributes["onclick"] = string.Format("return confirm('{0}')", confirmText);

  35:             }

  36:         }

  37:  

  38:     }

  39: }

2.Kemudian anda dapat menambahkan custom control yang sudah dibuat kedalam GridView. Buat Web Form dengan nama KonfirmasiDelete.aspx. tulis kode berikut:

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

   2: <%@ Register TagPrefix="custom" Namespace="MyControl" %>

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

   4:  

   5: <html xmlns="http://www.w3.org/1999/xhtml">

   6: <head runat="server">

   7:     <title>Konfirmasi Delete</title>

   8: </head>

   9: <body>

  10:     <form id="form1" runat="server">

  11:     <div>

  12:         <asp:LinqDataSource ID="ldsKategori" runat="server" 

  13:             ContextTypeName="MhsDataClassesDataContext" EnableDelete="True" 

  14:             EnableInsert="True" EnableUpdate="True" EntityTypeName="" TableName="Kategoris">

  15:         </asp:LinqDataSource>

  16:         <asp:GridView ID="gvKategori" runat="server" AutoGenerateColumns="False" 

  17:             DataKeyNames="id_kat" DataSourceID="ldsKategori">

  18:             <Columns>

  19:                

  20:                 <asp:BoundField DataField="id_kat" HeaderText="id_kat" InsertVisible="False" 

  21:                     ReadOnly="True" SortExpression="id_kat" />

  22:                 <asp:BoundField DataField="nama_kat" HeaderText="nama_kat" 

  23:                     SortExpression="nama_kat" />

  24:                  <custom:DeleteButton ConfirmText="Apakah anda yakin akan mendelete record ini?" />

  25:             </Columns>

  26:         </asp:GridView>

  27:     </div>

  28:     </form>

  29: </body>

  30: </html>

3.Jalankan aplikasi diatas, maka ketika anda mendelete data akan muncul konfirmasi delete.

image

Anda dapat mendownload sample code diatas, download disini

Microsoft BizSpark Workshop

Pada tanggal 1-2 Mei dan 12-13 Juni 2010 dilangsungkan workshop MS Bizspark bertemakan Windows 7 dan beberapa teknologi tebaru lainnya dari Microsoft seperti Visual Studio 2010 dan Sillverlight 4. Workshop ini ditujukan bagi ISV (Independent Software Vendor), Dosen, dan Mahasiswa yang tertarik untuk belajar teknologi Microsoft dan mengikuti program BizSpark. Acara ini dilangsungkan di Universitas Kristen Duta Wacana (UKDW) LAB SI lt 4.

Workshop ini diselenggarakan oleh MIC UGM dan Microsoft Indonesia.

Pada workshop tersebut saya membawakan materi Visual Studio 2010 dan Silverlight 4, materi HOL dan PPT dapat di download pada link dibawah ini:

Adapun foto-foto workshop Part 1 (1-2 mei) dan Part 2 (12-13 juni) dapat dilihat pada gambar dibawah ini:

Part 1 (1-2 mei 2010)

IMG_0014

IMG_0022

Part 2 (12-13 Juni 2010)