[Xamarin iOS] Hello World

Xamarin… menghadirkan solusi pengembangkan aplikasi native mobile berbasis Windows Phone, Android dan iOS dengan bahasa pemrograman C#. Dari ketiga platform mobile yang dipenuhi oleh Xamarin  Android masih merajai tapi pengembangan aplikasi iOS juga sangat menjanjikan.  Windows Phone? walau pendapat saya pribadi OS WP powerfull dan enak digunakan plus perangkat nokia memang punya kualitas baik, tapi entah kenapa trendnya tidak terlalu baik. Kembali ke pengembangan aplikasi iOS, apa yang dibutuhkan untuk mengembangkan aplikasi iOS pada xamarin?

  1. Anda harus menggunakan PC / laptop Mac (karena xcode dan pasukannya cuma tersedia untuk OS Mac)
  2. Xamarin Studio (dapat diunduh di https://www.xamarin.com/)
  3. Xcode beserta komponen pendukungnya

Jika telah selesai menyiapkan semua kebutuhan, mari kita coba membuat sebuah aplikasi iOS dengan Xamarin.

Buka Xamarin Studio lalu buat aplikasi iOS dan pilih jenis project “Single View App”. Nama aplikasi? terserah anda, saya sendiri memberi nama aplikasinya “ios_playground”. Setelah membuat aplikasi maka akan terlihat sebuah iOS project dengan struktur direktori seperti berikut :

screen-shot-2016-10-27-at-12-00-03-pm

Berikut penjelasan masing-masing direktori dan file dari struktur di atas :

  • Reference : menyimpan kumpulan library/komponen yang akan digunakan.
  • Components : menyimpan components yang digunakan pada aplikasi, anda dapat melihat/mencari kumpulan components yang menarik dari direktori ini caranya secondary click pada direktori “components” kemudian klik “get more..”
  • Packages : menyimpan kumpulan package yang digunakan aplikasi. Secondary click pada direktori ini lalu pilih “Add package” agar anda bisa melihat dan mendapatkan package-package menarik dari nuget.org dan source lainnnya.
  • Assets.xcassets : direktori ini digunakan untuk menyimpan image assets.
  • Resource : digunakan untuk menyimpan berbagai resource yang digunakan aplikasi.
  • AppDelegate : file ini adalah file yang menentukan UI mana yang akan di launching saat pertama kali program dipanggil
  • Entitlements.plist : jika anda menginginkan kebutuhan khusus pada aplikasi, anda dapat melakukan konfigurasinya disini.
  • Info.plist : tempat dimana anda menyimpan informasi identitas aplikasi anda dan beberapa informasi general misal nama aplikasi, target deployment, dll.
  • LaunchScreen.storyboard dan Main.storyboard : Pada pengembangan aplikasi iOS, anda dapat melakukan design UI pada suatu tempat yang disebut storyboard. Jadi file-file yang memiliki extension “.storyboard” artinya file tempat anda meletakkan UI aplikasi anda. Dalam suatu storyboard bisa jadi terdapat beberapa UI yang saling terkait antara satu screen dengan screen yang lainnya.
  • Main.cs : class ini adalah class pertama yang akan dipanggil oleh aplikasi.
  • ViewController.cs : Pada pengembangan aplikasi iOS anda akan mengenal Controller. File ViewController.cs adalah controller default dari yang di generate saat pertama kali kita membuat aplikasi. Anda dapat menambahkan controller lain melalui storyboard.

Sekilas Tentang Storyboard

Dalam pengembangan iOS, storyboard digunakan untuk melakukan perancangan aplikasi dan UI dari aplikasi yang kita buat.

screen-shot-2016-10-28-at-9-55-45-am

Storyboard terdiri dari satu atau lebih controller dimana salah satu controller akan menjadi controller awal yang dijalankan ketika suatu storyboard dipanggil. Setiap controller yang masuk ke dalam storyboard harus diberikan identitas nama class-nya agar xamarin secara otomatis melakukan generate file class-class dari controller tersebut. Dimana class dari controller-nya di generate? pada direktori root aplikasi anda.

Secara default aplikasi yang telah kita buat akan menjalankan UI file Main.storyboard, dimana pengaturan yang menentukan Main.storyboard akan dijalankan di awal? Anda bisa lihat pada file Info.plist

screen-shot-2016-10-27-at-3-15-03-pm

Pada kolom “Main Interface” telah dijelaskan bahwa “Main” storyboard akan dijadikan sebagai interface utama.

Hello Xamarin Dev

Untuk melestarikan tradisi turun temurun, hal pertama yang perlu kita pelajari adalah membuat aplikasi “Hello World”. Kita akan membuat aplikasi seperti berikut :

screen-shot-2016-10-27-at-3-44-35-pm

Aplikasi tersebut adalah aplikasi hello world dan ditambah sebuah inputan yang harus diisi oleh pengguna. Ketika pengguna mengetikkan sesuatu pada textField yang disediakan, maka aplikasi secara otomatis menghitung jumlah karakter dari inputan tersebut dan menampilkan hasilnya pada label berwarna biru.

screen-shot-2016-10-27-at-4-02-45-pm

Okey, pertama-tama bukalah Main.storyboard kemudian tambahkan dua buah UILabel dan  sebuah UITextField pada UIViewController yang ada pada storyboard. Cara menambahkan control tersebut adalah dengan melakukan drag n drop control yang pada box toolbox. Jika selesai silahkan atur tata letak tampilan.

Properties

Kita dapat melakukan beberapa konfigurasi dan pengaturan sederhana pada setiap control seperti UILabel dan UITextField. Silahkan anda coba click salah satu control yang telah ditambahkan pada storyboard :

screen-shot-2016-10-27-at-7-20-14-pm

Control yang sudah terpilih akan terlihat seperti gambar di atas. Anda dapat melakukan pengaturan atau konfigurasi control tersebut pada boks “Properties”

screen-shot-2016-10-27-at-7-16-18-pm

Boks properties akan menyajikan beberapa pengaturan yang dapat dilakukan. Terdapat tiga buah tab pada boks properties :

    1. Widget : berisi konfigurasi general yang ada pada control seprti nama control, font, warna, label, dll.
    2. Layout : konfigurasi yang berkaitan dengan layout dan tata letak suatu control.
    3. Events : berkaitan dengan proses menangkap masukan dan memprosesnya. Sebagai contoh ketika pengguna melakukan click, double click, mengetik sesuatu, dll.

Contoh pengaturan properties :

screen-shot-2016-10-27-at-7-31-07-pm

Berilah sebuah identitas nama pada UITextField yang kita buat dan buat agar memiliki placeholder seperti tampilan di atas. Maka pengaturan property yang harus dilakukan adalah seperti berikut :

screen-shot-2016-10-27-at-7-33-29-pm

Buatlah identitas pada UILabel yang telah ditambahkan kemudian rubah warna hurufnya menjadi berwarna biru :

screen-shot-2016-10-27-at-7-34-57-pm

Pengaturan property-nya adalah seperti berikut :

screen-shot-2016-10-27-at-7-36-49-pm

Mengapa kita harus memberikan identitas nama pada suatu control? Pemberian nama berguna untuk menangkap control yang dimaksud melalui code program. Misal control Label_count semula memiliki label “Count of Character” dengan warna biru, kita menginginkan agar warna dari label “Count of Character” tersebut dapat diubah-ubah melalui code program. Setiap anda menambahkan sebuah nama pada suatu control, maka class dari controller tersebut akan men-generate code pendefinisian control tersebut. Sebelumnya kita telah memberikan identitas nama pada UILabel dan UITextField yang kita miliki, maka pada class controllernya :

screen-shot-2016-10-27-at-7-53-43-pm

Seperti terlihat pada gambar bahwa masing-masing class controller akan terdiri dari class aslinya dan class .designer. Silahkan buka class .designer dari controller tersebut.

screen-shot-2016-10-27-at-7-56-33-pm

Pada code tersebut sudah didefinisikan UILabel dengan nama Label_count dan UITextField dengan nama Txt_Name. Bukannya kita tadi menambahkan dua buah UILabel? Iya, tapi yang satu tidak kita beri identitas nama sehingga tidak di-generate.

Event

Setelah berhasil melakukan pengaturan tampilan, sekarang kita akan menampilkan jumlah karakter yang diketik pada Label_count. Buka class controller lalu masukkan code berikut pada fungsi “ViewDidLoad()”

 base.ViewDidLoad();
 this.Txt_Name.EditingChanged += (sender, ea) =>{
      this.Label_count.Text = "Count of character : " + ((UITextField)sender).Text.Length;
 }; 

Code di atas akan mengeksekusi setiap pengguna mengetik suatu nilai pata Txt_Name dimana setiap pengguna mengetikkan sesuatu maka tampilan pada Label_count akan menampilkan jumlah karakter yang telah dimasukkan.

Sekarang silahkan jalankan aplikasi anda.. berikut tampilannya :

screen-shot-2016-10-27-at-3-44-35-pm

Selesai, selamat mencoba.. happy coding.

Advertisements

[ C# Windows10 ] About MVVM

Salah satu pattern yang digunakan dalam pengembangan aplikasi di Visual Studio 2015 adalah MVVM (Model View ViewModel).  Jika anda sudah akrab dengan konsep MVC, maka MVVM cukup mirip dengan MVC tetapi keduanya tetaplah pattern yang berbeda. Dalam MVC dan MVVM sama-sama mengenal “M” sebagai model dan “V” sebagai View dimana model adalah segala sesuatu yang berkaitan dengan data dan rule2 dalam data tersebut. Sedangkan View adalah segala sesuatu yang berkaitan dengan tampilan/user interface aplikasi anda. Pada MVC antara model dan view akan dihubungkan oleh “C” yaitu Controller dimana melalui controller inilah user akan melakukan permintaan/request (controller menjadi pintu awal) dan controller akan mengatur model apa yang akan dipanggil, fungsi apa yang akan dijalankan, hingga tampilan mana yang akan ditampilkan kepada user. Sedangkan pada MVVM model dan view akan dihubungkan melalui ViewModel tetapi pintu awal tetap terletak pada View. Pada MVVM ketika user membuat suatu permintaan/request maka yang pertama akan terbuka adalah View dimana View akan mengambil data yang ada pada model melalui perantara ViewModel yang telah menentukan data2 model mana saja yang akan ditampilkan beserta event2 yang akan dijalankan. Ilustrasi alur MVVM dapat dilihat pada gambar berikut :

Untuk memudahkan dalam memahami MVVM, berikut adalah contoh code C# pada Windows10 dengan MVVM. Pertama-tama buatlah sebuah model dengan nama “SoccerClub.cs” misal. Masukkan kode berikut :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace App1.Model
{
   public class SoccerClub
   {
      public string Name;
      public string Description;
   }
}

Code di atas mendefinisikan data “SoccerClub” yang berisi “Name” dan “Description”.

Saya akan membuat tampilan yang akan menampilkan Daftar dari nama2 SoccerClub beserta descriptionnya pada halaman saya. Dimana ketika di klik di salah satu item, maka sebuah textblock akan menulis keterangan item apa yang anda klik. Berikut tampilan akhir yang akan muncul pada aplikasi :

Capture

Sebelum membuat tampilan diatas dengan menggunakan ListView, pertama yang perlu kita buat adalah ViewModel. ViewModel yang dibuat harus memiliki data yang memuat data daftar SoccerClub dan sebuah event yang menjalankan sebuah proses ketika user melakukan klik pada setiap item. Buatlah sebuah class dengan nama “ExampleList.cs”, masukkan kode berikut :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Collections.ObjectModel;
using System.ComponentModel;
using Windows.UI.Xaml.Controls;
using App1.Model;

namespace App1.ViewModels
{
   public class ExampleList : INotifyPropertyChanged
   {
        public event PropertyChangedEventHandler PropertyChanged;
        //mengeset apabila ada variabel yang berubah, secara otomatis akan merubah pada view
        protected void NotifyPropertyChanged(String info)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(info));
            }
        }

        public string JustText = "Hai"; //variabel ini digunakan untuk text yang tampil pada           //bagian atas listview, untuk menampilkan keterangan
        //variabel ini digunakan untuk menyimpan daftar SoccerClub
        private ObservableCollection<SoccerClub> _listData = new ObservableCollection<SoccerClub>()
        {
             new SoccerClub { Name = "Barcelona", Description="Spain" },
             new SoccerClub { Name = "Real Madrid", Description="Spain" },
             new SoccerClub { Name = "Liverpool", Description="England" },
             new SoccerClub { Name = "Bayern Munich", Description="Germany" },
             new SoccerClub { Name = "A.C. Milan", Description="Italy" },
         };
         
         //mengembalikan nilai _listData
         public ObservableCollection<SoccerClub> ListData
         {
             get{ return _listData; }
         }
         
         // event ketika melakukan klik pada list
         public void ListData_ItemClick(object sender, ItemClickEventArgs e)
         {
            this.JustText = "You Click On " + (e.ClickedItem as Example).Name;
            NotifyPropertyChanged("JustText");
         }
    }
}

