Umi Fadilah

Feel the REAL Windows Phone 7 Experience on Your Desktop!

Umi Fadilah — Wed, 12 May 2010 09:46:00 GMT

Okay, it’s been 2 months since Windows Phone 7 first unveiled to public, and it has attracted lots of .NET developers all around the world to taste its fun development.

Saya yakin dari komunitas .NET Indonesia ini juga sudah banyak yang mulai mencoba bermain-main dengan barang baru ini. Hanya tinggal download dev-kit dan segala keperluannya, lalu buka Visual Studio 2010 / VS2010 for Windows Phone / Expression Blend 4 RC, tekan F5, voila.. Anda akan langsung diberi tampilan emulator seperti gambar disamping:

Yup, emulator yang hitam, kelam, dan super plain :D

Saya jadi bertanya-tanya, berapa banyak dari para developer sekalian yang ketika menekan F5, menjumpai tampilan Windows Phone yang hampir ASLI, hampir final seperti demo-demo asli di YouTube dkk? :)

Well I did :) I even had my own contact pinned on it, hehe..

Caranya gampang banget, seperti yang ditulis oleh Gizmodo disini:

Download ROM versi Unlocked terbaru (build 6176) dari sini.
Setelah selesai, ekstrak file tersebut, lalu masuk ke C:\Program Files (x86)\Microsoft SDKs\WindowsPhone\v7.0\Emulation\Images
Ganti file .bin asli dengan file ROM versi unlocked tadi. Jangan lupa membuat backup file .bin asli!

Kembali ke Visual Studio 2010/Blend 4 RC, langsung tekan F5. Manstab! :p

Kalau ditambah dengan hardware yang sudah support multitouch, Anda akan mendapatkan pengalaman ‘lebih’ dari sekedar emulator hitam biasa! Walaupun versi terbaru ini masih banyak bug-bug, Anda masih tetap dapat bermain dengan aplikasi2 yang ada dan berpura2lah itu adalah device sungguhan :)

Screenshot yang cukup menarik perhatian saya:

People, Phone, Messaging, Email

Saya coba set up account untuk email (Windows Live Hotmail, Outlook, Gmail, Yahoo) & Facebook, tapi kok hanya punya Google yang bisa (super aneh, hehe). Walaupun pada akhirnya tetap saja belum bisa check inbox atau kirim email.. Kalo beneran bisa, nanti bisa-bisa nggak laku lagi WP7 pas rilis beneran :p

Aplikasi Office (OneNote, Word, Excel, dan Powerpoint Mobile)

Sayangnya ROM versi ini belum menyertakan Outlook, tapi secara fungsionalitas sudah bisa dicoba membuat dokumen-dokumen diatas emulator Windows Phone 7. Sempat mencoba juga buka situs Sharepoint public tapi entah kenapa kayaknya masih belum berfungsi.

Zune (Music, Video & Radio), Pictures + Camera

Sekian dulu sharing WP7-nya, melengkapi rangkaian postingan aplikasi WP7 yang pernah saya buat sebelumnya yaitu MSDN mini-browser dan 3D Silverlight perspective transform J

Ayo-ayo, yang telah bereskperimen dengan WP7 dev jangan lupa berbagi yaa..

Cheers!

Share this post: | | | |

Silverlight 3D Perspective-Transform on Windows Phone 7

Umi Fadilah — Wed, 12 May 2010 06:57:00 GMT

On yesterday’s Innovation Day 2010, me & my partner (Kresna, CTO Armanovus) was speaking about “Introduction to Developing Apps w/ Silverlight”, covering from the very beginning (history, basic XAML, what’s new in Silverlight 4, etc), to finally focusing on developing Windows Phone 7 application with Silverlight. We showed off some fun demo stuff including Foursquare for WP7, Pillbox, Twitter Search, Accelerometer look-a-like in WP7, some cool panoramic behaviour stuff, and Silverlight Multitouch (yes luckily i'm geared with TouchSmart TM-2 laptop! :)

At first, I was inspired by this post about Windows Phone Animation, it was simply 3 sliders and 1 image to demo 3D perspective transform feature by using “plane projection”. But reading that post kinda makes me think, “Why is this guy using so much code-behind while we can simply do DATA-BINDING directly from XAML?” Hmm… I just thought so because I don’t think I like coding too much :p

So now I’m giving very basic tutorial on how to utilize 3D Silverlight perspective transform on Windows Phone. Make sure you already have Windows Phone Development kit installed on your PC, if not, now you better go download them all at once :)

Let’s get started!

Open Visual Studio 2010 / VS2010 Express for Windows Phone / Expression Blend 4 RC, go create new Project (File > New Project). In this case I am using one of my favorite tool, Blend 4 RC.

Go play around, change the Title & Sub-title text on top, then add 3 sliders + 1 image so it would look like this:

(Make sure to set the Maximum properties of each sliders to 360 and Minimum to 0)

Just to make sure in Objects & Timeline panel you will see control-hierarchy just like this:

Now the super-fun stuff begins. What you need to make those sliders work like a charm is some DATA-BINDING. To what? Well maybe I should explain about Plane Projection a little bit:

Plane Projection

PlaneProjection is a class that represents a perspective transform (a 3-D-like effect) on an object. So not only it can be applied to Images, but to Controls (UIElement) as well. You can create 3D effects on a Grid/Canvas/Stackpanel container, which means that anything contained inside is also being transformed, as long as it’s visible :) For example buttons, textboxes, etc, you can still interact with them (clicking, typing, etc) even while they’re being projected.

PlaneProjection has 12 properties to control the rotation and positioning of an object. But basically it’s divided into 4 :

Rotation (X/Y/Z) : specify the number of degrees to rotate the object in space. Specifically, RotationX specifies rotating around the horizontal axis, RotationY along the vertical axis, and RotationZ is like the diagonal vector, rotating around a line perpendicular to the object.

CenterOfRotation (X/Y/Z) : change where the axis of rotation are positioned, therefore you could change the effect of rotation. Default value is 0.5 (on the scale 0 to 1).

GlobalOffset (X/Y/Z) : This one’s useful when you want to simply move the object along X/Y/Z axis without worrying about the rotation applied to it. In other words, GlobalOffset translates an object along the axis of the screen.

LocalOffset (X/Y/Z) : Unlike GlobalOffset, LocalOffset translates an object along the respective axis after it has been rotated. That is why in this LocalOffset case, the Rotation value determines the DIRECTION of the translated object.

Got a little bit of insight? :)

Now first thing we need to do is adding Projection properties in our image:

<Image Height="380" Width="380" Name="image1" Source="...">
    <Image.Projection>
        <PlaneProjection x:Name="Projection"
                    CenterOfRotationX="0.5"
                    CenterOfRotationY="0.5"
                    CenterOfRotationZ="0.5" />
    </Image.Projection>
</Image>

And this simple magic does the trick!

<Slider Name="slider1" Maximum="360" SmallChange="1"
        Value="{Binding RotationX, Mode=TwoWay, ElementName=Projection}"/>

Do it for other slider (for axis Y and Z), and that’s it, you’re done! NO CODE-BEHIND :)

If you’d like to see the value of rotation you could add 3 textblocks and bind them directly to each of the Slider’s value. For example,

<TextBlock x:Name="textX" Text="{Binding ElementName=slider1, Path=Value}" />

So here’s our final screenshot: (Source code attached, you can download it here.)

Cheers… :)

Share this post: | | | |

Visual Studio 2010 Themepack for Windows 7

Umi Fadilah — Mon, 12 Apr 2010 03:24:20 GMT

Menyambut launching worldwide Visual Studio 2010 yang jatuh pada hari ini, Senin 12 April 2010, ayo mari-mari didownload themepack Visual Studio 2010 buat Windows 7-nya. Berisi 12 wallpaper Visual Studio 2010 yang asli keren! :p

Haha.. *maaf kurang penting postingannya*

Cheers :)

Share this post: | | | |

My 1st App on WP7: Simple MSDN Browser w/ Application Bar

Umi Fadilah — Mon, 29 Mar 2010 11:38:00 GMT

Bosen maen WPF text jadinya beralih ke nyicip Windows Phone 7 dev :) Sepertinya sudah banyak sekali postingan mengenai resource untuk mendapatkan developer tools, SDK, guidelines, code samples, etc. Yang jelas kalau Anda mau memulai, berangkat dari sini saja sudah cukup (memang dianjurkan :p), http://developers.windowsphone.com

Oke, singkat saja, disini saya akan membuat aplikasi windows phone 7 pertama saya, yang diberi nama MSDN Browser :D

Yang dibutuhkan: berhubung saya cuman coba-coba aja, jadi yang dibutuhkan cuman Visual Studio 2010 Express for Windows Phone yang sudah termasuk dalam Windows Phone Developer Tools. Sedangkan kalo Anda mau coba pakai Expression Blend 4 Beta, jangan lupa download juga:

Lama pengerjaan: yang jelas lebih lamaan ngeblognya :p

Siapp. Kita mulai.

Buka VS2010 Express for Windows Phone.
File > New Project. Pilih di tab ‘Silverlight for Windows Phone’ > Windows Phone Application – Visual C#. Ketik nama aplikasi, kilki OK.
Beginilah tampilan emulator Windows Phone 7 di VS2010 Express (setelah saya modif isi TextBlock nya :p)
Sederhananya, saya hanya ingin membuat sebuah mini-browser sederhana yang khusus menampilkan situs MSDN Indonesia. Oleh karena itu sementara yang saya butuhkan hanyalah sebuah TextBox, Button ‘GO’, dan container untuk render isi HTML dari web tersebut. Jadi saya tambahkan (drag & drop), atur2 dikit di kanvas, dan hasilnya seperti berikut:

<Grid x:Name="ContentGrid" Grid.Row="1">
    
    <TextBox HorizontalAlignment="Stretch" VerticalAlignment="Top"
             Margin="-10,4,81,0" Name="textBox1" FontSize="22" Height="Auto" 
             Text="http://microsoft.com/indonesia/msdn" />
    <Button Content="Go" Height="70" HorizontalAlignment="Right"
            Margin="0,4,-3,0" Name="button1" VerticalAlignment="Top" 
            Width="91" Click="button1_Click" />
    <browser:WebBrowser HorizontalAlignment="Stretch" 
                        Margin="0,70,0,0" Name="webBrowser1" 
                        VerticalAlignment="Stretch" />
</Grid>

Jangan lupa kasih kode dikit supaya ketika tombol ‘Go’ diklik bisa langsung me-navigasikan ke situs MSDN :)

Tekan F5, jalankan! Voila..

Kalo Anda menekan tombol yg tengah (logo Windows), akan menampilkan Logo IE seperti diatas. Sepertinya emulator ini mengenali tipe aplikasi yang kita buat, berhubung saya membuatnya MSDN Browser, jadi dia termasuk ke dalam grup seperti diatas. (Keterangan: nama aplikasi saya WindowsPhoneApplication1, seperti yg tampak di bawah menu Setting).

Menambahkan Application Bar Button & Menu Item

Plain amat yah klo diliat2? hehe.. Akhirnya dengan memanfaatkan icon pack gratis untuk development WP7 disini, saya berencana membuat Application Bar. Apa itu application bar? Kalau Anda sudah melihat demo/preview awal WP7 pastinya ingat dengan interface semacam toolbar dibagian bawah layar.. Nah itu yang dinamakan App-Bar. Isinya bisa icon-icon seperti dibawah ini:

Kalo gambar yang titik tiga di sebelah kanan itu diklik, maka sifatnya seperti auto-expander ke bawah (seperti accordion), dia akan menampilkan menu item seperti berikut:

Nah, untuk membuat App-Bar itu ternyata suppeeeerrr gampang :D Namun Anda harus menambahkan reference dahulu terhadap kelas library “Microsoft.Phone.Shell”. Jadi sebelum menambahkan App-Bar, pilih Project > Add Reference, lalu pilih library tersebut.

Setelah itu, jangan lupa menambahkan folder Images yang berisi icon-pack gratis WP7 ke dalam solusi Anda. Yang penting diingat, untuk setiap gambar yang Anda masukkan, di panel Properties jangan lupa mengubah Build Action menjadi ‘Content’ dan Copy To Output Directory menjadi “Copy Always”. Hal ini memastikan agar gambar tidak missing saat deployment.

Ada 2 pilihan untuk membuatnya, langsung di halaman XAMLnya, atau via code-behind. Berhubung saya gak hobi-hobi amat liat kode, jadi kita tambahin aja langsung di XAML :D

Pastikan di bagian paling atas, namespace berikut telah ada. Jika belum, tambahkan:

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"

Lalu didalam tag <phoneNavigation:PhoneApplicationPage> tambahkan kode berikut:

<phoneNavigation:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar Visible="True" IsMenuEnabled="True">
        <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton Click="ApplicationBarIconButton_Click"  
                                            IconUri="Images/appbar.refresh.rest.png">
            </shell:ApplicationBarIconButton>
            <shell:ApplicationBarIconButton Click="ApplicationBarIconButton_Click_1"  
                                            IconUri="Images/appbar.back.rest.png">
            </shell:ApplicationBarIconButton>
        </shell:ApplicationBar.Buttons>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Click="ApplicationBarMenuItem_Click"  
                                          Text="Main Pendekar IT"></shell:ApplicationBarMenuItem>
            <shell:ApplicationBarMenuItem Click="ApplicationBarMenuItem_Click_1"  
                                          Text="Kunjungi TechNet!"></shell:ApplicationBarMenuItem>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phoneNavigation:PhoneApplicationPage.ApplicationBar>

Jangan kelupaan untuk menambahkan di code-behing untuk fungsi ketika icon2 tersebut diklik. Saya disini ceritanya bikin icon refresh & back. Lalu kedua menu item saya modifikasi menjadi pilihan untuk bermain Pendekar-IT & link menuju situs TechNet :)

Tekan F5, jalankan!

Voila…

Yang cukup menyenangkan karna laptop saya sudah mendukung Multi-Touch, jadi di emulatornya pun kita bisa melakukan zoom in zoom out melalui gesture ‘pinching’ :) Serasa punya Windows Phone 7 beneran :)

Kalo saya klik menu item ‘Kunjungi TechNet’, akan langsung membuka situs tersebut. Dan begitu juga dengan Pendekar-IT. Sayangnya, dibangun sama-sama diatas SIlverlight, tapi kok ngga bisa dimainkan? :p hehehehe.. Tanya kenapa…

Ok that’s all.. cheers.. !!

Selamat mencoba :)

Source code attached below…

WindowsPhoneApplication1-MSDN Browser.zip

Share this post: | | | |

Text Enhancement in WPF 4.0 – Bindable Run

Umi Fadilah — Fri, 26 Mar 2010 06:21:07 GMT

Melengkapi rangkaian postingan mengenai fitur Teks di WPF 4.0, kali ini saya ingin memberikan gambaran mengenai fitur “Bindable Run”. Bagi Anda yang terbiasa memegang WPF sebelumnya, properti Run.Text merupakan bagian dari CLR biasa. Efeknya, bakalan susah untuk melakukan data-binding terhadap Run.Text tersebut. Kekurangan ini biasanya bisa ditutupi dengan mengganti Run menjadi pemanggilan TextBlock secara manual (agar bisa di-bind). Maksud saya seperti ini:

<Run Text="Kalo pake Run biasa, gak bisa di-bind kayak TextBlock dibawah ini"/>
<TextBlock Text="{Binding Source= {StaticResource namaResource}, Path=Text}"/>

Sudah terbayang? :) Nah tapi seringkali dengan menggunakan kombinasi penggunaan Run & binding TextBlock seperti diatas, hasilnya bisa kacau, flow teks nya jadi berantakan. Tidak percaya? Baca postingan ini sampai bawah, saya akan tunjukkan screenshotnya :)

Kekurangan seperti inilah yang memicu banyak solusi dari programmer-programmer kreatif yang mencoba “mengakali” agar Run.Text dapat menjadi depedency property. Contohnya disini dan disini. Namun sekarang itu ngga perlu lagi, karena di WPF 4.0 Run.Text tidak lagi merupakan properti CLR biasa, namun kini telah berubah menjadi suatu dependency property. Hal ini berarti kita telah mendapatkan sebuah bindable run! Sintaksnya kira-kira seperti ini, singkat sekali:

<Run Text="{Binding Source={StaticResource namaResource}, Path=Text}"/>

Sekarang perhatikan perbedaannya di FlowDocument sederhana yang saya buat berikut:

Lihat bagaimana flow dari teks paragraf pertama tampak berantakan, karena terkadang programmer turut memasukkan white-empty space misalnya menekan tombol Enter/spacing berlebihan saat menjalankan Run.Text. Berikut kode aslinya sebagai perbandingan:

<Window.Resources>
    <TextBox x:Key="Kalimat1" Text="bagaimana flow dokumen jadi H A N C U R ketika kita"/>
    <TextBox x:Key="Kalimat2" Text="Ini paragraf contoh bagaimana flow dokumen menampilkan 
data yang seharusnya. Run Text dapat di-bind langsung!"/>
</Window.Resources>

<FlowDocument>
    <Paragraph>
        <Run Text="Ini paragraf contoh"/>
        <TextBlock Text="{Binding Source= {StaticResource Kalimat1}, Path=Text}"/>
        <Run Text="menggunakan kombinasi dari 
                        Run Text dan TextBlock 
             secara manual"/>
    </Paragraph>
    <Paragraph>
        <Run Text="{Binding Source={StaticResource Kalimat2}, Path=Text}"/>
    </Paragraph>
</FlowDocument>

Dengan adanya bindable run, kode pemanggilan pun jadi cukup sebaris aja :) Sederhana bukan?

One-way Binding? Two-way Binding?

Untuk masalah penggunaan bindable run ini, one-way data binding (searah) telah sepenuhnya didukung. Contohnya persis seperti diatas, Run dapat di-bind ke suatu datasource dan ketika dijalankan, Run Text tersebut akan menghasilkan teks yang sama dengan kemunculan di data source.

Sedangkan untuk data-binding dua arah (two way data binding), tidak sepenuhnya didukung (hanya parsial saja). Misalnya, jika Run tersebut akan terupdate melalui panggilan properti sistem di WPF, maka datasource tempat Run di-bind pun akan ikut berubah. Sedangkan kalo misalnya Run terupdate melalui kontrol semacam RichTextBox misalnya, maka binding-nya akan lepas. Rada susah ngejelasinnya pake kata-kata, hehe..

Yasudah sekian saja postingan kali ini, semoga berguna..

Cheers….

PS: Postingan ini merupakan bagian dari rangkaian tulisan mengenai fitur teks terbaru lainnya di WPF 4.0. Yang sebelumnya telah saya bahas, antara lain:

A. Text Clarity: Text Formatting & Text Rendering

B. Caret & Selection Brush.

Share this post: | | | |

Text Enhancement in WPF 4.0 – Caret & Selection Brush

Umi Fadilah — Fri, 26 Mar 2010 06:15:37 GMT

Menyambung postingan sebelumnya mengenai improvement pada WPF 4.0 dari sisi teks, kali ini saya akan membahas mengenai Caret & Selection Brush. Meskipun super sederhana, semoga nanti ke depannya rangkaian postingan mengenai Text pada WPF 4.0 ini berguna :)

A. Text Clarity

B. Caret & Selection Brush

Langsung saja, ada yang belum tahu Caret itu apa? Jangan mikir jauh-jauh.. hehe Caret itu sama saja dengan kursor kedip-kedip yang biasa kita jumpai di kontrol seperti TextBox, dan semacamnya. Hehe, iya mulai WPF 4.0 ini kita bisa lebih berekspresi dalam membuat skin kontrol agar lebih selaras dengan keperluan aplikasi :)

Kodenya sangat amat sederhana. WPF 4.0 mendukung penggunaan CaretBrush sebagai properti pada jenis kontrol TextBox, PasswordBox, dan RichTextBox. Jadi misalkan saya punya sebuah textbox plain, maka saya modifikasi sebagi berikut:

<TextBox Background="Orange" FontSize="16" FontWeight="Bold"
         Text="Apa itu Caret dan Selection Brush?"
         CaretBrush="White"
         SelectionBrush="Magenta"
         SelectionOpacity="0.3"/>

Hasilnya menjadi seperti berikut: (perhatikan kursor teks warna putih *harusnya kedip-kedip :p*)

Dan pada kode diatas, saya memasukkan properti baru yang disebut “SelectionBrush” dan “SelectionOpacity”. Seperti yang Anda duga, warna magenta dengan opacity 0.3 (atau skala 30% dari 100) akan muncul ketika saya melakukan seleksi / highlight teks menggunakan mouse maupun keyboard, kira-kira seperti ini:

Yang seru, SelectionBrush nggak hanya bisa berupa warna solid saja tetapi gradasi pun bisa! Dengan komposisi warna gradien yang tepat pasti akan bisa menimbulkan efek sleek & smooth yang cukup untuk membuat client kita kagum, tidak seperti pilihan warna gradien berikut :D

Kodenya juga nggak ribet2 amat. Yang telah familiar dengan bahasa XAML pasti langsung mengerti:

<TextBox FontSize="16pt" Background="Orange" FontWeight="Bold"
         Text="Bisa Gradasi Juga Ternyata :D"
         SelectionOpacity="0.8">
    <TextBox.SelectionBrush>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="Transparent" Offset="-.2" />
            <GradientStop Color="Magenta" Offset="0.25" />
            <GradientStop Color="Yellow" Offset="0.75" />
            <GradientStop Color="Transparent" Offset="1.2" />
        </LinearGradientBrush>
    </TextBox.SelectionBrush>
</TextBox>

Sederhana sekali bukan? :D

SelectionBrush bisa diaplikasikan pada semua kontrol yang mendukung seleksi, misalnya TextBox, RichTextBox, PasswordBox, FlowDocumentPageViewer, FlowDocumentScrollViewer dan juga FlowDocumentReader. Jadi kita bisa banyak bereksperimen, berguna misalnya untuk membuat efek stabilo pada teks di FlowDocument.. hehehehe..

Nampaknya postingan kali ini tergolong cukup singkat, hehe.. Nantikan rangkaian postingan selanjutnya mengenai fitur teks di WPF 4.0!

Cheers…

Share this post: | | | |

Text Enhancement in WPF 4.0 – Text Clarity

Umi Fadilah — Thu, 25 Mar 2010 15:19:00 GMT

WPF 4.0 di VS2010 menawarkan banyak perbaikan disana-sini, baik dari sisi GRAFIK maupun TEKS. Hah? Teks? Teks bukannya gitu-gitu aja yah perasaan? Kalo ngga baca2 secara indepth sepertinya saya sendiri juga kurang begitu sadar kalo ternyata banyak lho improvements yang terjadi di WPF 4 ini :) Fitur-fitur terbaru yang udah saya cobain diantaranya Text Clarity (Text Formatting & Text Rendering), Bindable Run, Caret & Selection Brush, Layout Rounding, dan Custom Dictionaries. Karena banyak jadi sepertinya akan saya bagi ke dalam beberapa postingan yah. Biar gak males bacanya :)

A. Text Clarity

Sebagai seorang pecinta UI (user interface, bukan universitas indonesia, haha..), saya memang cukup memperhatikan segala detail mulai dari layout sampai ke kualitas grafik/tulisan yang pixel-perfect. Nah yang cukup jadi “selebritis” di WPF 4 mendatang adalah masalah Text-Rendering Clarity, alias seberapa jelas tulisan yang bisa terlihat oleh mata kita. Dan di WPF 4, kita diberi beragam pilihan dalam hal rendering & formatting, melalui 2 buah properti baru berikut:

