|
-
Complex Event Processing Complex Event Processing merupakan sebuah skenario teknologi pengaksesan dan pengolahan data berdasar atas event sebagai pelatuk (trigger)-nya. CEP fokus menangani pemrosesan event yang sedang terjadi dan yang tidak diperlukan. Event – event tersebut dianalogikan sebuah aliran yang selalu mengalir melalui CEP. Konsep penggunaan database pada CEP berbeda dengan konsep penggunaan database pada Database Management System (DBMS). Pada CEP, data diperlakukan sebagai sebuah aliran yang diputar terus menerus. Oleh karena itu, CEP biasanya juga disebut sebagai Data Stream Management System (DSMS). Berikut merupakan ulasan penjelasan konsep penggunaan database pada CEP: 
Pada penggunaannya CEP memisahkan penggunaan database berdasarkan proses yang akan digunakan. Jika proses tersebut berupa business events maka segala proses tersebut diolah menggunakan stream processor dan diperlihatkan pada Real-Time Application. Bila menggunakan Business Transactions maka diproses pada database dan dapat diakses serta diperlihat pada Traditional Business Intelligence Application 
Di dalam implementasinya, skenario CEP ditangani oleh sebuah platform atau aplikasi CEP. Aplikasi CEP berperan sebagai entitas yang memonitor dan melakukan manajemen event: mengenali semua event yang terjadi, mengatur event yang menjadi pelatuk, dan menentukan reaksi apa yang akan terjadi setelahnya. Contoh – contoh aplikasi CEP adalah Microsoft StreamInsight 1.2, StreamBase 7.0, SQLSTream, dll. Berikut merupakan tabel perbandingan antara aplikasi database dengan aplikasi berbasis event: | | Database Applications | Event-driven Applications | | Paradigma Query | Query dan request sebagai pengawal saja | Query yang berkelanjutan | | Latensi | Detik, jam, hari | Milidetik | | Data Rate | Ratusan event / detik | Puluhan ribu event / detik | | Query Semantics | Analisis yang Relational dan Deklaratif | Declarative relational and temporal analytics | Microsoft StreamInsight Microsoft StreamInsight merupakan platform tangguh dalam mengembangkan dan melakukan deployment aplikasi Complex Event Processing (CEP). Arsitektur pengolahan data stream yang baik yang dimiliki oleh Microsoft StreamInsight dengan didukung integrasi dengan teknologi .Net memungkinkan pengembang untuk mengembangkan aplikasi CEP dengan lebih efisien. StreamInsight memungkinkan pengembang aplikasi CEP untuk keuntungan proses bisnis data mentah dengan menurunkan cost dari proses ekstraksi, analisis, dan kolerasi data. Pada Microsoft StreamInsight terdapat tiga fase perputaran aliran data. Fase – fase tersebut adalah sebagai berikut: 
Mangatur proses dan menganalisis event dan respon trigger yang didefinisikan pada Key Performance Indicator (KPI). StreamInsight merespon dengan cepat segala bentuk kesempatan atau ancaman dengan memasukkan definisi KPI ke dalam logika aplikasi CEP. Dengan demikian terjadi peningkatan efisiensi operasional dan peningkatan kecepatan respon. Memonitor data yang berasal dari berbagai sumber dengan membuat pola, tren, pengecualian, dan kemungkinan yang akan terjadi. StreamInsight menganalisis dan mengkolerasikan data secara bertahap selama data masih belum digunakan untuk menghasilkan latensi yang sangat rendah. Selanjutnya, dilakukan agregrasi dari event – event yang tidak saling berhubungan dari berbagai sumber dan melakukan analisis secara kompleks. Menggali event untuk membuat KPI yang baru. StreamInsight Melakukan proses penggalian data secara berkelanjutan guna memperbaiki dan meningkatkan KPI. Terdapat beberapa keutamaan dalam membangun aplikasi CEP dengan menggunakan StreamInsight. Berikut merupakan kelebihan – kelebihan StreamInsight : Performa yang Optimal StreamInsight menerapkan arsitektur streaming yang ringan dan mampu mengeksekusi dengan sangat cepat query yang berkelanjutan secara paralel. Penggunakan cache memori internal dan hasil komputasi yang bertahap berdampak pada performa pengolahan data besar dengan latensi yang rendah. Latensi atau waktu tunda yang rendah disebabkan karena event – event yang diproses tanpa melalui proses penyimpanan dan pemanggilan data pada alamat tertentu. Dengan StreamInsight, seluruh proses dipicu secara otomatis oleh event yang terjadi pada saat itu. Pada suatu kasus, aplikasi tidak perlu mengatur event – event yang digunakan atau tidak. Platform menyediakan penanganan event yang sudah tidak dipakai. Sistem dapat mengakses referensi yang bersifat statis dan riwayat – riawayat data. Menggunakan Teknologi Rancang Bangun .NET Pengembang dapat membuat aplikasi CEP dengan menggunakan kakas dan bahasa yang familiar seperti Ms Visual Studio, C#, atau LINQ (Language Integrated Query) sebagai bahasa untuk melakukan proses query. StreamInsight juga memanfaatkan fitur .NET 4 seperti interface IEnumerable dan Iobservable, sehingga memungkinkan meningkatan kecepatan baik dalam hal pembuatan prototype atau pembangunan aplikasi CEP . Dengan menggunakan LINQ, pengguna yang familiar dengan SQL akan dapat secara mudah menuliskan query secara deklaratif dan dapat mengkolerasikan berbagai macam query menjadi hasil yang tepat guna. Sistem peningkatan performa dan penjadwalan pada server CEP memastikan performa yang optimal dalam setiap query yang dilakukan. Visualisasi dan analisis CEP Query StreamInsight Event Flow Debugger merupakan kakas tangguh untuk memungkinkan melakukan inspeksi terhadap query yang berkelanjutan. Query ditampilkan dengan secara visual sehingga pengembang mudah melakukan analisis terhadap query. Prosedur Penyebaran (Deployment) yang Fleksibel 
StreamInsight mendukung dua skenario penyebaran. StreamInsight dapat diintegrasikan dalam aplikasi dan ditanam dalam bentuk DLL atau dilakukan proses deployment secara terpisah bersama dengan berbagai aplikasi dalam server. Pada skenario kedua, server CEP akan membungkus aplikasi CEP dan dijalankan sebagai Windows Service. Contoh Aplikasi Berbasis Complex Event Processing Complex Event Processing dapat diimplementasikan dalam pembangunan perangkat lunak di bidang finansial, manajemen catudaya, kesehatan, webmonitoring, manajemen telekomunikasi, IT monitoring, ataupun logistik. Misalnya pada bidang finansial. CEP dapat dimanfaatkan dalam pembangunan aplikasi monitoring secara realtime informasi bursa efek yang notabene berubah setiap detiknya. Prosedurnya adalah sebagai berikut: 
Sumber – sumber data mengenai keuangan, baik dari feed online, dokumen offline, atau sumber lainnya, dimasukkan ke dalam sistem. Sistem, yang didalamnya sudah terdapat platform CEP, akan mengelola aliran data. Data akan di-push jika diperlukan untuk disajikan dan data akan di-pull jika diperlukan pengambilan data. Data diputar seperti itu secara berkelanjutan. 
Contoh lain adalah penggunaan CEP pada aplikasi monitoring pengaksesan web. Tiap pengguna yang mengakses web akan didapatkan alamat IP-nya. Dengan demikian akan dapat dispesifikasikan di daeram mana saja yang sedang mengakses alamat web tertentu pada saat itu juga.
|
-
Rabu, 9 November 2011 dilaksanakan MSP Gathering untuk wilayah Jawa Timur. Pada gathering kali ini, acara dilaksanakan di rumah makan Gotha Tunjungan Plasa Surabaya. Selain MSP dari ITS Surabaya dan UM Malang, turut hadir MUGI Surabaya dan Pak Julius Fenata. Tujuan diadakannya acara gathering ini adalah untuk membahas persiapan Dev Camp WP 7 di regional Jawa Timur serta mempererat tali silaturahmi antaranggota MSP. Pelaksanaan
MSP Gathering Jatim diselenggarakannya pasca seminar Road To Imagine Cup 2012 di Teknik Informatika ITS. Malam hari, tepatnya pukul 17.30 WIB. MSP dari ITS : Dewa, Intan, Ivan, dan Mas Izzudin, MSP dari Universitas Muhammadiyah Malang : Robbi, serta Pak Julius Fenata selaku Academic Evangelist berkesempatan untuk menghadiri acara ini. Karena kami mencari suasana yang tenang dan tidak penuh sesak, Rumah Makan Gotha pun kami pilih sebagai lokasi Gathering.
Gathering memang merupakan acara yang selalu deselenggarakan oleh MSP, di samping acara seminar atau workshop. Tujuan
Tujuan dilaksanakannya gathering kali ini adalah untuk mempererat suasana kekeluargaan antaranggota MSP. Selain itu, ada pembahasan khusus mengenai persiapan MSP Jatim dalam menyelenggarakan DevCamp WP 7 di beberapa universitas di Jawa Timur. Tidak lupa juga acara diwarnai oleh canda – canda hangat para sesepuh dari MUGI Surabaya yang turut menghadiri acara ini.
Beberapa bulan yang lalu MSP Jatim mengalami fakum. Hal ini dikarenakan karena sebagian besar MSP lulus kuliah S1 dan tidak berada di kampus lagi. Waktu fakum tersebut diisi oleh recruitment calon anggota MSP yang baru. Alhasil, terpilih dua anggota MSP, satu dari Universitas Muhammadiyah Malang, dan satu dari Universitas MaChung Malang. Setelah mengalami beberapa minggu fakum, acara gathering semacam ini merupakan cara yang efektif untuk menghangatkan kembali suasana kebersamaan MSP.
Agenda
Pada gathering kali ini, dibahas juga persiapan follow up dari Dev Camp WP7. Beberapa hari sebelumnya, diadakan Dev Camp WP 7 khusus untuk MSP Jatim dan peserta umum yang terseleksi. Pasca pelatihan itu, MSP Jatim memiliki tanggung jawab untuk berbagi ilmu bagaimana mengembangkan aplikasi di WP7 kepada mahasiswa – mahasiswa yang lain. Untuk itu, direncakanan akan diadakan road show pelatihan pengembangan aplikasi WP7 di beberapa Universitas. Universitas – universitas yang disepakati adalah STIKOM, STTS, Univ Petra Surabaya, Univ Machung, serta Univ Muhammadiyah Malang.
Sekitar pukul 20.30, para sesepuh dari MUGI pun datang. Dengan canda yang khas, mereka menambah suasana kehangatan acara gathering MSP tersebut. Mereka juga berbagi pengalaman di dunia kerja serta tips n trick membuat aplikasi yang menarik.
Semoga Gathering MSP Jatim kali ini tidak sekedar kumpul – kumpul biasa. Akan tetapi, secara efektif dapat meningkatkan silaturahmi antaranggota MSP dan antara anggota MSP dengan anggota MUGI Surabaya. Dan semoga road show workshop pengembangan aplikasi WP7 yang sudah dibahas akan berjalan dengan lancar. Amin J
|
-
 Apakah
