Cerita Kuliah | Tanggal 20 - 12 - 2013

Assalamu’alaikum ..
Selamat datang di pertemuan ke 13 ..
Pada kesempatan kali ini kita akan belajar Input Scope. Input Scope itu adalah format keyboard yang akan muncul ketika kita memilih atau mengetikkan sesuatu di keyboard.
Input scope adalah keyboard atau format keyboard yang akan muncul ketika kita memilih atau ingin mengetikkan sesuatu pada sebuah textbox. Secara default, ketika kita memfokuskan pointer pada textbox, maka akan tampil keyboard dalam bentuk qwerty secara default. Tetapi, sebenarnya windows phone sendiri menyediakan fungsi fungsi untuk menampilkan keyboard sesuai dengan yang kita inginkan. Contoh, kita ingin langsung menampilkan keyboard dalam format angka, maka keyboard tersebut akan langsung menampilkan input scope dalam bentuk angka. Dan begitu juga dengan textbox untuk menginputkan email, yang tentunya terdapat tombol @ dan tombol .com secara otomatis pada keyboard. Itulah yang di maksud dengan input scope.
Jadi, saat kita membuat suatu aplikasi, kita dapat menentukan input scope seperti apa yang akan kita gunakan. Jangan sampai salah, saat kita membuat textbox dengan input nama, tetapi yang tampil malah sebuah input scope number, tentunya aplikasi tersebut tidak akan sesuai. Dan tentu juga dengan input scope ini, akan meningkatkan user experience. Seperti itulah sedikit penjelasan mengenai input scope. Dan sekarang langsung saja kita praktekkan cara menggunakan input scope tersebut .

Misalnya klik di “Name” secara default keyboard querty itu adalah seperti gambar yang ada di bawah ini :


Tetapi Windows Phone ini juga sudah menyediakan fungsi-fungsi untuk Input Scope yang kita inginkan.
Berikutnya kita coba klik pada “Email”, keyboard pada email agak berbeda, perhatikan gambar, ada “@” dan “.com”.


Kemudian klik pada “Phone” otomatis langsung number: 1 2 3. Jadi dengan Input Scope ini akan meningkat user experiencenya.
Langsung ke Visual Studionya. Drag & Drop 3 textblock dan textbox seperti template contoh yang ada di gambar.



Dan ketikkan contoh coding sesuai pada gambar. Pada textbox Email saya beri tanda dengan lingkaran warna kuning dan pada textbox Phone dengan lingkaran warna biru.


Selanjutnya silahkan jalankan emulatornya.


Cukup sekian laporan postingan pertemuan kali ini ..
Semoga postingan ini bermanfaat dan semoga berhasil~
Terima kasih~
Wassalamu’alaikum wr.wb

Cerita Kuliah | Tanggal 06 - 11 - 2013

Assalamu’alaikum Wr.Wb

Pada kali ini saya akan mendiskusikan pertemuan ke-12 tentang pembahasan video tutorial Application Bar. Apa itu AppBar????

Application bar merupakan sistem kontrol yang dapat kita gunakan untuk membangun sebuah toolbar pada aplikasi windows phone. Terdapat dua jenis application bar yang dapat kita gunakan, yaitu berbasis icon button dan berbasis text menu. Application bar dapat kita definisikan untuk satu aplikasi (global) atau hanya pada halaman tertentu saja (lokal).

A. Merujuk pada best practice yang ditulis di msdn, ada hal-hal yang harus kita perhatikan, yaitu :

- Jika suatu task dapat direpresentasikan dengan jelas melalui icon, gunakan icon button, jika tidak, gunakan text menu
- Gunakan app bar untuk membuat sistem menu agar konsisten dengan user experience seluruh aplikasi pada device
- Opacity yang sebaiknya dipergunakan adalah 0 (akan tidak tampilkan, dan content page akan memenuhi screen layar), 0.5 dan 1 (akan tampak dilayar)

Untuk icon button hal-hal yang sebaiknya diperhatikan adalah :
- Image yang digunakan berwarna putih pada foreground dan transparent menggunakan alpha channel
- Tidak perlu menambahkan lingkaran pada border image, hal itu sudah otomatis
- Ukuran image yang digunakan 48 x 48 dengan icon utama berukuran 26 x 26 dan diletakkan di tengah image
- Jangan gunakan icon button untuk navigasi back, sudah disediakan pada hardware
- Gunakan icon button, untuk task yang utama pada aplikasi
- Contoh icon dapat diperoleh disini : Microsoft Download Center
- hindari lebih dari 5 icon button

Dan untuk text menu perhatikan hal-hal sebagai berikut :
- hindari menggunakan lebih dari 5 text menu
- usahakan menggunakan text antara 14- 20 karakter
gunakan lowercase

Baik,untuk memulai latihan persiapkan tools sebagai berikut :
- Visual Studio 2010 ( saya menggunakan Express for Windows Phone)
- Windows Phone 7 emulator
- Silverlight 4



Lanjut pembahasan tentang Application Bar, Application Bar itu merupakan sebuah bar atau tempat untuk menyimpan sebuah button atau item. Untuk lebih jelasnya kita akan langsung pada project, Sama seperti yang sebelum-sebelumnya, saat kita akan membuka atau mengoprasikan aplikasi windows phone. Kita akan mengikuti langkah-langkah untuk membuat file baru.
Sebelum kita mengisika item-item dan codding-nya, terlebih dahulu ikuti langkah-langkah berikut :
1.       Buka file C pada laptop/PC anda
2.       Plih program file (untuk windows phone 2010 (32 Bit), tapi kalau teman –teman memakai          
          64 Bit, maka yang anda pilih program file x86).
3.       Plih Microsoft SDKs
4.       Pilih Windows Phone
5.       Dan pilih yang v7.1
6.       Pilih Icon
7.       Pilih Dark
8.       Pilih icon yang teman-teman butuhkan.
Tapi dalam tutorial saya kali ini, saya akan mencontoh kan 4 icon, yaitu icon appbar.add.rest, appbar.cancel.rest, appbar.check.rest. dan appbar.download.rest.

Tapi sebelum kita akan meng-eksport pada project, terlebih dahulu kita kan membuat new folder pada project-nya. Mungkin teman-teman sudah pada tau cara membuat new folder-nya tapi untuk lebih jelasnya saya akan mengulang kembali melalui gambar dibawah ini.




Jangan lupa nama foldernya yaitu “Images”. Setelah itu kita akan membuat folder baru lagi pada folder Images ini. Caranya sama dengan diatas, tapi bedanya apabila tadi kita mengklik kanan pada folder ApplicationBar2, nah sekarang  kita akan  mengklik kanan pada folder Images-nya. Jangan lupa juga kita akan memberi  nama pada folder ke2 ini dengan nama “AppBar. Guna dari folder AppBar ini yaitu untuk mengorganisir images yang khusus untuk aplikasi bar saja.  Setelah itu kita akan mengcopy icon-icon yang telah kita pilih sebelumnya dan memindahkan ke dalam folder AppBar.
Caranya yaitu :
1.       Kembali pada folder icon sebelumnya.
2.       Pilih icon yang anda inginkan (tadi saya telah memilih icon Add, Cancel, Check dan Download).
3.       Klik kanan pada icon yang telah diblok dan copy
4.       Masuk ke file project
5.       Klik kanan pada folder AppBar dan paste.
Sekarang kita akan mengatur Build Ection-nya, apabila pada project teman-teman build actionnya masih dalam kondisi “Resource”, maka kita akan mengubahnya menjadi “Content”. Caranya yaitu :
1.       Blok ke empat  gambar icon pada folder AppBar.
2.       Lihat pada menu properties dan search “Build Ection”
3.       Klik pada kotak build ectionnya dan pilih “Content”.

Sekarang kita akan memasang icon-icon itu pada bar-nya. Pada aplikasi Microsoft Visual windows phone 2010,  menu bar-nya telah disiapkan, namun codding-nya masih dalam bentuk coment.





Tapi belum cukup sampai disini project yang saya buat. Sekarang saya akan membuat icon button tersebut dapat meng-link atau berfungsi saat saya mengkliknya.
Langkah pertama yaitu , saya akan membuat folder baru lagi pada file ApplicationBar2 dan nama foledernya yaitu “Views” setelah itu saya akan membuat item baru pada folder Views tersebut, caranya lihat pada gambar dibawah ini

Maka akan muncul file baru => add.
Buat sebuah halaman lagi, beri nama firstpage.xaml
Kemudian klik pada button yang akan diberi aksi, masukkan coding berikut :

NavigationService.Navigate(newUri(String.Format("/firstpage.xaml"), UriKind.Relative));

Cerita Kuliah | Tanggal 29 - 11 - 2013

Assalamualaikum Wr Wb...................

Pada kali ini saya akan berbagi ilmu windows phone seperti biasa, kali ini kita akan mempelajari tentang Aplikasi Tap tentang Image Control. Aplikasi ini digunakan untuk mengontrol gambar dengan scroll viewer dan menampilkan gambar tersebut apabila di klik.

untuk lebih jelasnya akan dapat dilihat tampilannya dibawah ini :

gambar tampilan Image dan Textblock

ini adalah gambar galeri yang akan menggunakan scroll viewer

solution explorer beserta data gambar 

untuk lebih jelas scriptnya bisa dicopy dibawah ini :

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using System.Windows.Media.Imaging;

namespace aplikasitap

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

        private void image1_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/banner-image-plane.png", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " Plane Banner ";

        }

        private void image2_Tap(object sender, GestureEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/8619591-vector-illustration-of-a-plane-silhouette-with-world-map-on-background-and-banner-for-text.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " Vector Illustrator ";

        }

        private void image7(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/fgfgfg.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " Skyrim ";

        }

        private void image6(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/fighter-planes-facebook-timeline-cover.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " Fighter Plane ";

        }

        private void image3(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/69158-Royalty-Free-RF-Clipart-Illustration-Of-A-Pilot-Flying-A-Simple-Plane-On-A-White-Background.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " Royal Plane ";

        }

        private void image8(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/t-50revisi.png", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = " T - 50";

        }

        private void image9(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/FalloutEventBanner1.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = "Fallout";

        }

        private void image5(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/37602.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = "Illustrator";

        }

        private void image4(object sender, ExceptionRoutedEventArgs e)

        {

            BitmapImage newimage = new BitmapImage(new Uri("images/3308300-237381-3d-model-of-airplane-isolated-on-white-background.jpg", UriKind.Relative));

            view.Source = newimage;

            view_text.Text = "Illustrator";

        }

    }

}

setelah script diatas diketik maka tampilannya seperti dibawah ini :

maksudnya apabila kita drag galeri gambar tersebut maka akan secara otomatis ter-scroll

ini adalah gambar element-element yang digunakan

ini adalah script didalam apliasi tersebut untuk membuat link-link dapat dikoneksikan melalui beberapa script dibawah ini :

<phone:PhoneApplicationPagex:Class="aplikasitap.MainPage"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"xmlns:d="http://schemas.microsoft.com/expression/blend/2008"xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"FontFamily="{StaticResource PhoneFontFamilyNormal}"FontSize="{StaticResource PhoneFontSizeNormal}"Foreground="{StaticResource PhoneForegroundBrush}"SupportedOrientations="Portrait" Orientation="Portrait"shell:SystemTray.IsVisible="True">




<!--LayoutRoot is the root grid where all page content is placed--><Grid x:Name="LayoutRoot" Background="Transparent"><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition Height="*"/></Grid.RowDefinitions>


<!--TitlePanel contains the name of the application and page title--><StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"><TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/><TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/><ScrollViewer><Grid Height="284" Name="grid1" Width="417" Margin="36,296,27,27" Grid.Row="1"><Grid.ColumnDefinitions><ColumnDefinition Width="134" /><ColumnDefinition Width="149" /><ColumnDefinition Width="134*" /></Grid.ColumnDefinitions><Grid.RowDefinitions><RowDefinition Height="99" /><RowDefinition Height="99" /><RowDefinition Height="86*" /></Grid.RowDefinitions><Image Height="99" Name="image1" Source="/aplikasitap;component/images/banner-image-plane.png" Stretch="Fill" Tap="image1_Tap" VerticalAlignment="Top" /><Image Grid.Column="1" Height="99" HorizontalAlignment="Left" Name="image2" Source="/aplikasitap;component/images/8619591-vector-illustration-of-a-plane-silhouette-with-world-map-on-background-and-banner-for-text.jpg" Stretch="Fill" Tap="image2_Tap" VerticalAlignment="Top" Width="149" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/69158-Royalty-Free-RF-Clipart-Illustration-Of-A-Pilot-Flying-A-Simple-Plane-On-A-White-Background.jpg" Stretch="Fill" VerticalAlignment="Top" Width="149" Grid.Column="1" Grid.Row="1" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/3308300-237381-3d-model-of-airplane-isolated-on-white-background.jpg" Stretch="Fill" VerticalAlignment="Top" Width="149" Grid.Column="2" Grid.Row="2" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/37602.jpg" Stretch="Fill" VerticalAlignment="Top" Width="149" Grid.Column="1" Grid.Row="2" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/fighter-planes-facebook-timeline-cover.jpg" Stretch="Fill" VerticalAlignment="Top" Grid.Row="1" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/fgfgfg.jpg" Stretch="Fill" VerticalAlignment="Top" Grid.Column="2" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/t-50revisi.png" Stretch="Fill" VerticalAlignment="Top" Grid.Column="2" Grid.Row="1" /><Image Height="99" HorizontalAlignment="Left" Source="/aplikasitap;component/images/FalloutEventBanner1.jpg" Stretch="Fill" VerticalAlignment="Top" Grid.Row="2" /></Grid></ScrollViewer></StackPanel><!--ContentPanel - place additional content here-->
<Image Canvas.Left="24" Canvas.Top="29" Height="186" Name="view" Stretch="UniformToFill" Width="200" Margin="140,166,140,416" /><TextBlock Canvas.Left="250" Canvas.Top="91" Height="29" Name="view_text" Text="" Width="148" /></Grid></phone:PhoneApplicationPage>