Text Formatting Mode, ada 2 value properti yang bisa dipilih yaitu:
- Ideal – ini tampilan default a.k.a WPF yang jadul. Disini glyph dari tulisan sebisa mungkin akan dijaga kemiripannya dibandingkan file font aslinya, sehingga kalo diutak-atik positioning/bitmap dari tulisan tersebut pasti hasilnya jadi kurang bagus.
- Display – nah yang baru ini sudah menggunakan metriks kompatibel Win32-GDI (Graphics Device Interface). Bagi yg belum pernah dengar, GDI ini adalah semacam API dari windows yg bertanggung jawab terhadap hasil output pixel per pixel ke monitor / printer kita. Jadi dengan memilih opsi yang ini, hasilnya teks bakal lebih tajam & pixel perfect! :)
```
<StackPanel>
    <TextBlock>
        Text Lebih Jelas di WPF
    </TextBlock>
    <TextBlock TextOptions.TextFormattingMode="Display">
        Text Lebih Jelas di WPF
    </TextBlock>
</StackPanel>
```
```
  
```
See the difference? :) Tapi jangan salah, TextFormatting mode Ideal pada beberapa skenario justru terlihat lebih bagus dibandingkan yang udah support GDI! Pada kesempatan lain akan saya coba jelaskan.
Text Rendering Mode, ada 4 pilihan value properti:
- Auto : defaultnya, sistem akan me-render teks dalam ClearType, kecuali dalam sistem tersebut jenis rendering ClearType nya di-set disabled.
- ClearType : dalam proses rendering text, digunakan anti-aliasing jenis ClearType
- GrayScale : dalam proses rendering text, digunakan anti-aliasing jenis Grayscale
- Aliased : rendering teks tidak akan menggunakan anti-aliasing jenis apapun.

<StackPanel TextOptions.TextFormattingMode="Display">
    <TextBlock>
        Contoh Rendering Teks ... ClearType </TextBlock>

    <TextBlock TextOptions.TextRenderingMode="Grayscale">
        Contoh Rendering Teks ... Grayscale </TextBlock>

    <TextBlock TextOptions.TextRenderingMode="Aliased">
        Contoh Rendering Teks ... Aliased </TextBlock>
</StackPanel>

Mungkin rada bingung yah, apaan sih ALIAS? ANTI-ALIAS? Saya coba berbagi sedikit ilmu desain tipografi yaa.. :)

Anti-aliasing adalah terobosan baru seiring dengan berkembangnya resolusi monitor layar menjadi semakin tinggi. Pada prinsipnya Anti-aliasing itu tuh cuman nambahin semi-transparan pixel sepanjang ujung-ujung/edge dari suatu huruf, untuk memberi kesan ‘smooth’ pada tampilan keseluruhan huruf. Jadi sangat berkebalikan dari Alias, dimana tiap huruf digambarkan pixel-per-pixel, jadi sampe terkenal istilah efek “anak-tangga” :D

Lebih jelasnya mungkin bisa dipelajari dari situs referensi utama favorit saya. Yang jelas, untuk pilihan mode Rendering, paling bagus ya memang “ClearType”, walaupun jenis ClearType ini justru terkadang terasa kurang eye-friendly bagi pemilik monitor yang masih CRT :p Makanya ganti jadi LCD aja..

Hmm.. sepertinya sekian dulu postingan kali ini. Nantikan seri berikutnya yang menarik mengenai Text improvements di WPF 4!

Cheers…

Share this post: | | | |

Netbook HP 1169 Mini-note GRATIS cuman dengan Trivia Kuis

Umi Fadilah — Thu, 25 Mar 2010 06:51:00 GMT

Hehehe.. it rhymes :)

Menyambut sentuhan baru pada kedua portal IT terbesar di Indonesia yaitu MSDN (portal bagi Developer) & TechNet (portal bagi IT Pro), Microsoft Indonesia mempersembahkan sebuah kuis trivia menarik yang dibangun diatas Silverlight, bekerjasama dengan tim dari Agate Studio, yang dinamakan PENDEKAR-IT.

Kuis trivia ini terbagi atas 2 track / jalur, yang di dalamnya berisi kategori-kategori teknologi terbaru yang tentunya para geeks sekalian ini pastinya sudah sangat familiar. Anda boleh mengikuti lebih dari 1 kategori. Tujuan utamanya, mendapatkan skor sebanyak-banyaknya agar memperbesar kesempatan Anda untuk memenangkan sebuah netbook HP 1169 Mini-bote seharga $375 :) Lumayan kan tinggal klik-klik kuis doang bisa dapet netbook? hehe…

Belum tau netbook HP 1169 yang mana? Ini nih kayak yang dipegang mbak-mbaknya :D

Dan siap-siap, ini dia pembagian kategorinya:

7 kategori di jalur IT Pro:

Office 2010
Sharepoint 2010
Windows 7
Windows Server 2008 R2
SQL Server 2008 R2

Dan 2 kategori di jalur Developer:

Visual Studio 2010
Silverlight 4

Jadi tunggu apalagi, buktikan kemampuan .NET Anda! Ayoooo.. refreshing dulu dari kerjaan, mari main game…. :)

Cheers!

Tim Technet & MSDN Indonesia

Share this post: | | | |

Design vs Development: Meet Microsoft Design Toolbox

Umi Fadilah — Fri, 19 Mar 2010 13:38:00 GMT

Seminggu belakangan ini saya jadi tiap hari mantengin Geeks Blog gara2 postingan beruntun Pak Risman tentang MIX10. I know!! Exciting huh? :) Salah satu yang cukup menarik perhatian saya adalah .toolbox. Kalo dulu jarang-jarang Microsoft memberi perhatian ekstra di bidang design, apalagi sampe bikin kuis berisi kurikulum belajar interaktif seperti ini.

Secara umum materi pembelajaran design dari Microsoft ini ide-idenya datang dari Robby Ingebretsen. Belum tahu dia siapa? Singkatnya, berdasar pidatonya saat MIX09 dia mengaku mantan employee Microsoft yang keluar sesaat setelah WPF di-launch, untuk mendirikan perusahaannya sendiri yang bernama “Pixel Lab”, which mostly do some major design & UX stuff. Dia juga yang membuat Kaxaml, sebuah editor XAML yang kompatibel dengan WPF maupun SIlverlight.

So yes, as he says, developer + designer IS possible:

A Little Brief about Microsoft Design Toolbox

Sekarang kita beranjak mendalami sedikit tentang .toolbox.

Sejauh ini menurut saya .toolbox menjadi cara paling cepat dan menyenangkan untuk belajar DESIGN dan DEVELOPMENT sekaligus. Jadi belajarnya bisa dua arah, yang pertama mengenalkan prinsip-prinsip desain ke developer, dan yang kedua sebaliknya: memberikan pemahaman fundamental (teknis) kepada designer tentang pengembangan aplikasi Silverlight di lingkungan Expression Blend. Hasilnya? Menurut saya, benar-benar efektif! Karena pada akhirnya yang sama-sama ingin dicapai adalah bagaimana supaya kolaborasi designer & developer bisa meningkatkan kadar user experience serta usability suatu produk/aplikasi :)

.toolbox terdiri dari 2 learning path: DESIGN SCENARIOS & DESIGN PRINCIPLES. Seperti yang sudah saya jelaskan sebelumnya, Design Scenario inilah yang berisi pertanyaan-pertanyaan trivia seputar pembuatan aplikasi Silverlight di Expression Studio. Sedangkan Design Principles berisi trivia seputar konsep fundamental design dari yang paling dasar seperti warna, komposisi, textur, sampai ke yang teori-teori design process, usability, interaction design, information architecture, business uX, dst.

Berasa mengulang kuliah IMK (Interaksi Manusia Komputer) kembali :D

