Welcome To My Blog

Tempat Berbagi Ilmu Teknik Informatika. Semoga bermanfaat!

Rabu, 11 Desember 2013

tutorial application bar | windows phone | 6 Desember 2013

Assalamu'alaikum wr wb
Apa kabar teman-teman? semoga kabar kalian baik-baik saja. nah untuk tutorial kali ini saya akan membahas application bar. Apa itu application bar?  application bar adalah menu. kita akan buat menu seperti ini,
nah saya saat memberikan tutorial biasanya membuat button ini tidak rapi, nah untuk sekarang penggunaan buttom menggunakan ini, mengapa? karna saat membuat aplikasi device, kita harus meminimalisir pemborosan space. jadi menggunakan buttom yang kemarin saya jelaskan sangat tidak dianjurkan, kemarin itu sebagai simple saja. nah saat kita bisa menggunakan application bar, applikasi yang kita buat menjadi semakin menarik dan enak diliat. langkah pertama tentu saja kalian bikin dulu new project, beri nama "applicationBar"
lalu setelah itu kalian bikin new folder. caranya click application bar lalu click kanan akan muncul add, pilih menu itu dan ada pilihan new folder. nah folder itu beri nama "Images" lalu dari mana images icon buttom itu? dan ternyata saat kita instal microsoft visual studio 2010 akan secara default terinstal SDKnya. biasanya SDKnya itu ada di program files, untuk versi 64bit biasanya ada program files (x86) click folder itu lalu cari folder dengan nama "Microsoft SDKs" click folder itu lalu pilih lagi folder "windows phone" lalu pilih lagi folder "v7.1" lalu pilih lagi folder "icon" lalu pilih folder "dark", nah di folder itu ada image icon yang akan kita buat.
tambahkan gambar yang ada digambar itu. lalu yang akan kita gunakan yaitu yang gambar add, lalu favs.addto, favs.rest sama download.rest.
nah langkah selanjutnya, kalau di microsoft visual studio 2010 code bar ini telah disediakan pada bagian bawah koding, jadi tinggal kita hapus tanda commentnya.nah untuk microsoft visual studio 2012 code ini harus ditulis lagi "wayahna" :D
nah kalian tinggal edit2 lagi ada code ini
<!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton x:Name="addBT" IconUri="/Images/AppBar/appbar.add.rest.png" Text="Add" Click="addBT_Click" />
            <shell:ApplicationBarIconButton x:Name="addGenreBT" IconUri="/Images/AppBar/appbar.favs.addto.rest.png" Text="Add Genre" Click="addGenreBT_Click" />
            <shell:ApplicationBarIconButton x:Name="addSongBT" IconUri="/Images/AppBar/appbar.favs.rest.png" Text="Add Song" Click="addSongBT_Click" />
            <shell:ApplicationBarIconButton x:Name="downloadBT" IconUri="/Images/AppBar/appbar.download.rest.png" Text="Download" Click="downloadBT_Click" />
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem x:Name="menuItem1" Text="Add Name Artist" Click="menuItem1_Click" />
                <shell:ApplicationBarMenuItem x:Name="menuItem2" Text="Add Genre" Click="menuItem2_Click" />
                <shell:ApplicationBarMenuItem x:Name="menuItem3" Text="Add Song " Click="menuItem3_Click" />
                <shell:ApplicationBarMenuItem x:Name="menuItem4" Text="Add Favorit Song" Click="menuItem4_Click" />
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>

 oh iya lupa Ini adalah CATATAN PENTING!!!! nah kalian kan sudah menambahkan Image ke folder "Images" click semua image itu lalu pilih di propertis nanti ada tulisan Build Action nah kalian ganti yang asalnya "resource" menjadi "content" hal ini penting sekali
untuk " Click="downloadBT_Click" menunjukan link buttonnya, INGAT jangan di ketik ulang code itu, karna akan terjadi error. caranya double click di bagian Click="" nanti akan secara otomatis masuk ke link buttom tersebut. coba debug applicationnya, jika berhasil maka akan muncul seperti ini 

Dan untuk pengoprasian selanjutnya Aplication Bar ini sama saja dengan tombol Button hanya saja jika di sebuah aplicasi mobile tidak ada sebuah buttom yang berada di tengah layar melainkan di bawah layar… nah Aplication Bar ini bertujuan untuk mempercantik sebuah aplikasi dan juga untuk membuat simple sebuah aplikasi. Tetapi pada dasarnya ini adalah sebuah tombol button yang bisa membuat aksi,, bisa di coba kok… 
Dan jika ingin tahu cara membuat action sebuah  button bisa lihat dipostingan sebelumnya… terima kasih semoga postingan ini dapat membantu … 


Cuma ini yang bisa saya buat tutorial program yang saya buat dan hanya bisa menjalankan apa yang saya pahami dikampus saya, semoga bermanfaat bagi rekan2 semua untuk apalikasi yang saya buat.

Rabu, 04 Desember 2013

Tutorial membuat Image Control | Windows Phone | 29 november 2013

Assalamu'alaikum warahmatullahi wabarakatuh

Kita berjumpa lagi di tutorial windows phone, kali ini saya akan membahas tutorial yang sedikit "expert", apa maksud dari "expert"? maksudnya, pada tutorial kemarin2 biasanya saya membahas dasar-dasar untuk membuat aplikasi pada windows phone, nah untuk kali ini saya akan membuat aplikasi yang lebih menarik lagi, mengapa ini begitu menarik? karna pada aplikasi ini user diberikan interface-interface yang semakin membuat menarik user. okeh kita langsung aja buat new project.

1. Open aplikasi microsoft visual studio 2010 expert for windows phone
2. pilih new project, lalu kita pilih menu visual C# dan pada menu bagian kanan pilih juga windos phone aplication
3. beri nama project kita dengan nama"imageControll" atau untuk namanya bebas, suka suka kalian
4. mari mengoding riaaaaaaa


nah setelah kita buat, mari buat dulu skema aplikasinya dengan menambahkan beberapa element. aplikasi yang akan kita buat ini sebagai gambarannya mampu menampilkan gambar yang dipilih user, dan mampu menscroll layar, karna gambarnya cukup banyak. menarik bukan? yok mari ikuti tutorial ini dengan serius, kembali ke tujuan, maka tambahkan beberapa element ke dalam aplikasi tersebut diantaranya tambahkan element Image dan text block.

posisinya buat seperti gini, oh iya lupa sebelumnya kalian harus tambahkan image terlebih dahulu, caranya seperti ini 

penjelasannya klik pada nama projectnya, lalu klik kanan kemudian ada menu seperti diatas, dan pilih new folder. mengapa membuat new folder terlebih dahulu? karna kita akan menggunakan gambar yang banyak, untuk  memudahkan dan supaya terlihat rapi maka kita membuat new folder. beri nama folder tersebut dengan "Images" langkah selanjutnya
nah lalu klik pada folder images, klik kanan dan akan muncul menu seperti ini kemudian pilih Existing Item. nanti akan masuk dimana anda menyimpan gambar yang akan kita masukan, kalian masukan gambar apa saja, tapi anda masukan harus ada 10 gambar. nah setelah kalian tambahkan gambar, langkah selanjutnya tambahkan element lagi. tadikan anda telah menambahkan element image dan text block jangan lupa kedua element itu beri nama. saya memberi nama untuk Image "outputIMG" dan untuk text block "outputTB". langkah selanjutnya tambahkan element grid, nah grid ini untuk apa? grid ini untuk membuat seperti table, jadi untuk membuat table di windows phone itu kita memakai grid.
cara membuat colomn dan row nya ketikan koding ini

<Grid Height="450" HorizontalAlignment="Left" Margin="26,284,0,0" Name="grid1" VerticalAlignment="Top" Width="417">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="67*" />
                        <ColumnDefinition Width="150" />
                        <ColumnDefinition Width="65*" />
                        <ColumnDefinition Width="2*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="87" />
                        <RowDefinition Height="63" />
                        <RowDefinition Height="111" />
                        <RowDefinition Height="39" />
                        <RowDefinition Height="75" />
                        <RowDefinition Height="75" />
                    </Grid.RowDefinitions>

ini akan membuat table, copas aja kalau kalian belum mengerti. langkah selanjutnya kalian tambahkan element image di setiap colom dan rownya, total yang kalian masukan element imagenya itu ada 9. sebelumnya kalian beri nama itu element imagenya kalau saya memeberikan nama, mulai dari image 1 sampai image 9, tadikan kita memasukan 10 image, nah satu lagi untuk apa? satu lagi itu untuk element "outputIMG" sebagai tampilan awalnya saja
tampilan yang kalian buat harus sama kaya gini yah

kalian pasti bertanya, itu mengapa gridnya keluar dari emulatornya? nah menariknya pada aplikasi ini kita akan menggunakan Scrollviewer, jadi user bisa menggeser grid tersebut ke atas. sekarang cara menambahkan image ke dalam element image, 
pada properties image kalian pilih "Source" nanti klik pada bagian kanan dari "Source" nanti akan muncul seperti ini, kalian pilih imagenya
ini koding yang sangat sensitif, karna beberapa kali juga saya gagal, karna koding ini. saya sarankan anda mengikuti koding ini yah, koding ini berupa scrollviewer yang bisa di scroll oleh user

 <ScrollViewer Margin="5,0,1,-146" Height="787" VerticalAlignment="Bottom">
                <Grid Height="450" HorizontalAlignment="Left" Margin="26,284,0,0" Name="grid1" VerticalAlignment="Top" Width="417">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="67*" />
                        <ColumnDefinition Width="150" />
                        <ColumnDefinition Width="65*" />
                        <ColumnDefinition Width="2*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="87" />
                        <RowDefinition Height="63" />
                        <RowDefinition Height="111" />
                        <RowDefinition Height="39" />
                        <RowDefinition Height="75" />
                        <RowDefinition Height="75" />
                    </Grid.RowDefinitions>
<Image Height="150" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/2.jpg" Tap="Image1" ImageFailed="image1_ImageFailed" Grid.ColumnSpan="2" Grid.RowSpan="2" />
<Image Grid.Column="1" Height="150" Name="image2" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/3.png" Tap="Image2" ImageFailed="image2_ImageFailed" Grid.RowSpan="2" />
<Image Grid.Column="2" Height="150" HorizontalAlignment="Left" Name="image3" VerticalAlignment="Top" Width="129" Source="/ImageControl2;component/Images/4.jpg" Tap="Image3" ImageFailed="image3_ImageFailed" Stretch="Fill" Grid.RowSpan="2" />
<Image Grid.Row="2" Height="150" Name="image4" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/5.jpg" Tap="Image4" ImageFailed="image4_ImageFailed" Margin="0,0,134,0" Grid.RowSpan="2" Grid.ColumnSpan="2" />
<Image Grid.Column="1" Grid.Row="2" Height="150" HorizontalAlignment="Left" Name="image5" Stretch="Fill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/6.jpg" Tap="Image5" ImageFailed="image5_ImageFailed" Grid.RowSpan="2" />
<Image Grid.Column="2" Grid.Row="2" Height="150" HorizontalAlignment="Left" Name="image6" Stretch="Fill" VerticalAlignment="Top" Width="129" Source="/ImageControl2;component/Images/7.jpg" Tap="Image6" Grid.RowSpan="2" /
<Image Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image7" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/8.jpg" Tap="Image7" Grid.ColumnSpan="2" Grid.RowSpan="2" />
 <Image Grid.Column="1" Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image8" Stretch="UniformToFill" VerticalAlignment="Top" Width="150" Source="/ImageControl2;component/Images/10.jpg" Tap="Image8" Grid.RowSpan="2" />
 <Image Grid.Column="2" Grid.Row="4" Height="150" HorizontalAlignment="Left" Name="image9" Stretch="Fill" VerticalAlignment="Top" Width="126" Source="/ImageControl2;component/Images/9.jpg" Tap="Image9" Grid.RowSpan="2" />
<TextBlock Grid.ColumnSpan="3" Height="30" HorizontalAlignment="Left" Margin="101,-44,0,0" Name="outputTB" Text="" VerticalAlignment="Top" Width="202" />
    </Grid>
            </ScrollViewer>

mohon maaf saya tidak bisa menjelaskan koding ini satu persatu, yang jelas kita telah menggunakan scroll viewer. untuk yang berwarna biru perlu kalian perhatikan, itu merupakan link yang telah kita masukan di "source" image. jika koding ini terjadi error maka kalian perhatikan  koding ini,
lalu langkah selanjutnya pada image yang berada di grid klik dan kemudian ke bagian propertis, kalian pilih event, dan pilih tap
ini berguna agar saat image yg user pilih, akan keluar di bagian "outputIMG" dan "outputTB" istilahnya element image ini akan berguna seperti button.
lalu kalian masuk ke MainPage.xaml.cs
masukan namespace ini, karna jika tidak system tidak akan bisa membaca Image.
kalian ketikan koding ini yah, ingat link gambarnya harus sesuai dengan yng telah kita masukan. ini baru sampai Image4, untuk yang lainnya sama seperti ini tinggal copas aja. dan jgn lupa linknya jangan sampai tertukar. akhirnya membuat aplikasi ini telah selesai. bagaimana jadinya? nih check this out!!

selamat mencoba dan berkreasi :D