Visual Studio LightSwitch #3: Interface dan Bahasa

Selamat datang! ๐Ÿ™‚

Kali ini saya akan membahas tentang Interface dan Bahasa. Masih ingat atau masih menyimpan project yang lalu tentang Validasi dan Format Data? Sehabis kita menambahkan beberapa atribut pada table Customer (Email, Tanggal Lahir, dan Saldo) lalu kita Run, ada sedikit kejanggalan, atribut tersebut tidak muncul pada kolom kanan Customers List Detail, namun ada pada saat Add atau Edit. Apa yang terjadi? Bagaimana supaya atribut tersebut muncul juga di kolom kanan?

Mari kita munculkan. Kembali ke Visual Studio LightSwitch 2011. Pada Solution Explorer, Double klik Screen CustomersListDetail, akan muncul hirarki dari screen yang kita pilih. Nah, di hirarki ini kita bisa mengubah komponen dari screen kita. Silahkan Anda baca sebentar.. Bagaimana? Terbayang kan? Cukup mudah dimengerti?

Kita pilih baris Customer Details, lalu akan muncul link button Add pada child paling akhir dari Customer Detail. Klik Add, dan silahkan tambahkan semua atribut baru yang ingin Anda tampilkan. Dalam contoh ini saya tambahkan Email, TanggalLahir, dan Saldo.

Silahkan coba Anda Run, bagaimana? Mereka sudah muncul kan? ๐Ÿ™‚

Ngomong-ngomong interface, apa tampilan di LightSwitch ini bisa kita custom? Ya, bisa, tapi tidak begitu saja, custom interface bisa dilakukan dengan menggunakan extension.

Saya menggunakan contoh sebuah extension LightSwitch Metro Theme.

Tersedia cukup banyak extension yang mungkin bergunak untuk kita, silahkan jelajahi: Link ini

Download, execute, install, restart Visual Studio LightSwitch 2011, buka kembali project yang Anda buat, klik kanan pada application LightSwitchInAction (bukan Solution) โ€“ Properties, kita tiba pada Application Designer.

Pada tab Extensions akan muncul LightSwitch Metro Theme dengan keadaan unchecked, check agar dapat kita gunakan. Lalu pindah ke tab General Properties, pada Theme chooser akan muncul theme yang baru saja Anda install, dipilih saja.. Lalu Run.

Tadaa.. Tampilan aplikasi Anda telah berubah!

Oya, bagaimana dengan bahasa? Apakah mungkin diubah? Saya ingin menjadi Bahasa Indonesia? Bisa kok.. ๐Ÿ™‚

Kembali ke Application Designer tadi, pada tab General Properties, di sana ada Culture, ganti saja menjadi Indonesian. Lalu perhatikan apa yang terjadi..

Nah, pembahasan kali ini cukup sekian. Sampai ketemu di episode selanjutnya, di sana saya akan membahas tentang Relasi dan Computed Data.

Terima kasih ๐Ÿ™‚

Advertisements

Visual Studio LightSwitch #2: Validasi dan Format Data

Siap untuk kejutan berikutnya? Mungkin ketika mencoba membuat project baru seperti pada Visual Studio LightSwitch #1: Membuat Project, Database, dan Simple Screen Anda masih belum puas dan muncul pertanyaan bagaimana dengan validasi data? Format Data? Sema itu akan dibahas disini.

Saya lanjutkan menggunakan project yang sama dengan sebelumnya. Kembali ke table Customers (Double klik / Klik kanan – Open), tambahkan atribut-atribut baru: Email, TanggalLahir, dan Saldo.

Coba jalankan (Run), lalu edit data yang sudah ada atau masukan data baru. Bisakah Anda mengisi field-field yang seharusnya berupa angka dengan huruf? Bisakah Anda mengisi tanggal lahir bukan dengan format tanggal? Tentu bisa! Karena kita belum memberikan validasi, tipe data pada table kita masih String semua.

Ok, stop dan kembali edit table Customer. Ketika Anda coba mengganti tipe data, Anda akan melihat tipe data yang tidak biasa. Silahkan ikuti saya, ubah tipe data:

  • Telepon, dari String menjadi Phone Number
  • Email, dari String menjadi Email Address
  • TanggalLahir, dari String menjadi Date
  • Saldo, dari String menjadi Money

Tanpa basa-basi, silahkan coba Run kembali, dan masukan data sembarang yang tidak sesuai dengan format seharusnya. Apakah masih bisa? ๐Ÿ™‚

Secara ajaib LightSwitch akan mem-validasi data yang Anda inputkan sesuai dengan tipe data yang dipilih. Dan bukan hanya ditinggalkan dengan validation issues seperti itu saja, untuk tipe data tertentu kita akan dibantu untuk mengisi dengan benar.

Contoh isian untuk tipe data Phone Number (dibantu dengan pengkategorian nomor telepon) dan Date (dibantu dengan date picker)

Bagaimana dengan tipe data Money? Kenapa currency-nya Dollar($), apakah bisa diganti ke Rupiah(Rp)? Jika tidak perlu dua digit decimal (.00) apakah bisa dihilangkan? Bisa!

Kembali ke Visual Studio LightSwitch, buka table Customer, klik pada baris Saldo (tipe data Money), buka Window Properties. Untuk mengubah format mata uang, cari Currency Code, ubah dari USD menjadi IDR. Untuk menghilangkan dua digit decimal, cari Decimal Places, ubah menjadi 0. Untuk property yang lain, silahkan explore sendiri ya.

Silahkan coba Run, lalu edit / add data. Bagaimana tipe data Money-nya? Sesuai keinginan Anda?

Ok, sekian saja bahasan mengenai Validasi dan Format Data pada LightSwitch 2011. Masih banyak sekali yang bisa di-explore, namun tidak memungkinkan saya tuliskan semua disini, jadi tidak cukup jika Anda berhenti disini, lanjutkan!

Bahasan berikutnya adalah tentang Interface dan Bahasa, sampai jumpa..

Terima Kasih ๐Ÿ™‚

Visual Studio LightSwitch #1: Membuat Project, Database, dan Simple Screen

Hola! Setelah membaca sedikit tentang Visual Studio LightSwitch di (Microsoft Visual Studio) LightSwitch? Apaย itu?, mari kita mulai untuk mencoba praktek langsung.

Kali ini saya akan membahas tentang bagaimana membuat project LightSwitch, membuat database untuk LightSwitch, dan membuat sebuah screen sederhana.

Pertama, pastikan Anda sudah meng-install Visual Studio LightSwitch 2011, jalankan aplikasi tersebut. Lalu pilih New Project dan gunakan template Lightswitch. Akan ada dua pilihan default, yaitu C# dan VB (dua teratas), sesuaikan dengan kebutuhan Anda. Dalam contoh ini, saya menggunakan C#.

Silahkan mengganti nama project, lokasi, dll jika perlu. Setelah itu tekan OK. Menunggu sebentar, akan muncul tampilan dimana Anda dipersilahkan untuk menentukan database yang mau digunakan. Apakah membuat database baru atau menggunakan database yang sudah ada. Pilih Create new table untuk database baru atau Attach to external Data Source untuk menghubungkan project ini dengan database yang sudah ada. Dalam contoh ini saya menggunakan database baru.

Setelah memilih Create new table, akan muncul sebuah tampilan yang table yang siap digunakan, silahkan buat table sesuai dengan kebutuhan Anda. Dalam contoh kali ini saya membuat sebuah table Customer dengan atribut berupa: Nama, Alamat, dan Telepon.

Setelah table Customer terbentuk. Sekarang kita tinggal membuat sebuah screen sebagai interface dari table Customer. Caranya dengan membuka Solution Explorer โ€“ Klik kanan pada folder Screens โ€“ Add Screen.

Akan muncul tampilan untuk memilih jenis screen yang mau kita gunakan. Dalam contoh ini saya gunakan List and Details Screen dan jangan lupa untuk mengubah Screen Data dari None menjadi table yang kita inginkan (Customers), lalu klik OK. Untuk jenis-jenis screen yang lain, silahkan dibaca atau dicoba sendiri ๐Ÿ™‚

Selesai membuat screen, kita akan dibawa ke tampilan berbentuk hirarki yang merupakan komponen dari screen yang baru saja kita buat. Tidak usah diutak-atik, silahkan Run (F5). Danโ€ฆ

Boom! Jadilah sebuah screen yang memiliki fungsi View, Add, Edit, Delete, Export data to Excel, Search, Filter & Sort dan Paging. Silahkan Anda coba untuk bermain dengan fungsi-fungsi yang ada. Setelah melakukan aktifitas, jangan lupa untuk menekan tombol Save di kiri atas untuk memastikan perubahan yang Anda lakukan tersimpan ke database.

Sekian untuk babak pertama. Bagaimana? Berapa menit yang Anda habiskan untuk membuat aplikasi seperti itu? Penasaran dengan fitur lainnya? Silahkan baca babak berikutnya yang akan membahas Validasi dan Format Data di Visual Studio LightSwitch #2: Validasi dan Format Data

Terima kasih ๐Ÿ™‚

(Microsoft Visual Studio) LightSwitch? Apa itu?

Microsoft Visual Studio LightSwitch adalah sebuah development tool yang menyederhanakan dan mempermudah proses pembuatan aplikasi data-driven baik untuk desktop maupun web application.

LightSwitch membantu kita dalam menghadapai kebutuhan aplikasi yang fleksibel dan terus menerus bertumbuh sedangkan resource, dalam hal ini waktu dan orang, tidak selalu tersedia. Karena LightSwitch dapat digunakan dengan mudah tanpa memerlukan kemampuan teknis (coding) yang tinggi namun bisa menghasilkan aplikasi dengan cepat dan user friendly.

Dalam LightSwitch coding mungkin saja tidak dilakukan. LightSwitch menyederhanakan berbagai proses development mulai dari design UI sampai deployment.

LightSwitch membantu developer untuk menghasilkan lebih banyak dengan sedikit menulis (coding) dengan jalan meng-handle hal-hal rutin seperti: design, pembuatan menu, fungsi CRUD (Create, Read, Update, Delete), fungsi export, validasi, dll.

LightSwitch mendukung dua bahasa, yaitu C# dan VB.NET. Ketika meng-install LightSwitch 2011, jika kita memiliiki Visual Studio 2010 Professional atau Ultimate, LightSwitch akan menjadi seperti project template pada Visual Studio, namun jika tidak LightSwitch akan terinstall sebagai aplikasi terpisah.

10 Keuntungan Utama LightSwitch 2011:

  • Membangun aplikasi bisnis layaknya dibuat oleh seorang profesional
  • Membangan aplikasi yang baik dengan lebih cepat
  • Menyederhanakan proses development
  • Membangun aplikasi yang fleksibel terhadap perubahan
  • Dapat menambahkan fitur yang user-friendly dengan cepat
  • Dapat dengan mudah menambahkan fitur authentication yang kuat
  • Membuat aplikasi custom sesuai dengan bisnis yang dijalankan
  • Dapat di-custom menggunakan extensions
  • LightSwitch 2011 merupakan pasangan dari Visual Studio
  • Development dan mekanisme update yang cepat

 

Selengkapnya: Visual Studio LightSwitch 2011 Datasheet

Home Page Visual Studio LightSwitch 2011: www.microsoft.com/lightswitch