Now, What Makes .toolbox Fun & Interesting?

Karena dikemas dalam bentuk game :) Siapa yang nggak suka game? Jauh lebih menarik ketimbang baca eBook atau slide presentasi sekalipun. Dan juga karena gambarnya lucu-lucu, hehe.. Memanfaatkan silverlight, proses kustomisasi avatar tiap pemain bisa jadi sangat menarik dan menyenangkan!

Mengenai sistem penilaian, dalam .toolbox tersedia badge-badge hasil pencapaian tiap kali berhasil melewati 1 dari 5 level yang tersedia di masing-masing path, baik Design Scenarios maupun Design Principles. Urutannya sebagai berikut: rookie > player > starter > captain > star.

Aturannya sangat sederhana:

1 level = 12 pertanyaan. Untuk level 1-4, Anda butuh 108 point dari keseluruhan 180. Sedangkan untuk level terakhir, level 5, kudu minimal meraih 180 point dari keseluruhan 300.

Kemudian kalo misalnya udah selesai 1 level yang sama dari kedua path, barulah path yang diagonal ke-“unlock”. Nah kalo udah komplit semua level (Total: 15!) kita akan dapat anugerah tertinggi yaitu ALL-STAR DESIGN :)

Sampai saat postingan ini diturunkan, dari kemaren baru sempet nyelesaiin path yang Design Scenarios. Entah kenapa nih yang Design Principles rada-rada susah untuk berhasil di first attempt, haha.. Pilihan & istilahnya membingungkan.. Ketahuan yang berangkatnya bukan dari jalur desain resmi :p

Selain kustomisasi avatar & sistem penilaian trivia yang bikin “ketagihan” saat bermain, kita bisa juga share status melalui Twitter maupun Facebook dan mengajak agar orang tertarik berkunjung dan ikutan main. See, this is the strength of social-network, you can even show n tell people that you’re having fun :)

Mari ramaikan peserta dari Indonesianya.

Cheers,

And enjoy the game! :)

Share this post: | | | |

What’s New in TechNet 2.0 Redesign Indonesia?

Umi Fadilah — Sat, 06 Mar 2010 05:39:00 GMT

Ok, saya tahu INDC = for Developer, WSS-ID = for IT Pro. Tapi bukan berarti developer mau ketinggalan berita-berita hangat seputar dunia IT Pro dong? :) Namanya juga saudara, kudu saling memantau perkembangan satu sama lain, hehe. Nah, bagi yang belum tahu, pada tanggal 4 Maret 2010 lalu situs TechNet versi 2.0 (redesigned) telah up & running LIVE secara serentak di berbagai belahan dunia.

A little fun fact here: Peluncuran global situs TechNet 2.0 kali ini meliputi kurang lebih 13.000+ halaman, dilokalisasi ke dalam 27 bahasa untuk 59 negara, termasuk Indonesia :) Dimana setiap negara bebas menentukan konten homepage-nya sesuai dengan aktifitas komunitas & ketersediaan sumber daya serta materi pendukung.

Kenali Lebih Jauh: Portal TechNet Indonesia

Microsoft TechNet adalah portal yang menyediakan sumber informasi terdepan bagi para IT Profesional agar memperoleh kesuksesan serta kepuasan terhadap produk & teknologi Microsoft. Proses redesign total yang kami lakukan pada dasarnya memiliki fokus pendekatan kepada KOMUNITAS. Kami ingin menjadikan Portal TechNet Indonesia sebagai sumber no. 1 bagi komunitas khususnya IT Pro untuk mendapat update berita terbaru, mengakses resource belajar teknikal, ataupun mendownload produk asli dari Microsoft.

Hasilnya? Kami menambahkan banyak sekali perbaikan-perbaikan dari sisi fitur, arsitektur konten, performansi, dan juga desain estetika. Simak fitur-fitur terbaru apa saja yang ada dalam rilis gelombang pertama TechNet ID-ID! :)

1. OVERALL: New Layout & Design. Better Usability.

Pernah membuka situs TechNet sebelumnya? TechNet 1.0 (gambar bawah) memiliki ciri khas nuansa biru tua dan juga pengaturan layout 3 kolom, dengan panel tengah diset dinamis. Ternyata desain ini merupakan modifikasi dari desain situs TechNet 2004 (gambar atas)! Saya juga baru tahu, hehe..

Nah, di TechNet 2.0, Anda dapat merasakan pengalaman yang benar-benar baru dalam menjelajahi situs TechNet! Versi 2.0 ini didesain ulang menggunakan layout & template global yang bernuansa biru muda. Kami ingin menonjolkan sisi usability, readability, dan juga “look-and-feel” yang modern sehingga memudahkan pengunjung dalam mengakses konten sesuai kebutuhannya (lihat juga halaman Pelajari dan Download, banyak informasi berharga untuk Anda disana!)

2. TechNet Homepage

Halaman awal TechNet yang baru terbagi atas beberapa area fokus, dengan pengaturan tata-letak yang disederhanakan. TechNet 2.0 Indonesia Homepage menyediakan sumber berita teknikal Microsoft yang up-to-date, tautan MVP lokal, sumber daya eBook & video serta event-event teknikal yang akan datang. Kami juga memberikan perhatian penuh kepada pertumbuhan komunitas lokal di Indonesia, khususnya yang terkait dengan bidang IT Professional.

3. TechCenter

Pusat Teknologi yang lebih terstruktur dan diperbarui, khususnya sebagai penyedia utama sumber daya teknis bagi produk Windows, Windows Server, Office, dan SharePoint.

Screenshots:

4. TechNet Indonesian Forum

Ya, kini TechNet Indonesia telah memiliki forum lokal sendiri yang dikelola langsung oleh para MVP kita di bidang IT Pro. Berikut adalah susunan kategori yang terdapat dalam forum, beserta MVP yang menjadi moderatornya :

5. TechNet Search

Untuk informasi lebih lengkap & teknis mengenai implementasi fitur pencarian di TechNet maupun MSDN, baca juga blog resminya)

a. Fitur pencarian pada TechNet memungkinkan hasil pencarian mulai dari artikel KB, postingan blog, dokumentasi, dan yang paling baru dari rilis TechNet versi 2.0 ini yaitu kemampuan membaca meta-data Forum! (lihat contoh hasil pencarian disini)

b. Anda juga dapat menambahkan pencarian TechNet ke dalam search provider pada browser Internet Explorer Anda

c. Selain itu juga penambahan fitur “finder” di area Troubleshooting dan pada halaman Download, mempermudah pengaksesan konten yang Anda butuhkan dalam sekejap!

6. TechNet Library

Koneksi internet yang dimiliki membuat Anda ragu-ragu untuk belajar langsung di perpustakaan TechNet? Jangan khawatir, kini Anda mendapat 2 pilihan untuk menampilkan konten, yaitu classic dan script-free. Dengan memilih script-free rasakan kecepatan loading per halamannya!

7. Rilis versi Beta dari TechNet Wiki

Melalui TechNet Wiki (BETA), kami menginginkan terjalinnya kolaborasi yang baik antara Microsoft dengan komunitas teknikal khususnya IT Pro, dalam menciptakan sumber ilmu pengetahuan dan saling berbagi mengenai produk maupun teknologi Microsoft.

Jadi tunggu apalagi, kunjungi sekarang juga di http://microsoft.com/indonesia/technet. Spread the word!

Cheers,

Big love from TechNet/MSDN Indonesia Team :)

Share this post: | | | |

BE READY:Silverlight is the Platform Development for Windows Phone 7 Series!

Umi Fadilah — Wed, 17 Feb 2010 16:26:00 GMT

Para developer Windows Mobile siap-siap beralih ke Silverlight yaa.. hihi. Meskipun baru bulan depan diumumkan di salah satu MIX2010’s session (i swear someday I will attend MIX events!), tapi sejak dikenalkan di Mobile World Congress kemaren, rumornya sudah lumayan kenceng bahwa platform yang bakal digunakan untuk develop apps di Windows Phone 7 Series adalah Silverlight.

