Tutorial membuat halaman pada aplikasi berbasis windows phone | Windows Phone | 22 November 2013

Assalamu'alaikum warahmatullahi wabarakatuh

Teman-teman yang berbahagia, selamat membaca kembali di tutorial windows phone, untuk saat ini saya kan menjelaskan tentang bagaimana membuat halaman pada aplikasi windows phone kalian pasti tau aplikasi akan lebih menarik jika tampilannya yang dinamis tidak statis, artinya itu akan memungkinkan berganti halaman. nah kita akan belajar tentang berganti halaman, istilahnya kita sebut "link". oke tidak berlama-lama, mari kita buat new project, dan kalian beri nama "navigationPage" langkah berikutnya kalian buat page. tambah kan text box dan beri nama "input1TXT" tambahkan text block dan beri nama "output2TB" pasangkan text box diatas text block, kalau tambahkan 4 button. nah button ini adalah yang akan menghubungkan antar halaman (page). button 1 berinama "Go Page 2" button 2 berinama "Go Page 3" button 3 berinama "Go Page 4" button 4 beri nama "Go Page 5" kira-kira jadinya akan seperti ini

perlu di ingat, kita membuat 5 page, jadi yang kalian lakukan adalah buat seperti ini sampai 5 page. perlu diperhatikan juga penamaan nya jgn sampai sama dengan page sebelumnya. karna akan error. aplikasi ini akan memunculkan input user di halaman yang user inginkan, misalnya user menginput di MainPage dan menekan button "Go Page 4" nanti kata tersebut akan muncul di page 4. mudahkan? konsepnya ini mudah sekali teman-teman. misalnya kita buat koding di button "Go page 2" maka akan sama jika kita masukan di button "Go Page 3". nih kodingnya pada button:
 private void page2BT_Click(object sender, RoutedEventArgs e)
        {
            string name = input1TXT.Text;
            NavigationService.Navigate(new Uri("/views/SecondPage.xaml?name=" + name, UriKind.Relative));
        }

maksud dari koding ini text box 1 di isi berupa string, lalu string tersebut di link ke SecondPage.xaml dengan parameter name, untuk NavigationService.Navigate maksudnya yang kita inputkan akan dipindahkan kemana, jadi jangan lupa memakai ini. karna jika tidak maka tidak akan bisa. oh iya sempet lupa, tadi kalian kan sudah bikin 5 halaman (page) nah untuk penamaannya kita samakan saja yaaa page ke 2 beri nama "SecondPage" page ke 3 beri nama "PageThree" page 4 beri nama "PageFour" page ke 5 beri nama "PageFive" nah kalau udah copas koding ini ke setiap button yah.
private void page3BT_Click(object sender, RoutedEventArgs e)
        {
            string name = input1TXT.Text;
            NavigationService.Navigate(new Uri("/views/PageThree.xaml?name=" + name, UriKind.Relative));
        }

        private void page4BT_Click(object sender, RoutedEventArgs e)
        {
            string name = input1TXT.Text;
            NavigationService.Navigate(new Uri("/views/PageFour.xaml?name=" + name, UriKind.Relative));
        }

        private void page5BT_Click(object sender, RoutedEventArgs e)
        {
            string name = input1TXT.Text;
            NavigationService.Navigate(new Uri("/views/PageFive.xaml?name=" + name, UriKind.Relative));
        }

paham kan yah? jadi ini untuk link ke halaman yang akan kita tuju, nah bagaimana kodingnya menampilkan input user dihalaman lain? ini kan hanya masuk ke halaman. nah  
string name = input1TXT.Text;
koding itu menginput jenis string ke dalam text box. lalu bagaimana kodingnya merespon dari koding itu?
protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)
        {
            string name = "";
            if (NavigationContext.QueryString.TryGetValue("name", out name))
            {
                output2TB.Text = String.Format("name = {0}", name);
           
            }
        }

koding ini yang akan menampilkan yang user input, jika berhasil akan muncul seperti ini

misalkan kita mau masukan ke page 5

nah seperti ini jadi pada page ini kita masukan koding yang barusan, hanya diganti linknya.

private void page1BT_Click(object sender, RoutedEventArgs e)

        {
            string name = input5TXT.Text;
            NavigationService.Navigate(new Uri("/views/MainPage.xaml?name=" + name, UriKind.Relative));
        }

        private void page2BT_Click(object sender, RoutedEventArgs e)
        {
            string name = input5TXT.Text;
            NavigationService.Navigate(new Uri("/views/SecondPage.xaml?name=" + name, UriKind.Relative));
        }

        private void page3BT_Click(object sender, RoutedEventArgs e)
        {
            string name = input5TXT.Text;
            NavigationService.Navigate(new Uri("/views/PageThree.xaml?name=" + name, UriKind.Relative));
        }

cukup sekian tutorial kali ini, jadi intinya koding ini hanya dibalikan saja antara halaman satu dengan yang lainnya. mudahkan? yok coba :)
semoga bermanfaat, terimakasih

Read More

Aplikasi Sederhana Menggunakan Microsoft Visual Studio | Windows Phone | 15- November- 2013

Assalamu'alaikum Warahmatullahi wabarakatuh

Untuk mereview materi sebelumnya, untuk saat ini saya akan kembali mengulas dan menggunakannya ke dalam aplikasi yang akan kita buat, ada point2 yang akan kita buat diantaranya:

1.Menerima/mengirim nilai input/input dari dan ke user
2.Fungsi IF atau SWITCH Statement berdasarkan nilai input yang dimasukan oleh user
3.Fungsi FOR iteration
4.Tanggal sekarang dengan format 15 Septer 2013 08:00:00
5.Penggunaan .NetClass
6.Membuat Class dan Namespace pada file yang baru
7.Penggunaan Collection

Element ini akan ditambahkan pada mini aplikasi yang akan kita buat, untuk point pertama itu mudah sekali, ini sama hanya kaya materi yang saya pernah jelaskan sebelumnya, nah untuk memulai buat new project, setelah anda buat, tambahkan button, text box dan text block. untuk penamaan supaya sama, sama memberi nama button yaitu "clickBT" lalu untuk text box saya kasih nama "inputTXT" sedangkan untuk text block saya kasih nama "outputTB". nah setelah kalian buat, mari kita ngoding :)
masih inget apa yang mesti kita lakukan? ketikan kode ini pada MainPage.xaml.cs

private void clickBT_Click(object sender, RoutedEventArgs e)

        {

            string newValue;

            newValue = inputTXT.Text;

            outputTB.Text = "Nama Anda :" + newValue;

        }

jika benar maka akan keluar seperti ini,

yess point pertama sudah beres, ini memuat konten input dan output, nah sekarang kita masuk ke point ke 2 yaitu Fungsi IF atau SWITCH Statement berdasarkan nilai input yang dimasukan oleh user. ini sih sudah ada pada materi sebelumnya, gampang saja yu kita langsung sikaaaat! saya memilih menggukan switch karna menurut saya lebih simple dan mudah ditulis. tambahkan dahulu elementnya, tambahkan button dengan nama "click2BT" lalu tambahkan textblock, text block ini berguna sebagai label aja, dan kontennya masukan ini "Kriteria calon istri Idaman Anda (1=Cantik, 2=Sholihah, 3=Kaya)" itu gak perlu diberi nama, karna hanya digunakan sebagai label aja. lalu tambahkan textbox dengan nama "input2TXT" dan tambahkan satu lagi textblock dengan nama "output2TB" setelah kalian tambahkan masukan kode ini pada "click2BT":

private void click2BT_Click(object sender, RoutedEventArgs e)

        {

            string message;

            switch (input2TXT.Text)

            {

                case "1":

                    message = "Cantik";

                    break;

                case "2":

                    message = "Sholihah";

                    break;

                case "3":

                    message = "Kaya";

                    break;

                default:

                    message = "Maaf Masukan Pilihan yang tersedia";

                    break;

            }

            output2TB.Text =  message;

        }

nah kita telah menjawab point ke 2, dan yang ke 3 itu menggunakan for, mungkin kalian telah tau penggunaan for. mungkin saya skip saja, dan langsung ke point "Tanggal sekarang dengan format 15 Septer 2013 08:00:00" nah pertama2 mari kita buat button baru, dan tambahkan element textblock dan beri nama "dateTB" lalu click dua kali pada button, dan ketikan kode ini private void button1_Click(object sender, RoutedEventArgs e)

        {

             DateTime mytime = DateTime.Now;

             dateTB.Text = mytime.ToString("dd MMMM yyyy hh:mm:ss");

        }

ini coba kalian ketikan kode ini

Button mynewbutton = new Button();

          //inisialisasi instan objek dari class button

          mynewbutton.Name = "newbutton";

          mynewbutton.Height = 100;

          mynewbutton.Width = 200;

          mynewbutton.Content = "new button";

          mynewbutton.Margin = new Thickness(100.0, 100.0, 100.0, 100.0);

          //pada margin harus dilengkapi dengan new thickness kalau tidak di lengkapi dengan itu maka dia akan error

          mynewbutton.HorizontalAlignment = HorizontalAlignment.Stretch;

          mynewbutton.VerticalAlignment = VerticalAlignment.Stretch;

          //setting properties nya

          //ContentGrid.children.add(mynewbutton);

          //untuk memindah kan button ke content grid ,contentgrid ini

          TextBox mytextbox = new TextBox();

          mytextbox.Name = "new textboxt";

          mytextbox.Height = 72;

          mytextbox.Width = 456;

          mytextbox.Margin = new Thickness(14, 170, 0, 0);

          mytextbox.TextWrapping = TextWrapping.Wrap;

          mytextbox.Text = "new textbox";

          mytextbox.VerticalAlignment = VerticalAlignment.Top;

          //tidak bisa langung di tulis kan top ,jika error langsung saja di arahkan pointer nya ke arah yang error

          //contentGrid.children.add(mytextbox);

        }

        private void textBox1_TextChanged_1(object sender, TextChangedEventArgs e)

        {

                    }

    }

}

sekian untuk tutorial ini, semoga bermanfaat :)

Read More

tutorial xaml sintaks, layout control, Silver light event handler, input control | Windows Phone | 08 November 2013

Assalamu'alaikum warahmatullahi wabarakaatuh

Okeh saya akan membahas mengenai "xaml sintaks", seperti kita ketahui pada tutorial sebelumnya kita sering menggunakan xaml, karna pada windows phone menggunakan xaml sintaks. yaa untuk mempersingkat waktu mari kalian buat new project. beri nama "XamlSintaks", nah mari saya akan sedikit menjelaskan tentang xaml sintaks, pada MainPage.xaml ada di bagian atas code seperti ini x:Class="XamlSintaks.MainPage" itu adalah "Mainpage" sebuah class, dan "XamlSintaks" adalah nama namespace atau nama project yang barusan kita buat. akan secara otomatis nama tersebut akan sama dengan file MainPage.xaml.cs karna kalau beda maka tidak akan bisa terhubung antara file MainPage.xaml dengan MainPage.xaml.cs. nah kemudian ada sintaks                                                     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"
apakah maksud dari kode tersebut? jadi maksudnya adalah sama halnya dengan "Using" ini telah saya bahas pada tutorial sebelumnya, jadi anda tidak perlu khawatir untuk menuliskan kode ini, karna secara default akan ada pada file MainPage.xaml lalu bagaimana dengan ini? 
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
"d" itu sama dengan kode ini
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
memakai blend, nanti kita akan menggunakan microsoft blend untuk merubah tampilan, lalu ada Width dan Height itu jika kita ubah akan berpengaruh pada kompiler aplikasi kita. lalu ada kode ini
SupportedOrientations="Portrait" Orientation="Portrait"
maksud "SupportedOrientations" adalah orientasi yang aplikasi suport ini hanya potrait saja, dan maksud dari "Orientation" adalah default tampilan saat aplikasi di running. contohnya seperti ini

ya seperti ini, ini merupakan defaulnya saat tampilan pertama aplikasi yang akan kita buat, ketika devicenya di miringkan, jika "SupportedOrientations" nya hanya potrait maka akan seperti ini

nah jadi tulisannya akan seperti ini. lalu kode ini apa?

shell:SystemTray.IsVisible="True">

jika ini true maka akan muncul seperi tampilan sinyal pada kompiler kita, kalau bernilai false, tidak akan muncul tampilan tersebut. lalu kita coba masukan kode ini

SupportedOrientations="PortraitOrLandscape" Orientation="Portrait"

nah akan muncul seperti itu jadi tampilannya bisa potrait juga bisa landscape.

sekarang kita masuk ke tutorial layout control, hal ini sangat dibutuhkan karna ini menentukan user experience dalam aplikasi, kalau kita ibaratkan dengan web para developer menggunakan css. okeh kita akan mulai dengan new project, dan beri nama "LayoutControl", nah disini saya akan menjelaskan beberapa point:

- Grid

- Stack Panel

- Canvas 

disini saya akan coba masukan element canvas, kalian cari di toolbox. kita akan bermain di margin, yah.. setelah kalian tambahkan canvas pada device coba geserkan ke kanan dan ke kiri, itu akan membuat marginnya berubah-ubah. kalau di device saya 

tidak ada tulisan margin berapanya, jadi bisa kita lihat di codingnya, mengapa ada tanda panah ke kiri dan kebawah? sedangkan ke atas dan ke kanan tidak ada? karna di kode itu ada

HorizontalAlignment="Left"

VerticalAlignment="Bottom"

inilah yang membuat seperti itu, jika kita ubah dari Left ke Right sedangkan dari bottom ke top, akan berbeda lagi arah panahnya. lalu bagaimana jika kita mau menampilkan semuanya? caranya gampang, tinggal kita ganti dari Left menjadi Stretch dan dari bottom menjadi Stretch juga. akan tampil seperti ini,

nah seperti ini. sekarang mari kita hapus canvas yang tadi kita buat, dan saya akan sedikit menjelaskan tentang kode

  <Grid.RowDefinitions>

            <RowDefinition Height="Auto"/>

            <RowDefinition Height="*"/>

        </Grid.RowDefinitions>

saya akan menambahkan element baru namanya Grid, disini saya gunakan Stretch supaya Grid ini berada di tengah lalu marginnya gunakan 0 semuanya supaya berada tepat ditengah-tengah caranya seperti ini 

grid tersebut akan secara otomatis, ke tengah-tengah lalu masukan kode ini pada grid yang telah anda buat

<Grid.RowDefinitions>  

                  <Grid.RowDefinitions Height="60"/>

                  <Grid.RowDefinitions Height="60*"/>

 </Grid.RowDefinitions>

 <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="100*"/>

                    <ColumnDefinition Width="100" />

 </Grid.ColumnDefinitions>

jika berhasil, maka akan keluar seperti ini

sama seperti kita membuat table sih, tapi yang ini lumayan membingungkan. lalu bagaimana jika kita mau menambahkan bottom di dalam grid tersebut?

tinggal ketikan code bottom di dalam grid tersebut dan ingat, kita akan masukan buttom dimana? apakah di row 2 colomn 1 apa dimana? nah nanti jangan lupa masukan kita akan masukan buttom dimananya. nah cukup sekian, InsyaAllah pembahasannya akan dilanjutkan lagi karna berhubung saya ada tugas lagi, wassalamu'alaikum warahmatullahi wabarakaatuh...

Read More

Tutorial .NET dan Silverlight, namespace, collection | Windows phone | 1 NOVEMBER 2013

Assalamu'alaikum warahmatullahi wabarakaatuh..
tema tutorial kali ini adalah play with .NET and Silverlight, di windows phone ini kita akan menggunakan .NET framework yang sudah dibuat pada microsoft dan silverlight ini adalah sebuah framework untuk membuat aplikasi sedangkan untuk game menggunakan framework XNA. nah untuk XNA mungkin kita akan bahas pada sesi lain, nah di project sebelumnya yang namanya "date and time" coba deh kalian buka kembali. yang ada pada gambar ini

nah DateTime adalah sebuah class .NET library karna ini udah dibuat default oleh microsoft, jadi DateTime ini harus di ikuti oleh new. sama halnya dengan TimeSpan sebuah class .NET juga yang harus adanya inisialisasi. ada beberapa class dari .NET library ini yang tidak perlu instance, contohnya adalah: 

nah untuk class String bisa langsung berdiri sendiri, contohnya seperti gambar diatas. selain class ini ada banyak lagi yang tidak perlu instance. mari kita buat project baru 

new project >> pilih visual C# >> Windows Phone Application >> beri nama project dengan nama "CreateAButton" lalu tambahkan Button dan beri content "Add Element" dan Text Box dengan text "First Text Box" nah di microsoft visual studio 2010 kalau kita buat file baru, ada dua file yaitu MainPage.xaml dan MainPage.xaml.cs nah pada element ini 

adalah contoh dari class .NET library bisa kalian lihat jika kursor kalian di arahkan ke Button maka akan muncul tulisan "System.Windows.Control.Button" artinya ini merupakan class dari button. oh ya itu yang ada pada gambar di atas, "ContentPanel" harap diganti menjadi "ContentGrid" supaya sama dengan tutorial. lalu anda ketikan kode ini:

private void button1_Click(object sender, RoutedEventArgs e)

        {

            Button myNewButton = new Button();

            myNewButton.Name = "newButton";

            myNewButton.Height = 100;

            myNewButton.Width = 200;

            myNewButton.Content = "New Button";

            myNewButton.Margin = new Thickness(100.0, 100.0, 100.0, 100.0);

            myNewButton.HorizontalAlignment = HorizontalAlignment.Stretch;

            myNewButton.VerticalAlignment = VerticalAlignment.Stretch;

            ContentGrid.Children.Add(myNewButton);

            TextBox myTextBox = new TextBox();

            myTextBox.Name = "newTextBox";

            myTextBox.Height = 72;

            myTextBox.Width = 456;

            myTextBox.Margin = new Thickness(14, 170, 0, 0);

            myTextBox.TextWrapping = TextWrapping.Wrap;

            myTextBox.Text = "New Text Box";

            myTextBox.VerticalAlignment = VerticalAlignment.Top;

            ContentGrid.Children.Add(myTextBox);

        }

coding ini, adalah membuat element dari MainPage.xaml.cs yang biasanya kita buat element itu tinggal drag and drop, sekarang kita buat melalui koding. mudah kan?
hasilnya akan seperti ini:

okeh materi selanjutnya adalah Mengenal Name Space. jika kita lihat ke aplikasi sebelumnya, kita selalu menggunakan namespace. 

nah seperti ini namespace tuh. saat kita buat project baru, pasti namespace ini akan digunakan secara default. namespace adalah sebuah cara untuk "membungkus" sebuah code, ini akan berguna sekali ketika code ini besar atau banyak. contoh logikanya seperti ini, ada dua nama "opik". opik yang pertama berada di bandung sedangkan opik yang satunya berada di jakarta. jadi kita tidak akan pernah tertukar opik yang di bandung dengan opik yang di jakarta.

jadi opik ini adalah nama class, sedangkan bandung adalah nama namespacenya jadi nama class dibungkus oleh namespace. jadi ketika kita memanggil nama class yang sama itu tidak akan tertukar karna kita memakai namespace, kecuali kalau kita tidak menggunakan namespace akan akan ada dua class, jadi bingung mana yang akan dipanggil. kalau masih di basic itu masih blm kerasa kegunaan namespace saat aplikasi besar, maka akan berguna sekali menggunakan namespace. okeh kalian buat new project.
new project >> pilih visual C# >> Windows Phone Application >> beri nama project dengan nama "UnderstandingNameSpaces"
lalu kita tambahkan Button, dan dua text box. text box pertama beri nama "namespace1" dan untuk text box kedua beri nama "namespace2". ketika code ini ke dalam button

jadi seperti ini, disini saya menggunakan class IsolatedStorageSettings adalah sebuah class yang dapat menyimpan data di lokal HP kita, namanya IsolatedStorageSettings. untuk System.IO.IsolatedStorage adalah nama namespace, jadi didalam namespace "System" ada namespace "IO" juga didlmnya ada namespace "IsolatedStorage" dan didlmnya ada class namanya "IsolatedStorageSettings" apakah dapat dimengerti?

coba kita liat di bagian paling atas..

nah bisa anda lihat "using" ini adalah sebuah deklarasi untuk menggukan suatu namespace. jika kita pindahkan "System.IO.IsolatedStorage" ke bagian paling atas, maka akan secara otomatis kita tidak perlu menggunakan code yang ada digambar yang atas. cukup menggunakan ini.

private void button1_Click(object sender, RoutedEventArgs e)

        {

            IsolatedStorageSettings mySetting =IsolatedStorageSettings.ApplicationSettings;

        }

nah seperti ini, jadi kita tidak cape mengetik ulang. oke sekarang kita akan membuat namespace yang baru. coba ketikan code ini

namespace FirstSpace

    {

        class TestClass

        {

            public string getString()

            {

                return "Inside First Space";

            }

        }

    }

    namespace SecondSpace

    {

        class TestClass

        {

            public string getString()

            {

                return "Inside Second Space";

            }

        }

    }

hati kurung kurawalnya berlebihan atau kurang, harus diperhatikan baik-baik. ini kan kita mempunya nama class yang sama, lalu akan kita panggil satu-satu. seperti contoh yang tadi. untuk memanggilnya ketikan kode ini

            FirstSpace.TestClass firstNameSpace = new FirstSpace.TestClass();

            SecondSpace.TestClass secondNameSpace = new SecondSpace.TestClass();

            namespace1.Text = firstNameSpace.getString();

            namespace2.Text = secondNameSpace.getString();

bagaimana hasilnya? coba kalian lihat sendiri :)

cukup sekian tutorial dari saya semoga bermanfaat, wasalamu'alaikum warahmatullahi wabarakaaatuh

Read More