Dasar pemmograman Xaml C

  • View
    8

  • Download
    0

Embed Size (px)

DESCRIPTION

Dasar - dasar Pemograman

Text of Dasar pemmograman Xaml C

  • Pengenalan XAML

    Extensible Application Markup Language (XAML) adalah bahasa deklaratif yang kita gunakan untuk

    membuat user interface di aplikasi metro style. Tentu saja kita dapat menggunakan Microsoft Visual

    Studio dan Expression Blend untuk membuat UI dan menyerahkan XAML dibuat secara otomatis oleh

    alat tersebut. Tetapi saya merasa bahwa sangat penting bagi kita untuk memahami cara kerja XAML. Hal

    ini mempermudah kita jika ingin melakukan edit secara langsung dan akses penuh ke user interface yang

    anda bangun. Kita harus belajar berjalan terlebih dahulu sebelum berlari bukan ?

    Jika anda berasal dari web programming, anda bisa menganggap bahwa XAML setara dengan HTML.

    XAML terdiri dari elemen dan property. Kaidah markup yang diikuti adalah XML.

    XAML digunakan untuk membuat object dan mengatur nilai property dari object, mengatur struktur dari

    object dan hubungannya dengan object lain. Kita juga dapat membuat code yang berpasangan dengan

    XAML yang disebut code behind untuk menangani event atau mengatur property dari code. Sehingga

    ada pemisahaan yang bersih antara logic dan user interface. Hal ini juga mempermudah koordinasi kerja

    antara designer dan developer.

    File XAML adalah XML files yang memiliki ektensi .xaml. Code behindnya memiliki ekstensi .xaml.h (file

    header) dan .xaml.cpp (file implementasi)

  • Contoh XAML

    Pada bagian sebelumnya ketika membuat program pertama, kita telah melihat bagaimana kita

    membuat sebuah button dan menghasilkan XAML kira-kira sebagai berikut.

    Tag button tersebut kita gunakan untuk melakukan instansiasi object dari kelas Button. Width,

    HorizontalAlignment dan VerticalAlignment merupakan attribute yang ada pada object Button.

    Kita bisa membuat user interface dengan mengetikkan langsung pada XAML windows sperti yang

    terlihat pada gambar dibawah ini

    Selain itu kita juga dapat membuat user interface langsung dengan menggunakan Visual studio designer

    dengan cara drag and drop dari Toolbox.

    Setelah anda nanti mengetahui bagaimana XAML dan seluk beluknya maka kita akan menggunakan

    Visual Studio Designer dan Blend untuk membangun User Interface. Dengan demikian kita bisa menjadi

    lebih produktif dan kualitas dari product kita pun menjadi lebih baik.

  • XAML dan Code

    Sebenarnya kita bisa saja membangun user interface dengan menggunakan Code prosedural yang ditulis

    dengan c#. Contohnya adalah sebagai berikut.

    Kita dapat menulis code XAML diatas dengan menggunakan c++ sebagai berikut ini.

    Tetapi XAML lebih mudah untuk dibaca dan lebih singkat penulisannya dibandingkan dengan code c++.

    Meskipun kadang ada kalanya kita perlu membuat elemen dari user interface dengan code jika kita ingin

    membuat UI yang dinamis.

    Property

    Ada dua cara untuk memberikan nilai terhadap property :

    1. sintaks attribute

    2. sintaks property

    Anda telah melihat bagaimana cara menggunakan sintaks attribute sebelumnya dengan cara seperti ini

    attribute="value". Contohnya jika kita ingin membuat object Rectangle dan ingin memberikan warna

    Red maka kita akan membuatnya dengan cara sperti ini.

    Tetapi jika warna yang kita inginkan tidak sesimple itu melainkan memiliki gradasi warna dan kombinasi

    maka kita dapat menggunakan sintaks property.

  • Nama

    Agar dapat menggunakan dan merujuk object Control yang telah kita buat dengan XAML maka kita perlu

    memberikan nama.

    Anda dapat langsung mengetikkan pada XAML editor atau menggunakan bantuan dari property panel.

    Setelah anda memberikan nama maka anda langsung dapat mengakses object control tersebut dari

    code. Berikut object tersebut telah ditampilkan pada intellisense

    Anda juga dapat merubah property lainnya dengan mudah dengan menggunakan property panel.

  • Event Handler

    Setiap control memiliki event yang memungkinkan kita untuk bereaksi terhadap aksi yang dilakukan oleh

    user atau perubahan yang teradi pada aplikasi kita. Contohnya Button memiliki event Click yang akan

    ditrigger ketika user melakukan klik terhadap Button. Kita membuat method yang disebut dengan event

    handler untuk menangani atau bereaksi terhadap event tersebut.

    Kita dapat membuat event handler dengan menggunakan Window Propertie, dari XAML atau langsung

    dari code behind.

    Jika anda menggunakan Property window maka anda tinggal memilih event yang akan ditangani,

    memberikan nama terhadap event handlernya dan double click. Maka event handler tersebut akan

    dibuat oleh Visual Studio.

    Maka anda akan melihat bahwa pada file header dan implementasi akan digenerate event handler

    untuk event tersebut

  • File Header

    File Implementasi

    Kita juga dapat membuat event handler langsung dari XAML view. Kita tinggal mengetikkan nama event

    yang ingin kita tangani dan intellisense akan membantu kita mengenerate event tersebut.

    Cara ketiga adalah dengan meletakkan proses untuk melekatkan handler dengan event langsung pada

    code behind.

    Jangan lupa menyertakan deklarasi pada header file

    XAML dan Visual Tree

  • Jika kita memiliki elemen atau , kita dapat memiliki elemen di dalam elemen tersebut.

    Hal ini menggambarkan hubungan dan komposisi antar object dan menentukan posisi tampilan pada

    layar, juga bagaimana cara menangani suatu event.

    Perhatikan contoh berikut ini.

    Jika kita menggambarkan hubungan antara Grid, StackPanel dan TextBlock, kita akan mendapatkan

    visualisasi sebagai berikut.

    Selain untuk menentukan bagaimana representasi dari content, visual tree juga memiliki efek

    bagaimana event diproses. Banyak event yang berhubungan dengan UI dan input "bubble" sampai ke

    puncak tree. Contohnya kita dapat membuat event handler di StackPanel untuk menangani event press

    atau click untuk TextBlock. Hal ini sangat bermanfaat karena kita tidak perlu mengattach handler satu

    persatu untuk setiap TextBlock. cukup satu saja yang ada di parent nya yaitu StackPanel.

    Contohnya adalah sebagai berikut.

  • berikut adalah event handler nya

    Ketika anda menjalankan program tersebut dan menekan TextBlock maka event tersebut akan

    ditangkap oleh TextBlock tetapi akan diteruskan ke parent nya yaitu StackPanel dimana terdapat event

    handler commonHandler.

    Berikut skenario yang terjadi ketika TextBlock di klik.

    Kita juga dapat menangkap event tersebut pada Grid karena event dari StackPanel akan diteruskan lagi k

    Grid yang merupakan root dari tree tersebut.

    Resources

    Logical Resource membuat kita dapat membuat object XAML yang bukan merupakan bagian dari Visual

    tree tetapi dapat digunakan oleh elemen dari user interface yang lain. Contohnya kita membuat

    resource untuk warna dari sebuah button dengan Brush.

  • Keuntungan penggunaan resource adalah kita dapat menikmati reusability dari object yang kita

    definisikan tersebut, karena kita hanya membuat object tersebut sekali saja dan dapat menggunakannya

    berulang-ulang. KIta juga mendapatkan flexibility, dengan memisahkan object yang digunakan oleh user

    interface dan user interface itu sendiri kita dapat mengubah bagian user interface tersebut tanpa

    mengubah keseluruhan design.

    Berikut cara mendefinisikan resource yang terletak di Page. Jadi resource ini akan dikenali dikeseluruhan

    page tersebut.

    Jika anda ingin resource tersebut local hanya pada sebagian elemen saja, anda dapat

    mendeklarasikannya secara local terhadap elemen tersebut. berikut contoh untuk local ke grid.

    Setiap object yang dideklarasikan sebagai resource harus memiliki property x:Key. Key inilah yang

    digunakan oleh elemen lain untuk mengakses resource tersebut.

    Anda juga dapat mendefinisikan resource pada Application (App.xaml) sehingga dapat diakses oleh

    keseluruhan aplikasi tersebut. Coba anda buka App.xaml anda maka anda akan menemukan deklarasi

    Resource yang sudah digenerate sebelumnya oleh visual studio.

    Anda dapat menambahkan resource global anda pada bagian tersebut.

    Setelah anda melakukan deklarasi maka tentu saja kita ingin menggunakan resource tersebut. Kita dapat

    melakukannya dengan sintaks {StaticResource resourceKey}.

  • Resource Dictionary

    Anda telah melihat bahwa pada App.xaml kita menemukan tag . Resource

    dictionary adalah koleksi dari resource yang berada pada XAML file yang berbeda dan dapat diimport

    oleh aplikasi kita. Hal ini dapat berguna apabila kita ingin menggunakan resource tersebut pada

    beberapa project pada satu solution.

    Coba kita lihat kembali bahwa pada App.xaml kita telah memiliki satu resource file.

    File tersebut terdapat di folder common.

    Anda dapat melihat bahwa dalam file StandardStyles.xaml tersebut kita menemukan banyak Style. Kita

    akan membahas style ini pada bagian berikutnya.

  • Anda dapat membuat ResourceFile dengan cara Add New Item dan memilih resource dictionary

    Anda tinggal menambahkan resource yang anda inginkan ke file tersebut.

  • Agar resource tersebut dapat diakses dari aplikasi kita maka kita harus menggabungkan resource

    tersebut. Caranya adalah dengan menggunakan MergedDictionaries.

    Style

    Pada resource StandardStyles.xaml yang sebelumnya kita lihat, kita menemukan banyak sekali style yang

    telah didefinisikan disana. Salah satu contoh dari style yang dapat kita lihat dari StandardStyles.xaml

    adalah sebagai berikut