navigation page

Tanggal  22 November 2013

Pada kesempatan kali ini kita akan mempelajari mengenai navigation between page pada windows Phone,atau dalam bahasa indonesia nya berpindah halaman.Dari page 1 berpindah ke page 2,serta dapat pula mengirimkan data atau informasi dari page 1 ke page 2.

Jadi bisa di bilang navigation page ini selain dapat berpindah halaman, juga dapat menerima dan mengirim informasi dari page 1 ke page yang lain nya.Baik kita mulai saja pembelajaran mengenai  navigation between page.

Seperti biasa buka aplikasi microsoft windows phone 2010 lau pilih option C# pada desktop di kiri lalu lihat desktop yang tengah dan pilih windows phone application setelah itu cari create directory from solution dan checklist lalu tunggu beberapa saat aplikasi akan meloading template yang dipilih. Jangan lupa memberi nama pada project yang akan digunakan untuk saat ini saya akan memberi navigationpage. Setelah itu kita cari properties dan solution explorer.

Setelah project terbuka terlebih dahulu kita membuat page yang kedua untuk berpindah  halaman,nah biar lebih memudahkan kita satu folderkan semua page yang akan kita gunakan pada project kali ini,cara membuat folder baru ialah :

1.       Sorot nama project kita pada solution explorer

2.       Kemudian klik kanan dan pilih add folder

3.       Setelah itu beri nama folder “views”,seperti pada gambar di bawah ini

Setelah membuat folder baru kita membuat page baru di project kita dengan cara

1.       Sorot folder “views ” pada solution explorer

2.       Kemudian klik kanan dan pilih add item

3.       Beri nama page yang kedua dengan “second page” dan page 3 dengan “page3” seperti di bawah ini

Nah setelah selesai baru lah kita mulai membuat atau mendesain project pada page 1 agar dapat berpindah halaman dan mengirim nilai atau parameter kepada page 2,

Seting page 1 seperti pada gambar di bawah ini

 

 

Textblock yang kita gunakan untuk menerima nilai dari page yang lain,dan hyperlinkbutton kita gunakan untuk berpindah halaman,

Agar kita bisa mengirim nilain dan berpindah halaman ke page 2 kita harus mengatur nilai apa yang akan di kirim dan akan di kirm atau berpindah halaman kemana pada propertis “navigateUri’

Dengan syntax tersebut kita akan mengirim parameter dan berpindah halaman ke page 2.

Setelah kita selesai dengan page 1,sekarang kita desain project di page 2 gseperti yang di bawah ini

 

Agar page 2 dapet menerima nilai dari page 1,kita buka page2 yang “.XAML.cs”,kemudian syntax di bawah ini

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

        {

            string nama = "";

            if (NavigationContext.QueryString.TryGetValue("nama", out nama))

            {

                namaTB.Text = nama;

            }

            string umur = "";

            if (NavigationContext.QueryString.TryGetValue("umur", out umur))

            {

                umurTB.Text = umur;

            }

 

Setelah di page 2 kita mendesai seperti diatas maka di run kemudian pada page 1 klia langsung klik page 2 saja supaya nanti hasil nya akan seperti ini

                

 

 

Itu lah contoh hasil perpindahan halaman dan pengiriman nilai nama dan umur dari page 1 ke page 2.

Nah sekarang kita akan mengirim nilai dari page 2 ke page 1,

Kita desai dlu di page 2 seperti di page 1 tadi kita atur navigateUri pada “hyperlinkbutton” yang ada di page 2

Setelah kita atur di project 2 seperti yang di atas tadi,kita masukan syntax di page 1 agar nilai yang akan di kirim dari page 2 bisa di terima di page 1.

Di page 1 kita masukan syntax pada mainpage.xaml.cs nya seperti di bawah ini

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

        {

            string jk = "";

            if (NavigationContext.QueryString.TryGetValue("jk", out jk))

            {

                jkTB.Text = jk;

            }

            string nickname = "";

            if (NavigationContext.QueryString.TryGetValue("nickname", out nickname))

            {

                nicknameTB.Text = nickname;

            }

 

 

Setelah itu di atur jalankan page 2 kemudian klik main page,maka hasil nya akan seperti di bawah ini :

 

 

 Hasil di atas ialah page 2 mengirim nilai nama panggilan dan jenik kelamin k page 1,

Begitulah cara berpindah halaman dan mengirim nilai ke page yang lain,silahkan coba di rumah dan semoga berhasil ya :-)

UTS di Depan Mata

Tanggal 15 – 11 – 2013

UTS (ujian tengah semsester)

Pada hari ini kita akan menghadapi ujian tengah semsester tentang Advance Visual programming didalam aplikasi windows phone. Kita dipersilahkan membuat sebuah aplikasi yang didalamnya terdapat fitur-fitur tentang semua materi yang telah kita pelajari di antaranya :

1.      Input – output

2.      If statement atau switch statement

3.      Foriteration

4.      Date / time

5.      Netclass

6.      Namespace

Langsung saja kita buka windows phone app setelah terbuka pilih C# lalu pilih windows phone app seperti  biasa dan diberi nama Accepting Input dan browse tempatkan di folder manapun yang anda mau simpan projectnya lalu klik oke tunggu beberapa saat dan tampil 3 elemen cari toolbox pilih dan drag button, text block, dan text box. Selanjutnya kita beri nama dan dan identitas di properties pilih button dan beri nama Click Me dan identitas ClickMeBT sama dengan yang lainnya kita beri nama dan identitas juga pada textblock dan textbox. Kalau textblock saya beri nama TextTB dan textbox diberi nama TextTBX itu sesuai keinginan anda supaya mempermudah didalam mencari apa nama menu bila sedang dalam pengerjaan ada yang salah. Selanjutnya klik button dua kali dan akan langsung masuk ke dalam MainPage.xaml

Di dalam toolbox yang sudah tersedia kita drag menu button dan text block untuk memberi text tapi bukan inputan text lalu pilih button lalu cari menu bar properties kita cari  file name untuk memberi identitas dan text untuk memberi comment nama pada button kita beri identitas nama dengan ClickMeBT textnya Click Me untuk lebih jelasnya kita lihat  dibawah ini;

   

1.      Kita pilih kotak Button lalu didalam menu Properties terdapat Name sebagai identitas seperti gambar diatas yang telah diberi tanda kita beri nama “ClickMeBT” dan bagian Content kita beri nama “Click Me”.

2.      Kita pilih kotak TextBlock lalu didalam menu Properties terdapat Name sebagai identitas seperti gambar diatas yang telah diberi tanda kita beri nama “MyTextBlock” dan bagian Content kita hapus saja.

3.      Kita pilih kotak TextBox lalu didalam menu Properties terdapat Name sebagai identitas seperti gambar diatas yang telah diberi tanda kita beri nama “MyTextBox” dan bagian Content kita hapus saja.

Selanjutnya klik dua kali pada Button maka, akan muncul tampilan seperti ini

Seperti gambar diatas adalah tampilan MainPage.xml, kita lihat diatas ada bagian yang ditandai warna kuning kita masukan beberapa script untuk memberi perintah pada Button seperti gambar dibawah ini

 

Masukkan script berikut ini :

String newValue;

newValue = MyTextBox.Text;

MyTextBlock.Text = “You Typed” + newValue;

Setelah itu klik tanda panah yang berwarna hijau dan pilih emulator yang diinginkan, maka tampilannya akan seperti dibawah ini, lalu coba ketikan kata apa saja dibagian inputan apakah kata tersebut tampil atau tidak.

Apabila program tidak mengalami error, kita lanjutkan percobaan dengan mengedit atau menambahkan beberapa script pada MainPage.xaml, tapi sebelum itu kita coba pindahkan menu button seperti gambar dibawah ini.

Pindahkan Menu Button “Click Me”, kebawah untuk menampilkan inputannya saja

 Setelah itu pilih element properties dan klik event lalu pilih TextChanged beri/pilih MyTextBox ketikan script ini didalam element MainPage.xaml, lalu setelah itu coba debbug/run program   

 

Harus nya semua fitur yang  di atas di beberkan ada tapi karena waktu UTS singkat jadi aja saya anya bihsa menyelesaikan konten atau fitur ini