Archive for 2013
TextBlock pada aplikasi Windows Phone umumnya atau secara default hanya menampilkan string dalam satu baris baik kata maupun kalimat, akan tetapi adakalanya seseorang atau bahkan kita mempunyai kebutuhan menampilkan TextBlock lebih dari satu baris serta menggunakan fitur ScrollBox atau ListBox.
Tambahkan source kode Heigth atau tinggi dari Grid melebihi tinggi dari TextBlock yang dimaksud, yang akan ditambahkan fitur ListBox.
Maka TextBlock tersebut sudah menggunakan fitur ListBox.
Pada penulisan ini saya akan menjelaskan mengenai pembuatan TextBlock yang menggunakan fitur ScrollBox atau ListBox.
Langsung saja.
Langkah pertama tentunya tambahkan tool TextBlock yang terdapat pada ToolBox.
Aktifkan TextBlock tersebut, kemudian perbesar ukurannya baik panjang maupun tingginya, atur Properties TextWrapping menjadi Warp. Seperti yang telah dijelaskan pada Pembuatan TextBlock lebih dari satu baris.
Kemudian tambahkan source kode berikut yaitu <ListBox> <Grid> .... (TextBlock) </Grid> </ListBox> seperti dibawah ini:
Tambahkan source kode Heigth atau tinggi dari Grid melebihi tinggi dari TextBlock yang dimaksud, yang akan ditambahkan fitur ListBox.
Maka TextBlock tersebut sudah menggunakan fitur ListBox.
Soft Input Panel atau yang biasa kita kenal sebagai Virtual Keyboard, pada Windows Phone memiliki beberapa jenis sesuai dengan kebutuhan penginputan yang diperlukan pada TextBox untuk memudahkan pengguna. Beberapa jenis Soft Input Panel yang digunakan adalah jenis TextBox Chat, Number, Url, EmailUserName, dan LogOnName. Pengubah layout SIP dilakukan dengan menentukan nilai property InputScope pada TextBox, baik secara programatikal maupun deklaratif.
Untuk project kita kali ini, saya akan mencoba untuk menampilkan jenis Soft Input TextBox Number yang digunakan pada aplikasi Microsoft Visual Studio. Berikut langkah pembuatannya:
Buat project aplikasi Microsoft Visual Studio, kemudian tambahkan tool TextBox, perhatikan kode xaml dari project tersebut dibawah:
Rubah atau tambahkan kode xaml tersebut diatas menjadi:
Sehingga hasil Run nya adalah sebagai berikut:
Ketika ingin mengubah jenis Soft Input Panel ke format yang lain, yaitu diantaranya jenis TextBox Chat, Number, Url, dan LogOnName. Maka tinggal mengubah pada string berikut yang diberi tanda:
TextBlock pada aplikasi Windows Phone umumnya atau secara default hanya menampilkan string dalam satu baris baik kata maupun kalimat, akan tetapi adakalanya seseorang atau bahkan kita mempunyai kebutuhan menampilkan TextBlock lebih dari satu baris, apakah mungkin setiap barisnya kita membuat kembali TaxtBox baru? Tentu tidak, akan memakan waktu cukup panjang dalam hal melakukan proses tersebut.
Pada penulisan ini saya akan menjelaskan mengenai pembuatan TextBlock yang memungkinkan menampilkan string yang lebih dari satu baris.
Langsung saja.
Langkah pertama tentunya tambahkan tool TextBlock yang terdapat pada ToolBox.
Aktifkan TextBlock tersebut, kemudian perbesar ukurannya baik panjang maupun tingginya, atur Properties TextWrapping menjadi Warp. Seperti yang tertera pada gambar di samping.
TextBlock siap menampilkan string lebih dari satu baris.
fitur ini memungkinkan kita untuk mendesain aplikasi yang tampilannya melebihi ukuran dari layar smartphone itu sendiri.
Pivot memungkinkan kita untuk memvisualisasikan data-data yang ada di smartphone, sekaligus memfilter data-data apa yang kita akan ditampilkan di layar.
Setelah sebelumnya saya menjelaskan mengenai pembuatan pembuatan project Navigasi Antarhalaman, maka kali ini saya akan lanjutkan mengenai Pengiriman Nilai Variabel Antarhalaman.
Langsung saja.
Saya analogikan kita sudah membuat suatu project yang berisi 2 halaman yaitu halaman 1 dan halaman 2 pada Microsoft Visual Studio seperti yang dijelaskan pada Navigasi Antarhalaman.
Siapkan terlebih dahulu komponen yang nantinya digunakan sebagai penampung suatu nilai, misalnya menggunakan komponen TextBox pada project halaman 1 yang sekaligus Main Page yaitu sebagai halaman pengirim.
Pada file project halaman 1, double klik button, kemudian pada event handler Button, ketikan kode berikut:
Di halaman 2, saya bermaksud menjadikan string yang dikirimkan halaman 1 sebagai page title halaman 2. Berikut kodenya:
Jalankan project tersebut dan lihat hasilnya. ketikan string sembarang pada textbox di halaman 1, lalu klik Button. Makan page tilte pada halaman 2 akan berubah sesuai string yang diinputkan pada textbox di halaman 1.
Setelah sebelumnya saya menjelaskan mengenai pembuatan serta pengenalan project aplikasi pada Microsoft Visual Studio, maka kali ini saya akan lanjutkan mengenai Navigasi Antarhalaman.
Langsung saja.
Saya analogikan kita sudah membuat suatu project pada Microsoft Visual Studio seperti yang dijelaskan pada Membuat Project Windows Phone.
Kemudian tambahkan sebuah halaman dengan cara, pada Solution Explorer, aktifkan project yang akan ditambah itemnya, klik kanan, pilih Add, kemudian New Item.
Pilih salah satu sesuai kebutuhan, misalnya memilih Windows Phone Portrait Page, beri nama sesuai kebutuhan. Misalnya saya memberi nama PageDua.xaml. Lalu pilih Add.
Untuk membedakan Navigasi Antarhalaman ini, ubah page title pada file PageDua.xaml yaitu dengan cara merubah properties text nya sesuai kebutuhan, misalnya menjadi "Halaman 2'. Atau dapat juga dengan mengedit melalui code .xaml nya lansung yang terdapat di sebelah kanan.
Buka kembali halaman MainPage.xaml.cs, ubah kode pada event handler klik Button menjadi seperti berikut:
Navigate adalah fungsi statis dari NavigationService yang berguna untuk navigasi ke halaman yang dituju dengan parameter utama URI yang dituju.
Pada postingan kali ini saya akan menjelaskan mengenai pembuatan / pengenalan awal aplikasi windows phone, khususnya Windows Phone 7. Dimana fungsi dari penulisan ini yaitu sebagai pembelajaran awal mengenai pembuatan project aplikasi Windows Phone serta mencoba menjalankannya pada emulator.
Langsung saja, saya akan membuat satu projek yang menampilkan nama pengguna yang diinputkan oleh user.
Setelah pembuatan project selesai maka muncul tampilan antarmuka phone sehingga memudahkan kita melihat desain yang kita buat ketika proses pengembangan tanpa harus menjalankan project melalui emulator terlebih dulu.
Terdapat beberapa komponen yang terdapat pada Microsoft Visual Studio ini yang tentunya harus kita ketahui fungsi nya demi kelancaran dalam pembuatan suatu project. Diantaranya:
Kemudian selanjutnya saya akan membuat / menambahkan sebuah TextBox dan sebuah Button dari komponen ToolBox. Sehingga hasilnya sebagai berikut:
Double klik pada button, maka akan menampilkan code-behind dari halaman yang sedang aktif. Tambahkan fungsi untuk mengubah Title menjadi "Hello +", nama User yang diinputkan melalui Texbox yang tersedia.
Ketikan kode berikut ini di bagian event handler Button tersebut:
Untuk mengosongkan atau mengubah properties dari setiap konponen yang sigunakan pada suatu project misalnya TextBox dapat langsung mengeditnya melalui sintak langsung maupun properties, misalnya saya mengosongkan Text dari TextBox dengan cara menghapus karakter yang di blok seperti pada gambar dibawah ini:
Untuk melakukan deployment dan menjalankan (Run) project aplikasi pada Microsoft Visual Studio, pilih "Start Debugging", atau bisa juga dengan menekan F5 pada keyboard.
Jika kita melakukan deployment untuk pertama kali maka prosesnya akan cukup memakan waktu, namun tudak untuk yang kedua dan seterusnya selama emulator tidak kita non-aktifkan.
Ketika emulator berhasil dijalankan maka ketikan nama sembarang di TextBox dan tekan Button. Page title akan berubah sesuai dengan teks yang terdapat pada textbox serta tambahan yang diinisialisasi pada code-behind yang sebelumnya telah dibuat.
Dalam membangun aplikasi Windows Phone, ada dua platform yang dapat dengan bebas kita gunakan, yaitu Silverlight dan XNA. Pada template yang telah disediakan untuk pengembangan aplikasi menggunakan platform Silverlight, tersedia beberapa tipe projek yang bisa kita gunakan sesuai kebutuhan, diantaranya Windows Phone Application (penyedia halaman kosong tanpa kontrol), Windows Phone List Application (penyedia skenario aplikasi master-detail data), Windows Phone Panorama Application (penyedia skenario menggunakan navigasi panorama pada aplikasi), Windows Phone Pivot Application (penyedia skenario menggunakan navigasi pivot pada aplikasi), Windows Phone Class Library (pembangun komponen yang dapat digunakan kembali di beberapa projek yang lain).
App.xaml / App.xaml.cs
Entry point dari aplikasi yang akan menginisialisasi resource dan tampilan dari aplikasi.
MainPage.xaml / MainPage.xaml.cs
Mendefinisikan sebuah halaman dengan antarmuka pada aplikasi.
ApplicationIcon.png
File Gambar yang akan menjadi icon pada list aplikasi.
Background.png
File gambar yang akan menjadi background aplikasi.
SplashScreenImage.jpg
File Gambar yang akan ditampilkan pertama kali ketika aplikasi dijalankan.
Properties\AppManifest.xml
File manifest untuk keperluan pembangkitan paket aplikasi
Properties\AssemblyInfo.cs
File assembly yang mengandung informasi nama dan versi metadata yang akan diletakan pada assembly yang dihasilkan.
Properties\WMAppManifest.xml
File manifest yang mengandung secara spesifik metada terkait aplikasi Windows Phone yang spesifik mengandung fitur-fitur pada Silverlight untuk Windows Phone.
Langsung saja, berikut merupakan cara membuat suatu objek melalui jalur Path atau gerak animasi yang ditentukan oleh pembuat baik jalur lurus maupun berliku:
Langkah pertama yaitu pembuatan file FLA nya (.fla). kita dapat memilih ActionScript 2.0 dan ActionScript 3.0. Untuk kali ini saya gunakan ActionScript 2.0.
Kemudian, untuk mengatur ukuran Layer. Aktifkan layer yang akan diatur, pilih Properties, pada size pilih button Edit. Kemudian edit Dimensions nya. misalnya saya mengatur 550 px pada width dan 400 px pada height yang memang saya akan memasukan gambar pada ukuran tersebut. Lalu Ok.
Untuk menambahkan gambar, pilih file, pilih Import, pilih Inport To Stage...
Untuk merapihkan atau mensejajarkan antara gambar dengan layernya, pilih Properties kemudian atur PROPERTIES AND SIZE, rubah menjadi 0 pada x dan y.
Kemudian klik new layer untuk membuat layer baru. Kemudian rename layer1 misalnya menjadi "Peta", dan layer2 misalnya menjadi Jalur. Perlu diperhatikan bahwa peletakan layer harus sesuai kebutuhan, layer paling atas akan berada pada layer paling depan, begitu juga seterusnya.
Kemudian untuk membuat jalurnya, klik kanan pada layer "Jalur", pilih Add Classic Motion Motion Guide.
Aktifkan Guide. Kemudian buat Jalurnya menggunakan Pen Tool.
Kemudian pada Frame 100, klik kanan, pilih Insert KeyFrame.
Kemudian buat objek yang akan mengikuti jalur yang telah dibuat. Aktifkan layer "Jalur". Kemudian misalnya saya membuat objek lingkaran.
Lakukan hal yang sama pada layer "Jalur" ini. Pada frame 100, klik kanan, pilih Insert Keyframe. Pada frame 1, atur objek pada frame 1 sebagai awal serta frame 100 sebagai akhir. Klik kanan pada frame, kemudian pilih Add Classic Tween.