ISN’T THAT WONDERFUL :D :D

Ok. Masih rumor. Tapi rumor yang menyenangkan dan feasible menjadi kenyataan.

Hal ini artinya apa? Apakah Windows Mobile Marketplace nantinya bisa mengalahkan iTunes AppStore? Menurut saya, bisa saja :) Jika benar nantinya Windows Phone akan menggunakan Silverlight, bakalan jadi sangat menguntungkan komunitas .NET developer. Kenapa? Ini nilai jual tambahannya:

Silverlight = Spending most of your time in Visual Studio + Expression Suite. Kita .NET developer pastinya udah familiar dong dengan IDE & toolsnya? :p
Silverlight = subset WPF. Jadi, bagi yang biasanya megang client desktop development baik dengan WinForm maupun WPF saya rasa nggak akan canggung-canggung banget kalo ingin mulai terjun mempelajari Silverlight.
Bikin sirik Adobe karena both Apple iPhone (bahkan rumor iPhone 4G pun) & WP7 belum akan support Flash. Hmm.. Mungkin Adobe harus membuat tandingan ponsel sendiri kali yah? :D
Ada lagi? Boleh ditambahin... hehehe.

Tell you what, I am one of those people who believes that Silverlight will become a SUPER Development Platform. Simply because it:

Runs smooth in Browser (from Web),
has a well-enhanced Out-of-Browser experience (from Desktop),
can run in Windows Phone (from Mobile)!

This will become handy since we can develop apps that running on several environment, based on the same platform! Mungkin ini yang dulu dimaksud Steve Ballmer saat dia diwawancara September 2009 lalu mengenai "Three Screens and A Cloud". Bayangkan kolaborasi dan efisiensinya.. Bahkan ngga menutup kemungkinan bakal dijadikan kategori Imagine Cup tahun 2011 misalnya? hehe..

And with that being said, I am so gonna buy this phone. Mengutip kalimat dari bacaan sumber yang langsung membuat saya tersenyum,

“...Silverlight could end up going down in history as the technology that helped save Microsoft's mobile business.”

Baca Sumbernya langsung (also image courtesy of) Channel Web

Share this post: | | | |

Faster Way to Build Custom Theme Wordpress in Expression Web 3

Umi Fadilah — Sun, 14 Feb 2010 08:44:00 GMT

Siapa yang tidak mengenal wordpress? Yang paling saya kagumi dari platform blogging opensource ini adalah dari sisi aspek usability-nya! And i mean it on both front-end (interface) & back-end (code). Dari sisi antarmuka, ada Dashboard yang sangat user-friendly, khususnya bagi yang baru di dunia per-blogging-an. Sedangkan dari sisi kode, seperti CMS lain kebanyakan, Wordpress memisahkan antara style & content sehingga memudahkan kita untuk membuat custom theme sendiri.

Saya pernah beberapa kali (baru 3x deng :p) mencoba membuat theme sendiri, salah satunya adalah situs pribadi http://umifadilah.net (sayangnya rada terbengkalai..). Situs ini sudah dibuat dari jaman kuliah, menggunakan Expression Web 2. Waktu belajar kira-kira 1 minggu lalu waktu implementasi mulai dari brainstorm, mock-up design, sampai menempelkan theme buatan sendiri ke WPtheme via Expression Web kira-kira 2 minggu. Hal ini merupakan salah satu bukti bahwa gak sulit kok mencoba bikin custom theme sendiri... :)

Kenapa Belajar Custom-Theme Wordpress Dianjurkan?

“Learning to make your own custom theme is challenging, especially knowing that there are tons of stuff you can do with Wordpress.”

Bagi saya wordpress bukan sekedar platform blogging, tapi juga tepat untuk pembuatan website jenis portfolio, photo/video-blogging, sampai e-commerce. Karena status open-source nya, maka tersedia ratusan jenis plugin yang menurut saya sangat meningkatkan produktifitas! Dan juga Anda bisa berkreasi dengan segala efek jQuery untuk menciptakan blog yang lain dari biasanya. Sebagai contoh coba tengok photo-blog berikut, dibuat singkat dalam waktu 1 hari atas modifikasi dari theme Urban, yang menggunakan efek scrolling sehingga memberi kesan galeri foto yang seperti timeline plurk :p

Bagaimana Expression Web 3 Membantu Mempercepat Proses Pembuatan Custom-Theme Anda?

Dan untuk mempercepat kinerja Anda dalam pembuatan custom theme wordpress di Expression Web 3, dapat menggunakan WP Template Tools Code Snippets dari MS Expression Community Gallery. Setelah download, ekstrak, maka Anda mendapatkan sebuah file berekstensi .XML bernama WPsnippets.xml. Selanjutnya tinggal copy file tersebut ke direktori berikut:

C:\Users\[windows user name Anda]\AppData\Roaming\Microsoft\Expression\Web 3\Legacy\Expression\Web 3\Snippets

Untuk mengetes apakah code-snippets untuk Wordpress sudah muncul, maka bukalah jendela Expression Web 3 Anda lalu pilih code-view, dan tekan CTRL+Enter. Di bagian paling bawah Anda mestinya sudah bisa melihat daftar code snippets yang penting bagi pembuatan custom theme Wordpress.

Sangat menghemat waktu bukan? Daripada Anda susah2 mengetikkan kode2 PHP seperti <?php echo get_bloginfo('name') ?>. Bahkan ini lebih cepat daripada copy paste dari template default WP sebelum dimodifikasi :)

Bagi yang berharap postingan blog ini akan memberikan step-by-step guide mengenai pembuatan custom theme wordpress, saya mohon maaf jika Anda kecewa :p Silakan baca artikel ini jika Anda memang benar-benar mulai dari nol. Semoga membantu.

Happy blogging everyone!

Cheers...

Share this post: | | | |

Silverlight MultiTouch with Expression's “Behaviour”: 10 minutes Experiment

Umi Fadilah — Fri, 05 Feb 2010 04:06:00 GMT

Dalam channel geeks edisi ke-7 (Januari 2010) ini kebetulan saya menemani bung Roraj membawakan demo Silverlight 4, mengenai fitur Multitouch. Fitur ini sudah dikenalkan sejak pertengahan tahun 2009 lalu (masih Silverlight 3), namun saat itu untuk membuat sebuah aplikasi image browser sederhana saja membutuhkan waktu yang cukup lama untuk mempelajari dan juga kodingnya :p

Thanks to Microsoft Expression Community, percaya atau tidak, sekarang cuman butuh waktu kurang lebih 10 menit untuk membuat aplikasi sederhana Silverlight Multitouch pertama Anda, dengan menggunakan yang disebut dengan “BEHAVIOUR”.

“A Behavior is in essence a reusable piece of interactivity that can be applied directly to user interface elements in Expression Blend. Reusable libraries of Behaviors can be created and shared within a team allowing interactivity to be applied in a coherent and robust way across a project.” – The Silverlight Team Blog

Kira-kira baru sebulan lalu dirilis behaviour khusus yang akan menambahkan manipulasi multi-touch (meliputi Translate, Zoom, dan Rotate) ke dalam aplikasi, sehingga bagi Anda yang kebetulan punya “device raba-raba” mungkin bisa dicoba dan dimaksimalkan penggunaannya :)

Jadi, gimana cara pakenya?

