Reyza

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

Public

September 2008 - Posts

Silverlight 2 RC0 : motion path, where are you?

Kemanakah fasilitas bernama "motion path" adalah pertanyaan yang selalu dicoba dicari jawabannya setiap versi terbaru Silverlight atau Blend keluar.

Sebagai informasi, bersamaan dengan keluarnya Silverlight 2 RC0 maka juga keluar Blend 2 SP1. Blend 2 ini berbeda dengan Blend 2.5 June Preview, jadi sudah dipastikan SP1 ini tidak akan berfungsi untuk Blend 2.5 June Preview. Jadi bagi yang ingin menggunakan SP1 ini dapat menginstall Blend 2. Blend 2 dan Blend 2.5 dapat diinstall bersamaan dalam 1 mesin.

Seperti yang telah diumumkan bahwa terdapat control baru pada SIlverlight 2 RC0, salah satunya adalah control ComboBox jadi tidak perlu repot-repot lagi menggunakan Liquid Control untuk mendapatkan control ini. Maka dengan menginstall Blend 2 SP1 ini kita dapat bekerja pada project SIlverlight 2 dan memanfaatkan control baru tersebut.

Kembali berbica tentang "motion path". Apakah "motion path" itu gerangan ? Bila anda bermain dengan Adobe Flash atau WPF, dijamin fasilitas ini akan ditemui sebagai fasilitas dalam lingkungan IDE. "Motion Path" adalah kurva (dapat berupa garis, persegi, lingkaran, ellips etc) yang akan menjadi garis gerak dari suatu objek.

Sebagai contoh, bila digunakan Blend 2 sebagai IDE untuk bermain dengan WPF. Maka dapat dibuat garis seperti pada gambar, dengan sebuah lingkaran yang akan menjadi objek yang akan berjalan-jalan di atasnya untuk menuju kotak yang merupakan "daerah abu-abu".

geek1

Pilih garus yang telah dibuat, kemudian pada menu pilih Object > Path > Convert to Motion Path. Maka dapat dilihat jendela seperti pada gambar berikut ini.

geek2

Pilih objek yang akan berjalan-jalan pada garis yang telah dibuat. Karena objek yang ingin berjalan-jalan di atas garis yang telah dibuat adalah ellips, maka pilih [System.Windows.Shapes.Ellipse]. Setelah itu dapat dilihat secara otomatis objek ellips langsung berada pada ujung garis tersebut. Seperti pada gambar di bawah ini.

geek3

Untuk melihat hasilnya, tinggal tekan tombol "play" yang dilingkari dengan "merah-putih" pada gambar di atas, maka akan terlihat gerakan objek bulat disepanjang garis tersebut.

Fasilitas tersebut hanya ada ketika bekerja di dalam project WPF. Bagaimana ketika sedang bekerja pada project Silverlight ? Ketika sebuah kurva dibuat dan dipilih maka dapat dipastikan fasilitas untuk membuat "motion path" tidak akan ditemui.

Hm....kapan fasilitas ini dapat dinikmati ? Tujuannya tentu saja untuk menghilangkan pekerjaan manual atau pemrograman yang biasa dilakukan untuk membuat hal seperti "motion path".

Share this post: | | | |
Posted: Sep 29 2008, 12:52 AM by reyza | with no comments
Filed under: ,
Simple Books

Sebelum berbuka....setelah sahur dan menunggu shalat subuh, maka buku-buku ini bisa jadi pilihan. Buku-buku yang telah membuat 7 tahun menjadi lebih bermakna di Bandung :)

Share this post: | | | |
Posted: Sep 25 2008, 11:15 AM by reyza | with 2 comment(s)
Filed under:
ComponentArt Web.UI 2008.2 & Community Server 2008.5

{ComponentArt Web.UI 2008.2}

Pertama adalah komponen ASP.NET fav gw yaitu ComponentArt Web.UI, sekarang komponen ini sudah mencapat versi 2008.2.

geeks1

Ada beberapa control baru pada versi ini yaitu :

ColorPicker

Control untuk pemilihan warna secara visual.

geeks2

Input

Control Input ini dilengkapi pengecekan masukan berdasarkan pola yang diinginkan.

geeks3

pada control ASP.NET standar hal yang sama dapat dilakukan dengan memanfaatkan Validator atau dapat dipercantik dengan bantuan Validator Callout dan MaskEdit milih AjaxControlToolkit.

Slider

Control ini bisa dimanfaatkan sebagai visualisasi untuk pager atau hal-hal lain seperti pengaturan volume dan lain-lain.

geeks4

Control yang serupa juga dimiliki oleh AjaxControlToolkit dan dapat digunakan sebagai Pager Control bila menggunakan ListView.

Revamped Grid for ASP.NET Ajax

Control ini adalah Grid yang diberi sentuhan sorting dan juga kemampuan grouping saat sorting dilakukan.

geeks5

{Community Server 2008.5}

Hal baru yang kedua adalah saat ini Community Server sudah mencapat versi 2008.5. Kenapa menarik? Karena pada versi ini terdapat tambahan feature yang menarik, yaitu Wiki.

geeks6

geeks7

Feature ini membuat Community Server makin cocok untuk mendukung kebutuhan web komunitas dan juga membuat Community Server makin mahal :)

Community Server Themes

Dengan adanya tambahan feature ini artinya ada pekerjaan tambahan untuk pembuatan theme untuk CS2008.5. Tambahan kerja tentu saja akan menaikkan tambahan yang menyenangkan untuk dinikmati. Karena mendengar selentingan kabar kalau awalnya 1 themes lengkap CS2008/CS2007 adalah $1000, sekarang untuk CS2008.5 menjadi $1500. Mantabs.

Community Server Evolution

Bila sedang berjalan-jalan di website official Community Server, maka pada bagian download yang bisa di akses di sini, ada link baru yang menarik yaitu Community Server Evolution. Ini dua file yang bisa diunduh yaitu CommunityServerEvolution_1.0.zip dan CommunityServer_For_SharePoint.zip. Ini adalah bentuk dukungan Telligent untuk integrasi antara Community Server dengan Sharepoint.

Belum banyak bisa bercerita tentang ini, karena kedua file itu belum diunduh. Lagi kekurangan bandwidth untuk mengunduh, maklum lagi berada di daerah yang kekurangan sinyal GRPS.

Selamat mecoba :)

Share this post: | | | |
Microsoft Health CUI : Silverlight 2 for Real LOB Application

Henry sudah menulis tentang rancangan "Indonesian Online IT Doctor" di sini, intinya kurang lebih rancangan aplikasi untuk layanan kesehatan. Seperti biasa, ketika ingin membangun aplikasi ada baiknya mencari terlebih dahulu "hal-hal" yang dapat membantu untuk membangun aplikasi tersebut, agar waktu tidak terbuang dengan membangun hal-hal yang telah dibuat.

Salah satu "hal-hal" yang dapat membantu realisasi "Indonesian Online IT Doctor" like ini adalah seperti yang telah dibuat dengan nama Microsoft Health Common User Interface.

Liat screenshot dibawah ini :

Demo aplikasi ini dibangun dengan Silverlight dan terdiri atas 3 demo yang dapat dicoba yaitu :

  • Demo 1, In waiting room : manage booking and find patiests.
  • Demo 2, with the family doctor : input and interact with the patient record.
  • Demo 3, at the hospital : explore and annotate investigation results.

Untuk menikmati ketiga demo tersebut dapat mengunjungi url berikut ini : http://www.mscui.net/PatientJourneyDemonstrator/

Cuma demo? Jangan kawatir, ada source code yang dapat digunakan baik bagi pecinta WPF dan Silverlight, yaitu :

  • MSCUI.msi (62359KB), Release of the CUI Toolkit including full source code for all controls, sample web site, sample WinForms application, test framework and help files.
  • MSCUI-NoSource.msi (3483KB), Release of the CUI Toolkit containing compiled binaries and help files only.
  • MSCui.Toolkit.zip (55966KB), Release of the CUI Toolkit in zip format including full source code for all controls, sample web site, sample WinForms application and test framework.

Ketiga file ini dapat diunduh dengan berkunjung ke url berikut : http://www.codeplex.com/mscui/

Selamat mengunduh dan mencoba :)

Share this post: | | | |
Posted: Sep 23 2008, 12:28 AM by reyza | with no comments
Filed under:
Silverlight Rich TextBox

Pernah bertemu dengan TinyMCE yang penampakannya seperti pada gambar berikut ini ?

geeks1

Atau bila duit berlebih dan ingin server control ASP.NET yang langsung digunakan dapat memilih control Editor milik ComponentArt Web.UI.

geeks2 

Barang-barang di atas dapat digunakan bila ingin digunakan pada halaman dengan format HTML.  Bagaimana bila ingin membuat hal yang sama tetapi pada halaman XAML pada Silverlight 2 ?

Bila ingin membuat hal yang serupa pada Silverlight 2, maka dapat menggunakan bantuan Silverlight 2 Beta 2 Liquid Control yang sebelumnya telah dibahas di sini.

Pada Liquid control terdapat control dengan nama Rich TextBox. Hasil akhirnya adalah seperti TinyMCE atau control Editor milik ComponentArt Web.UI, tetapi jangan berharap kemudahan yang sama akan didapat ketika menggunakan control Rich Textbox dari Liquid control.

Pada TinyMCE atau control Editor ComponentArt Web.UI, control ini langsung dapat digunakan secara terintegrasi. Terintegrasi yang saya maksudkan adalah area editor dan toolbar untuk mengubah style text (bold, italic, underline, tipe font, ukuran, warna dan lain-lain), insert gambar, membuat hyperlink, tombol undo dan redo dan lain-lain langsung dapat digunakan begitu control ini ditambahkan pada halaman HTML.

Bagaimana dengan control Rich Textbox milik Liquid control ? Jawabnya tidak perlu penjelasan panjang, cukup perhatikan langkah-langkah dan control berikut ini. Berikut adalah kode penggunaan control Rich Textbox :

<UserControl x:Class="LiquidRichTextBox.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        
        <liquid:RichTextBox x:Name="RichTextBox_Main"
                            VerticalAlignment="Top"
                            HorizontalAlignment="Left"
                            Margin="5,60,0,0"
                            Width="390"
                            Height="230"
                            BorderThickness="3"
                            BorderBrush="Black">
        </liquid:RichTextBox>

    </Grid>
</UserControl>

Dari contoh kode di atas dapat dilihat sudah ditambahkan control RichTextBox yang akan mempunyai lebar 390 pixel dan tinggil 230 pixel dengan lebar border 3 pixel dan warna hitam untuk border tersebut.....Build Solution....dan view in browser halaman, dan hasilnya ... seperti pada gambar berikut ini.

geeks3

Sudah melihat antarmuka yang dihasilkan oleh control RichTextBox ? Yup...betuuul....cuma kotak dengan border warna hitam. Kita sudah dapat menuliskan text yang diinginkan pada area editor tersebut. Tetapi kemana tombol-tombol untuk mengubah text menjadi bold, italic, underline dan hal-hal lain yang ditemui pada TinyMEC atau control Editor milih ComponentArt Web.UI ?

Untuk mendapatkan tombol-tombol seperti itu pada control RichTextBox maka diperlukan kerja lebih. Misalnya ingin memiliki tombol yang mempunyai fungsi untuk mengubah text yang diseleksi menjadi tebal (bold) maka hal yang mesti dilakukan adalah :

Langkah pertama, terlebih dahulu buat tombol untuk keperluan itu dengan menggunakan baris kode seperti berikut :

<Button x:Name="Button_Bold"
        Click="Button_Bold_Click"
        Width="24" 
        Height="23" 
        VerticalAlignment="Top"
        HorizontalAlignment="Left"
        Margin="5,5,0,0">
    <Canvas>
        <TextBlock Text="B" 
                   FontWeight="Bold" 
                   FontSize="13" 
                   Canvas.Top="-3" 
                   Canvas.Left="3">
        </TextBlock>
    </Canvas>
</Button>

Maka hasilnya akan dilihat seperti paga gambar berikut :

geeks4

Akhirnya satu tombol muncul juga. Dilihat dari kode di atas, pada control Button dapat dilihat terdapat Event Click yang akan memanggil method Buttond_Bold_Click. Artinya pada code file dari file Page.xaml mesti ditambahkan beberapa baris kode untuk melakukan proses "menebalan text yang diseleksi" ketika tombol Button_Bold diklik.

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

/* tambahkan kedua baris ini */
using Liquid;
using Liquid.Components;

namespace LiquidRichTextBox
{
    public partial class Page : UserControl
    {
        /* Style tidak aktif */
        private SolidColorBrush _buttonFillStyleNotApplied = 
            new SolidColorBrush(Color.FromArgb(255, 0, 0, 0));

        /* Style aktif */
        private SolidColorBrush _buttonFillStyleApplied = 
            new SolidColorBrush(Color.FromArgb(255, 255, 0, 0));

        public Page()
        {
            InitializeComponent();

            /* Mendaftarkan event */
            RichTextBox_Main.SelectionChanged += 
                new RichTextBoxEventHandler(RichTextBox_SelectionChanged);

        }

        /*
         * method ini dipanggil ketika pointer mouse berubah kedudukannya pada
         * area RichTextBox
         */
        private void RichTextBox_SelectionChanged(object sender, RichTextBoxEventArgs e)
        {
            Button_Bold.Background = _buttonFillStyleNotApplied;

            if (RichTextBox_Main.SelectionStyle.Weight == FontWeights.Bold)
            {
                Button_Bold.Background = _buttonFillStyleApplied;
            }
        }

        /*
         * Button_Bold berfungsi sebagai toggle, artinya bila style text yang
         * dipilih adalah Bold, maka ketika tombol diklik aksi yang dilakukan
         * adalah membuat text yang dipilih menjadi normal.
         */
        private void Button_Bold_Click(object sender, RoutedEventArgs e)
        {
            Formatting format = (Button_Bold.Background == _buttonFillStyleNotApplied ? 
                                 Formatting.Bold : Formatting.RemoveBold);
            RichTextBox_Main.ApplyFormatting(format, null);
            RichTextBox_Main.ReturnFocus();
        }
    }
}

Dapat dilihat pada kode di atas adalah kode untuk mengubah style text menjadi "cetak tebal", bagaimana untuk membuat fasilitas italic, underline, mengubah ukuran font dan lain2 ?  Caranya "sederhana", cukup lakukan hal yang sama seperti contoh di atas :)

Untuk contoh lengkap code ini beserta solution-nya dapat diunduh di sini.

Share this post: | | | |
Posted: Sep 23 2008, 12:18 AM by reyza | with no comments
Filed under:
Silverlight 2 BETA 2 Liquid controls

Liquid control yang bisa ditemui pada http://www.vectorlight.net sudah ada sejak jaman Silverlight 1.1. Tujuannya untuk menutupi "kekurangan" Silverlight 1.1 yang saat itu belum memiliki control-control seperti :

  • TextBox.
  • Date Picker.
  • Calendar.
  • Dan lain-lain.

Saat Silverlight 2 Beta 2 keluar, Liquid control tidak mau ketinggalan untuk mensupport. Ini terbukti dengan dikeluarkannya Liquid control 4.9.1, pada versi ini dapat dinikmati control-control yang belum didapati pada Silverlight 2 Beta 2, yaitu :

  • Calendar
  • CheckBox
  • Date Picker
  • Dropdown List
  • Fieldset
  • File Upload
  • ItemViewer
  • ListBox
  • Popup Dialog
  • NumericUpDown
  • Progress Bar
  • Radio Button
  • Rich TextBox
  • TextArea
  • Textbox
  • Text Label
  • Tree View

Gambar berikut memperlihatkan contoh-contoh control yang ada pada Liquid control.

geeks1

Untuk menggunakan Liquid control maka langkah pertama yang harus dilakukan adalah mengunduh file DLL tempat control-control ini bersemayam. Tingga mengunjungi situ http://www.vectorlight.net dan arahkan mouse ke menu Download, atau langsung mengklik link ini.

Setelah file dengan ukuran 84KB (cuma 84KB) diunduh, ekstrak dan tambahkan Liquid.dll sebagai reference dari project Silverlight Application.

geeks2

Langkah selanjutnya adalah mendaftarkan Liquid control agar dapat digunakan pada halaman Page.xaml yang ada pada project Silverlight Application. Untuk menggunakan Liquid control maka perlu ditambahkan baris berikut :

xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"

Sehingga akan kode dari halaman Page.xaml akan seperti berikut :

<UserControl x:Class="LiquidControlEx.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        
    </Grid>
</UserControl>
Sekarang tag-tag Liquid control sudah dikenali oleh VS2008.

geeks3

Berikut ini akan diceritakan beberapa control yang mungkin menarik untuk digunakan.

{TextBoxPlus}

Tentu control ini mempunyai kelebihan dibandingkan control TextBox yang telah dimiliki oleh Silverlight 2. Salah satunya, pada Control TextBoxPlus terdapat atribut Password yang apabila bernilai True maka TextBoxPlus akan berperan sebagai inputan password.

Berikut contohnya :

<liquid:TextBoxPlus HorizontalAlignment="Left" 
                    VerticalAlignment="Top" 
                    Margin="5,5,0,0" 
                    Password="True"  
                    Width="100" 
                    Height="23">
</liquid:TextBoxPlus>

Selain atribut Password, juga terdapat atribut lain yang berguna seperti :

  • BlockNonNumerics, atribut ini berfungsi untuk membuat TextBoxPlus hanya menerima karakter numerik saja.
  • ExcludeCharacters, atribut ini dapat digunakan untuk aturan berdasarkan regular expression.
  • Tooltip, atribut ini akan memberikan tooltip yang menarik ketika pointer mouse diarahakan pada control ini.

Selain penambahan atribut pada TextBoxPlus juga terdapat tambahan event, untuk melihat event-event yang ada dan tidak ada pada TextBoxPlus maka dapat dilihat perbandingannya dengan control TextBox pada Silverlight 2 berikut ini.

<liquid:TextBoxPlus BindingValidationError="" 
                    Clicked="" 
                    EnterPressed="" 
                    GotFocus="" 
                    KeyDown="" 
                    KeyUp="" 
                    LayoutUpdated="" 
                    Loaded="" 
                    LostFocus="" 
                    MouseEnter="" 
                    MouseLeave="" 
                    MouseLeftButtonDown="" 
                    MouseLeftButtonUp="" 
                    MouseMove="" 
                    SizeChanged="">
</liquid:TextBoxPlus>

dan berikut event yang pada control TextBox milik Silverlight 2.

<TextBox BindingValidationError="" 
         GotFocus="" 
         KeyDown="" 
         KeyUp="" 
         LayoutUpdated="" 
         Loaded="" 
         LostFocus="" 
         MouseEnter="" 
         MouseLeave="" 
         MouseLeftButtonDown="" 
         MouseLeftButtonUp="" 
         MouseMove="" 
         SelectionChanged="" 
         SizeChanged="" 
         TextChanged="">
</TextBox>

{CalendarPlus}

Dibandingkan control Calendar milik Silverlight 2, control CalendarPlus ini mempunyai kemudahan untuk mengubah nama hari yang dimunculkan pada control. Berikut ini contohnya.

<liquid:CalendarPlus HorizontalAlignment="Left"   
                     VerticalAlignment="Top" 
                     Margin="113,70,0,0"
                     Monday="Sen"
                     Tuesday="Sel"
                     Wednesday="Rab"
                     Thursday="Kam"
                     Friday="Jum"
                     Saturday="Sab"
                     Sunday="Min">
</liquid:CalendarPlus>

Sedangkan dari segi antarmuka juga terdapat perbedaan dari style dan navigasi seperti yang dapat dilihat pada gambar berikut ini.

geeks4

{DatePickerPlus}

Berikut contoh penggunaan control DatePickerPlus.

<liquid:DatePickerPlus HorizontalAlignment="Left"
                       VerticalAlignment="Top" 
                       Margin="113,232,0,0" 
                       EnableTimePicking="True"
                       DateFormat="dd/MMM/yyy">

Dari segi antarmuka antara control DatePickerPlus dan control DatePicker milik Silverlight 2 mempunyai perbedaan seperti berikut :

geeks5

{DropDownList}

Silverlight 2 sampai saat ini belum mempunyai control DropDownList. Oleh karena itu control DropDownList yang ada pada Liquid control akan sangat membantu sekali, karena control ini sangat mirip penggunaanya seperti control DropDownList pada ASP.NET. Berikut contoh pemanfaatan control DropDownList pada Liquid control.

<liquid:DropDownList HorizontalAlignment="Left"  
                     VerticalAlignment="Top" 
                     Margin="113,270,0,0" 
                     Width="200" 
                     Height="23">
    <liquid:DropDownList.Items>
        <liquid:ListItem Key="1" Value="Australia" />
        <liquid:ListItem Key="2" Value="Canada" />
        <liquid:ListItem Key="3" Value="China" />
    </liquid:DropDownList.Items>
</liquid:DropDownList>

geeks6

{FieldSet}

Control ini juga tidak dimiliki oleh Silverlight 2. Control ini berfungsi untuk mengelompokkan control-control lain, sebagai contoh dapat dilihat pada gambar berikut.

 geeks7

Control ini mempunyai feature untuk show dan hide content dari FieldSet dengan efek animasi yang menarik.

Berikut contoh penggunaan control FieldSet.

<liquid:FieldSet HorizontalAlignment="Left"
                 VerticalAlignment="Top" 
                 Margin="113,300,0,0" 
                 ExpandedHeight="150" 
                 Width="150" 
                 Text="Lots of options">
    <liquid:FieldSet.Children>
        <StackPanel>
            <CheckBox Content="A.I. Programmer" ></CheckBox>
            <CheckBox Content="Graphic Designer" ></CheckBox>
            <CheckBox Content="System Engineer" ></CheckBox>
            <CheckBox Content="Tester" ></CheckBox>
        </StackPanel>
    </liquid:FieldSet.Children>
</liquid:FieldSet>

{ItemViewer}

Control ini dapat dimanfaatkan untuk mengelompokan item-item dalam suatu area. Keterangan untuk masing-masing item dapat berikut teks dan juga gambar seperti pada gambar berikut ini.

geeks8

Dan berikut contoh kode yang dapat digunakan :

<UserControl x:Class="ItemViewer.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
    Width="400" Height="300">
     <liquid:ItemViewer x:Name="myList" 
                        Width="400" 
                        Height="300">
          <liquid:ItemViewer.Items>
               <liquid:FileItem Text="My File.pdf" 
                                OtherText="300KB" 
                                Icon="images/large/pdf.png" />
               <liquid:FileItem Text="My File 2.doc" 
                                OtherText="360KB" 
                                Icon="images/large/doc.png" />
          </liquid:ItemViewer.Items>
     </liquid:ItemViewer>
</UserControl>

{NumericalUpDown}

Antarmuka control ini dapat dilihat pada gambar di bawah ini :

geeks9

Dan berikut contoh kode untuk menggunakan control ini :

<UserControl x:Class="NumericUpDown.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:liquid="clr-namespace:Liquid;assembly=Liquid"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
          <liquid:NumericUpDown Min="0" Max="500" />
    </Grid>
</UserControl>

Masih banyak control-control lain yang menarik seperti control Upload, control Rich TextBox yang berperan seperti TinyMCE (Javascript), control ProgressBar, control TreeView dan control Popup Dialog. Control-control tersebut akan dibahas satu persatu nanti pada posting terpisah :) Kenapa pada posting terpisah? Alasan pertama karena bahasan 1 control tersebut akan memerlukan penjelasan yang panjang dan akan lebih nyaman bila ditulis khusus dalam 1 posting. Alasan kedua ? ... Beberapa orang tahu apa jawaban dari alasan kedua ini :)

Selamat mencoba....have a great weekend.

Souce code dari contoh-contoh kode di atas dapat diunduh di sini.

Share this post: | | | |
Posted: Sep 23 2008, 12:15 AM by reyza | with 1 comment(s)
Filed under:
New ASP.NET 3.5 Control : Generated Image

Kadang pada aplikasi yang dibangun terdapat fasilitas untuk melakukan upload foto atau gambar dan tentu saja  ada kemampuan untuk menampil foto atau gambar tersebut. Foto atau gambar tersebut dapat ditampilkan berupa tumbnail.

Disalah satu aplikasi yang kami bangun, gambar yang menjadi tumbnail dibuat dengan 'hanya me-resize' ukuran gambar/foto yang telah di-upload dengan menggunakan atribut Width dan Height pada tagl <img> atau pada control <asp:Image>. Artinya setiap file yang ditampilkan masih mempunyai ukuran file yang sama. Bayangkan bila 1 file gambar yang diupload sebesar 1MB kemudian 'tumbnail bohongan' yang ditampilkan ada 13 buah, maka satu halaman akan berukuran 13MB.....'keren bukan' ? :)

Jadi harus dicari solusi untuk menghilangkan hal 'keren' ini, dari hasil jalan-jalan dengan mengedarai 'mesin pencarian terpercaya' maka bertemulah dengan project ASP.NET di CodePlex, url-nya dapat dikunjungi di sini. Pada halaman tersebut dapat ditemui satu project yang baru saja keluar tidak lebih 1 bulan (sejak tulisan ini di-publish), yaitu tanggal 19 Agustus 2008.

Apa saja yang dijanjikan oleh ASP.NET Generated Image Futures? Berikut hal-hal penting yang bisa didapat :

  • Control ini menjanjikan dapat menampilkan gambar yang ada di dalam tabel dalam suatu database dengan lebih cepat.
  • Membuat gambar secara on-the-fly.
  • Memodifikasi gambar yang sudah ada, seperti mengubah ukuran secara on-the-fly, memberikan tulisan dan lain-lain.
  • Cache untuk mempercepat load gambar.
  • etc.

{Yang Perlu Disiapkan}

Terlebih dahulu yang perlu disiapkan adalah mengunduh Microsoft.Web.GeneratedImage.dll di sini. File-file contoh program juga bisa ditemui pada url tersebut, termasuk database yang berisi gambar untuk latihan.

geeks1

File Microsoft.Web.GeneratedImage.dll dapat digunakan untuk menambah control baru pada toolbox VS2008, seperti yang terlihat pada gambar berikut :

geeks3

{Hello World with ASP.NET Generated Image Futures}

Apa yang harus dilakukan?

Pertama tentu saja membuat project Web Application atau cukup dengan membuat Website. Setelah itu tambahkan file Microsoft.Web.GeneratedImage.dll sebagai reference website atau web application.

Langkah kedua adalah membuat Image Http Handler, dengan isi seperti ini :

<%@ WebHandler Language="C#" Class="HelloWorldImageHandler" %>

using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using Microsoft.Web;

public class HelloWorldImageHandler : ImageHandler
{

    public HelloWorldImageHandler()
    {
    }

    public override ImageInfo GenerateImage(NameValueCollection parameters)
    {
        
    }

}

Pada construktor, hal yang bisa diisikan adalah konfigurasi cache dan juga format image yang diinginkan. Sedangkan pada method GenerateImage, seperti namanya adalah method yang akan berfungsi 'apa saja yang dilakukan' untuk men-generate gambar yang akan ditampilkan. Di dalam method ini dapat ditambahkan baris-baris untuk mengambil data gambar dari database. Atau dituliskan baris-baris yang berfungsi untuk mengambil gambar dari filesystem kemudian melakukan proses modifikasi gambar seperti memberikan tambahan text pada gambar dan secara on-the-fly gambar dengan text yang diinginkan ditampilkan pada halaman web.

Jangan lupa tambahkan baris berikut pada Image Handler :

using System.Drawing;
using System.Web;
using Microsoft.Web;

Berikut contoh yang paling sederhana dari file Image Handler.

<%@ WebHandler Language="C#" Class="HelloWorldImageHandler" %>

using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using Microsoft.Web;

public class HelloWorldImageHandler : ImageHandler
{

    public HelloWorldImageHandler()
    {
        this.ContentType = System.Drawing.Imaging.ImageFormat.Gif;
    }

    public override ImageInfo GenerateImage(NameValueCollection parameters)
    {
        Bitmap bitmap = new Bitmap(232, 213);
        Graphics graphic = Graphics.FromImage(bitmap);
        graphic.Clear(Color.Red);
        graphic.DrawString(parameters["myText"], 
            new Font(FontFamily.GenericSansSerif, 16), 
            Brushes.Black, 0, 0);

        return new ImageInfo(bitmap);
    }

}

Bila diperhatikan pada construktor terdapat baris yang mendefinisikan format file gambar yang akan digunakan, pada kasus ini format file gambar adalah GIF.  Artinya nanti ketika gambar sudah muncul pada web browser dapat dicoba untuk mengklik kanan gambar tersebut dan perhatikan extension dari gambar tersebut, dipastikan adalah GIF.  Selain format GIF dapat pula digunakan format :

  • BMP.
  • EMF.
  • Exif.
  • Icon.
  • Jpeg.
  • PNG.

Setelah itu, tinggal buat file ASPX yang akan menampilkan gambar tersebut.

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

<%@ Register Assembly="Microsoft.Web.GeneratedImage" 
    Namespace="Microsoft.Web" TagPrefix="asp" %>

<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GeneratedImage ID="GeneratedImage1" 
            runat="server" 
            ImageHandlerUrl="~/HelloWorldImageHandler.ashx">
            <Parameters>
                <asp:imageparameter name="myText" value="Hello World" />
            </Parameters>
        </asp:GeneratedImage>
    </div>
    </form>
</body>
</html>

Tidak perlu penjelasan lagi bukan maksud dari baris-baris pada halaman ASPX di atas? Mungkin yang mesti diperhatikan adalah :

  • Mesti didaftarkan control GeneratedImage (dapan dilihat pada bagian atas).
  • Pada control GeneratedImage, atribut ImageHandlerUrl adalah file dari Image Hander yang telah dibuat.
  • Nama parameter myText yang ada pada control GeneratedImage mesti didaftarkan terlebih dahulu pada file Image Handler. Disini parameter ini berfungsi untuk menampung text yang akan ditampilkan pada gambar.

Berikut hasil dari contoh kode di atas.

geeks2

{Membuat Image Handler Otomatis}

Bila pada toolbox sudah ditambahkan control GeneratedImage, maka control itu dapat dimanfaatkan untuk membuat Image Handler secara otomatis, caranya  cukup dengan melakukan drag-n-drop control GeneratedImage pada halaman ASPX, kemudian pada mode design dapat dilihat control GeneratedImage seperti pada gambar berikut.

geeks4

Klik "Create Image Handler" maka secara otomatis file Image Handler akan dibuatkan dengan isi seperti berikut ini :

<%@ WebHandler Language="C#" Class="ImageHandler1" %>

using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using Microsoft.Web;

public class ImageHandler1 : ImageHandler {
    
    public ImageHandler1() {
        // Set caching settings and add image transformations here
        // EnableServerCache = true;
    }
    
    public override ImageInfo GenerateImage(NameValueCollection parameters) {
        // Add image generation logic here and return an instance of ImageInfo
        throw new NotImplementedException();
    }
}

{Menampilkan Dan Memodifikasi Gambar}

Paga bagian ini akan diberikan contoh untuk menampilkan gambar yang sudah ada kemudian dicoba untuk memodifikasi seperti memberikan tulisan atau mengubah ukuran lebar & tinggi gambar.

Berikut ini contoh Image Handler untuk mengubah ukuran lebar dan tinggi gambar.

<%@ WebHandler Language="C#" Class="ImageHandler1" %>

using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using Microsoft.Web;

public class ImageHandler1 : ImageHandler
{

    public ImageHandler1()
    {
        this.ContentType = System.Drawing.Imaging.ImageFormat.Png;
    }

    public override ImageInfo GenerateImage(NameValueCollection parameters)
    {
        string imageUrl = Convert.ToString(parameters["imageUrl"]);
        Bitmap original = new Bitmap(imageUrl);
        Bitmap bitmap = new Bitmap(original, 100, 100);

        return new ImageInfo(bitmap); 
    }
}

Dan berikut ini contoh control GeneratedImage yang digunakan.

<asp:GeneratedImage ID="GeneratedImage1" runat="server" 
    ImageHandlerUrl="~/ImageHandler1.ashx">
    <Parameters>
        <asp:ImageParameter Name="imageUrl" Value="C:\fn1.JPG" />
    </Parameters>
</asp:GeneratedImage>

Hasilnya :

geeks5

Gambar disebelah kiri adalah gambar original, sedangkan gambar sebelah kiri output dari Image Handler. Sedangkan dari ukuran dapat dilihat pada gambar berikut.

geeks6

Terbukti ukuran menjadi lebih kecil.

Sekarang akan dicoba untuk memberikan sebuah text pada gambar tersebut. Berikut contoh Image Handler yang digunakan.

<%@ WebHandler Language="C#" Class="ImageHandler2" %>

using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using Microsoft.Web;

public class ImageHandler2 : ImageHandler
{

    public ImageHandler2()
    {
        this.ContentType = System.Drawing.Imaging.ImageFormat.Png;
    }

    public override ImageInfo GenerateImage(NameValueCollection parameters)
    {
        string imageUrl = Convert.ToString(parameters["imageUrl"]);
        Bitmap bitmap = new Bitmap(imageUrl);
        
        Graphics gra = Graphics.FromImage(bitmap);
        gra.DrawString("www.TerangWangi.net", 
            new Font("Verdana", 32, FontStyle.Bold), 
            new SolidBrush(Color.Red), 30, bitmap.Height / 2);

        return new ImageInfo(bitmap); 
    }
}

Dan berikut contoh kode control GeneratedImage yang digunakan :

<asp:GeneratedImage ID="GeneratedImage1" runat="server" 
    ImageHandlerUrl="~/ImageHandler2.ashx">
    <Parameters>
        <asp:ImageParameter Name="imageUrl" Value="C:\DSC_0708.JPG" />
    </Parameters>
</asp:GeneratedImage>

Hasilnya dapat dilihat pada gambar berikut ini.

geeks7

{jangan komentarin fotonya yg nge-blur ya, ini cuma quick shoot saat bertemu pertama kali dengan lensa 50mm f1.4}

{Mengambil dan Menampilkan Image dari Database}

Contoh pada bagian ini mengambil dari contoh yang terdapat pada CodePlex. Contoh berikut ini menggunakan LINQ to SQL. Maka dapat dilihat tabel dan class LINQ to SQL seperti pada gambar berikut.

geeks8

Dan berikut ini contoh kode Image Handler untuk mengambil data dari database sekaligus men-'GenerateImage'-nya agar bisa ditampilkan pada halaman ASPX.

<%@ WebHandler Language="C#" Class="ProductImageHandler" %>
using System;
using System.Collections.Specialized;
using System.Drawing;
using System.Web;
using System.Linq;
using Microsoft.Web;

public class ProductImageHandler : ImageHandler
{

    public ProductImageHandler()
    {
        this.ImageTransforms.Add(new ImageResizeTransform
            {
                Width = 300,
                Mode = ImageResizeMode.Fit
            });
        this.EnableClientCache = true;
        this.EnableServerCache = true;

    }

    public override ImageInfo GenerateImage(NameValueCollection parameters)
    {
        using (DataClassesDataContext db = new DataClassesDataContext())
        {

            return new ImageInfo(db.MyImages.Single(x => 
                x.ImageID == int.Parse(parameters["imageid"])).ImageData.ToArray());
        }
    }
}

Dan berikut ini contoh penggunaan control DataList dan GeneratedImage untuk menampilkan gambar.

<asp:DataList ID="DataList1" runat="server" DataSourceID="LinqDataSource1">
    <ItemTemplate>           
        <cc1:GeneratedImage ID="GeneratedImage1" runat="server" 
            ImageHandlerUrl="~/ProductImageHandler.ashx" 
            Timestamp='<%# Eval("TimeLastModified") %>'>
            <Parameters>
                <cc1:ImageParameter Name="imageid" Value='<%# Eval("ImageID") %>'/>                
            </Parameters>
        </cc1:GeneratedImage>
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:LinqDataSource ID="LinqDataSource1" runat="server" 
    ContextTypeName="DataClassesDataContext" 
    Select="new (ImageID, TimeLastModified)" 
    TableName="MyImages">
</asp:LinqDataSource>

{Yang Baru Kutahu : Upload dan Menyimpan Data Ke Dalam Database Dengan Mudah}

Hal ini baru kutahu ketika melihat contoh kode "DatabaseImages", salah satu contoh penggunaan control GeneratedImage yang bisa ditemui pada CodePlex. Pada contoh ini terdapat contoh untuk mengupload file (dalam kasus ini adalah file gambar) dan kemudian menyimpan data gambar tersebut kedalam database. Caranya sangat simple bila ditulis dengan LINQ to SQL.

Berikut adalah isi kode file ASPX :

<asp:FileUpload ID="ImageUploader" runat="server" />
<br />
<asp:Button ID="SaveImage" runat="server"
    Text="Save Image" onclick="SaveImage_Click" />

Dan berikut ini code file dari file ASPX ini :

protected void SaveImage_Click(object sender, EventArgs e)
{
    using (DataClassesDataContext db = new DataClassesDataContext())
    {
        db.MyImages.InsertOnSubmit(
            new MyImage
            {
                ImageData = this.ImageUploader.FileBytes
            });
        db.SubmitChanges();
    }
}

Sangat pendek dan sederhana untuk ditulis, tetapi tetap belum tertarik untuk menyimpan gambar di dalam database.

{Selamat mencoba & selamat menunaikan ibadah puasa, mohon maaf lahir batin dan semoga puasa bulan ini lebih baik dari bulan-bulan sebelumnya}

Share this post: | | | |
Posted: Sep 23 2008, 12:02 AM by reyza | with 1 comment(s)
Filed under: ,
TechEd SEA 2008 : Slides, Hands - on lab, Instructor - led lab, event's archives

Sekarang materi-materi TechEd SEA 2008 seperti slide, hands on lab manuals, instructor led lab manuals sudah bisa diundung dengan mengunjungi langsung url berikut : http://www.microsoft.com/malaysia/techedsea2008/

Atau dapat pula langsung klik kanan url-url di bawah dan dimasukkan ke dalam Flashget atau IDM yang rakus bandwidth itu :

Sebenarnya masih banyak lagi slide track tapi masih dalam proses upload.

Berikut ini materi Hands on lab manuals dan instructor led lab manuals :

Selain itu juga tersedia video TechEd di sini.

Selain itu ada arsip-arsip event yang ada saat TechEd SEA 2008, seperti berikut :

  • Sha-Zaam Pictures.
  • Zap Pictures, ini adalah kompetisi foto dengan menggunakan toy yang sudah disediakan. Pertama dipilih 10 besar foto yang masuk seleksi pertama untuk kemudian partisipan TechEd akan memilih kesepuluh foto tersebut untuk masuk 3 besar. Dan tentu saja ketiga posisi itu di tempati oleh partisipan dari Indonesia. Foto Om Danny, Om Binsar dan satu lagi lupa.
  • MCP Photo Session Pictures.
Share this post: | | | |
Interactive Silverlight Chart Application

Pada posting sebelumnya di sini, telah diberikan pengetahuan bagianmana membuat project Silverlight 2 pada VS2008. Selain itu juga diberikan contoh untuk menggunakan control-control Silverlight 2 seperti TextBlock, TextBox dan juga Button. Setelah itu juga telah diberikan contoh untuk membuat chart dengan menggunakan Visifire for Silverlight Application.

Berikut ini akan dibuat chart iteraktif yang sederhana. Hasil akhirnya adalah seperti gambar berikut ini.

geek1

Idenya adalah nilai-nilai dimasukkan ke dalam TextBox yang telah tersedia, kemudian ketika tombol Submit maka nilai-nilai pada chart akan diupdate.

Berikut ini adalah kode yang terdapat pada file Page.xaml :

<UserControl x:Class="VisifireSilverlightApplication.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="500">
    <Grid x:Name="LayoutRoot" Background="White">
        <TextBlock x:Name="Label1" Text="C#" 
                   HorizontalAlignment="Left" 
                   VerticalAlignment="Top" 
                   Margin="5,5,0,0" />
        <TextBox x:Name="TextBox1" Width="50" 
                 HorizontalAlignment="Left" 
                 VerticalAlignment="Top" 
                 Margin="75,5,0,0"/>
        
        <TextBlock x:Name="Label2" Text="VB.NET" 
                   HorizontalAlignment="Left" 
                   VerticalAlignment="Top" 
                   Margin="5,32,0,0" />
        <TextBox x:Name="TextBox2" Width="50" 
                 HorizontalAlignment="Left" 
                 VerticalAlignment="Top" 
                 Margin="75,32,0,0"/>
        
        <TextBlock x:Name="Label3" Text="Java" 
                   HorizontalAlignment="Left" 
                   VerticalAlignment="Top" 
                   Margin="5,60,0,0" />
        <TextBox x:Name="TextBox3" Width="50" 
                 HorizontalAlignment="Left" 
                 VerticalAlignment="Top" 
                 Margin="75,60,0,0"/>
        
        <TextBlock x:Name="Label4" Text="PHP" 
                   HorizontalAlignment="Left" 
                   VerticalAlignment="Top" 
                   Margin="5,90,0,0" />
        <TextBox x:Name="TextBox4" Width="50" 
                 HorizontalAlignment="Left" 
                 VerticalAlignment="Top" 
                 Margin="75,90,0,0"/>
        
        <Button x:Name="Button1" HorizontalAlignment="Left" 
                VerticalAlignment="Top" 
                Margin="5,123,0,0" 
                Click="Button1_Click" 
                Content="Submit" 
                Width="75" Height="30"/>
        
        <Grid x:Name="ChartContainer" Background="Black" 
              Width="390" Height="330" 
              HorizontalAlignment="Left" 
              VerticalAlignment="Top" 
              Margin="5,160,0,0">
        </Grid>
    </Grid>
</UserControl>

Ada beberapa hal yang baru disini yang belum ditemu pada posting sebelumnya, yaitu pengaturan tata letak. Dari beberapa pengaturan tata letak suatu control, pada contoh di atas adalah cara pengaturan tata letak dengan posisi abolut. Perhatikan baris berikut ini :

<TextBlock x:Name="Label1" Text="C#" 
           HorizontalAlignment="Left" 
           VerticalAlignment="Top" 
           Margin="5,5,0,0" />

Pada baris di atas, dapat dilihat untuk mengatur tata letak suatu kontrol secara absolut terlebih dahulu tentukan nilai dari atribut HorizontalAlignment dan VerticalAlignment sebagai penunjuk titik acuan (0,0). Setelah itu baru berikan nilai pada atribut Margin.

Pola dari nilai atribut Margin adalah : valueLeft, valueTop, valueRight, valueBottom.

Dengan memberikan nilai HorizontalAlignment="Left" dan VerticalAlignment="Top", maka dapat dibilang titik acuan (0,0) berada di ujung kiri atas, sehingga dengan memberikan nilai Margin="5,5,0,0" maka control akan akan berada 5 pixel dari atas dan 5 pixel dari sisi kiri.

Pada file Page.xaml (kode di atas), terdapat area yang akan digunakan untuk menggambar chart, area yang akan digunakan memanfaatkan control Grid.

<Grid x:Name="ChartContainer" Background="Black" 
              Width="390" Height="330" 
              HorizontalAlignment="Left" 
              VerticalAlignment="Top" 
              Margin="5,160,0,0">

Selanjutnya adalah kode pada file Page.xaml.cs yang untuk menggambar chart secara pemrograman. Caranya hampir sama dengan yang telah ditulis pada posting sebelumnya. Pada contoh berikut ini, akan dibuat sebuah method untuk menggambar chart, yaitu CreateChart.

protected void CreateChart(string value1, string value2, string value3, string value4)
{
    // create chart object
    Visifire.Charts.Chart visiChart = new Visifire.Charts.Chart();
    Visifire.Charts.DataSeries dataSeries = new Visifire.Charts.DataSeries();
    Visifire.Charts.DataPoint dataPoint;
    Visifire.Charts.Title title = new Visifire.Charts.Title();

    // Title Chart
    title.Text = "Most Popular Programming Language";
    visiChart.Children.Add(title);

    // set widht and height
    visiChart.Width = 390;
    visiChart.Height = 330;

    // set value for C#
    dataPoint = new Visifire.Charts.DataPoint();
    dataPoint.YValue = Convert.ToDouble(value1);
    dataPoint.AxisLabel = "C#";
    dataSeries.Children.Add(dataPoint);

    // set value for VB.NET
    dataPoint = new Visifire.Charts.DataPoint();
    dataPoint.YValue = Convert.ToDouble(value2);
    dataPoint.AxisLabel = "VB.NET";
    dataSeries.Children.Add(dataPoint);

    // set value for Java
    dataPoint = new Visifire.Charts.DataPoint();
    dataPoint.YValue = Convert.ToDouble(value3);
    dataPoint.AxisLabel = "Java";
    dataSeries.Children.Add(dataPoint);

    // set value for PHP
    dataPoint = new Visifire.Charts.DataPoint();
    dataPoint.YValue = Convert.ToDouble(value4);
    dataPoint.AxisLabel = "PHP";
    dataSeries.Children.Add(dataPoint);

    // Mengisi data point ke dalam data series
    dataSeries.RenderAs = "Column";
    visiChart.Children.Add(dataSeries);

    // Set theme
    visiChart.Theme = "Theme3";

    // Add chart to Grid
    // ChartContainer is Grid's ID
    // look into Page.xaml
    ChartContainer.Children.Clear();
    ChartContainer.Children.Add(visiChart);
}

Yang berbeda dari kode pada posting sebelumnya adalah baris-baris berikut :

   1:  // set value for C#
   2:  dataPoint = new Visifire.Charts.DataPoint();
   3:  dataPoint.YValue = Convert.ToDouble(value1);
   4:  dataPoint.AxisLabel = "C#";
   5:  dataSeries.Children.Add(dataPoint);

Pada baris ke-3, diisikan nilai dari data point dan pada baris ke-4 memberikan nilai label yang akan menjadi lable dari sumbu X untuk data point tersebut. Selanjutnya tidak menambah method-method berikut pada file Page.xaml.cs.

using System;
using System.Windows;
using System.Windows.Controls;

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

        private void Button1_Click(object sender, RoutedEventArgs e)
        {
            CreateChart(TextBox1.Text, TextBox2.Text, TextBox3.Text, TextBox4.Text);
        }

        protected void InitChart()
        {
            CreateChart("0", "0", "0", "0");
        }

        protected void CreateChart(string value1, string value2, string value3, string value4)
        {
            . . .
        }
    }
}

Source code untuk contoh di atas dapat di-download di sisi.

Selanjutnya akan dibuat modifikasi aplikasi sederhana di atas akan lebih terlihat interaktif dan menarik dengan menggunakan theme dan animasi yang telah dimiliki oleh Visifire.  Tambahan yang akan ditambahkan meliputi :

  • Control untuk pemilihan jenis chart yang akan digunakan, seperti Bar, Line, Pie, Doughnut dan lain-lain.
  • Control untuk memilih apakah chart yang ditampilkan dalam 2D atau 3D.

Antarmuka dari hasil modifikasi ini akan dilihat seperti pada gambar berikut ini.

 geek2

Pada contoh ini kita akan berkenalan dengan 2 control baru, yaitu :

  • RadioButton.
  • CheckBox.

{RadioButton}

Berikut contoh control RadioButton pada file XAML.

<RadioButton x:Name="RadioButton_Bar" Content="Bar" 
                     HorizontalAlignment="Left"
                     VerticalAlignment="Top"
                     Margin="235,3,0,0"
                     Checked="RadioButton_Bar_Checked"/>

Pada control di atas terdapat event Checked. Dan berikut contoh method yang dipanggil oleh event Checked.

private void RadioButton_Bar_Checked(object sender, RoutedEventArgs e)
{
    . . .
}

{CheckBox}

Berikut contoh penulisan control CheckBox pada file XAML.

<CheckBox x:Name="CheckBox1" 
          Unchecked="CheckBox1_Checked" 
          Checked="CheckBox1_Checked" 
          HorizontalAlignment="Left" 
          VerticalAlignment="Top" 
          Margin="180,35,0,0" />

Pada control di atas terdapat 2 event, yaitu Unchecked dan Checked, kedua event tersebut memanggil 1 method yang sama, yaitu CheckBox1_Checked, seperti contoh di bawah ini.

private void CheckBox1_Checked(object sender, RoutedEventArgs e)
{
    . . . 
}

untuk lebih jelasnya dapat mengunduh contoh code aplikasi lengkap di sini.

 

Pada posting berikutnya masih akan bercerita tentanga Visifire for Silverlight Application dengan mencoba mengambil data dari database dengan menggunakan ASP.NET Ajax, ADO Data Service AJAX Client atau Astoria.

Akan dicoba pula posting-posting lain yang membahas Silverlight untuk membangun potongan-potongan aplikasi bisnis.

Share this post: | | | |
Posted: Sep 22 2008, 11:53 PM by reyza | with no comments
Filed under:
Silverlight & Visual Studio 2008 SP1

Pernah melihat aplikasi dibawah ini?

Aplikasi ini adalah aplikasi yang berhubungan dengan pengelolaan finansial yang dibangun dengan Silverlight 2. Aplikasi yang menarik untuk digunakan karena mempunyai antarmuka yang menarik, indah dan efek-efek yang mengagumkan (paling ngga buat saya pribadi). Melihat aplikasi ini jadi teringat aplikasi yang dibangun dengan menggunakan Java Applet. Web browser hanya sebagai rumah untuk menampilkan, sedangkan kontrol, input, output semuanya ditampilkan dengan memanfaatkan Silverlight 2, tidak ada inputan yang dimasukkan dengan memanfaatkan kontrol HTML.

Bagi yang belum melihat aplikasi ini di depan mata maka dapat mengunduh file sebesar hampir 12MB ini di http://www.financialdevelopers.com/ atau langsung ke sini.

Hari ini kebetulan ingin membuat aplikasi kecil yang pemanfaatannya sama seperti contoh aplikasi di atas dengan memanfaatkan Silverlight 2 dan Visifire Silverlight Chart. Pemanfaatkan Visifire Silverlight Chart pada aplikasi Silverlight ini bukan seperti yang pernah ditulis di sini dan di sini. Pada tulisan itu hanya memanfaatkan Visifire Silverlight Chart untuk menampilkan chart dengan memanfaatkan Javascript. 

Sejak versi...hmmm...lupa versi berapa, Visifire Silverlight Chart mempunyai komponen yang dapat digunakan pada Aplikasi Silverlight 2 "versi managed code". Menarik untuk dicoba bukan?

Hal yang pertama dilakukan adalah membuat dan mendesign antarmuka pada Blend 2.5 June Preview, dan kemudian membuka Visual Studio 2008 (yang sudah diupdate dengan SP1) untuk memulai "ngoding" tetapi yang terlihat adalah message box berikut ini.

geeks1

Uuups...ternyata, update SP1 ada pengaruhnya dengan Microsoft Silverlight Tool yang telah diinstall sebelumnya.

Artinya mesti mendownload ulang silverlight_chainer.exe yang besarnya 84MB itu kembali di sini, file ini baru diupdate tanggal 11 Agustus 2008 kemarin, artinya berbarengan dengan "muncul"-nya Visual Studio 2008 SP1 dan .NET 3.5 SP1.

Apa saja yang akan di-"dapat" setelah menginstall silverlight_chainer.exe ini? Berikut adalah daftarnya :

  • Silverlight 2 Beta 2, semoga ini berpengaruh untuk memperbaiki Silverlight 2 pada Firefox 3.0. Sekarang Firefox sering bermasalah dengan Silverlight, Firefox 3.0 entah kenapa sering crash tanpa sebab.
  • Silverlight 2 SDK Beta 2.
  • KB950630 for Visual Studio 2008 RTM or KB955214 for Visual Studio 2008 SP1.
  • Silverlight Tools Beta 2 for Visual Studio 2008.

Setelah silverlight_chainer.exe diinstall maka diharapkan hal-hal berikut akan dapat dinikmati, yaitu :

  • Visual Basic and C# Project templates.
  • Intellisense and code generators for XAML.
  • Debugging of Silverlight applications.
  • Web reference support.
  • WCF Templates.
  • Team Build and command line build support.
  • Integration with Expression Blend.
  • Enhanced Setup with upgrade support.

Selanjutnya....hmm...harus menunggu silverlight_chainer.exe kelar terunduh terlebih dahulu sebelum memulai "ngoding".

geeks2

Baru 6MB dengan kecepatan unduh 5,47KB/s ...... pakir bandwidth banget yah? :)

{mode menunggu : on, sebelum memulai ngoding Silverlight 2 dan Visifire.}

Share this post: | | | |