Reyza

Silverlight 2 RC0 : motion path, where are you?

2008-09-28T17:52:37Z

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".

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

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.

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: | | | |

Simple Books

2008-09-25T04:15:42Z

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: | | | |

ComponentArt Web.UI 2008.2 & Community Server 2008.5

2008-09-24T05:48:35Z

{ComponentArt Web.UI 2008.2}

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

Ada beberapa control baru pada versi ini yaitu :

ColorPicker

Control untuk pemilihan warna secara visual.

Input

Control Input ini dilengkapi pengecekan masukan berdasarkan pola yang diinginkan.

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.

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.

{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.

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

2008-09-22T17:28:43Z

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: | | | |

Silverlight Rich TextBox

2008-09-22T17:18:42Z

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

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

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.

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 :

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: | | | |

Silverlight 2 BETA 2 Liquid controls

2008-09-22T17:15:40Z

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.

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.

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.

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.

{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 :

{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>

{FieldSet}

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

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.

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 :

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: | | | |

New ASP.NET 3.5 Control : Generated Image

2008-09-22T17:02:06Z

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.

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

{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.

{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.

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 :

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

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.

{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.

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: | | | |

TechEd SEA 2008 : Slides, Hands - on lab, Instructor - led lab, event's archives

2008-09-22T16:59:30Z

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: | | | |