Download Silverlight Multitouch Behaviour dari galeri expression disini.
Yang penting sebenarnya adalah bagaimana caranya agar Behaviour yang telah kita download itu tadi dapat dikenali di Expression Blend 3.0 sebagai bagian dari Assets, sehingga tujuannya adalah seperti ini:
Untuk dapat dikenali maka kita harus meng-copy file .DLL dari behaviour tersebut ke dalam Library pada Expression Blend 3. Setelah diekstrak, masuk ke dalam folder berikut,
- Downloads\SilverlightMultiTouch\MultiTouch.Behaviors.Silverlight\Bin\Debug
Kemudian, copy 5 file berikut ke dalam Library tempat instalasi Blend Anda, sebagai contoh disini punya saya berada di:
- C:\Program Files (x86)\Microsoft Expression\Blend 3\Libraries\Silverlight\v3.0
Selanjutnya, buat project Silverlight app baru dalam Expression Blend 3. File > New Project > Silverlight 3 Application + Website
Pastikan di panel Assets, behaviour kita tersebut telah ada dan dikenali (seperti poin nomor 2). Jika belum ada, coba restart Expression Blend Anda dan coba lagi :)
- Jika behaviour dengan nama MultiTouchManipulationBehaviour belum ada juga, maka lakukan langkah berikut.
- Pilih Project > Add Reference, lalu pada Open Dialog yang terbuka, navigasikan ke tempat file .DLL tadi berada, lalu klik OK.
Untuk mengetes behaviour tersebut, buatlah sebuah Rectangle pada kanvas Anda.
Drag MultiTouchManipulationBehaviour dari panel Assets ke dalam panel Objects and Timeline, lalu tinggal menempelkan pada objek yang ingin diberikan perlakuan multitouch. Dapat dilihat di Panel Properties terdapat 4 buah properti tambahan yaitu:
- TouchRotateEnabled, jika diset True maka objek dapat dirotasikan mengikuti gesture sentuhan tangan.
- TouchTranslateEnabled, jika diset True maka objek dapat dipindah-pindah (ditranslasikan)
- TouchScaleEnabled, jika diset True maka objek dapat diubah-ubah ukurannya dengan gesture pinch/zoom dengan 2 jari
- InertiaEnable, this is everything that provide basic physics to a multitouch application :)
Tekan F5, voila!

Ketika Anda menjalankan aplikasi, coba lakukan drag, pinch, dan rotate. Gerakannya masih terasa kurang smooth? Terjadi keanehan saat melakuka zoom-out? Maka ini tips dari saya mengenai hal-hal yang perlu Anda perhatikan:

Pada defaultnya LayoutRoot adalah berupa Grid. Nah supaya hasil manipulasi multitouchnya lebih smooth, coba bungkus objek yang dikenakan Behaviour dengan Canvas. Tidak perlu mengeset ukuran width x heightnya. Dengan canvas, objek tadi tidak akan “lari-lari” ketika Anda melakukan pinch/zoom :)
Di bagian header User Control, jangan set secara manual width maupun height dari User Control, namun sebagai penggantinya tambahkan beberapa baris kode untuk “design-time sizing” seperti berikut :
```
...
mc:Ignorable="d" 
d:DesignHeight="500" d:DesignWidth="500"
```
Jika diset secara manual, maka pada saat runtime area user control akan terbatasi. Oleh karena itu kode diatas merupakan kode untuk design-time sizing, yaitu 500x500 sebagai ukuran di dalam jendela designer pada Expression Blend/Visual Studio, tapi tidak berpengaruh terhadapa ukuran user control pada saat runtime. Lebih lengkapnya mengenai design-time sizing dapat dibaca disini.

Because it is so simple i don’t think uploading the source-code is necessary :) Beginilah kira-kira kode akhirnya:

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    xmlns:MultiTouch_Behaviors_Silverlight
        ="clr-namespace:MultiTouch.Behaviors.Silverlight;assembly=MultiTouch.Behaviors.Silverlight"
    x:Class="SL_MultiTouch.MainPage"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" 
    d:DesignHeight="1000" d:DesignWidth="1000">

    <Grid x:Name="LayoutRoot">
        <Canvas>
            <Rectangle Fill="Red" Stroke="Black" Height="300" Width="300">
                <i:Interaction.Behaviors>
                    <MultiTouch_Behaviors_Silverlight:MultiTouchManipulationBehavior
                        InertiaEnabled="True" 
                        TouchRotateEnabled="True" 
                        TouchTranslateEnabled="True" 
                        TouchScaleEnabled="True"/>
                </i:Interaction.Behaviors>
            </Rectangle>
        </Canvas>
    </Grid>
</UserControl>

Selamat bereksperimen!

Share this post: | | | |

WPF & Silverlight Designer (CIDER) in VS2010: A Closer Look!

Umi Fadilah — Sun, 24 Jan 2010 14:30:00 GMT

Coba tanya saya, “Apa yang menarik ketika melihat konten VS2010 Training Kit (January release)?” Ya, dengan cepat saya akan menjawab, bagian yang paling menarik bagi saya untuk dipelajari (cuman) : Office UI customization + WPF & Silverlight 4 :p

Alasannya? Gampang, soalnya ada embel-embel keyword tentang UI (user interface) dan juga promosi mengenai fitur-fitur terbaru dari WPF & Silverlight Designer, hehehe.. Sisanya kebanyakan ASP.Net 4, Sharepoint, MEF, F# blablabla.. yang saya yakin menjadi slot untuk bahan nge-blog yg menarik bagi masing2 developer di bidangnya :)

Awalnya saya berasumsi bahwa kebanyakan dari kita sudah master mengenai WPF Designer di Visual Studio. Karena sebenarnya ini merupakan hal yang tidak terlalu teknis dan seringkali kita belajar melalui ‘adaptasi’ langsung di IDE. Sekedar informasi, WPF Designer tidak lain adalah visual design surface di Visual Studio (atau disebut juga dengan code-name “Cider”).

Namun pada Visual Studio 2010, cukup banyaaaak penambahan fitur-fitur barunya, sehingga saya merasa tertantang untuk sharing kepada rekan komunitas sekalian :) Oke langsung saja berikut adalah hal-hal yang baru dan menarik pada Cider di VS2010:

1. Same Support for Both WPF (Enhanced) & Silverlight (NEW!)

Salah satu yang paling noticeable pada Cider di VS2010 adalah mampu mendukung sepenuhnya pengerjaan aplikasi Silverlight. Jadi inget jaman2 dulu ngerjain project research saya tentang HCI Learning Tools dengan menggunakan Silverlight 3. Waktu itu masih pake VS2008 dimana kita kudu install Silverlight Tools & SDK dulu sebelumnya (cukup ribet, setuju nggak?). Seingat saya designer support untuk Silverlight masih terbatas banget.. Sehingga misalnya untuk benerin posisi objek dengan mouse saja kudu ke Blend dulu biar lebih precise.

Now that VS2010’s Cider support Silverlight with the same functionality as WPF, you get an interactive designer which enables drag-and-drop controls and everything else you get in WPF. A very good news, don’t you think? :) Especially when you’re a developer on a small team and you have a very limited access to hire professional designers. Well, technically i’m not saying that you won’t need one. If you do, you can still hire me :p

2. Panel Property-Editing yang Lebih Visual

Kalo misalnya dulu Anda termasuk yang suka nonton video-video tutorial dari Jesse Liberty (salah seorang punggawa MVP Silverlight sejak 1.0 sampai sekarang), untuk membuat gradient brush saja, di visual studio, ya lewat kode laah. Hmm.. kalo bahasa anak sekarang, “cem orang susah aja” :D

Coba lihat panel-panel property editing di VS2010 (Beta 2). Ya, segalanya ditampilkan sevisual mungkin, benar2 dimanjakan deh para developer ini.. hehe. Dibawah ini contoh panel Brush Editor dan contoh untuk Resource Picker (mirip yaa sama Blend :)

3. Databinding secara visual, no XAML direct-coding!

Bagi yang sudah terbiasa melakukan data binding via kode, fitur ini mungkin malah membuat beberapa orang canggung. Tapi saya yakin dalam tempo singkat Anda bisa langsung beradaptasi dan malah “ketagihan” ketika menyadari betapa mudahnya mengedit data-binding tanpa mengetik XAML satupun :)

Disini kita bisa binding ke beragam properti dari suatu element, resources, dan juga data-context. Oiya terkait dengan ini jadi inget juga kalo di VS2010 ini juga terdapat “Data Sources” window. Jadi sebenernya semua pengolahan data bisa dilakukan dengan mudah secara visual. Tutorial lebih lengkapnya akan saya berikan di postingan mendatang. Sekarang spoiler dulu…….. :p

4. Intellisense buat jenis Markup Extension {…}

Another good thing, people! Dulu terus terang aja kalo mau binding data dari kode, kadang2 saya sendiri suka rada-rada ngga PeDe soalnya entah itu gara2 lupa syntax, ato lupa mau bind kemana, resourcenya yang static ato dynamic yah… dan segala macam hambatan lainnya :p Sekarang di VS2010 (Beta 2), udah ada intellisense untuk jenis ekstensi markup dengan simbol ‘{ }’

Yup, aren’t we all glad… :)

5. Never Lose Track of Any Object

Sebenarnya ada banyak cara untuk mengetahui posisi dan letak tiap kontrol. Di Visual Studio 2010, dengan Tag Navigator (gambar atas) dan Document Outline (bawah), Anda tidak akan pernah “kehilangan arah”. Dibantu pula dengan thumbnail preview ketika kita meng-hover suatu objek.

6. Auto-Layout (Auto Size Root)

Fitur terbaru Auto-Layout sangat berguna apabila kita menginginkan user control yang ukurannya dapat menyesuaikan jendela aplikasi secara otomatis. Misalkan apabila windownya nanti di-maximize maka layout user controlnya tidak akan berantakan. Untuk melihat hasil dari Auto-Layout caranya sangat mudah, tinggal mengklik ikon kecil di pojok kanan bawah, yang ketika di-hover memunculkan tulisan, “Fixed Size root, click to switch to Auto Size root”. Seperti berikut:

Hasilnya tidak akan langsung terlihat pada Design-View, namun jika dilihat pada XAML view, maka dari kondisi semula yang seperti ini:

Akan berubah menjadi seperti berikut:

Terlihat jelas perbedaannya yaitu setelah diklik ikon Auto Size root maka ditambahkan instance seperti yang biasa kita lihat di Expression Blend, dengan penambahan properti SizeToContent=”WidthAndHeight”. Now open your solution, run it (F5), then try to maximize and see what happens to any of your user control.

7. Error-handling yang Lebih Baik pada Design-View

Saat terjadi error pada kode kita, umumnya pada VS2008 hanya akan diberitahu bahwa designer tidak bisa di-load dan hanya memberi petunjuk agar kita melakukan reload. Nah pada VS2010 Anda bisa mengisolasi error terhadap user control yang spesifik, dan juga sama seperti Blend, memberikan info keterangan mengenai exception tersebut.

8. Support berbagai Versi & Multiple Platform

Kalo dulu di VS2008, design-time suatu kontrol hanya menaruh target pada platform WPF terbaru (tidak fleksibel jika suatu saat rilis platform WPF baru atau bahkan platform sebelumnya). Begitu pula dengan Silverlight. Namun pada VS2010 kali ini mendukung cross-multiple platform termasuk di dalamnya design-time support untuk WPF 3.5, WPF 4, Silverlight 3, Silverlight 4, dst..

---

Hmm.. rasanya sudah sangat panjang postingannya :p Oke kalo gitu sekian sharing mengenai fitur-fitur menarik WPF Designer yang baru pada VS2010 (beta 2).. Semoga menambah wawasan dan bikin makin semangat coding visual! :D

Cheers…

Share this post: | | | |

SilverX (Flash to Silverlight Converter) now with Blend 3 Add-ins

Umi Fadilah — Wed, 20 Jan 2010 13:04:00 GMT

Mungkin sudah banyak yang pernah mendengar tentang SilverX, yaitu sebuah aplikasi yang memungkinkan kita untuk mengubah file Flash dengan format .SWF menjadi Silverlight (.XAP). Dengan demikian, berarti ada sebuah folder solution baru yang dapat diedit di Visual Studio maupun di Blend. Kalo nggak salah duluuu pernah dishare juga dalam postingan salah satu rekan geeks, tapi sayangnya sangat singkat, hehe.

SilverX pertama rilis udah dari April 2009, dan sekarang makin berkembang dengan versi terbarunya yaitu 1.2.0.994 yang dirilis tanggal 13 Januari 2010 lalu. Dan saya juga baru ngeh kalo yang dulu sekedar standalone app doang, eeh.. sekarang udah ada sebagai add-ins dalam Expression Blend 3. Berikut screenshotnya:

Apabila kita memilih menu untuk “Launch SilverX in Expression Blend”, maka Blend akan terbuka secara otomatis, dan sebelum menampilkan halaman Welcome Screen yang biasanya, akan muncul window “SilverX: Getting Started” seperti berikut:

Dan yak, sesuai gambar petunjuk diatas, setelah membuat sebuah Silverlight Application Project baru, kita tinggal mengimpor file .SWF yang ingin di-convert melalui menu File > Import Adobe Flash File, lalu akan terbuka jendela Open Dialog. Dalam percobaan ini saya mencoba sebuah file .swf dari mini-seri “Happy Tree Friends”, episode berjudul “Stayin Alive” sebesar 0,99 MB (gede amat yah nge-testnya) :p

Setelah mengimpor, maka akan muncul window berisi preview file .SWF yang diimpor dan juga pilihan nama kelas dari User Control, beserta Target NameSpace, nama folder Target, Image, dan Audionya. Terakhir, terdapat checkbox untuk membuat sebuat UserControl baru yang berfungsi sebagai “launcher” UserControl hasil convert-an SWF tadi.

Tekan OK, akan muncul progress bar seperti berikut:

Jika telah selesai, voila.. berarti file .SWF tadi telah sukses di-convert menjadi .XAP.

Cukup menekan F5 untuk melihat hasilnya di browser! :)

Apabila kita kembali ke jendela Expression Blend, coba tengok susunan hierarki solution project tersebut, kira-kira seperti ini:

Jadi, ada 2 project yaitu SilverX_HTF (berisi project Silverlightnya) dan juga SilverX_HTFSite (web yang meng-host silverlight app nya). Kemudian “StayinAlive” merupakan nama folder Target yang telah didefinisikan pada jendela konfigurasi awal, yang di dalamnya terdapat folder Images dan Sounds beserta file StayingAlive.xaml.

Dan tebak berapa ukuran dari file StayingAlive.xaml yang merupakan hasil convert tadi? 18.6 MB cing!! Besar banget yah… This is so not editable because it would take forever just for viewing it. Hal ini bisa dimaklumi karena file .XAML tersebut mendefinisikan semua gambar menjadi path dan seluruh animasi menjadi storyboard. Bisa dibayangkan ada berapa ratus (ato bahkan ribuan) animasi untuk mini-film Happy Tree Friends tersebut. (kebetulan contoh yang saya gunakan juga ngga manusiawi, haha..)

Yang perlu ditekankan disini, sekaligus menjadi kelemahan SilverX yaitu aplikasi ini hanya mampu meng-convert file .SWF yang tergolong “cupu” :p Seperti banner, animasi, gambar vektor, tulisan, dsb. Sedangkan untuk file .SWF yang mengandung banyak action script ataupun kontrol Flash, sepertinya belom sanggup. Nah.. jadi jangan yah harap bisa convert macem2 apalagi mini-game Flash (meskipun game tersebut hanya game tembak-tembakan ringan) karena bakal nge-hang… Progress Bar nya bakal berhenti sampe di suatu titik… like forever :p Di bawah ini contoh pas saya nyoba convert mini-game Thing Thing Arena 3:

(un)surprisingly this is what i get when i tried to convert the Flash mini game above:

Yeah it takes a VERY HUGE memory consumption on Blend. Mengerikan bukan? :p Yah, sekedar sharing saja.. I think it’s almost impossible to try to convert cross-platform in advance. Adobe vs .NET technology? Hmm..better go find developers who mastered both :)

Ini link downloadnya bagi yang sekedar ingin mencoba: Download SilverX

Cheers geeks!

Share this post: | | | |