kamu pernah merasa tidak nyaman dengan aplikasi CMS yang disediakan
situs penyedia blog? Apakah kamu kurang familiar dengan tata cara
pengaturan di aplikasi CMS? Apakah kamu pernah merasa was – was jikalau
ditengah – tengah menulis, koneksi Internet kamu bermasalah? Mungkin
Windows Live Writter merupakan solusinya.
Windows Live Writter
merupakan salah satu fitur tambahan dari Microsoft yang tergabung dalam
paket Windows Live Essential 2011. Windows Live Essential terdiri dari
Windows Messenger, Windows Photo Gallery, Windows Movie Maker, Windows
Live Mesh, Windows Live Writer, dan masih banyak aplikasi yang lain.
Windows Live Writer bisa di unduh secara online di sini. Fitur Windows Live Writer 2011Windows
Live Writer ditujukan bagi para blog mania untuk memudahkan kita
berbagi tulisan di blog. Adapun fitur – fitur yang dimiliki oleh Windows
Live Writer 2011 adalah: Tell your story now Dengan
menggunakan Windows Live Writer 2011, kita dapat dengan mudah
terkoneksi dengan server blog populer, seperti Wordpress, Blogger,
Windows Live Space, dan yang lainnya. Untuk melakukan set up account
kita tinggal memasukkan alamat, username, dan password akun blog kita
dan secara otomatis Windows Live Writer 2011 akan mengunduh tema dan
media yang terdapat pada akun server blog kita. Begitupun saat kita
memasukkan media, baik berupa foto atau video pada Windows Live Writer,
file media tersebut akan terunggah ke server CMS blog kita. Berikut langkah – langkah untuk melakukan set up account pada Windows Live Writer 2011: - Buka Windows Live Writer
- Pilih Server blog tempat blogmu
- Masukkan alamat blog, username , dan password
- Setelah itu Windows Live Writer akan mengunduh CSS tema dan seluruh file media di server blogmu.
- Siap ngeblog deh.
Easier to find and do Tidak
seperti User Interface yang terdapat di kebanyakan CMS Blog, Windows
Live Writer menggunakan User Interface yang lebih User Friendly. Windows
Live Writer menggunakan Ribbon (papan atas seperti pada UI MS Office
2007), sehingga lebih menarik dan mudah untuk mengatur tulisan kita. 
Selain
itu WIndows Live Writer juga mengadopsi fitur Ms Office. Yakni pilihan
properties akan muncul saat kita mengakses file media, semisal foto dan
video. 
Blog like a professional Dengan
fitur – fitur yang dimiliki oleh Windows Live Writer sangat
memungkinkan kita membuat tulisan dengan desain yang cantik dengan waktu
yang cepat. Setelah mendesain post kita, tinggal klik publish, secara otomatis post akan dipublikasikan pada server blog kita persis dengan apa yang kita desain. So, tunggu apa lagi, silakan download di sini: http://g.live.com/1rewlive4-web/en/wlsetup-web.exe??WLI=1&WLXID=b4b6b7af-b0bc-4e48-9fe8-90839a84391c&RID=001f572a345&TID=1312607523997&lid=
|
-
Data Binding merupakan teknik untuk menginteraksikan antara lapisan
tampilan (presentation layer) dan lapisan data (database layer) sebuah
aplikasi. Pada WPF, data binding biasa dilakukan untuk membuat sebuah
tampilan sesuai dengan data yang sudah tersedia. Data binding di
WPF dapat dilakukan kostumisasi tampilan. Misalkan data yang ada
memiliki tiga buah variable string, sebuah variable image, dan sebuah
variable boolean. Dengan seperti itu, kita bisa membuat sebuah template
tampilan, ada sebuah image, tiga buah textblock, dan sebuah checkbox.
Kita tidak perlu membuat sejumlah data. Yang kita butuhkan adalah
membuat sebuah tampilan yang selanjutnya menjadi contoh / template tampilan data. Langkah – langkah1. Buat sebuah project WPF, namai saja BelajarDataBinding 2. Buat sebuah folder, namai Images 3. Masukkan gambar – gambar ke folder tersebut. Mudahnya ambil di MyPicture/Sample Picture. 4. Buat class baru, beri nama Person 5. Tulis baris code berikut : public class Person
{
private string _name;
private string _address;
private string _phone;
private bool _paid;
private BitmapImage _photo;
public Person(string name, string address, bool paid, string phone, BitmapImage photo)
{
_name = name;
_photo = photo;
_phone = phone;
_paid = paid;
_address = address;
}
public BitmapImage Photo
{
get { return _photo; }
}
public bool Paid
{
get { return _paid; }
}
public string Phone
{
get { return _phone; }
}
public string Address
{
get { return _address; }
}
public string Name
{
get { return _name; }
}
}6. Buat database dummy berupa list of Person. Namai class ListOfPerson 7. Masukan baris code berikut : class ListOfPerson : List<Person>
{
public ListOfPerson()
{
Add(new Person("Dewa", "Asrama PPSDMS", true, "085648092201", new BitmapImage(new Uri(@"Images/Desert.jpg",UriKind.Relative))));
Add(new Person("Mocin", "Beijing", true, "044648092201", new BitmapImage(new Uri(@"Images/Koala.jpg", UriKind.Relative))));
Add(new Person("Sandi", "Gresik", true, "085648462201", new BitmapImage(new Uri(@"Images/Pinguins.jpg", UriKind.Relative))));
Add(new Person("Fariz", "Mekasan", true, "085468092201", new BitmapImage(new Uri(@"Images/Desert.jpg", UriKind.Relative))));
}
}8. Buat sebuah ListBox di MainPage.xaml 9. Klik kanan pada ListBox -> Edit Additional Template -> Item Template -> Create Empty 
10. Beri Nama DataTemplate1 11. Pilih Grid, dan beri Width dan Height masing – masing 500px dan 200px 12. Desain Grid seperti gambar berikut : 
13. Selanjutnya keluar dari mode editing DataTemplate 14. Klik ListBox, kemudian edit XAML 15. Deklarasi namesapce local terlebih dahulu : xmlns:local="clr-namespace:BelajarDataBinding" 16. Pada DataTemplate1, deklarasi class ListOfPerson <ObjectDataProvider x:Key="ListOfPerson" ObjectType="{x:Type local:ListOfPerson}"/> 17.
Pada object textBlock dan Image modifikasi nilai bindingnya. Dengan
demikian code XAML dari DataTemplate1 adalah sebagai berikut : <Window.Resources>
<ObjectDataProvider x:Key="ListOfPerson" ObjectType="{x:Type local:ListOfPerson}"/>
<DataTemplate x:Key="DataTemplate1">
<Grid d:DesignWidth="362" d:DesignHeight="138.5" Width="300" Height="120">
<Image HorizontalAlignment="Left" Margin="8.5,12,0,15" Width="100" Source="{Binding Path=Photo}"/>
<TextBlock HorizontalAlignment="Stretch" Margin="112.5,12,33.22,0" TextWrapping="Wrap" Text="{Binding Path=Name}" VerticalAlignment="Top" FontSize="16"/>
<TextBlock HorizontalAlignment="Stretch" Margin="112.5,31.96,33.22,0" TextWrapping="Wrap" Text="{Binding Path=Address}" VerticalAlignment="Top" FontSize="16"/>
<TextBlock HorizontalAlignment="Stretch" Margin="112.5,51.92,33.22,47.8" TextWrapping="Wrap" Text="{Binding Path=Phone}" VerticalAlignment="Stretch" FontSize="16"/>
<CheckBox Content="CheckBox" HorizontalAlignment="Stretch" Margin="112.5,0,33.22,17.84" FontSize="16" Width="Auto" Height="25.96" VerticalAlignment="Bottom"/>
</Grid>
</DataTemplate>
</Window.Resources>18. Pada XAML ListBox tentukan ItemSource-nya <ListBox Margin="69.5,70.5,287.5,109.5" ItemsSource="{Binding Source={StaticResource ListOfPerson}}" ItemTemplate="{DynamicResource DataTemplate1}"/>Dengan
menerapkan teknik binding seperti ini, untuk mengoneksikan antara data
dan tampilan data akan lebih mudah. Semoga tutorial ini bermanfaat. Amin
|
-
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
Pada tutorial kali ini, kita mencoba untuk membuat sebuah desain yang nantinya akan menjadi kostumisasi dari form. Desain form yang kita buat berasal dari kumpul gambar primitif (kotak, lingkaran, dan sebagainya) yang disusun hingga menyerupai form. Untuk itu, ikuti langkah – langkah berikut :
1.
Gambar kotak seperti petunjuk berikut : 
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
2.
Buat kotak menjadi sedikit semi-rectangle 
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
3.
Modifikasi nilai atribut – atribut object kotak
pada panel Properties 
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
4.
Atur ukuran kotak dengan batas margin 4-4-4-4 
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
5.
Buat design batang atas dan tombol maximise,
minimise, dan close, seperti gambar berikut :
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
6.
Hiasi kotak batang atas dengan beberapa object
gambar primitif, seperti gambar berikut : 
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
7.
Ubah gambar maximise, minimise, dan close button
menjadi sebuah controller button dengan langkah – langkah berikut : - Klik
kanan gambar -> Group into -> Grid
- Klik kanan
grid -> Make into Control -> Pilih Control Button -> OK
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
8.
Hapus sub-controller Container pada Button yang
kita ciptakan. Fungsi dari sub-controller Container adalah menampung sting yang
bertindak sebagai Content dari Button.
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
9.
Kemudian Tekan [Button] pada tombol navigasi
edit controller, seperti pada gambar di bawah : 
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
Membuat Desain Antarmuka Borderless
Teknologi WPF memungkinkan untuk membuat desain aplikasi
yang borderless (tidak memiliki bingkai standar aplikasi Windows). Bentuk
form-nya pun tidak selalu segi empat seperti bentuk form saat kita membangun
aplikasi menggunakan Windows Form biasa.
Untuk itu, lekukan langkah – langkah berikut : 1.
Klik pada Window di MainWindow.xaml 
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
2.
Ubah property berikut :
o WindowStyle
= none
o AllowTransparancy
= TRUE
o Background
= No Color
Sehingga desain antarmuka kita akan nampak seperti gambar
berikut : 
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
3.
Klik pada Button Close, Maximise, dan Minimise
dan beri nama berturut – turut ButtonClose, ButtonMaximize, dan ButtonMinimize 
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
4.
Pada Button Close, klik Event, kemudian double
klik pada Event Click 
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
5.
Isikan penggalan code berikut pada fungsi event
handler
|
private
void ButtonClose_Click(object sender, System.Windows.RoutedEventArgs e)
{
this.Close();
Application.Current.Shutdown();
}
|
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
6.
Begitupun pada ButtonMaximized, buat fungsi event
handler Click. Kemudian isikan penggalan code berikut :
|
private void ButtonMaximize_Click(object
sender, System.Windows.RoutedEventArgs e)
{
if(this.WindowState.Equals(WindowState.Maximized))
this.WindowState
= WindowState.Normal;
else
this.WindowState
= WindowState.Maximized;
}
|
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
7.
Pada fungsi event handler ButtonMinized, isikan
penggalan code berikut :
|
private
void ButtonMinimize_Click(object sender, System.Windows.RoutedEventArgs e)
{
if(!this.WindowState.Equals(WindowState.Minimized))
this.WindowState
= WindowState.Minimized;
}
|
Normal
0
false
false
false
EN-US
X-NONE
X-NONE
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
mso-para-margin-top:0cm;
mso-para-margin-right:0cm;
mso-para-margin-bottom:10.0pt;
mso-para-margin-left:0cm;
line-height:115%;
mso-pagination:widow-orphan;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
8.
Jalankan program dan cek apakah tombol minimise,
maximise, dan close sudah berfungsi sesudai dengan fungsinya.
|
-
Sekilas Tentang Ms Expression Blend Microsoft Expression Blend adalah sebuah alat bantu desain antarmuka yang dikembangkan dan dipasarkan oleh Microsoft Corporation untuk membuat antarmuka grafis untuk aplikasi Web dan aplikasi desktop yang mencampurkan fitur-fitur kedua jenis aplikasi tersebut. Microsfot Expression Blend bersifat interaktif, dan berorientasi WYSIWYG untuk mendesain antarmuka berbasis Extensible Application Markup Language (XAML) untuk aplikasi Windows Presentation Foundation dan aplikasi Silverlight. Produk ini adalah salah satu bagian dari paket Microsoft Expression Studio. Microsoft Expression Blend mendukung mesin teks WPF dengan tipografi OpenType tingkat lanjut dan juga ClearType, widget berbasis vektor 2 dimensi, dan widget 3 dimensi dengan akselerasi perangkat keras melalui teknologi DirectX. Sampai saat in, versi terbaru dari Ms Expression Blend adalah Ms Expression Blend 4. Versi ini mendukung .Net Framework 4.0. Fitur – fitur yang diperbarui adalah terdapatnya banyak controlller pada asset WPF, Silverlight. Selian itu, versi terbaru ini sudah mendukung pembangunan aplikasi WP7. Memulai Ms Expression Blend
Setelah melakukan proses instalasi Ms. Expression Studio, untuk memulai membuat project dengan menggunakan Ms. Expression Blend, buka Microsoft Expression Blend pada Start Menu.
Buat Project baru WPF dengan langkah – langkah berikut :
1. File
2. New Project
3. Pilih WPF -> WPF Application
4. Beri Nama Project
5. Pilih versi .Net Framework sesuai dengan kebutuhan.
Pada tutorial kali ini, pilih .Net Framework 4.
Pengenalan Panel Kerja Ms. Expression Blend
Setelah membuat sebuah project WPF baru, maka akan tampak tampilan Ms Expression Blend sebagai berikut :
 Keterangan Panel :
1. Panel Shortcut Button
Panel berisi tombol – tombol yang populer dan sering digunakan, baik dalam kepentingan mendesain antarmuka, maupun membuat animasi pada Ms Expression Blend. Fungsinya adalah untuk memudahkan dalam membangun desain antarmuka aplikasi.
2. Main Panel
Panel ini merupakan panel utama yang digunakan saat membangun aplikasi di Ms Expression Blend. Pada pembangunan aplikasi WPF, panel utama berisi tab Project, Assets, Triggers, States, dan Parts. Masing – masing tab tersebut memiliki fungsi yang berbeda.
Pada tab Project terdapat panel kecil yang berupa Solution Explorer. Fungsi dari panel kecil pada tab Project ini adalah untuk menampilkan informasi hirarki semua file dalam solution / project yang sedang dibuka.
3. Panel Design / Coding
Bagian pada Ms Expression Blend ini berfungsi sebagai tempat untuk melakukan code pada project serta membuat desain antarmuka.
4. Panel Properties dan Atribut
Pada panel ini terdapat beberapa opsi untuk melakukan kostumisasi pada controller yang sedang diedit.
|
-
Pada tutorial WPF sederahana, saya ingin berbagi cara mengakali pembuatan list box dengan memanfaatkan sifat fungsionalitas Stack Panel. Terkadang kita bingung untuk menerapkan teknik data binding dalam pemanfaatan controller Listbox WPF. Hal ini dikarenakan oleh kita belum terbiasa untuk memodifikasi code XAML. Padahal, dalam pembuatan atau pemanfaatan beberapa controller WPF, kita butuh teknik yang seperti itu. Hal ini bisa “diakali” dengan cara intansiasi usercontrol yang telah kita modifikasi. Kemudian, kita menaruh usercontol – usercontol tersebut pada sebuah stackpanel. Terlihatlah seakan – akan kita menggunakan listbox.
Masih abstrak? Baik, agar lebih jelas, silakan mempraktikkan beberapa langkah pembuatan daftar nama pada aplikasi buku telepon berikut.
- Buka Microsoft Expression Blend 4
- Buat project WPF baru
- Pada MainPage.xaml buatlah sebuah StackPanel dan berinama StackPanelList dengan ukuran 350 x 360.
- Setelah itu, group StackPanel tersebut ke dalam Scroll Viewer, seperti pada gambar 3.
- Buat class baru, beri nama User
- Buat property – property penting yang dimiliki oleh class User. Misalkan seperti penggalan code berikut :
public class User
{
private string _name;
private string _address;
private string _phoneNumber;
private BitmapImage _image;
public User(string name, string phoneNumber, string address, BitmapImage image = null)
{
_name = name;
_phoneNumber = phoneNumber;
_address = address;
_image = image;
}
}
- Pada sidebar Project, buat usercontrol baru. Beri nama “MyListBox” seperti yang dijelaskan pada gambar 7.
- Atur ukuran usercontrol sesuai dengan keinginan kita. Misal ukurannya 350 x 120, seperti pada gambar 8.
- Setelah itu, kita men-desain usercontrol baru itu sesuai dengan gambar 9.
- Masuk ke MyListBox.xaml.cs, buat method Constructor baru. Method contructor baru ini kita maksudkan untuk menjadikan intansiasi MyListBox lebih dinamis dan sesuai dengan keinginan kita.
public MyListBox(User user)
{
this.InitializeComponent();
TextBoxName.Text = user.Name;
TextBoxAddress.Text = user.Address;
TextBoxPhoneNumber.Text = user.PhoneNumber;
ImageFoto.Source = user.Image;
}
- Pada MainPage.xaml.cs buat object ListUser seperti potongan code berikut :
public partial class MainWindow : Window
{
private List ListUser = new List();
- Buat method InitializeUsers(). Method ini berfungsi untuk membuat object user sesuai dengan keinginan kita dan memasukkan ke dalam ListUser. Pastikan pada alamat D:/misc terdapat foto1, foto2, dan foto3.
public void InitializeUsers()
{
ListUser.Add(new User("Dewandono", "085648092201", "Jalan Empunala\nGg Gotong Royong\nKota Mojokerto",
new BitmapImage(new Uri(@"D:/misc/foto1.jpg", UriKind.Absolute))));
ListUser.Add(new User("Mocin Sugiharta", "085648125648", "Gresik gang 4 no 1\nKota Gresik",
new BitmapImage(new Uri(@"D:/misc/foto2.jpg", UriKind.Absolute))));
ListUser.Add(new User("Sandi Pintar", "085489254568", "Gedung Teknik Informatika ITS\nlt 3 Laboratorium Pemrograman\nITS Surabya",
new BitmapImage(new Uri(@"D:/misc/foto3.jpg",UriKind.Absolute))));
}
- Buat method InitializeListBoxes(). Method ini berfungsi untuk menjadikan StackPanelList sebagai induk dari MyListBox – MyListBox kecil yang kita ciptakan.
public void InitializeListBoxes()
{
foreach (User i in ListUser)
{
MyListBox myListBox = new MyListBox(i);
StackPanelList.Children.Add(myListBox);
}
}
- Run dengan menekan F5. ListBox yang terbuat dari StackPanel sudah kita ciptakan. Program kita akan tampil seperti gambar 10.
Daftar Gambar :
Gambar 3 
Gambar 7 
Gambar 8 
Gambar 9 
Gambar 10 
Semoga tutorial ini bermanfaat. Selamat mencoba.
|
-
Sungguh berat rasanya jika kita membuat project dengan menggunakan IDE DevC++ kembali. Terasa seakan - akan kita mengkoding Pemrograman Terstruktur lagi. Selain tidak mempunyai fitur Intellisence (Auto-Complete jika ditekan ctrl + spasi), DevC++ juga terasa kurang powerful jika dibandingkan dengan Visual Studio 2008. Sampai sekarang belum ada paket OpenGL yang dikhususkan untuk IDE Microsoft Visual Studio 2008. Akan tetapi, kita bisa menyiasati hal tersebut dengan beberapa cara. Berikut langkah - langkahnya :
1. Install Ms Visual Studio
Ya, syarat mutlak untuk mengerjakan langkah - langkah ini adalah komputer kita harus terinstall Ms Visual Studio, baik VS Express Edition, ataupun VS Professional Edition. Jika kita menggunakan VS Professional Edition, pastikan Ms Visual C++ terinstall di komputer kita. Kita akan menggunakan IDE Visual C++ untuk membuat project open GL tersebut.
2. Windows SDK for Windows Server 2008 and .NET Framework 3.5
Untuk mendapatkan paket ini, kita bisa mengunduh di sini atau di sini
SDK ini berisi library utama dari OpenGL.
3. Unduh dan Letakkan Paket Glut dengan Sesuai
Langkah selanjutnya adalah mengunduh OpenGL Paket Library. Untuk mengunduh paket tersebut kita bisa dapatkan di sini.
Setelah sukses mengunduh, extract semua arsip yang kita dapat. Kemudian pindahkan file - file tersebut sesuai dengan kriteria berikut:
- Letakkan semua file .h ke folder C:\Program Files\Microsoft SDKs\Windows\v6.1\Include\GL. File - file yang dicopykan ke folder tersebut adalah : glut.h, freeglut.h, freeglut_ext.h, dan freeglut_std.h.
- Letakkan semua file .lib ke folder C:\Program Files\Microsoft SDKs\Windows\v6.1\Lib. File - file yang dicopykan ke folder tersebut adalah : freeglut.lib dan glut32.lib.
- Letakkan semua file .dll ke folder C:\Windows\system32. File - file yang dicpykan adalah : freeglut.dll dan glut32.dll.
4. Buat Proyek Pertamamu
Buat project OpenGL pertamamu dengan membuka File -> New Project -> Win32 Console Application. Setelah keluar wizard-nya, pilih empty project. Klik Finish. Setelah sudah siap project di IDE, lakukan langkah - langkah berikut ini :
- Tekan Alt + F7 atau Project Properties. (lihat gambar)
- Masuk menu properties (lihat gambar)
- Masuk ke Configuration Properties -> Linker -> Input
- Masukkan string "GlU32.Lib OpenGL32.Lib freeglut.lib glut32.lib"
5. Unduh Contoh Project
Untuk memulai project, bisa diunduh contoh project OpenGL yang sudah jadi. Contoh software tersebut bisa didapat di sini.
Semoga tutorial singkat ini bermanfaat bagi kita.
|
-
Kali ini saya berbagi sedikit trik dalam penanganan event di pembuatan aplikasi. Saya sering menggunakan teknik ini jika saya menemui banyak Controller yang sejenis dan dapat dikatagorikan. Memang teknik ini bisa dikatakan bukan merupakan sesuatu yang krusial atau penting. Akan tetapi, dengan teknik ini, pihak pengembang akan lebih bisa lebih mengorganisasikan event yang dimaksud dan mengoordinasikan hubungan antar-event. Method event-handler bisa dibuat dengan lebih efisien. Inti dari teknik ini adalah bagaimana cara kita untuk membuat method event handler dengan lebih efisien dengan cara memanfaatkan properti lain dari controller - controller yang kita maksud.
Misalnya pada studi kasus pembuatan program Kalkulator sederhana seperti pada screenshot program di atas. Pastinya dalam pembuatan antar-muka Kalkulator terdapat banyak Controller Button. Entah itu merupakan button angka dari 0 - 1, button operator -,+,x,:, atau =, dan button - button pendukung lainnya. Agar lebih teratur, kita menamai button yang berfungsi sebagai operan diberi suffix 'a' sedangkan button berfungsi sebagai operator Biasanya kita sering menerapkan teknik pembuatan method event-handler satu - satu seperti pada potongan code berikut :
public partial class MainWindow : Window
{
private void a1_Click(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
}
private void a2_Click(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
}
private void a3_Click(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
}
private void a4_Click(object sender, System.Windows.RoutedEventArgs e)
{
// TODO: Add event handler implementation here.
}
}
Bisa dibayangkan betapa tidak efisiennya baris code yang digunakan. Selain itu betapa sulitnya untuk mengkoordinasi event - event click yang setipe. Belum lagi event pada operator - operator, pastinya jika menggunakan cara seperti itu, kita akan dibingungkan dengan alur program yang kita buat.
Solusi : Tricky Event-Handler Method
Tanpa kita sadari, sebenarnya kita sudah mengkatagorikan button - button tersebut dengan memberi nama controller yang terstruktur. Tinggal bagaimana cara memanfaatkan penggunaan nama controller itu sebagai, seakan - akan, nama variable / nilai tertentu yang kita operasikan lebih lanjut.
Berikut merupakan solusi dengan menggunakan tricky event-handler method :
- Pertama - tama, kita mengeset semua method event-handler click pada seluruh controller button dengan nama yang sama, yakni Button_Click
- Pada baris code method Button_Click, implementasikan code berikut :
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
//membuat sebuah variable button yang diberi nilai dari object sender
Button bt = sender as Button;
//var operand digunakan untuk menangkap nilai angka berapa yang ditekan
char operand;
//jika sender bernilai null atau bukan merupakan button, maka keluar
if(bt == null)
return;
//jika button yang ditekan merupakan button angka/operan, maka akan masuk
if(bt.Name.StartsWith("a"))
{
//operand didapat pada karakter setelah kode 'a'
operand = bt.Name[1];
//nilai operand ditampilkan di layar
TextBoxScreen.Text += operand;
}
//jika nama button berkodekan 'o', maka merupakan button operator
else if(bt.Name.StartsWith("o"))
{
//dispesifikasikan berdasarkan nama button
switch (bt.Name)
{
case "oplus" :
//agoritma penambahan diimplementasikan disini
break;
case "ominus" :
//agoritma pengurangan diimplementasikan disini
break;
case "ocorss" :
//agoritma perkalian diimplementasikan disini
break;
case "odiv" :
//agoritma pembagian diimplementasikan disini
break;
case "oequal" :
//agoritma sama dengan diimplementasikan disini
break;
}
}
}
- Run dan lakukan penyesuaian code sesuai dengan kebutuhan
Nampak jelas perbandingannya, jika kita menggunakan trik ini, kita akan lebih mudah untuk mengorganisasi alur program yang kita buat. Selain itu, barisan code dari source code project kita semakin efisien. Ini baru diimplementasikan dalam program skala kecil, yakni kalkulator. Bayangkan jika program yang kita bangun merupakan program berskala menengah atau enterprise, pastinya dengan menggunakan cara ini, proses yang kita lakukan untuk membangun program bisa lebih terstruktur dan efisien.
|
-
Kali ini saya membedah teknik switching usercontrol pada pembangunan aplikasi dengan menggunakan teknologi WPF. Teknik switching usercontrol digunakan untuk mengganti usercontrol yang sedang dimuat oleh active window ke usercontrol selanjutnya yang akan dimuat. Aplikasi hanya membutuhkan satu window yang memiliki usercontrol dan usercontrol tersebut akan diganti-ganti sesuai usercontrol yang kita hendaki untuk ditampilkan.
Dengan menggunakan teknik ini, pemakaian memory aplikasi kita menjadi lebih efisien.
Inti dari teknik ini adalah pemanfaatan static class dan static attribute sebagai object yang dapat diakses oleh class manapun. Tiap kali kita melakukan switch usercontrol, kita bisa langsung memanggil object static tersebut.
Agar lebih komprenhensif memahami teknik ini, ikuti petunjuk - petunjuk berikut :
- Buka Microsoft Visual Studio 2010
- Buat project WPF baru
- Buat class baru bernama Switcher
- Ubah class Switcher menjadi static class dan hapus fungsi constructor-nya , seperti pada code berikut :
namespace TutorialSwitching
{
public static class Switcher
{
}
}
- Isi static class Switcher dengan atribut-atribut seperti code di bawah ini:
namespace TutorialSwitching
{
public static class Switcher
{
public static MainWindow pageSwitcher;
public static void Switch( UserControl newPage)
{
pageSwitcher.Navigate( newPage );
}
}
}
- Pada MainWindow.xaml buat sebuah usercontrol baru di dalamnya. Usercontrol tersebut nantinya akan menjadi usercontrol yang memuat usercontrol yang ditampilkan. Namai usercontrol tersebut dengan MyUserControl.
- Pada MainWindow.xaml.cs buat fungsi Navigate seperti code di bawah ini. Fungsi ini berguna untuk mengganti content dari MyUserControl dengan usercontrol yang dipassing-kan melalui fungsi.
public void Navigate( UserControl nextPage )
{
MyUserControl.Content = nextPage;
}
- Pada fungsi constructor MainWindow tambahi baris code di bawah ini. UserControl Baru merupakan UserControl yang akan ditampilkan pada MainWindow
Switcher.pageSwitcher = this;
Switcher.Switch(new UserControlBaru());
- Dengan demikian MainWindow.xaml.cs berisi code berikut :
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Switcher.pageSwitcher = this;
Switcher.Switch(new UserControlBaru());
}
public void Navigate( UserControl nextPage )
{
MyUserControl.Content = nextPage;
}
}
- Pada event tertentu, untuk mengganti usercontrol yang akan ditampilkan, secara mudah hanya memanggil fungsi berikut :
private void Button_Click(object sender, System.Windows.RoutedEventArgs e)
{
Switcher.Switch(new UserControl1());
}
- Pada pengembangan selanjutnya, seluruh perpindahan state / tampilan form dapat di atur dalam sebuah method static seperti contoh penggalan code project game berikut :
public enum ModeSwitching
{
MenuUtama,
Petualangan,
Lanjutkan,
Multiplayer,
OpenMedicopedia,
CloseMedicopedia,
ShowNewPlayerForm,
Keluar,
HighScore
}
public static void SwitchOn(ModeSwitching mode)
{
switch (mode)
{
case ModeSwitching.MenuUtama :
Switch(new MenuUtama());
break;
case ModeSwitching.Petualangan :
MPlayer.level = 1;
if(!App._multipointSDKActivated)
App.ActivateMultipointSDK();
Switch(new Level_Multi());
break;
case ModeSwitching.Lanjutkan :
MPlayer.level = 2;
if(!App._multipointSDKActivated)
App.ActivateMultipointSDK();
Switch(new Level_Multi());
break;
case ModeSwitching.HighScore :
App._mainWindow.StartSong("highscore");
Switcher.Switch(new HighScore());
break;
case ModeSwitching.Multiplayer :
MPlayer.level = 1;
if(!App._multipointSDKActivated)
App.ActivateMultipointSDK();
Switch(new Level_Multi());
break;
case ModeSwitching.OpenMedicopedia :
Switcher.Switch(new BukuMedicopedia());
break;
case ModeSwitching.Keluar :
App.CloseAllWindows();
break;
}
}
Dengan menggunakan teknik swithing usercontrol, kita akan lebih mudah dan terstruktur dalam mengembangkan aplikasi WPF yang berskala besar atau menengah. Kita akan bisa mengatur alur program kita secara lebih mudah dan terstruktur. Semoga tulisan ini bermanfaat. Selamat mencoba. :)
|
-
Minggu, 20 Februari 2011, Tim MS.id menjadi juara di Arkavidia 2.0 ITB katagori System Design Competition. Selain tim MS.id, dalam lomba kali ini ITS juga mendelegasikan tim Enlight. Tim MS.id mendapat juara 1 dan Tim Enlight mendapat juara 2. Kedua tim ini sebagian besar anggotanya merupakan Microsoft Student Partner (MSP) dan calon MSP ITS. Tim MS.id beranggotakan Dewa, Ivan, Intan, dan Sandi, sedangkan tim Enlight beranggotakan Alex, Jeffrey, dan Roy.Tim MS.id membuat aplikasi yang berjudul GLOBE sedangkan tim Enlight membuat Game yang berjudul Academia.
GLOBE, aplikasi yang merupakan perpaduan antara Geographic Information System (GIS) dan Social Network, mengantar tim MS.id ke tempat pertama babak final. GLOBE merupakan aplikasi RIA yang dibangun dengan framework Silverlight 4. Dengan berkreasi dalam pemanfaatan library Bing Map SDK for Silverlight dan teknologi RIA Silverlight 4, Tim MS.id dapat membuat terobosan baru dalam social network. GLOBE memungkinkan penggunanya mengetahui lokasi temannya saat memasang status, melakukan chat yang akan dikembangkan dengan fitur video conference, mengetahui informasi mengenai sebuah lokasi, dan beberapa fitur standar social network yang lain. Berbeda dengan Foursquare atau aplikasi semacamnya, GLOBE merupakan aplikasi Rich Internet Aplication (RIA) yang memiliki tampilan yang jauh lebih interaktif. Selain itu, GLOBE lebih menonjolkan sisi GIS-nya. Pengguna akan dihadapkan dengan bola dunia yang besar. Di bola dunia tersebut, pengguna bisa melihat lokasi terakhir teman - temannya. Fitur chatting juga merupakan salah satu fitur pembeda GLOBE dengan aplikasi semacam Foursquare.
GLOBE memanfaatkan Facebook API untuk keperluan registrasi dan publikasi. Pengguna baru bisa registrasi GLOBE dengan menggunakan account FB-nya tanpa melakukan pengisian form registrasi ulang. Pengguna GLOBE akan terhubung ke FB mereka, sehingga tiap kali mereka melakukan update status, secara otomatis akan membuat suatu post di dinding FB mereka. Selain itu, penggunaan Facebook API juga dimaksudkan untuk publikasi aplikasi GLOBE itu sendiri. Setiap pengguna FB yang melihat post GLOBE pasti akan ingin mengetahui dan mencoba aplikasi GLOBE. Dalam melansir informasi mengenai pekerjaan, GLOBE terhubung dengan Linked In API. Dengan demikian, dimungkinkan pengguna GLOBE mencari orang lain berdasarkan informasi profesi yang didapat dari account Linked In mereka. Selain dibagun dalam aplikasi web, GLOBE akan dibagun dalam versi mobile. GLOBE Mobile merupakan aplikasi yang diperuntukkan HP dengan OS WIndows Phone 7. Berbeda dengan aplikasi web, GLOBE Mobile memanfaatkan fitur GPS pada HP. Oleh karena itu, pengguna GLOBE Mobile dapat langsung mendapat informasi lokasi di mana dia berada tanpa harus mencarinya terlebih dahulu.
Rencana pengembangan ke depan, GLOBE akan ditambahkan fitur Fast Searching, Find a Direction, Video Conference, dan pemanfaatan GPS untuk versi Mobile. Pengembang juga sempat memikirkan tentang aspek Expandable dari GLOBE. Oleh karena itu, saat ini pengembang melakukan riset mengenai teknologi Windows Azure untuk memigrasikan GLOBE ke awan (cloude) ke depannya.
|
|
|
|