Kode diatas adalah kode pada ViewModel. Kode tersebut lah yang akan digunakan halaman View untuk menampilkan data apa saja yang akan ditampilkan. Sekarang pada halaman view anda, pada file xaml klik kanan pilih “View Code”. Masukkan code berikut pada class view anda :

public sealed partial class PageName : Page
 {
        //mendefinisikan ViewModel yang telah dibuat sebelumnya
        public ExampleList MyData;
        public PageName()
        {
            this.InitializeComponent();
            MyData = new ExampleList();
        }
 }

Kemudian pada code xaml anda, masukkan code berikut :

<Page
 x:Class="App1.Control.PageName"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:App1.Model"
 xmlns:viewmodel="using:App1.ViewModels"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d"
 >

  <UserControl.Resources>
    <DataTemplate x:Key="NavLinkItemTemplate" x:DataType="local:SoccerClub">
      <StackPanel Orientation="Horizontal" Margin="2,0,0,0" Background="#FFEEEEEE">
         <TextBlock Text="{x:Bind Name}" VerticalAlignment="Center"/>
         <TextBlock Text="{x:Bind Description}" Margin="24,0,0,0" FlowDirection="RightToLeft"/>
      </StackPanel>
   </DataTemplate>
 </UserControl.Resources>

  <Grid x:Name="LayoutRoot" Height="638">
     <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
     </Grid.RowDefinitions>
     <TextBlock Text="{x:Bind MyData.JustText, Mode=OneWay}" x:Name="PaneHeader" Margin="60,12,0,0" Style="{StaticResource BaseTextBlockStyle}"/>
     <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1" VerticalAlignment="Stretch" 
 ItemClick="{x:Bind MyData.ListData_ItemClick}" IsItemClickEnabled="True" 
 ItemsSource="{x:Bind MyData.ListData}" ItemTemplate="{StaticResource NavLinkItemTemplate}">
         <ListView.ItemContainerStyle>
             <Style TargetType="ListViewItem">
                 <Setter Property="HorizontalContentAlignment" Value="Stretch" />
             </Style>
         </ListView.ItemContainerStyle>
     </ListView>
   </Grid>
</Page>

Perlu diketahui, pada MVVM anda dapat menghubungkan sebuah control (misal textBlock, checkbox, dll) langsung ke sebuah variabel yang ada pada class view tersebut. Setelah control tersebut sudah terhubung, maka ketika variabelnya berubah secara otomatis nilai pada control tersebut juga berubah. Misal anda menghubungkan textBlock A dengan variabel nilai1. Ketika anda merubah isian nilai1, maka nilai textBlock A juga ikut berubah. Untuk menghubungkan antara sebuah control pada sebuah nilai, anda dapat menggunakan x:Bind pada windows10. Pada code view di atas, anda dapat melihat saya menghubungkan beberapa control untuk terhubung ke variabel yang ada pada classnya yaitu variabel “MyData”. Selain itu anda juga dapat memanggil even yang ada pada variabel MyData dari view anda.

Setelah membuat tampilan diatas dan menghubungkan beberapa control ke variabel yang sudah ditentukan, silahkan jalankan aplikasi anda. Selesai.. happy coding..

[ C# Windows10 ] Use SplitView With ListView

Untuk mempermudah pengelolaan menu pada SplitView, kita dapat menggunakan control ListView. Menyambung postingan sebelumnya di https://sabitlabscode.wordpress.com/2015/10/27/c-windows10-how-to-use-splitview-control/, berikut adalah contoh code implementasi SplitView dengan menggunakan ListView.

  • Masukkan kode berikut pada MainPage.xaml anda
<Page
   x:Class="App1.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:App1"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d">
 
 <!--menyimpan resource template-->
 <Page.Resources>
    <DataTemplate x:Key="NavLinkItemTemplate" x:DataType="local:NavLink">
       <StackPanel Orientation="Horizontal" Margin="2,0,0,0">
          <TextBlock FontFamily="Segoe MDL2 Assets" Text="{x:Bind Symbol}" VerticalAlignment=          "Center"/>
          <TextBlock Text="{x:Bind Label}" Margin="24,0,0,0" VerticalAlignment="Center"/>
       </StackPanel>
     </DataTemplate>
  </Page.Resources>

  <SplitView x:Name="FormSplitView" DisplayMode="CompactOverlay">
     <SplitView.Pane>
        <Grid>
           <Grid.RowDefinitions>
              <RowDefinition Height="Auto"/>
              <RowDefinition Height="*"/>
              <RowDefinition Height="Auto"/>
           </Grid.RowDefinitions>
           <Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
           Width="50" Height="50" Background="Transparent" Click="HamburgerButton_Click"/>
           <TextBlock Text="MY APPS" x:Name="PaneHeader" Margin="60,12,0,0" Style="{StaticRes           ource BaseTextBlockStyle}"/>
          <!-- kode listview -->
          <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1"          VerticalAlignment="Stretch" ItemClick="NavLinksList_ItemClick" IsItemClickEnabled="          True" ItemsSource="{x:Bind NavLinks}" ItemTemplate="{StaticResource NavLinkItemTemp          late}"/>
       </Grid>
    </SplitView.Pane>

    <Grid>
        <Grid.RowDefinitions>
           <RowDefinition Height="Auto"/>
           <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Text="SPLITVIEW CONTENT" Margin="12,12,0,0" Style="{StaticResource BaseTex         tBlockStyle}"/>
        <TextBlock x:Name="content" Grid.Row="1" Margin="12,12,0,0" Style="{StaticResource Bo         dyTextBlockStyle}" />
    </Grid>
  </SplitView>
</Page>
  • Pada MainPage code, masukkan kode berikut :
public sealed partial class MainPage : Page
 {
    public SamplePage(Frame frame)
    {
       this.InitializeComponent();
       this.FormSplitView.Content = frame;
    }

    // definisi variabel daftar-daftar menu pada SplitView, 
    // Page1 dan Page2 adalah blank page yang telah dibuat pada postingan sebelumnya
    private ObservableCollection<NavLink> _navLinks = new ObservableCollection<NavLink>()
    {
       new NavLink() { Label = "List", Symbol = "" , Navigationpage=typeof(Page1) },
       new NavLink() { Label = "Alert", Symbol = "" , Navigationpage=typeof(Page1) },
       new NavLink() { Label = "Feedback", Symbol = "" , Navigationpage=typeof(Page2) },
    };

   public ObservableCollection<NavLink> NavLinks
   {
       get { return _navLinks; }
   }

   private void HamburgerButton_Click(object sender, RoutedEventArgs args)
   {
       FormSplitView.IsPaneOpen = !FormSplitView.IsPaneOpen;
   }

   //fungsi ketika melakukan klik pada menu
   private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e)
   {
      if (FormSplitView.Content != null)
         ((Frame)FormSplitView.Content).Navigate((e.ClickedItem as NavLink).Navigationpage);
   }
 }

 //model menampilkan listview pada SplitView
 public class NavLink
 {
     public string Label { get; set; }
     public string Symbol { get; set; }
     public Type Navigationpage { get; set; }
 }

Silahkan jalankan program anda, tampilan aplikasi anda akan seperti berikut :

Capture3

Selesai, happy coding..

[C# Windows10] Use Character Map For Icon

Windows10 menyediakan sebuah opsi untuk menampilkan icon-icon sederhana pada aplikasi anda dengan menggunakan karakter yang ada pada Character Map. Dengan fitur ini anda tidak perlu repot memasukkan image untuk menghiasi interface aplikasi anda, cukup masukkan character pada Character Map dan aplikasi anda dapat memunculkan icon seperti gambar berikut :

Capture2

Untuk melihat jenis-jenis karakternya, silahkan buka Character Map dengan cara mengetikkannya pada menu start windows10 anda dan buka tools Character Map. Akan tampil halaman seperti berikut :

Capture

Pastikan anda memilih font “Segoe MDL2 Assets”, maka akan tampil kumpulan icon-icon seperti gambar di atas. Silahkan pilih salah satu icon yang ingin anda gunakan dan klik tombol “Select” jika anda ingin menggunakan icon tersebut. Kemudian pillih tombol “Copy” untuk mengambil karakter yang harus di salin ke dalam aplikasi anda. Anda dapat memasukkan copy-an karakter tadi ke dalam aplikasi anda. Sebagai contoh anda ingin memasukkan icon pada control “Button”, maka berikut contoh kode yang harus diketikkan :

<Button x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content=""
 Width="50" Height="50" Background="Transparent"/>

Pada code di atas anda menentukan jenis Font Family ke Segoe MDL2 Assets, kemudian karakter yang sudah di copy anda paste ke nilai “Content=”. Setelah itu aplikasi anda otomatis akan menampilkan karakter yang sudah anda pilih tadi..

Happy coding..

[ C# Windows10 ] How To Use SplitView Control

Setelah sekian lama tidak buka blog dan menulis tutorial programming, akhirnya hari ini mulai bergairah kembali untuk menghidupkan blog ini. Adalah hadirnya windows10 dengan Visual Studio 2015-nya yang menarik perhatian saya untuk explore fitur-fitur terbarunya sekaligus posting pengalaman dan ilmu selama mempelajarinya.

Seperti diketahui Microsoft telah meluncurkan OS windows10 baik untuk PC, laptop, mobile, surface dan device lainnya yang menggunkan OS berbasis Windows. Melihat OS windows10 yang dapat diimplementasikan di berbagai jenis device, hal ini mengindikasikan bahwa Microsoft berharap adanya keseragaman dan memudahkan pengguna dalam menggunakan device yang berbeda-beda. Sekaligus berharap meningkatkan market sih 🙂 . Usaha ini juga dilanjutkan microsoft di level developer aplikasi/software ketika meluncurkan Visual Studio 2015. Dimana microsoft memperkenalkan UWP (Universal Windows Platform) yang pada intinya Microsoft memungkinkan developer mengembangkan aplikasi universal yang dapat diimplementasikan pada PC, laptop, surface, mobile, dll..

Baiklah, penjelasan diatas adalah mukadimah dari tutorial yang akan saya paparkan. Sebelumnya saya beritahukan bahwa pengembangan aplikasi UWP hanya dapat dilakukan pada OS Windows 10 dengan IDE Visual Studio 2015.

Kali ini saya akan memaparkan cara penggunaan SplitView pada C#. Tampilan akhir dari aplikasi ini adalah seperti berikut :

Capture

Terdapat panel menu di sebelah kiri dan panel content di sebelah kanan. Jika tombol pada panel sebelah kiri di klik, maka halaman konten yang ada di sebelah kanan juga akan berubah.

Capture2

Contoh ketika melakukan klik tombol lain, maka panel sebelah kiri berubah.

Capture3

Apabila tombol menu paling atas di klik, maka panel menu akan melebar dan menampilkan text dari masing-masing menu.

Baiklah berikut adalah tahap-tahap pembuatan aplikasi di atas :

  • Silahkan buat aplikasi baru pada VS2015 dan pilih universal apps.
  • Secara default ketika dijalankan project anda akan menampilkan halaman MainPage.xaml. Di halaman ini juga kita akan meletakkan code SplitView, masukkan kode berikut pada MainPage.xaml :
<Page
 x:Class="App1.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:App1"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">
 <SplitView x:Name="FormSplitView" DisplayMode="CompactOverlay" IsPaneOpen="False"
 CompactPaneLength="50" OpenPaneLength="150">
   <SplitView.Pane>
     <StackPanel Background="Gray">
        <Button x:Name="ButtonOpen" FontFamily="Segoe MDL2 Assets" Content=""
         Width="50" Height="50" Background="Transparent" Click="ButtonOpen_Click"/>
        <StackPanel Orientation="Horizontal">
           <Button x:Name="MenuButton1" FontFamily="Segoe MDL2 Assets" Content=""
            Width="50" Height="50" Background="Transparent" Click="MenuButton1_Click"/>
           <TextBlock Text="Page 1" FontSize="18" VerticalAlignment="Center" />
        </StackPanel>
        <StackPanel Orientation="Horizontal">
           <Button x:Name="MenuButton2" FontFamily="Segoe MDL2 Assets" Content=""
            Width="50" Height="50" Background="Transparent" Click="MenuButton2_Click" />
           <TextBlock Text="Page 2" FontSize="18" VerticalAlignment="Center" />
        </StackPanel>
     </StackPanel>
   </SplitView.Pane>
 <SplitView.Content>
    <Grid>
       <Frame x:Name="SplitContent">
       </Frame>
    </Grid>
  </SplitView.Content>
 </SplitView>
</Page>
  • Pada code di atas, terdapat tiga buah event yaitu event ketika ButtonOpen, MenuButton1 dan MenuButton2 di klik. Kita akan memaasukkan code untuk menjalankan ketiga event tersebut.
  • Pada Solution klik kanan pada “MainPage.xaml” lalu klik kanan dan pilih “View Code”.
  • Masukkan code berikut :
private void ButtonOpen_Click(object sender, RoutedEventArgs args)
 {
   FormSplitView.IsPaneOpen = !FormSplitView.IsPaneOpen;
 }

 private void MenuButton1_Click(object sender, RoutedEventArgs e)
 {
   if (FormSplitView.Content != null)
     ((Frame)FormSplitView.Content).Navigate(typeof(Page1));
 }

 private void MenuButton2_Click(object sender, RoutedEventArgs e)
 {
   if (FormSplitView.Content != null)
     ((Frame)FormSplitView.Content).Navigate(typeof(Page2));
 }
  • Pada solution, tambahkan dua buah “Blank Page” dan beri nama Page1.xaml dan Page2.xaml.
  • Pada Page1.xaml design, masukkan kode xaml berikut :
<Page
 x:Class="App1.Page1"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:App1"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d">

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="This Is Page 1" VerticalAlignment="Top" FontSize="80" />
 </Grid>
</Page>

Sedangkan pada Page2.xaml, masukkan kode berikut :

<Page
 x:Class="App1.Page2"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:App1"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 mc:Ignorable="d" FontSize="28.333">

 <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="This Is Page 2" VerticalAlignment="Top" FontSize="80" />
 </Grid>
</Page>

Dua kode di atas adalah kode yang digunakan untuk melakukan pengaturan tampilan pada halaman 1 dan halaman 2. Silahkan lakukan pengaturan sesuai keinginan anda jika perlu.

  • Pada solution, pilih “App.xaml” klik kanan pilih “View Code”. Masukkan code berikut pada “OnLaunched”
protected override void OnLaunched(LaunchActivatedEventArgs e)
 {

   #if DEBUG
   if (System.Diagnostics.Debugger.IsAttached)
   {
      this.DebugSettings.EnableFrameRateCounter = true;
   }
   #endif

   Frame rootFrame = Window.Current.Content as Frame;

   if (rootFrame == null)
   {
      rootFrame = new Frame();
      rootFrame.NavigationFailed += OnNavigationFailed;

     if (e.PreviousExecutionState == ApplicationExecutionState.Terminated){}

     Window.Current.Content = new SamplePage(rootFrame); //rootFrame;
   }
   Window.Current.Activate();
 }
  • View Code pada MainPage.axml, dan masukkan code berikut pada constructor nya :
 public SamplePage(Frame frame)
 {
    this.InitializeComponent();
    this.FormSplitView.Content = frame;
 }

Selesai, silahkan jalankan program anda.. Happy coding.. 🙂

Memangil Daftar Kontak di Windows Phone

Yah, seiring berkembangnya zaman kontak yang kita miliki semakin banyak dan semakin lengkap jika dibandingkan kontak yang lama. Dulu informasi kontak yang kita simpan di dalam handphone kita hanya bisa menyimpan satu nomor untuk satu nama. Sehingga jika ada teman yang memiliki nomor yang banyak maka kita akan menyimpan namanya berkali-kali. Sekarang untuk menghubungi teman kita terkadang kita tidak butuh nomor telpon tetapi kita menghubungi lewat email dan account jejaring sosial lainnya. untuk menyimpan informasi email dan jejaring sosial terkadang menyebabkan kontak di smartphone kita penuh padahal ketika kita ingin menelponny kita tidak memiliki nomornya.

Terus apa hubungannya dengan postingan ini?? Yah akibatnya jika kita membuat aplikasi yang memiliki fitur SMS akan mengakibatkan aplikasi kita error karena jika kita memilih kontka yang tidak memiliki nomor hp maka aplikasi kita akan error. Maka dari itu postingan ini akan membahas bagaimana kita bisa membuat fitur sms dan kita bisa memilih kontak dari kontak yang sudah pasti memiliki nomor hp.

Fitur SMS sebenarnya di Windows Phone di kenal dengan Louncher and Chooser Sending SMS dan get Kontak. Sebelum kita menambah fitur sms lebih baik kita buat terlebih dahulu halaman kita untuk mengetik sms dan di lengkapi oleh tombol untuk memilih kontak tujuan SMS dan langsung memangil halaman SMS. Setelah kita ketik send maka kita cukup tambahkan di halaman kontak untuk menampilkan kontak kita yang memiliki nomor kontak saja.

Untuk mendapatkan kontak yang ada di dalam device kita. Pertama tama kita buka WMAppManifest.xml yang terdapat di bagian Properties pada solution explorer dan pastikan semua bagian ini sudah di ceklist di dalam Capabilities. dan tambahkan

using Microsoft.Phone.Tasks;
using Microsoft.Phone.UserData;

Setelah di tambahan sekarang cukup tambahkan kode di bawah ini di halaman kontak yang telah di buat.

 

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (NavigationContext != null && NavigationContext.QueryString.TryGetValue("param", out param))
            {
                PhoneNumberChooserTask _phoneNumberChooser = new PhoneNumberChooserTask();
                _phoneNumberChooser.Completed += _phoneNumberChooser_Completed;
                _phoneNumberChooser.Show();
            }
            else
                NavigationService.GoBack();
        }

 

Untuk menampilkan kontak yang memiliki nomor handphone saja maka kita perlu memfilter kontak. untuk memfilternya kita harus mengecek semua nomor telpon semua kontak.

        void cons_SearchCompleted(object sender, ContactsSearchEventArgs e)
        {
           List<Contact> People = new List<Contact>() ;
           foreach (Contact con in e.Results){
                if(con.PhoneNumbers.FirstOrDefault()!=null)
                    People.Add(con);
           }
           ContactResultsData.ItemsSource =People;
        }

Jika kita sudah bisa menampilkan semua kontak yang memiliki nomor telpon saja sekarang bagaimana menangkap aksi jika salah satu kontak sudah di pilih.

        void _phoneNumberChooser_Completed(object sender, PhoneNumberResult e){
            SmsComposeTask _sms = new SmsComposeTask();
            if (e.PhoneNumber != null)
            {
                _sms.To = e.PhoneNumber.ToString();
                _sms.Body = param; _sms.Show();
            }
            else {
                NavigationService.GoBack();
            }
        }
    }

