Reyza

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

Public

March 2009 - Posts

Just One Click, You will get all of WEB things

Welcome to the Microsoft Web Platform Installer 2.0 Beta.

Kalimat tersebut merupakan kalimat yang akan ditemui pada bagian atas dari jendela Microsoft Web Platform Installer 2.0 Beta yang bisa diunduh di http://www.microsoft.com/web/downloads/platform.aspx.

Apa saja yang ditawarkan oleh barang ini :

web-01

Atau untuk lebih jelasnya silakan download : ini. Jalankan dan beberapa saat kemudian dapat dilihat jendela berikut :

web-02

 web-03

web-04

Seperti yang dilihat pada gambar, dengan satu installer berukuran 1MB, maka kita akan menikmati beberapa barang-barang terkenal di dunia maya, seperti :

  • BlogEngine.NET.
  • DasBlog.
  • SubText.
  • WordPress : the best blog engine :)

Atau engine CMS seperti :

  • Drupal.
  • DNN.
  • SilverStrive CMS.
  • Umbraco.

Tentu saja setelah itu dibutuhkan kesabaran, karena adan ada proses download dan installasi apa yang telah kita pilih tersebut. Dan tentu saja perlu hal-hal lain yg bersesuai dengan barang-barang yang telah dipilih. Sebagai contoh, ketika memilih WordPress maka diperlukan database MySQL untuk media penyimpanan.

Selamat Nge-WEB!!!

 

Share this post: | | | |
Blend 3.0 & SuperPreview

Dua tool ini merupakan 2 tool ada lucu, lucu karena ukurannya yang besar.

Weew…aplikasi yang besar, artinya akan penuh feature-feature baru dibanding versi (Blend) sebelumnya yang tidak sampai 50MB. Tapi setelah proses instalasi dan sampai dibagian ini :

02

Maka dapat dilihat ‘Space Required’ hanya 75MB. Sisanya ? Ternyata didalam pake installer tersebut ditemui file sebesar 237MB, yaitu .NET Framework 3.5 SP1. hm hm…sabar sabar sabar. Ah sudah lah…lupakan apa yang sudah terlihat di atas.

Sebagai web designer atau web developer, maka antarmuka yang dibuat harus dapat dilihat dengan baik dan benar pada beberapa browser-browser benar, sebut saja seperti :

  • Firefox.
  • Internet Explorer.
  • Safari.
  • Opera.

Firefox, Safari atau Opera sepertinya tidak terlalu bermasalah. Yang jadi masalah adalah Internet Explorer, karena seperti diketahui ada 3 versi Internet Explorer yang hidup saat ini yaitu :

  • IE 6.
  • IE 7.
  • IE  8.

Yang sering membuat pusing adalah IE6 yang unik dan mempunyai karakteristik yang berbeda dibanding adik-adiknya. IE6 sering bermasalah dengan margin & padding pada CSS. Sampai-sampai seorang teman sering berucap :

“Kapan IE6 punah ?”

Pengguna IE6 sampai saat ini dapat dikatakan banyak, oleh karena itu tidak dapat begitu saja mereka tidak diperdulikan. Yang jadi masalah adalah pada satu komputer tidak dapat diinstall IE dengan beda versi. Oleh karena itu sering kali setelah sebuah halaman web berhasil dibuat dan di cek pada Firefox dan IE7/IE8…mesti berusah lagi untuk mencari teman yang masih menggunakan IE6 atau apabila halaman-halaman web sudah ditempatkan disalah satu hosting maka dapat digunakan bantuan dari http://browsershots.org/ untuk memeriksanya.

Nah, sekarang ada tool baru yang merupakan bagian dari Expression Web, yaitu Super Preview for Internet Explorer. Tool ini memungkinkan untuk memeriksa suatu halaman web dengan beberapa browser, termasuk IE6.

Tidak perlu lagi untuk berlari-lari mencari teman yang menggunakan IE6, cukup install Super Preview dan bersiap untuk melihat keanehan pada mode IE6 :)

Note :

“Kapan IE6 punah?”

Share this post: | | | |
Posted: Mar 30 2009, 08:13 PM by reyza | with 1 comment(s)
Filed under:
Santai, Serius, Bisnis, Makan-makan….

{Sekali-sekali posting ngga penting di blog ini}

Begini jadinya kalau para developer, IT Pro dan trainer hidup di bandung…Kerjanya santai, duduk di tempat makan, ngobrol-ngobrol…kemudian dilanjutkan ngobrol serius.

bdg-01

Ada bos hosting (eRUDeYe), ada bos Efindo, ada bos-bos MCT dan bos-bos lainnya yang lagi santai.

bdg-02

 

Memang bos-bos yang SUPER!!

Share this post: | | | |
Turfmonster, Our longest & biggest Community Server Project Ever

Turfmonster adalah portal olahraga di luar Indonesia (entah di US entah dimana, jarang tanya-tanya kalau dapat kerjaan Community Server) yang awalnya tidak menggunakan Community Server, dan di pertengahan 2008 mereka memutuskan untuk menggunakan Community Server 2008.

Awalnya pekerjaan ini hanya berupa pembuatan Theme dengan tampilan yang agak unik, sehingga mesti melakukan pengubahan kode pada source code Community Server agar mendapatkan hasil yang diinginkan oleh sang empunya Turfmonster, yang hasilnya bisa dilihat di http://www.turfmonster.com/. Seperti biasa, theme hanya dikerjakan dalam waktu singkat (seperti biasa).

tm1

Setelah selesai, project dilanjutkan dengan pembuatan modul tambahan, modul yang mempunyai fungsi mirip ASP.NET Classified. Teknologi yang digunakan pada modul ini adalah :

Nama modul ini disebut Classified, yang terdiri atas bagian yang dapat dilihat oleh user umum.

tm2

Dan bagian yang dapat dilihat oleh administrator.

tm3

tm4

Masa development modul ini diselesaikan sesuai jadwal sekitar 1 bulan.

Sampai akhirnya proses migrasi data dari portal yang lama ke Community Server 2008 yang dilakukan oleh sang empunya portal. Waktu yang diperlukan untuk ini terbilang lama, sampai akhirnya mesti upgrade beberapa theme dan modul yang kami buat sampai mencapai CS 2008.5 SP1 sekarang ini.

Tetapi akhirnya bulan ini Tuftmonster berhasil online juga……lega :)

Share this post: | | | |
Posted: Mar 28 2009, 08:32 PM by reyza | with 1 comment(s)
Filed under:
Silverlight 3.0‘s Application Navigation Framework

Sambil menunggu matahari terbenam bersama sebuah kamera untuk mendapatkan golden sunset biasanya merenung kenapa Silverlight belum memiliki feature-feature seperti ASP.NET. ASP.NET memiliki Master Page sehingga cukup dibuat satu buah halaman dengan antarmuka yang akan digunakan di banyak halaman. Sehingga bila dibuat halaman ASPX baru, cukup pilih Master Page yang telah dibuat sehingga antarmuka halaman baru ini akan mempunyai kemiripan dengan halaman lainnya. Apabila suatu saat ingin antarmuka yang berbeda maka cukup mengubah halaman Master page.

Renungan lainnya adalah, feature navigasi yang dimiliki oleh ASP.NET tetapi belum dimiliki oleh Silverlight. Tidak usah sehebat yang dimiliki oleh ASP.NET dulu, yang sederhana saja, paling tidak dapat nyaman diatur dan digunakan pada Silverlight. Tapi inginnya mempunyai kemampuan “menipu” seperti yang dimiliki oleh ASP.NET MVC dengan Routing-nya. Sehingga dapat dibuat url “semu” yang diakses oleh user.

Wah…karena kebanyakan merenung tidak terasa matahari sudah terbenam, dan kesempatan untuk mengabadikan golden sunset hari ini pun hilang. Tapi kehilangan momen ini terbayar karena mendengar kabar bawah Silverlight 3.0 Beta 1 mempunyai sesuatu seperti yang telah direnungkan tadi, feature tersebut dikenal dengan nama “Application Navigation Framework”.

Apa yang ditawarkan oleh feature “Application Navigation Framework” ini adalah sebagai berikut :

  • Terdapat dua control baru yaitu Frame & Page, sehingga dimungkinkan membagi layer view ke dalam beberapa file XAML dengan lebih mudah dibanding Silverlight 2.0.
  • Memungkinkan melakukan navigasi ke setiap view tersebut seperti yang biasa dilakukan pada halaman web berbasis HTML.
  • Seperti halnya halaman web berbasis HTML yang dapat direkam history-nya oleh browser, sehingga dapat dimanfaatkan fasilitas ‘back/forward’ yang ada pada browser, maka Silverlight 3.0 juga menawarkan feature tersebut.
  • Feature ini juga mempunyai kemampuan untuk membuat routing yang enak DILIHAT, DIBACAserta DIINGAT(Tiga D) tanpa harus membongkar rahasia lokasi sebenarnya dari file XAML yang dipanggil. Sehingga dijamin hal ini sangat sejalan dengan SEO karena lebih manusiawi untuk dibaca.

  Sambil menunggu sunrise atau sunset besok hari, mungkin bisa dicoba membuktikan hal-hal di atas.

{Langkah Pertama}

Membuat project Silverlight Application.

_01

Sudah dapat dipastikan pada Solution Explorer dapat dilihat 2 project seperti berikut :

_02

Selajutnya tambah reference pada project SilverlightNav, yaitu :

_03

{Langkah Kedua}

Pada bagian ini akan digunakan control Frame, oleh karena itu mesti didaftarkan namespace yang dibutuhkan pada file MainPage.xaml yang ada pada project SilverlightNAV.

 
xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"

 

 

 

Sehingga secara lengkap dapat dilihat seperti baris dibawah ini :

<UserControl x:Class="SilverlightNAV.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
 
    </Grid>
</UserControl>

Dengan menambahkan namespace tadi, maka dapat digunakan dua control baru yaitu :

  • Frame.
  • Page.

Seperti halnya Frame yang dimiliki oleh HTML, sifat Frame pada Silverlight mempunyai fungsi yang sama yaitu sebagai wadah yang didalamnya dapat menampilkan view yang berbeda-beda sesuai yang diperintahkan.

Sebelum melanjutkan implementasi Frame, ada baiknya dibuat terlebih dahulu rancangan antarmuka yang akan digunakan.

_04

Untuk membuat antarmuka diatas dapat digunakan baris-baris XAML seperti berikut ini :

<UserControl x:Class="SilverlightNAV.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
    Width="700" Height="500">
    <Canvas x:Name="LayoutRoot" Background="White">
        <Canvas Background="#FF3F3F3F" Width="675" Height="50" Canvas.Left="13" Canvas.Top="13">
            <Canvas Background="#FFCBCCCB" Width="665" Height="40" Canvas.Left="5" Canvas.Top="5">
                <StackPanel Orientation="Horizontal" Width="600" Canvas.Top="5">
                    <HyperlinkButton Content="Home" Padding="10,0,30,0" FontSize="20" FontWeight="bold" Foreground="#FFa50606"/>
                    <HyperlinkButton Content="Guestbook" Padding="10,0,30,0" FontSize="20" FontWeight="bold" Foreground="#FFa50606"/>
                    <HyperlinkButton Content="About" Padding="10,0,30,0" FontSize="20" FontWeight="bold" Foreground="#FFa50606"/>
                </StackPanel>
            </Canvas>
        </Canvas>
        <Canvas Background="#FF3F3F3F" Width="675" Height="410" Canvas.Left="13" Canvas.Top="80">
            <Canvas Background="#FFCBCCCB" Width="665" Height="400" Canvas.Left="5" Canvas.Top="5">
                <!-- Frame here -->
            </Canvas>
        </Canvas>
    </Canvas>
</UserControl>

Link Home, Guestbook dan About seperti terlihat pada baris diatas menggunakan control HyperlinkButton yang nantinya akan berfungsi mengubah content para frame. Berikut ini adalah baris yang digunakan untuk menambahkan control frame :

<navigation:Frame x:Name="MainFrame" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

Maka rumah untuk aplikasi ini sudah dibuat, boleh disebut bahwa Master Page sudah dibuat.

{Langkah Ketiga}

Langkah berikutnya adalah membuat Page, yang akan ditampilkan pada Frame. Maka terlebih dahulu dibuat satu folder “Pages” pada project SilverlightNAV yang berfungsi untuk menyimpan halaman XAML pengisi control Frame.

_05

Di dalam window Add New Item dapat dilihat item-item berikut :

_06

Item-item seperti :

  • Silverlight Page.
  • Silverlight Child Window.

adalah item baru yang dapat ditemui pada Silverlight 3.0.

Pada folder “Pages” akan ditambahkan tiga Silverlight Page dengan nama :

  • HomePage.xaml.
  • GuestbookPage.xaml.
  • AboutPage.xaml.

Berikut adalah contoh salah satu isi dari Page yang telah dibuat (HomePage.xaml) :

   1: <navigation:Page x:Class="SilverlightNAV.Pages.HomePage" 
   2:            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   3:            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   4:            xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation"
   5:            Title="Home - Welcome Silverlight 3.0 Application">
   6:     <Grid x:Name="LayoutRoot" Background="White">
   7:         <TextBlock Text="Ini halaman HomePage.xaml" FontSize="23"/>
   8:     </Grid>
   9: </navigation:Page>

 

 

Bagian yang penting adalah Title yang ada pada baris ke-5. Title tersebut akan menjadi Title yang dapat kita liat pada browser, seperti yang sering diisikan pada tag pada halaman HTML berikut :

<head>
    <title>Title ditulis disini</title>
. . .

{Langkah Keempat}

Pada bagian ini akan dibuat event handler pada HyperlinkButton yang ada pada halaman MainPage.xaml agar melakukan aksi berikut :

  • mengubah content Frame sesuai dengan link yang diklik.

Maka lakukan modifikasi control-control HyperlinkButton pada file MainPage.xaml seperti berikut :

<StackPanel Orientation="Horizontal" Width="600" Canvas.Top="5">
    <HyperlinkButton Click="HyperlinkButton_Click" Tag="/Pages/HomePage.xaml" Content="Home" Padding="10,0,30,0" FontSize="20" FontWeight="bold" Foreground="#FFa50606"/>
    <HyperlinkButton Click="HyperlinkButton_Click" Tag="/Pages/GuestbookPage.xaml" Content="Guestbook" Padding="10,0,30,0" FontSize="20" FontWeight="bold" Foreground="#FFa50606"/>
    <HyperlinkButton Click="HyperlinkButton_Click" Tag="/Pages/AboutPage.xaml" Content="About" Padding="10,0,30,0" FontSize="20" FontWeight="bold" Foreground="#FFa50606"/>
</StackPanel>

Sedangkan pada MainPage.xaml.cs buat method seperti ini :

private void HyperlinkButton_Click(object sender, RoutedEventArgs e)
{
    HyperlinkButton hyperlink = sender as HyperlinkButton;
    string url = hyperlink.Tag.ToString();
 
    this.MainFrame.Navigate(new Uri(url, UriKind.Relative));
}

Build solution, dan aplikasi telah siap digunakan. Hasilnya akan dapat dilihat pada gambar berikut ini :

_07

Ketika hyperlink Home diklik maka Page dari Pages/HomePage.xaml akan di-load pada Frame. Dan perhatikan title yang ditampilkan oleh browser sesuai dengan nilai yang diberikan pada property Title pada halaman HomePage.xaml.

_08

Hal yang serupa dapat dilihat juga saat hyperlink Guestbook diklik.

Note :

Perhatikan pada tombol prev/next pada browser menjadi aktif ketika hyperlink diklik. Ketika tombol previous diklik maka content pada Frame akan dikembalikan ke halaman sebelumnya. Begitu sebaliknya ketika tombol next diklik.

{Langkah Kelima}

Pada kotak url pada web browser akan terlihat seperti ini :

_09

Dapat dilihat bawah url di atas memberikan informasi lokasi dari file Guestbook.xaml.

Maka pada bagian ini, akan dibuat  Routing dengan cara memodifikasi file App.xaml yang ada pada project SilverlightNAV.

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             x:Class="SilverlightNAV.App"
             >
    <Application.Resources>
        
    </Application.Resources>
</Application>

Menjadi seperti ini :

<Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
             x:Class="SilverlightNAV.App"
             xmlns:navcore="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation"
             >
    <Application.Resources>
        <navcore:UriMapper x:Key="uriMapper">
            <navcore:UriMapping Uri="Rumah" MappedUri="/Pages/HomePage.xaml" />
            <navcore:UriMapping Uri="Bukutamu" MappedUri="/Pages/GuestbookPage.xaml" />
            <navcore:UriMapping Uri="Tentangku" MappedUri="/Pages/AboutPage.xaml" />
        </navcore:UriMapper>
    </Application.Resources>
</Application>

Selanjutnya adalah melakuan modifikasi pada file MainPage.xaml dengan mengubah nilai-nilai tag pada masing-masing hyperlink menjadi seperti berikut :

<HyperlinkButton Click="HyperlinkButton_Click" Tag="Rumah" Content="Home" Padding="10,0,30,0" FontSize="20" FontWeight="bold" Foreground="#FFa50606"/>
<HyperlinkButton Click="HyperlinkButton_Click" Tag="Bukutamu" Content="Guestbook" Padding="10,0,30,0" FontSize="20" FontWeight="bold" Foreground="#FFa50606"/>
<HyperlinkButton Click="HyperlinkButton_Click" Tag="Tentangku" Content="About" Padding="10,0,30,0" FontSize="20" FontWeight="bold" Foreground="#FFa50606"/>

Lakukan proses build, dan lihat hasilnya :

_10

Sekarang dapat dilihat proses Routing telah berhasil dilakukan.

File dari solution ini dapat di-download pada url di bawah ini :

Sebelum tulisan ini di akhiri, tidak ada salahnya berkenalan dengan project Silverlight Navigation Application :

_11

Project ini adalah cara mudah & singkat untuk melewati {Langkah Pertama} sampai {Langkah Kelima} yang telah diterangkan di atas. Dan hasilnya, secara otomatis {Langkah Pertama} sampai {Langkah Keempat} telah disediakan, bahkan dengan antarmuka yang lebih baik.

_12

Hmm…Microsoft selalu membuat hidup lebih santai {baca:malas} :)

Selamat mencoba.

Share this post: | | | |
Posted: Mar 24 2009, 08:42 AM by reyza | with 6 comment(s)
Filed under:
No more MS Power Point, Just Silverlight Slidentity

Masih suka menggunakan Power Point untuk presentasi ? Lupakan Power Point, cukup gunakan Slidentity. File dengan besar cuma 6,5MB ini dijamin akan memberikan cita rasa tersendiri dalam memberikan materi presentasi anda yang SUPER!!.

Tapi pastikan dulu pada komputer anda sudah terinstal runtime Silverlight 3.0, dan untuk mencoba secara online dapat langsung berkunjung ke sini. Setelah halaman tersebut terbuka maka dapat dilihat antarmuka seperti berikut :

01

Setelah halaman terbuka, jangan lupa klik kanan untuk menampilkan menu ini :

02 04

Kemudian pilih Install Slidentity onto this computer, agar kita segera menikmati SOOB (Silverlight Out Of Browser).

Slidentity mempunya menu yang sederhana seperti berikut :

03

Pada slide dapat dipilih background dan menambahkan text. Setelah materi presentasi sudah selesai dibuat, dapat disimpan ke media penyimpnan lokal dalam format XAML. Jadi nanti sesampainya di tempat presentasi tinggal buka kembali file XAML tersebut dan materi presentasi siap diberikan.

Biar orang-orang didepan terkesan, jangan lupa gunakan cara menampilkan permindaan presentasi gaya 3 Dimensi yang sering kita saksikan pada salah satu jenis X-Window milik Linux (uuups).

05

No browser…No Power Point, Just Silverlight 3.0 Beta 1 and Slidentity :)

Share this post: | | | |
Posted: Mar 23 2009, 01:15 PM by reyza | with 4 comment(s)
Filed under:
{IE8 and Silverlight 3 Beta 1 but Blend 3} & {OOB}

IE8, Silverlight 3 (Silverlight.3.0_Developer.exe, silverlight_sdk.exe, Silverlight3_Tools.exe) dan Blend 3 Trial akhirnya berhasil juga diunduh. Maka satu per satu file tersebut segera di-install.

{Instalasi}

IE8 berhasil diinstal dengan sukses. Belum melihat masalah.

Untuk memanfaatkan Silverlight 3 sebagai ‘viewer’ dan developer maka ketiga file yang telah disebutkan di atas mesti diunduh. Silverlight3_Tools.exe berfungsi sebagai add-in untuk VS 2008, untuk menginstal Silverlight3_Tools.exe, caranya tidak jauh berbeda dengan posting ini. Setelah Silverlight3_Tools.exe dijalankan maka pada direktori %TEMP% dapat dilihat direktori ‘Silverlight 3.0 Tools Beta 1’.

01

Sebelum tombol Next ditekan, copy file silverlight_sdk.exe dan Silverlight.3.0_Developer pada direktori tersebut, setelah itu tekan tombol Next. Tunggu beberapa menit sampai proses instalasi berhasil.

02

Seperti terlihat pada gambar, dapat dilihat 3 Project Silverlight 3.0 dapat dibuat pada VS2008. Dibandingkan pada Silverlight 2.0, pada Silverlight 3.0 terdapat 1 tambahan project yaitu Silverlight Navigation Application.

Yang perlu diperhatikan, Silverlight 3.0 tidak dapat berdampingan dengan Silverlight 2.0 baik sebagai runtime ataupun sebagai developer tool pada VS2008. Semoga nanti saat Silverlight 3.0 mencapai versi RTW terdapat fasilitas multi-target project Silverlight yang akan digunakan. Karena keegoisan ini, maka sebaiknya segala sesuatu yang beraroma Silverlight 2.0 dihilangkan terlebih dahulu sebelum  Silverliht 3.0 diinstall.

Blend 3, adalah tool designer untuk Silverlight 3.0. File sebesar 290-an MB ini ‘berhasil’ diunduh dalam waktu 2 hari lebih. Namun sayang saat installasi proses tidak dapat dilakukan sampai selesai karena file yang corrupt. Artinya mesti mencoba diunduh lagi.

{Test}

IE8, saat dicoba memang dari segi kecepatan masih lebih ok FireFox 3 yang sekarang digunakan sehari-hari. Mungkin karena FF 3 telah lama digunakan sehingga telah banyak yang telah ter-cache, tidak seperti IE8 yang baru saja bersarang di komputer.

Silverlight 3, sebagai runtime berjalan dengan lancar di IE8 dan FF3, animasi Silverlight 2.0 pada Geeks Portal berjalan dengan normal. Begitu pula sebagai add-in pada VS2008, dapat dengan lancar digunakan untuk membuat aplikasi Silverlight 3.0 sederhana.

{Silverlight’s New Features}

Salah satu feature baru Silverlight 3.0 yang menarik adalah OOB (out of browser). Coba kita perhatikan apa yang berbeda ketika suatu content Silverlight diklik kanan?

03

Pada Silverlight 2.0, ketika konten Silverlight diklik kanan yang terlihat hanya ‘Silverlight Configuration’, sedangkan pada Silverlight 3.0 terdapat tambahan menu ‘Install onto this computer…’. Tetapi menu tersebut masih belum aktif. Agar content Silverlight dapat diinstal pada komputer dan dijalankan tanpa browser maka caranya adalah dengan melakukan sedikit modifikasi pada file AppManifest.xml.

04

Dan berikut isi file AppManifest.xml setelah diedit.

   1: <;Deployment.ApplicationIdentity>
   2:     <;ApplicationIdentity 
   3:         ShortName="Hello World" 
   4:         Title="Hello World with OOB">;
   5:         <ApplicationIdentity.Blurb>Hello World with OOB</ApplicationIdentity.Blurb>
   6:     <;/ApplicationIdentity>
   7: </Deployment.ApplicationIdentity>

Build project Silverlight, dan View in Browser file HTML/ASPX yang berisi content Silverlight. Maka ketika pada area content Silverlight di klik kanan dapat dilihat tampilan seperti pada gambar.

05

Klik Install Hello World onto this computer, maka akan ditampilkan dialog box seperti berikut ini.

06

Klik OK dan … sebuah windows baru akan muncul dengan aplikasi Silverlight didalamnya. Untuk meng-‘uninstall’ aplikasi Silverlight tersebut, dapat dilakukan dengan klik kanan pada area konten Silverlight tadi dan pilih ‘Remove …"'.

Adalagi feature baru yang lain? Tentu saja aja…stay tune in this channel :)

Share this post: | | | |
Drawing Simple Chart with MS Chart

MS Chart adalah control yang memungkinkan kita untuk menggambar data yang dimiliki dalam bentuk chart dengan format image. Kabar gembiranya adalah bahwa control ini bersifat free, mempunyai kelengkapan yang tidak kalah dibanding control lain yg berbayar, selain itu sangat mau bekerja sama dengan Visual Studio, sehingga diharapkan gampang digunakan.

Sekarang saya akan coba bermain-main dengan MS Chart untuk menggambar data. Untuk memulai menggunakan MS Chart maka dapat terlebih dahulu mengunjungi posting berikut ini.

Bagi tukang tempel item-item pada Toolbox yang ada di Visual Studio ke halaman ASPX. Maka Server Control seperti DropDownList, RadioButtonList atau ListView sudah tidak asing lagi. Control seperti DropDownList mempunyai 3 cara untuk menampilkan data, yaitu :

  • Ditulis langsung pada control DropDownList yang berada di halaman ASPX.
  • Menambahkan data pada control DropDownList pada CodeFile.
  • Menambahkan data pada DropDowList dari data yang ada pada database.

Begitu juga dengan control MS Chart, mempunyai 3 cara di atas untuk menampilkan data. Kita bisa coba dengan cara yang paling mudah untuk menampilkan data sekaligus mengenal lebih jauh control ini. Cara yang akan digunakan untuk menampilkan data adalah cara pertama.

{Chart Sederhana}

Ketika file-file yang ada di posting ini sudah diinstall maka kita dapat bertemu control berikut ini pada Toolbox di dalam group Data.

Capture

Kita bisa menarik control tersebut dari toolbox ke halaman ASPX dan akan melihat code seperti berikut :

<asp:Chart ID="Chart1" runat="server">
<Series>
<asp:Series Name="Series1">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>

Dilihat dari baris-baris di atas, dapat ditebak bahwa control terdiri atas tiga bagian, yaitu :

  • asp:Chart : berfungsi untuk konfigurasi chart seperti setting data theme (warna background, border etc), setting datasource etc.
  • Series : Data (Series).
  • ChartAreas : Daerah gambar (ChartAreas).

{selain yang telah disebutkan di atas, ada beberapa tag lain yang bisa digunakan di dalam control MS Chart}

Sudah jelas, untuk mengisikan data maka kita dapat masukkan pada bagian Data (Series) seperti contoh baris berikut ini :

<asp:Series Name="Series1">
<Points>
<asp:DataPoint YValues="13" />
<asp:DataPoint YValues="3" />
<asp:DataPoint YValues="13" />
</Points>
</asp:Series>
<asp:Series Name="Series2">
<Points>
<asp:DataPoint YValues="3" />
<asp:DataPoint YValues="1" />
<asp:DataPoint YValues="13" />
</Points>
</asp:Series>

Maka dapat dilihat hasil seperti berikut.

Capture

Sebuah chart yang sederhana, tidak ada title, tidak ada legend dan lain-lain.  MS Chart menawarkan kelengkapan informasi seperti berikut ini :

Capture

Sekarang dicoba untuk melengkapi informasi pada chart sederhana yang telah dibuat di atas. Informasi yang akan ditambahkan adalah Title, Legend, Y Axis Title dan X Axis Title. Sehingga dapat dilihat baris kode seperti berikut :

<asp:Chart ID="Chart1" runat="server">
    <Titles>
        <asp:Title Text="Chart Control for .NET Framework"
                   TextStyle="Default" 
                   Font="Verdana, 17px"
                   BackColor="Aqua" />
    </Titles>
    <Legends>
        <asp:Legend Alignment="Center" Docking="Top" />
    </Legends>
    <BorderSkin SkinStyle="Emboss" />
    <Series>
        <asp:Series Name="Man">
            <Points>
                <asp:DataPoint YValues="13" />
                <asp:DataPoint YValues="3" />
            </Points>
        </asp:Series>
        <asp:Series Name="Woman">
            <Points>
                <asp:DataPoint YValues="3" />
                <asp:DataPoint YValues="1" />
            </Points>
        </asp:Series>
        <asp:Series Name="Lady Boy">
            <Points>
                <asp:DataPoint YValues="5" />
                <asp:DataPoint YValues="9" />
            </Points>
        </asp:Series>
    </Series>
    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
            <AxisX Title="Nilai X"></AxisX>
            <AxisY Title="Nilai Y"></AxisY>
        </asp:ChartArea>
    </ChartAreas>
</asp:Chart>

Hasilnya dapat dilihat seperti gambar di bawah ini :

Capture

Masih belum puas dengan tampilan yg flat, mungkin bisa digunakan chart dengan tampilan 3D, dengan menambahkan property Area3DStyle-Enable3D pada bagian ChartArea seperti pada baris kode di bawah ini :

<ChartAreas>
    <asp:ChartArea Name="ChartArea1" Area3DStyle-Enable3D="true">
        <AxisX Title="Nilai X"></AxisX>
        <AxisY Title="Nilai Y"></AxisY>
    </asp:ChartArea>
</ChartAreas>

{Tipe Chart}

Pada bagian ini kita coba untuk mengutak-atik chart untuk memperlihatkan tipe-tipe chart yang dimiliki oleh MS Chart. Secara default tipe chart yang ditampilkan adalah “Bar and Column”. Untuk mengganti tipe chart yang ingin ditampilkan kita dapat menggunakan property ChartType pada bagian Series. Seperti pada bagian baris kode di bawah ini :

<asp:Series ChartType="StackedBar" Name="Woman">
    <Points>
        <asp:DataPoint YValues="3" />
        <asp:DataPoint YValues="1" />
    </Points>
</asp:Series>

Dan hasilnya akan bisa dilihat seperti berikut ini :

Capture

Tipe chart lain yang dapat digunakan adalah :

01 02 03

Sampai disini dulu perkenalan kita dengan MS Chart, pada posting berikutnya akan ditulis penggunaan MS Chart dengan data yang disuntikkan secara pemrograman dari CodeFile.

Have a nice weekend.

Share this post: | | | |
Silverlight 3 Application can run out of the browser

Baru saya selesai install perangkat untuk development Silverlight 2, sekarang sudah tayang lagi Silverlight 3. Dan tentu saja banyak file-file lain yang mesti diunduh, diantaranya :

Dengen mengetahui besar file-file di atas, artinya mesti siapkan diri bagi yang fakir bandwidth :)

Ada satu lagi file yang masih berhubungan dengan Silverlight 3, yaitu .NET RIA Services (4MB) memang paling kecil tetapi baru dapat digunakan setelah ke-4 file besar di atas selesai diunduh.

Sedikit informasi tentang .NET RIA Services :

The .NET RIA Services is an framework that provides a pattern to write application logic that runs on the mid-tier and controls access to data for queries, changes and custom operations.”.

Beberapa waktu yang lalu sering mendengar pertanyaan berikut : “apakah Silverlight bisa dijalankan tanpa browser seperti yang bisa dilakukan oleh Adobe Flash”. Tentu jawabnya tidak bisa secara normal, kecuali ditrik-trik yang hanya untuk menyembunyikan tampilan browser.

Tetapi di Silverlight 3, pertanyaan tersebut dapat dijawab dengan IYA. Sekarang Silverlight 3 dapat dijalankan diluar browser. Tinggal satu pertanyaan sekarang, “siapa saja saingan Silverlight 3 setelah ini selain Adobe Flash? Apakah WPF dan Silverlight akan bersaing juga karena Silverlight dapat dijalankan diluar browser ?” :)

Saatnya menunggu proses unduh 3 file selesai sebelum melanjutkan ke pembicaraan yang lain.

Share this post: | | | |
Posted: Mar 19 2009, 10:34 AM by reyza | with 3 comment(s)
Filed under:
Nerd’s ASP.NET MVC ebook

Lagi berjalan-jalan mencari buku terbitan Wrox dengan judul Professional ASP.NET MVC 1.0 hasil olahan 4 suhu ini :

Hasilnya tentu saja tidak akan ketemu, karena buku ini masih tahap cetak. Tetapi sambil menunggu buku tersebut terbit, ada ebook yang bisa dibaca-baca untuk mengisi waktu menunggu buku di atas.

Pertama tentu saja ebook ASP.NET MVC berbahasa Indonesia hasil karta Agus Suhanto, mungkin ini adalah ebook ASP.NET MVC pertama yang ada dimuka bumi :)

Selain itu kita juga dapat membaca NerdDinner ASP.NET MVC Tutorial yang dapat di download di http://aspnetmvcbook.s3.amazonaws.com/aspnetmvc-nerdinner_v1.pdf sedangkan source code-nya dapat di download di http://nerddinner.codeplex.com/.

Buku ini akan membawa kita untuk membuatu aplikasi NerdDinner, berikut sekelumit bahasan yang terdapat pada ebook ini :

  • Create a database
  • Build a model with validation and business rules
  • Implement data listing/details UI on a site using Controllers and Views
  • Enable CRUD (Create, Update, Delete) data form entry
  • Use the ViewModel pattern to pass information from a Controller to a View
  • Re-use UI across a site using partials and master pages
  • Implement efficient data paging
  • Secure an application using authentication and authorization
  • Use AJAX to deliver dynamic updates
  • Use AJAX to add interactive map support
  • Perform automated unit testing (including dependency injection and mocking)
Happy ASP.NET MVC-ing :)
Share this post: | | | |
Posted: Mar 18 2009, 06:01 AM by reyza | with 2 comment(s)
Filed under: ,
Silverlight Tool Installation {A note for my humble brain}

{Karena sering lupa, maka mesti dicatat. Karena biasanya catatan di komputer sendiri sering lupa meletakkan, maka langkah amannya adalah mencatat di blog.}

Hari ini HD kembali ke fitrahnya (bersih karena baru format dan install ulang), Sistem operasi sudah diinstall. Ada Leopard, ada Vista dan ada Fedora (uuups). Visual Studio 2008 sudah diinstal, ketika mau dilanjutkan untuk install SQL Server 2008, ternyata mesti install .NET FX 3.5 SP1 (padalah proses ini pernah dilalui tetep lupa), jadi instalasi SQL Server 2008 di-pending dan dilanjutkan untuk update .NET FX 3.5 SP1 dan VS2008 SP1, setelah itu kembali melanjutkan installasi SQL Server 2008. Semua beres, sekarang bersiap untuk installasi Silverlight Tool.

Dari sisa-sisa memory yang tersimpan di dalam otak ini, pada proses installasi Silverlight Tool akan ada proses “aneh” seperti berikut di bawah ini :

Diketahui :

Saat installasi Silverlight Tool untuk VS 2008 (Silverlight_Tools.exe : 75MB) , kita akan bertemu dengan proses download “sesuatu” yang bisa diyakini sebagai runtime Silverlight, walaupun runtime Silverlight sudah diinstal pada komputer kita. Dan waktu download itu lumayan lama bagi yang masih berstatus sebagai fakir bandwidth. Pengalaman buruk ini pernah terjadi saat workshop Silverlight 2.0 untuk developer-developer ISV partner MS. Alhasil mood peserta jadi turun.

Capture

Solusi :

Untuk solusi masalah tersebut maka dapat kita bisa melakukan langkah-langkah berikut :

  • Siapakan Silverlight.2.0_Developer.exe, file ini bisa di download di http://go.microsoft.com/fwlink/?LinkID=119972.
  • Matikan koneksi internet.
  • bersiap-siap ke folder TEMP dari user yg aktif, cukup ketikkan %TEMP% pada Windows Explorer.
  • Kemudian jalankan Silverlight_Tools.exe, dan secara otomatis akan membuat direktori “Silverlight Tools RTW” pada folder %TEMP%. Maka kita akan melihat jendela Silverlight Tools Installation Wizard. Jangan buru-buru untuk mengklik tombol Next.
  • Copy Silverlight.2.0_Developer.exe, setelah itu baru klik tombol Next pada jendela wizard yang kita bicarakan pada item sebelumnya. No more download process.
  • Tunggu beberapa saat untuk proses installasi.
  • Selesai.

Saatnya kembali bekerja.

Share this post: | | | |
Posted: Mar 17 2009, 11:45 PM by reyza | with no comments
Filed under: