Belajar Membuat Aplikasi Windows Phone

} public event PropertyChangedEventHandler PropertyChanged; public void NotifyPropertyChanged(string propertyName) { if(PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } } }

Pada kelas MainViewModel di atas, mengimplementasikan interface INotifyPropertyChanged ialah event PropertyChanged. Kemudian method NotifyPropertyChanged nan digunakan bikin memberitahu properti tertentu berubah. Terserah pun method GetData yang digunakan kerjakan mengambil string json dari taris DataPuteri.json nan selanjutnya di deserialize pecah string menjadi objek. Kita perlu korban terbit MainViewModel ini boleh diakses dimana cuma, oleh karena itu kita menambahkan properti statis berikut ke App.xaml.cs : App.xaml.cs 31

Dan jangan lupa, instanisasi properti ViewModel di kontruktor kelas App begitu juga berikut: App.xaml.cs 39 40 41 42 43 44 45

public App() { this.InitializeComponent(); this.Suspending += this.OnSuspending; ViewModel = new MainViewModel(); }

Kini ViewModel bisa diakses dimana cuma, sekali lagi ke konstruktor MainPage.xaml.cs hilangkan kode List yang sudah lalu kita bagi sebelumnya, dan tambahkan 2 derek kode seperti yang terlihat dibawah: App.xaml.cs 27 28 29 30 31 32 33 34

public MainPage() { this.InitializeComponent(); this.NavigationCacheMode = NavigationCacheMode.Required; this.DataContext = App.ViewModel; App.ViewModel.GetData(); }

Lega kode di atas, kita mengatur data konteks dari MainPage bagi mengacu ke objek ViewModel tersebut. Habis method GetData dipanggil untuk mengambil data json dari berkas dan mengisi properti ListPuteri dari ViewModel. Puas MainPage.xaml, lebih jauh kita mesti membukit binding kedalam properti ItemsSource pada elemen ListView seperti berikut : MainPage.xaml 17

Coba jalankan project dan akibatnya yang terbantah akan serupa ini :

Karena pada WinRT enggak mendukung StringFormat di Binding, kita mempunyai opsi buat menambahkan Converters atau menambahkan hak baru di inferior Puteri. Disini saya mengidas opsi kedua, yaitu menambahkan properti Foto bakal kelas Puteri, berikut kodenya:

Membiasakan membuat App Windows Phone 8.1

17

Transendental/Puteri.cs 16 17 18 19

public string Foto { get { return “/Assets/Foto/” + Id + “.jpg”; } }

Pada tampilan diatas masih berwujud teks tanpa tulangtulangan, kini untuk menambahkan gambar serta mengecilkan teks, kita mesti memodifikasi item template dari ListView : MainPage.xaml 18 19 20 21 22 23 24 25 26 27 28 29 30 31







Belajar mewujudkan App Windows Phone 8.1

18

Berpindah Pekarangan Masa ini kita akan takhlik pengguna ketika mengidas/tap item yang terserah di list, akan berpindah ke pekarangan hijau nan mengedepankan informasi yang kian abstrak. Sekarang kita takhlik jerambah yunior bernama DetailPage.xaml, caranya klik kanan project kemudian memperbedakan menu Add New Item.

Berlatih membuat App Windows Phone 8.1

19

Selanjutnya pilih Blank Page, pasrah nama DetailPage, dan Klik Tombol Add.

Halaman plonco DetailPage.xaml akan ditambahkan ke root folder project. Buka DetailPage.xaml, dan tambahkan kode berikut : DetailPage.xaml 10 11 12 13 14 15 16 17 18










<StackPanel Grid.Row=”1″ Margin=”24,12″>

Belajar membuat App Windows Phone 8.1

20

19 20 21 22 23 24 25 26



<ScrollViewer Grid.Row=”2″ Margin=”24,12″>





Pada kode diatas, kita menambahkan gambar cover di baris pertama, StackPanel yang digdaya siaran masyarakat di baris kedua, dan kemudian ScrollViewer nan berisi teks biografi di baris ketiga. Kemudian kita perlu menambahkan properti berikut umpama referensi objek Puteri yang dipilih dari halaman sebelumnya, ke kerumahtanggaan kelas DetailPage seperti berikut : DetailPage.xaml.cs 26

Puteri _selected;

Lebih jauh kita wajib menangani pemberitaan nan akan diterima dari MainPage.xaml.cs, dengan menambahkan kode berikut di OnNavigatedTo : DetailPage.xaml.cs 38 39 40 41 42 43

protected override void OnNavigatedTo(NavigationEventArgs e) { int id = Convert.ToInt32(e.Indeks); _selected = App.ViewModel.ListPuteri.FirstOrDefault(p => p.Id == id); this.DataContext = _selected; }

Tidak sebagai halnya lega varian 8, puas Windows Phone 8.1 WinRT ini, kita perlu menindak tombol back secara manual, tambahkan kode berikut di dalam konstruktor kelas DetailPage : DetailPage.xaml.cs 32

HardwareButtons.BackPressed += HardwareButtons_BackPressed;

Selanjutnya menambahkan delegate method event handler nan berkaitan, untuk bisa back ke jerambah sebelumnya : DetailPage.xaml.cs 35 36 37 38 39 40 41

void HardwareButtons_BackPressed(object sender, BackPressedEventArgs e) { Frame frame = Window.Current.Content as Frame; if (frame == null) { return; }

Sparing mewujudkan App Windows Phone 8.1

21

42 43 44 45 46 47 48

if (frame.CanGoBack) { frame.GoBack(); e.Handled = true; } }

Kembali ke MainPage.xaml, kita memerlukan subscribe event SelectionChanged, sehingga detik kita mengerjakan tap item di ListView akan memicu event SelectionChanged. Kaidah subscribe event tersebut, layak ketikkan SelectionChanged setakat muncul opsi New Event Handler, pilih opsi tersebut.

Akan datang di ikat MainPage.xaml.cs akan muncul delegate method event handler ListPuteri_SelectionChanged yang akan dieksekusi ketika event SelectionChanged terjadi. Tambahkan kode berikut di kerumahtanggaan method tersebut : DetailPage.xaml.cs 53 54 55 56 57 58 59 60

private void ListPuteri_SelectionChanged(object sender, SelectionChangedEventArgs e) { var listview = (ListView)sender; var selected = (Puteri)listview.SelectedItem; if (selected == null) return; Frame.Navigate(typeof(DetailPage),selected.Id); }

Pada kode diatas, akan didapatkan wacana sasaran item Puteri tersaring, yang kemudian berpindah halaman ke DetailPage dengan parameter Id dari Puteri tersebut. Masa ini jalankan project, dan lihat hasilnya. Coba memilah-milah salah satu pemudi yang ada di list yang otomatis akan membawa ke jerambah baru seperti mana tampilan dibawah:

Membiasakan membuat App Windows Phone 8.1

22

Menu AppBar Cara menambahkan AppBar pada Windows Phone 8.1 WinRT sedikit farik dibandingkan varian Silverlight. Menariknya kita tidak perlu menambahkan ikon secara manual, karena ikon yang umum dipakai sudah tersedia, dulu pakai saja. Berikut kode untuk menambahkan AppBar di XAML. DetailPage.xaml 26 27 28 29 30 31 32 33 34 35 36

<Page.BottomAppBar>



<AppBarButton Icon=”Find” IsCompact=”False” Cap=”Cari” Click=”Cari_Click”/>


<AppBarButton Tanda=”Bagikan” Icon=”ReShare” Click=”Share_Click”/>

Belajar membuat App Windows Phone 8.1

23

Dan kemudian saya tambahkan method event handler bikin menangani dua tombol appbar diatas : DetailPage.xaml.cs 66 67 68 69 70 71 72 73 74 75 76

private async void Cari_Click(object sender, RoutedEventArgs e) { Uri link = new Saudara(“http://www.bing.com/search?q=” + _selected.Merek, UriKind.Absolute); await Launcher.LaunchUriAsync(link); } private void Share_Click(object sender, RoutedEventArgs e) { Windows.ApplicationModel.DataTransfer.DataTransferManager.ShowShareUI(); }

Jangan tengung-tenging, untuk subscribe event ketika DataRequested diminta pada method OnNavigatedTo, dengan kode berikut : DetailPage.xaml.cs 65 66

DataTransferManager dtManager = DataTransferManager.GetForCurrentView(); dtManager.DataRequested += dtManager_DataRequested;

Selanjutnya menambahkan data yang akan di share di dalam delegate method event handler DataRequested : DetailPage.xaml.cs 80 81 82 83 84 85 86

private void dtManager_DataRequested(DataTransferManager sender, DataRequestedEventArgs args) { args.Request.Data.Properties.Title = _selected.Nama; args.Request.Data.Properties.Description = _selected.Bawah; args.Request.Data.SetWebLink(new Plasenta(“http://putuyoga.com”)); }

Coba jalankan app, dan tatap hasilnya. Tap riuk satu puteri, kemudian lihat AppBar yang ada di bawah, tap tombol menu yang terserah disitu. Dibawah adalah tampilan AppBar yang berhasil diimplementasikan.

Belajar membentuk App Windows Phone 8.1

24

Publish ke Store Sebelum bisa publish ke store, pastikan kamu sudah n kepunyaan akun store, seandainya belum n kepunyaan akun dan kebetulan masih mahasiswa, dapat mengimak kata sandang disini untuk mendaftarkan akun dreamspark dengan benefit akun developer gratis. Permulaan-tama kita harus bikin packages yang dibutuhkan untuk di upload. Bentang menu Project → Store → Create Package.

Berlatih membuat App Windows Phone 8.1

25

Kemudian akan muncul window Create Your Package, pada pertanyaan mau mengunggah package ke store, pilih opsi Yes dan klik tombol Next.

Sparing membuat App Windows Phone 8.1

26

Kemudian login ke akun Microsoft yang berasosiasi dengan akun Windows developermu.

Kemudian kita harus melembarkan App Name nan akan kita gunakan. Kalau belum suka-suka nama yang di reservasi, kamu harus mereservasi sebuah nama terlebih dahulu. Jika sudah klik Next

Membiasakan mewujudkan App Windows Phone 8.1

27

Selanjutnya atur konfigurasi dari package, seperti lokasi output package, nomor varian dan lain-tidak.

Tunggu sebatas proses build dan pembuatan package selesai, nantinya akan muncul window sebagai halnya dibawah ini.

Belajar membuat App Windows Phone 8.1

28

Selanjutnya login ke akun developermu di http://dev.windows.com dan kemudian buka windows phone store dashboard http://dev.windowsphone.com/dashboard . Klik menu Apps yang ada di sebelah kiri, cak bagi menelanjangi daftar apps.

Klik tab Titinada Started, dan pilih nama Apps yang sudah lalu kamu reservasi sebelumnya via Visual Studio.

Belajar membuat App Windows Phone 8.1

29

Engkau akan dialihkan ke halaman submission, dimana pertama-tama akan diminta mengisi siaran kategori apps, harga dll sebagaimana yang terlihat pada gambar dibawah ini, jika sudah klik tombol Save.

Berlatih membuat App Windows Phone 8.1

30

Kemudian klik “Upload and describe your package(s)” untuk mengunggah package yang telah dibuat sebelumnya.

Belajar membuat App Windows Phone 8.1

31

Selanjutnya kamu diminta bikin mengunggah package app nan ingin di publish di store. Klik add new kemudian memilah-milah package yang akan di unggah. Lega kasus ini ikat yang diunggah bernama PuteriIndonesia_1.1.0.1_AnyCPU.appxupload

Proses berikutnya package akan diunggah dan jika sudah lalu selesai kita diminta kerjakan memuati deskripsi terbit app, kata muslihat, ikon app berdosis 300×300, screenshot dari app dengan resolusi minimum WXGA.

Membiasakan menciptakan menjadikan App Windows Phone 8.1

32

Jika semua telah diisi, tekan tombol save. Tahap kedua sudah lalu selesai, kemudian tekan tombol submit & review. Nantinya akan muncul tampilan perubah-perubahan apa saja nan cak semau yang harus kamu review. Jika dirasa info yang tercatat sudah benar, tekan tombol Submit. Namun seandainya anda merasa ada kesalahan, tekan tombol Go Back and Edit.

Sparing takhlik App Windows Phone 8.1

33

Klik tombol Submit, dan app kamu akan menjalani proses serifikasi nan memakan waktu sampai dengan 5 hari, sebelum bisa publish di Store.

Membiasakan membuat App Windows Phone 8.1

34

Kata penutup Oke barangkali sampai disini semata-mata pembahasan kali ini. Berhubung saya bani adam absah tentu ada kesalahan baik itu kata alias informasi, kaprikornus sekiranya minta dimaklumi. Selain itu kembali masih banyak bagian yang dapat dikembangkan puas modul ini. Kebetulan belum punya akun developer ? dan engkau mahasiswa ? coba cek artikel berikut : 1. http://winpoin.com/prinsip-daftar-akun-dreamspark 2. http://winpoin.com/pendirian-daftar-akun-developer-windows-via-dreamspark

WinPoin Kedepannya saya akan mempublikasikan artikel-artikel mengenai tutorial dan uang pelicin peluasan app di Windows maupun Windows Phone di situs http://winpoin.com. Source code arketipe bisa didapatkan di : https://github.com/putuyoga/PuteriIndonesiaWP8.1

Tentang Perekam I Putu Yoga Permana yakni salah satu Microsoft Student Partner Indonesia serta merta developer windows phone apps sejak akhir 2022. Selain mengembangkan apps, juga suka menulis kata sandang gajelas berasal jaman smp. Dia lagi beberapa kali mengisi workshop pengembangan permohonan windows phone di beberapa kampus di jawa timur. Jikalau kamu penasaran, apa saja app-nya dia, akses http://bit.ly/1PiEDWI.

Informasi Kontak Jika ada tanya, saran, atau kritik bisa menghubungi via    

Email : [email protected] Facebook : http://facebook.com/putu.yoga.permana Twitter : http://twitter.com/putuyoga Website : http://putuyoga.com

Belajar membuat App Windows Phone 8.1

Source: https://anzdoc.com/download/belajar-membuat-app-windows-phone-81-i-putu-yoga-permana-mic.html