Yah semoga bisa membantu teman-teman sekalian..

Happy Coding.. 🙂

 

 

Menampilkan Context Menu dengan Hold

Dari pengalaman saya biasanya jika ingin menampilkan menu cukup menampilkan menu di bagian atas aplikasi untuk aplikasi berbasis Dekstop. Tetapi jika berbasis mobile? Yah seperti yang kita ketahui layar mobile cukup sempit jadi kita harus bisa memanfaatkan sebaik mungkin layar mobile kita. Pada awalnya saya berpikir untuk membuat aplikasi yang memiliki sebuah database dimana ada fitur menampilkan data dan jika data tersebut di hold maka akan muncuk menu pilihan mau menghapus atau mau meng-update?. Saya binggung ini fitur apa ya namanya? Setelah saya cari akhirnya dapat juga dan ternyata namanya adalah Context Menu.

Bagaimana membuatnya? Tahapannya cukup gampang, pertama silahkan instal Windows phone Toolkit terlebih dahulu pada project anda. Caranya cukup pilih Tools –> NuGet Package Manager–>Manage Packages for Solution maka akan muncul tampilan seperti dibawah ini.

CaptureSetelah Instal, yang perlu anda lakukan selanjutnya adalah meng-copy kode di bawah ini di halaman MainPage.xaml bagian atas.

 xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Kemudian, copy kode di bawah ini detelah deklarasi Tools yang ingin anda tambahkan tetapi deklrasinya belum ditutup misal pada pendekralasian Button maka kode di bawah ini berada sebelum </Button>.

<toolkit:ContextMenuService.ContextMenu>
                    <toolkit:ContextMenu IsZoomEnabled="True" x:Name="ContextMenu" >
                        <toolkit:MenuItem Header="Add"  />
                        <toolkit:MenuItem Header="Update" />
                        <toolkit:MenuItem Header="Delete" />
                    </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

Selesai.. jika program anda jalankan dan anda hold pada tools yang anda tambahkan Menu Item maka nanti akan muncul menu Item yang sudah kita buat yaitu Add, Update dan Delete seperti gambar di bawah ini. Ini bisa anda ubah dengan menambah menu baru atau mengubah menu yang ada atau bisa juga mengurangi menu sesuai kebutuhan anda.

wp_ss_20140402_0002

Dan jika anda ingin menambahkan event untuk setiap Menu Itemnya silahkan modifikasi pada tahapan ke 3 dengan menambahkan Click=”Nama_Method” atau jika mau lebih jelas silahkan perhatiakn code di bawah ini.

<toolkit:ContextMenuService.ContextMenu>
                    <toolkit:ContextMenu IsZoomEnabled="True" x:Name="ContextMenu" >
                        <toolkit:MenuItem Header="Add" Click="Opstion_Click" />
                        <toolkit:MenuItem Header="Update" Click="Opstion_Click"/>
                        <toolkit:MenuItem Header="Delete" Click="Opstion_Click"/>
                    </toolkit:ContextMenu>
</toolkit:ContextMenuService.ContextMenu>

Sekarang tinggal menambahkan method event-nya pada mainpage.xaml.cs

private void Opstion_Click(object sender, RoutedEventArgs e){
            MenuItem menuItem = (MenuItem)sender;
            MessageBox.Show(menuItem.Header.ToString());
}

Selamat Mencoba.. 🙂

 

 

 

%d bloggers like this: