Reyza

tenang, senang, sederhana
See also: Other Geeks@INDC

Public

October 2008 - Posts

MS Chart Control or Dundas Chart Control ?

Sebelumnya ucapan terima kasih dulu untuk Denni Gautama yang telah memberikan informasin via milis tentang keberadaan MS Chart ini. Dan akhirnya didownload lah keempat file ini :

Memang belum banyak yang saya tahu dari MS Chart Control ini, cuma tangan gatel pengen ngeblog gara-gara tampilan dari sample yang ada pada Websamples.zip.

Capture

Tampilannya web di atas sangat mirip Dundas begitu juga corak warna dan bentuk dari chart yang dihasilkan. Mantabs nih. Ada apakah antara MS Chart Control dan Dundas ?

Banyak feature yang bisa didapatkan pada MS Chart ini seperti yg dapat dilihat pada gambar menu berikut ini.

Capture1

Dan mata tiba-tiba tertarik untuk membuat menu Interactivity and AJAX.

Capture2

MS Chart dipastikan sangat berteman dengan ASP.NET Ajax, artinya tentu juga berteman dengan UpdatePanel dan lain-lain. Pada bagian Interactivity and AJAX ini dapat didapatkan feature-feature seperti berikut ini :

Capture3Capture4

Dengan mengarahkan ke objek pada chart maka dapat dilihat tooltip yang keluar. Disini kita diberi kebebasan untuk mengeluarkan data yang diinginkan pada tooltips, seperti yang dilihat pada gambar sebelah kiri.

Pada gambar sebelah kanan lebih menarik lagi. Bila salah satu bagian pie pada gambar diklik makan akan ditampilkan penggalan bagian yang kita pilih terpisah dari chart.

Hal lain ang menarik adalah pada contoh Clieck Event and AJAX UpdatePanel yang hasilnya dapat dilihat pada gambar di bawah ini.

Capture5

Kita dapat mengklik salah satu data pada chart maka dapat dilihat form untuk mengupdate data tersebut. Menarik.

Hal lain yang diberikan oleh MS Chart Control adalah Real Time Chart, untuk membuat hal ini terjadi kita dapat menggabungkan MS Chart Control, UpdatePanel dan control timer yang ada pada ASP.NET Ajax.

Capture6

Hasilnya tentu saja pergerakan data pada chart akan berubah secara "real-time".

Lain kali akan disambung lagi dengan bahasan bagaimana menggunakan MS Chart Control.

Selamat mencoba.

Share this post: | | | |
Posted: Oct 28 2008, 09:54 PM by reyza | with 6 comment(s)
Filed under: ,
The Heart Race Test with The Top 20 Grid Girls & Silverlight

Bagi pria-pria normal, atau pria-pria yang kuliah di Fisika dan mendalami gerak Brown dan sering melakukan pengamatan banyak partikel, maka berikut ini ada 20 partikel yang dapat diamati. Partikel yang dibungkus dalam kulit "Grid Girls".

"Grid Girls" ini pertama kali saya lihat saat ada Workshop Silverlight 2.0 untuk para designer Kompas, diperlihatkan saat opening workshop oleh salah seorang personel DPE yang pasti dikenal banyak orang (demi kenyamanan bersama, identitasnya dirahasiakan ... hehehe).

Penampilkan 20 Grid Girls ini dapat dilihat di sini. Pastikan sebelum melihatnya Silverlight runtime sudah terinstall pada komputer anda.Capture

Pada halaman ini nantinya kita akan dapat melihat ekspresi ke 20 Grid Girl agar kita mau mengarahkan cursor mouse ke salah satu dari mereka. Dan ketika cursor mouse telah menunjuk ke salah satu Grid Girl tersebut dapat kita lihat ekspresi senang dan gembira, dan juga dapat dilihat ekspresi kesal dan sedih dari ke-19 Grid Girl yang tidak terpilih.

Capture5

Menarik idenya, dan sangat mudah membuatnya dengan Silverlight 2.0. Yang mesti disiapkan adalah setiap Grid Girl mempunyai 3 video, yaitu :

  • video dengan ekspresi normal.
  • video dengan ekspresi senang ketika cursor mouse berada pada area.
  • video dengan ekspresi sedih dan kesal ketika melihat Grid Girl yang lain telah dipilih.

Ini adalah ekpresi normal setiap Grid Girls.

Capture3

Dan pada gamber berikut dapat dilihat ekspresi salah seorang Grid Girl yang terpilih dan ekpresi Grid Girl lainnya yang tidak terpilih.

Capture2

Pengetahuan Silverlight apa yang harus kita ketahui untuk membuat hal seperti ini ? Berikut hal-hal yang mesti kita ketahui :

  • Layout controls pada Silverlight.
  • MediaElement control.
  • Event.

{Layout Controls}

Pada Silverlight 2.0 terdapat control-control yang dapat digunakan untuk mengatur tata letak, yaitu :

  • Grid.
  • Canvas.
  • StackPanel.

Secara default ketika Project Silverlight Application dibuat baik dengan Expression Blend 2 atau Visual Studio 2008 dapat dilihat pada file Page.xaml menggunakan control Grid sebagai layout.

Grid

Dengan menggunakan Grid kita dapat membuat dua tipe layout, yaitu layout dengan

Ada dua mode yang dapat digunakan bila menggunakan Grid sebagai bantuan layout yaitu secara absolut atau dengan menggunakan template. Mengaturan tata letak suatu control dalam Grid secara abosolut dapat dilihat seperti contoh berikut :

<Grid x:Name="LayoutRoot" Background="White">
    <TextBlock Text="Absolute Grid Layout" 
               Margin="23,23" 
               HorizontalAlignment="Left" 
               VerticalAlignment="Top"/>
</Grid>

Pertama yang harus dilakukan adalah menentukan titik pusat 0,0 dengan menambahkan atribut HorizontalAlignment & VerticalAlignment. Setelah itu pada atribut Margin dapat dituliskan titik yang diinginkan dari titik pusat.

Sedangkan berikut ini adalah contoh penggunaan template layout pada Grid.

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.RowDefinitions>
        <RowDefinition Height="23"/>
        <RowDefinition Height="23"/>
        <RowDefinition Height="23"/>
    </Grid.RowDefinitions>
    
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="132"/>
        <ColumnDefinition Width="132"/>
        <ColumnDefinition Width="132"/>
    </Grid.ColumnDefinitions>
    
    <TextBlock Text="0,0" Grid.Column="0" Grid.Row="0"/>
    <TextBlock Text="1,1" Grid.Column="1" Grid.Row="1"/>
    <TextBlock Text="2,2" Grid.Column="2" Grid.Row="2"/>
</Grid>

Pada contoh di atas terlebih dahulu dibuat template layout dengan menggunakan RowDefinition "atau" ColumnDefinition. Kenapa menggunakan "atau" karena dapat digunakan hanya RowDefinition saja, atau ColumnDefinition saja atau keduanya. Pada contoh di atas template layout berbentuk table 3x3. Setelah template layout dibuat, maka tinggal ditentukan suatu control akan menempati kolom dan baris berapa seperti yang bisa dilihat pada contoh berikut ini.

<TextBlock Text="0,0" Grid.Column="0" Grid.Row="0"/>
Pada contoh di atas, pada control dapat dilihat terdapat atribut Grid.Column dan Grid.Row untuk menentukan letak control tersebut pada template layout yang telah dibuat.

Control layout yang yang lain adalah Canvas. Control ini sering digunakan saat masih bekerja pada Silverlight 1.0. Pada Canvas pengaturan control dilakukan secara absolut. Berikut contohnya :

<Canvas Background="White">
    <TextBlock Text="Control in Canvas" 
               Canvas.Left="13" 
               Canvas.Top="13"/>
</Canvas>

Pada contoh di atas dapat dilihat, untuk menentukan koordinat suatu control pada Canvas dapat dilakun dengan menggunakan atribut Canvas.Left dan Canvas.Top. 

Canvas juga dapat digunakan untuk mengelompokkan beberapa control dan mengatur posisinya seperti pada contoh di bawah ini.

<Canvas Background="Black">
    <Canvas Background="Gray" Height="200" Width="200" 
            Canvas.Top="5" Canvas.Left="5">
        <TextBlock Text="Nama :" 
                   Canvas.Left="13" 
                   Canvas.Top="13">
         </TextBlock>
        <TextBox Width="113" 
                 Canvas.Left="55" 
                 Canvas.Top="10"/>
    </Canvas>
    
    <Canvas Background="Red" 
            Height="100" 
            Width="100" 
            Canvas.Left="213" 
            Canvas.Top="5">
        <Button Content="Submit" 
                Width="75" 
                Canvas.Left="3" 
                Canvas.Top="3"/>
        <Button Content="Reset" 
                Width="75" 
                Canvas.Left="3" 
                Canvas.Top="32"/>
    </Canvas>
</Canvas>

Hasilnya bisa dilihat pada gambar berikut ini :

Capture

Control layout yang lain yang dapat digunakan adalah StackPanel. StackPanel adalah control layout yang sederhana. Caranya cukup dengan mengumpulkan control-control yang ingin ditampilkan didalamnya maka secara default StackPanel akan mengaturnya secara vertical seperti gambar berikut ini.

Capture1

Berikut kode yang digunakan :

<StackPanel Background="White">
    <Button Content="Button" Width="100" Height="23"/>
    <Button Content="Button" Width="100" Height="23"/>
    <Button Content="Button" Width="100" Height="23"/>
</StackPanel>

Pada StackPanel mempunyai atribut Orientation yang nilainya adalah Horizontal atau Vertical, yang berfungsi untuk menentukan control-control akan ditampilkan tersusun secara vertikal atau horizontal.

<StackPanel Background="White" Orientation="Horizontal">
    <Button Content="Button" Width="100" Height="23"/>
    <Button Content="Button" Width="100" Height="23"/>
    <Button Content="Button" Width="100" Height="23"/>
</StackPanel>

Capture2 

{MediaElement Control}

Control ini dapat digunakan untuk menampilkan video dan audio. Tetapi jangan harap semua format video dan audio dapat ditampilkan, hanya format yang mempunyai hubungan darah dengan Microsoft saja yang dapat ditampilkan, yaitu WMV, WMA dan MP3.

Berikut contoh penggunaan control MediaElement :

<MediaElement x:Name="MediaElement1" Source="bca.wmv"/>

Atribut Source berisi nama file media yang letaknya berada pada direktori ClientBin.

Selain menuliskan pada file XAML juga dapat dituliskan pada code file dari file XAML. Terlebih dulu control ini kita beri ID dengan menggunakan atribut x:Name seperti pada contoh di atas. Maka kita dapat memberikan nilai pada atribut yang diinginkan secara pemrograman dengan cara berikut :

MediaElement1.Source = new Uri("bca.wmv", UriKind.Relative);

{Event}

Hal terakhir yang perlu diketahui adalah event. Semua control pada SIlverlight mempunya event, termasuk control MediaElement. Beberapa event yang dapat digunakan pada MediaElement, yaitu :

  • MouseEnter, event ini seperti OnMouseOver kalau di HTML.
  • MouseLeave, event ini seperti OnMouseOut.

Berikut contoh kode yang ada pada file Page.xaml :

<MediaElement x:Name="MediaElement1" 
              MouseEnter="MediaElement1_MouseEnter" 
              MouseLeave="MediaElement1_MouseLeave" 
              Source="bca.wmv"/>

Dan berikut kode yang ada pada file Page.xaml.cs :

public partial class Page : UserControl
{
    public Page()
    {
        InitializeComponent();
    }

    private void MediaElement1_MouseEnter(object sender, MouseEventArgs e)
    {

    }

    private void MediaElement1_MouseLeave(object sender, MouseEventArgs e)
    {

    }
}

Singkatnya :

  • Bila pointer mouse berada pada area MediaElement1 (MouseEnter), maka method MediaElement1_MouseEnter akan dipanggil.
  • Bila pointer mouse keluar dari area MediaElement1 (MouseLeave), maka method MediaElement1_MouseLeave akan dipanggil.

{20 Grid Girls Show with Silverlight}

Nah dari coret2an di atas maka kita dapat membuat sesuatu seperti tayangan 20 Grid Girls di atas, dengan lebih sederhana. Idenya adalah setiap Grid Girl mempunyai 3 video seperti yang telah disebutkan di atas, yaitu :

  • girl_1_normal.wmv : ekpresi normal Grid Girl #1.
  • girl_1_terpilih.wmv : ekspresi terpilih Grid Girl #1.
  • girl_1_sedih.wmv : ekspresi tidak terpilih Grid Girl #1.

Kemudian tulis kode seperti berikut :

<MediaElement x:Name="GridGirl1" 
      MouseEnter="GridGirl1_MouseEnter" 
      MouseLeave="GridGirl1_MouseLeave" 
      Source="girl_1_normal.wmv"/>
<MediaElement x:Name="GridGirl2" 
      MouseEnter="GridGirl2_MouseEnter" 
      MouseLeave="GridGirl2_MouseLeave" 
      Source="girl_2_normal.wmv"/>

Dengan kode di atas, ketika halaman diload pertama kali, akan ditampilkan ekspresi normal dari sang Grid Girl. Selanjutnya adalah sebagian contoh kode pada Page.xaml.cs :

private void GridGirl1_MouseEnter(object sender, MouseEventArgs e)
{
    GridGirl1.Stop();
    GridGirl1.Source = new Uri("girl_1_terpilih.wmv", UriKind.Relative);
    GridGirl1.Play();

    GridGirl2.Stop();
    GridGirl2.Source = new Uri("girl_2_sedih.wmv", UriKind.Relative);
    GridGirl2.Play();
}

private void GridGirl1_MouseLeave(object sender, MouseEventArgs e)
{
    GridGirl1.Stop();
    GridGirl1.Source = new Uri("girl_1_normal.wmv", UriKind.Relative);
    GridGirl1.Play();

    GridGirl2.Stop();
    GridGirl2.Source = new Uri("girl_2_normal.wmv", UriKind.Relative);
    GridGirl2.Play();
}

Hal yang sama juga ditulisa pada method GridGirl2_MouseEnter & GridGirl2_MouseLeave. Ini cuma contoh sederhana makanya masih kurang efisien disana sini dari sisi penulisan kode-nya.

Semoga bermanfaat.

Share this post: | | | |
Posted: Oct 18 2008, 10:40 PM by reyza | with 4 comment(s)
Filed under:
ASP.NET 3.5 Workshop with Two Big ISVs at Bandung

Sudah jelas di Bandung banyak ISV yang tentu saja mempunyai aktivitas dalam pembangunan software. Beberapa di antaranya adalah PT Multimedia Solusi Prima dan PT Ebdesk. Kedua ISV tersebut lebih memfokuskan diri kepada teknologi PHP dan C++.

PT Multimedia Solusi Prima mempunyai pengalaman dalam pembangunan software untuk goverment di Indonesia dengan menggunakan teknologi PHP. Sedangkan PT Ebdesk mempunyai produk Ebdesk Portal yang sudah dikenal baik di dalam negeri bahkan di luar negeri, dan sudah diimplementasikan di banyak instansi dan organisasi di beberapa negara tetangga. Produk mereka adalah aplikasi berbasis web yang dibangun dengan C++ dan CGI.

{ASP.NET 3.5 Workshop  at PT Multimedia Solusi Prima}

Workshop ini diikuti oleh 5 developer PHP dan dilaksanakan selama 30 Jam.

Capture Capture1 Capture2

{ASP.NET 3.5 Workshop  at PT Ebdesk}

Workshop ini diikuti oleh 6 developer C++ & CGI dan dilaksanakan selama 4 hari.

Capture3 Capture4

Capture5 Capture6

{Workshop Outline}

Berikut ini adalah materi yang diajarkan selama workshop :

  • Visual Studio 2008 Introduction.
  • C# 3.0.
  • ADO.NET.
  • LINQ to SQL.
  • ASP.NET Standard Controls.
  • Data binding.
  • Theme and Skin.
  • Membership and Role Management.
  • Navigation.
  • Validator Controls.
  • Reporting with Report Viewer.
  • ASP.NET Ajax & Ajax Control Toolkit.
  • Web Service.

{Hand on Lab Manual}

HOL yang digunakan selama workshop dapat didownload secara gratis di sini.

Share this post: | | | |
Silverlight 2.0 Workshop with Kompas Designers

Tanggal 13 Oktober 2008 selama kurang lebih 5 jam, saya harus menurunkan sedikit kerja otak kiri dan menaikkan kerja otak kanan karena saat itu harus bertemu dengan para designer-designer Kompas. Sebelum workshop ini dilaksanakan sudah disiapkan materi sebagai berikut :

  • Silverlight 2.0 Controls.
  • Layout.
  • Media.
  • Animation.
  • Data binding.
  • Networking.
  • ASP.NET Controls.
  • Image Deep Zoom.
  • Page Turn.
  • Silverlight, PHP & Apache Web Server.

IMG_1456 IMG_1452

Tapi karena ternyata peserta yang datang adalah para designer maka materi-materi yang mengumbar kemampuan otak kiri harus dipangkas.

Pada workshop ini ada beberapa tool yang digunakan, yaitu :

  • Microsoft Expression Blend 2.
  • Microsoft Expression Design 2.
  • Microsoft Expression Encoder 2.
  • Deep Zoom Composer.
  • Visual Studio 2008.

IMG_1458 IMG_1464

Hasil para peserta dapat dengan mudah menampilkan dan membuat :

  • Silverlight Media Player.
  • Deep Zoom Tag Browser.
  • Page Turn.

Capture Capture1

What's next ?

Next Event :

31 Oktober - 2 November : Jalan-jalan ke Belitong :)

Share this post: | | | |
Posted: Oct 14 2008, 02:46 PM by reyza | with 7 comment(s)
Filed under: ,