Workshop .Net Programming dan Microsoft Visual Studio 2010 di Universitas Pakuan

Kali ini saya akan menuliskan materi workshop yang kami ajarkan di workshop tersebut khususnya untuk materi WPF pada sesi kedua dari acara workshop ini. Workshop kali ini membahas cara pembuatan project WPF di Visual Studio 2010 dan pembuatan contoh project WPF yang memanfaatkan InkAnalyzer dan Virtual Map Control.

Materi WPF dari workshop tersebut bisa Anda pelajari di postingan ini:

clip_image002

Sebelumnya silahkan download HOL file pdf nya di sini.
Tujuan dari sesi ini adalah membuat aplikasi pencarian pada peta menggunakan Hand Writing Recognition.

Hand Writing Recognition.

Langkah-langkah awal dalam membuat aplikasi hand writing recognition dengan WPF adalah:

1. Buka Visual Studio 2010 dan Buatlah project baru (Visual C# è Windows è WPF Application) beri nama “SearchOnMapByHWR”.

2. Di Tab MainWindow.xaml dan di tab XAML anda akan melihat code berikut:

<Window x:Class="SearchOnMapByHWR.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
     <Grid>

     </Grid>
</Window>

3. Ubah ukuran dan Title Windows dengan mengubah code seperti di bawah ini:

     Title="Search On Map" Height="400" Width="400">

4. Kemudian kita buat control InkCanvas, TextBox dan Button di dalam tag Grid. Dengan mengetikkan code program di bawah ini:

<Grid>

    <InkCanvas Name=”theInkCanvas” Height=”auto” Width=”auto”
     Background=”Aquamarine” Margin=”10,5,5,100″ />

    <TextBox VerticalAlignment=”Bottom” Name=”textBox1″
    Background=”Azure” Margin=”10,0,5,60″
    Height=”30″></TextBox>

    <Button HorizontalAlignment=”Left” VerticalAlignment=”Bottom”
    Height=”40″ Width=”75″ Click=”btnRecognize_Click” Name=”btnRecognize”
    Margin=”10,0,0,5″ Content=”Recognize”/>

    <Button HorizontalAlignment=”Right” VerticalAlignment=”Bottom”
    Content=”Clear” Height=”40″ Width=”75″ Name=”btnClear”
    Click=”btnClear_Click” Margin=”0,0,5,5″/>
</Grid>

5. Pastikan setiap button mempunyai event Click seperti diatas.

Hasilnya akan seperti ini:

clip_image003

6. Selanjutnya double klik btnRecognize dan Anda akan melihat block code seperti ini:

private void btnRecognize_Click(object sender, RoutedEventArgs e)
{

}

7. Kemudian tambahkan referensi dari .dll file yang telah disediakan yaitu IACore.dll, IALoader.dll, dan IAWinFx.dll.

8. Tambahkan code berikut:

using System.Windows.Ink;

9. Dan ikuti code program di bawah ini :

private void btnRecognize_Click(object sender, RoutedEventArgs e)
{
        InkAnalyzer theInkAnalyzer = new InkAnalyzer();

        try
       {
           theInkAnalyzer.AddStrokes(theInkCanvas.Strokes);
       }
       catch
      {
           MessageBox.Show("Ditulis donk!");
       }

       AnalysisStatus status = theInkAnalyzer.Analyze();

      if (status.Successful)
     {
            textBox1.Text = theInkAnalyzer.GetRecognizedString();
     }
     else
    {
            MessageBox.Show("Maaf tulisan Anda jelek!");
            this.theInkCanvas.Strokes.Clear();
     }
}

10. Run (Control + F5).

11. Hasilnya seperti ini:

clip_image004

12. Kemudian di MainWindow.xaml di bagian designer, double klik btnClear. Kemudian Anda akan melihat code program berikut:

      private void btnClear_Click(object sender, RoutedEventArgs e)
     {
      }

13. Tambahkan code program di bawah ini:

   private void btnClear_Click(object sender, RoutedEventArgs e)
   {
      this.theInkCanvas.Strokes.Clear()
      textBox1.Text = "";
   }

14. Selesai.

Search On Map (Using Microsoft Virtual Earth)

1. Ubah ukuran Window menjadi 600 x 920 dengan cara menganti code dengan code ini:

<Window x:Class=”SearchOnMapByHWR.MainWindow”
     xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
     xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
     Title=”Search on Map ” Height=”600″ Width=”920″>

2. Dari projek sebelumnya buatlah 2 kolom dengan cara menambahkan code berikut:

<Grid>
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width=”400″/>
          <ColumnDefinition MinWidth=”500″/>
     </Grid.ColumnDefinitions>

     <InkCanvas Name=”theInkCanvas” Height=”auto” Width=”auto”
Background=”Aquamarine” Grid.Row=”1″ Margin=”10,5,5,100″ />

3. Aturlah bahwa control-kontrol yang telah Anda buat sebelumnya berada di kolom pertama dengan menambahkan code program di bawah ini:

   <InkCanvas Name=”theInkCanvas” Height=”auto” Width=”auto”
    Background=”Aquamarine” Margin=”10,5,5,100″ Grid.Column=”0″ />

    <TextBox VerticalAlignment=”Bottom” Name=”textBox1″
    Background=”Azure” Margin=”10,0,5,60″
    Height=”30″ Grid.Column=”0″ />

    <Button HorizontalAlignment=”Left” VerticalAlignment=”Bottom”
     Height=”40″ Width=”75″ Click=”btnRecognize_Click” Name=”btnRecognize” Margin=”10,0,0,5″               Content=”Recognize” Grid.Column=”0″/> 

    <Button HorizontalAlignment=”Right” VerticalAlignment=”Bottom”
     Content=”Clear” Height=”40″ Width=”75″ Name=”btnClear”
     Click=”btnClear_Click” Margin=”0,0,5,5″ Grid.Column=”0″/>

4. Pada tab designer tampak seperti ini:

clip_image006

5. Tambahkan button baru dengan nama btnSearch dengan cara menambahkan code di bawah ini:

     <Button Content=”Search on Map” Width=”85″
     Height=”40″ Name=”btnSearch” VerticalAlignment=”Bottom”
     Margin=”0,0,0,5″ Click=”btnSearch_Click” Grid.Column=”0″/>
 </Grid>

Pastikan juga event click dari btnSearch sudah dibuat juga.

Hasilnya seperti ini (Control + F5):

clip_image008

6. Selanjutnya kita ke MainWindow.xaml.cs, tambahkan assembly reference “VirtualEarthWPFControl.dll”.

7. Kembali ke MainWindow.xaml di bagian XAML view. Tambahkan reference dengan menambahkan code berikut:

<Window x:Class=”Serach.MainWindow”
     xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
     xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
     xmlns:ve=”clr-namespace:VirtualEarthWPFControl;assembly=VirtualEarthWPFControl”
     Title=”Search on Map ” Height=”600″ Width=”900″>

8. Tambahkan control Virtual Earth dengan menambahkan code berikut:

     <ve:VEMap BorderBrush=”Red” BorderThickness=”2″
     Background=”Red” Name=”map” Height=”auto”
     Width=”auto” Grid.Column=”1″ Margin=”10,5,5,5″/>
</Grid>

9. Double klik pada button btnSearch atau dengan cara klik kanan seperti di bawah ini:

clip_image010

Klik Navigate to Event Handler

10. Kemudian Anda melihat blok kode dari event btnSearch, tambahkan code program berikut:

private void btnSearch_Click(object sender, RoutedEventArgs e)
{
     if (textBox1.Text != "")
    {
        map.Find(textBox1.Text);
     }
    else
    {
        MessageBox.Show("Tidak ada input.");
    }
}

11. Run (Control + F5).

Hasilnya seperti ini:

clip_image012

12. Selesai. Anda bias mencoba sendiri dengan menuliskan kata “Jakarta” pada inkCanvas. Kemudian klik button Recognize, jika sudah benar bahwa tulisan Anda dikenali sebagai kata Jakarta, klik Search On Map. Lihat gambar di bawah:

Mode Road:

clip_image014

Mode Aerial:

clip_image016

Materi lengkapnya dapat di download di sini.
Selamat mencoba..

About

Seseorang yang terus berusaha menjadi seorang programmer dan blogger sejati di jagad Raya ini.

Tagged with: ,
Posted in Visual Studio 2010, WPF
3 comments on “Workshop .Net Programming dan Microsoft Visual Studio 2010 di Universitas Pakuan
  1. febriano says:

    om klo mo buat file dalam format dll di visual studio 2010
    gimana ya

  2. surya says:

    terima kasih atas infonya

  3. fahmi says:

    Program sudah bisa running, tp koq gak bisa mengenali ya? 1 huruf pun tidak dapat dikenali, apakah perlu data training polanya? kalaupun bisa dikenali dengan “other”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Community

INDC

MUGI

WSS-ID

SQLServer-Indo

Indonesia Student Portal

Pengunjung
  • 120,657 orang
Yg lg OL di sini
site statistics
%d bloggers like this: