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.. 🙂

 

 

 

Advertisements

[WP8 + SQLite] Delete Data From SQLite In Windows Phone

Sebelumnya saya pernah memposting menggenai SQLite juga tetapi baru tentang menginput data. Sekarang saya akan membahas bagaimana menghapus data dari SQLite. Project yang saya gunakan pada postingan ini adalah lanjutan dari postingan sebelumnya. Saya hanya melakukan penambahan fitur long press selected item pada listbox yang sudah pernah saya berikan.

Pada sadarnya untuk menghapus data di SQLite cukup gampang hanya membutuhkan SQL untuk mendeletenya saja. hanya saja sebelum membuat SQL kita perlu pendeklarasian SQL comment terlebih dahulu, carannya adalah dengan :

SQLiteCommand sqlComm = new SQLiteCommand(dbConn);

Setelah memiliki SQL comment sekarang anda bisa menyiapkan sintak SQL yang ingin dieksekusi dan disimpan dalam SQL comment, cara seperti di bawah ini:

 sqlComm.CommandText = "delete from task where nama = '" + Budi+ "'";

SQL diatas adalah untuk mendelete data yang dimiliki budi, ini bisa dimanipulasi dengan menganti kriterianya seperti SQL biasa. atau bisa disesuaikan dengan ini dari textbox seperti ini.

sqlComm.CommandText = "delete from task where nama = '" + textBox1.text+ "'";

Jika sudah siap SQLnya dan sudah disimpan dalam SQL comment sekarang saatnya untuk mengeksekusi SQL comment. Berikut caranya.

sqlComm.ExecuteQuery<Task>();

Penjelasan diatas adalah dasar dari cara menghapus data di SQLite, untuk implementasi penghapusannya mungkin banyak ide yang muncul dan berbeda-beda untuk setiap individu. Untuk implementasinya saya akan menambahkan fitur hapus jika ada item list yang di tekan lama (hold) maka akan ada konfirmasi penghapusan data. Cara menambahkan even hold cukup menambahkan even pada list seperti gambar di bawah ini.

delete

Sedangkan di mainpage.xml.csnya saya tambahkan kode di bawah ini yang merupakan hasil modipikasi code sebelumnya yang kita bahas.

private string potong(int urutan, string isiList) {
            string temp =string.Empty;int i=0;
            foreach (var t in isiList.ToCharArray()) {
                if (i == urutan && !t.Equals(':')) 
                    temp += t;
                else if (t.Equals(':')) 
                    i++;
            }
            return temp;
        }
        private void DataList() {
            List<Task> retrievedTasks = dbConn.Table<Task>().ToList<Task>();
            DaftarTlp.Items.Clear();
            foreach (var t in retrievedTasks)
            {
                DaftarTlp.Items.Add(t);
            }
            TBTlp.Text = string.Empty;
            TBNama.Text = string.Empty;
        }
        private void DaftarTlp_Hold(object sender, System.Windows.Input.GestureEventArgs e)
        {
            if (DaftarTlp.SelectedIndex >=0)
            {
                MessageBoxResult result=MessageBox.Show("Delete","Are you sure ?",MessageBoxButton.OKCancel);
                if (result==MessageBoxResult.OK) {
                    Task task = new Task();
                    SQLiteCommand sqlComm = new SQLiteCommand(dbConn);
                    sqlComm.CommandText = "delete from task where nama = '" + potong(1,DaftarTlp.SelectedItem.ToString()) + "'";
                    sqlComm.ExecuteQuery<Task>();
                    DataList();
                }
            }
        }

Jika item list kita hold maka akan muncul message box yang berfungsi mengkonfirmasi apakah kita benar-benar mau menghapus data item yang kita pilih. Jika user memilih iya maka data akan terhapus. Kurang lebih itu ide dari saya, jika anda memiliki ide yang berbeda silahkan dimodifikasi sesuai kebutuhan anda tetapi pada dasarnya penghapusan itu sama.. Selamat mencoba.. 🙂

[WP8 + SQLite] Insert Data With SQLite In Windows Phone

Kali ini saya akan membahas mengenai pembuatan database di Windows Phone. Sebelumnya saya pernah memperkenalkan XML, XML pada dasarnya berbeda sekali dengan sql yang biasa kita gunakan di pemrograman desktop sehingga banyak orang yang sudah biasa dengan sql merasakan kesulitan menggunakan XML. Di Windows phone SQL juga bisa digunakan melalui RDBM SQLite. Sebelum kita membuat aplikasi sederhana yang terhubung dengan database kita terlebih dahulu harus memastikan beberapa hal, diantaranya:

1. Menginstal SQLite Windows Phone

Caranya cukup pilih Tools -> Extentions and Update dan kemudian pilih tab Online dan kemudian pilih SQLite Windows Phone dan kemudian Download. Setelah didownload maka secara otomatis akan meminta restart Visual Studio anda.

2. Langkah kedua adalah menginstal Packages sqlite_net dan sqlite_net_wp8.Caranya adalah dengan memilih Tools -> Nuget Package Manager -> Manage Nuget Package for Solution. Kemudian pilih sqlite_net kemudian instal, lakukan kembali langkah dua untuk package sqlite_net_wp8

3. Menambahkan references SQLite Windows Phone dengan cara klik kanan References->Existing Item->Windows Phone pilih SQLite windows Phone.

4. Mendowload file disini https://github.com/peterhuene/sqlite-net-wp8. Setelah download silahkan di extrak dan klik kanan pada project dan pilih Add->exsiting item->cari tempat anda meng-extract file tadi dan pilih sqlite.vcxproj. File ini berfungsi sebagai penghubung antara SQLite for Windows Phone SDK dan sqlite-net NuGet package.

http://khatrishashank.files.wordpress.com/2013/12/downloadwrapper.png

5. Klik kanan pada Solution Project anda dan pilih Configuration Manager dan pilih ARM.

http://khatrishashank.files.wordpress.com/2013/12/confchange.png

Sekarang kita baru bisa mendesain aplikasi kita, kali ini saya akan membuat aplikasi untuk menampilkan buku telpon. Berikut tampilan aplikasi yang saya buat:

1

Isi dari file xml MainPage.xml adalah berikut:
<Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
            <TextBlock Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBox x:Name="TBNama" HorizontalAlignment="Left" Height="72" Margin="188,22,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="222"/>
            <TextBlock HorizontalAlignment="Left" Margin="54,47,0,0" TextWrapping="Wrap" Text="Nama" VerticalAlignment="Top"/>
            <TextBox x:Name="TBTlp" HorizontalAlignment="Left" Height="72" Margin="188,92,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="222"/>
            <TextBlock x:Name="No_Telpon" HorizontalAlignment="Left" Margin="54,117,0,0" TextWrapping="Wrap" Text="No Telpon" VerticalAlignment="Top"/>
            <Button x:Name="BtnAdd" Content="Add" HorizontalAlignment="Left" Margin="317,169,0,0" VerticalAlignment="Top" Click="BtnAdd_Click"/>
            <ListBox Name="DaftarTlp" Margin="24,280,-24,0"></ListBox>
        </Grid>
        
    </Grid>

Setelah tampilan saatnya kita akan mulai mengubah isi dari MainPage.xml.cs, pertama kita harus membuat sebuah kelas yang berfungsi sebagai kelas enabler kolom database dengan pemprograman.

public sealed class Task
 {
     /// <summary>
     /// You can create an integer primary key and let the SQLite control it.
     /// </summary>
     [PrimaryKey, AutoIncrement]
     public int Id { get; set; }
     public string Nama { get; set; }
     public string Tlp { get; set; }
     public override string ToString(){
         return Id + ": " + Nama + " " + Tlp;
     }
 }

Letak koding diatas adalah di bawah kelas MainPage.xml.cs. Kemudian kita akan membuat sebuah perintah untuk menentukan nama database dan juga membuat konektor yang berada sebelum konstruktor MainPage().

public static string DB_PATH = Path.Combine(Path.Combine(ApplicationData.Current.LocalFolder.Path, "DBBukuTelpon.sqlite")); 
private SQLiteConnection dbConn;

Kemudian kita akan membuat event dari Tombol BtnAdd

 private void BtnAdd_Click(object sender, RoutedEventArgs e)
        {
            Task task=new Task(){
                Nama=TBNama.Text,
                Tlp=TBTlp.Text
            };
            dbConn.Insert(task);
            List<Task> retrievedTasks = dbConn.Table<Task>().ToList<Task>();
            DaftarTlp.Items.Clear();
            foreach (var t in retrievedTasks)
            {
                DaftarTlp.Items.Add(t);
            }
            TBTlp.Text = string.Empty;
            TBNama.Text = string.Empty;
        }

Jika Tombol BtnAdd diklik data yang diinput pada textboxt Nama, dan No Telpon akan disimpan ke dalam atribut Task dan akan diinsert ke tabel task. Setelah disimpan dalam tabel saatnya sekarang membaca isi dari tabel yang terbaru agar kita bisa memeriksa apakah data yang baru kita masukan sudah ada dalam tabel atau belum. Caranya adalah dengan menampilan semua data pada tabel ke dalam ListBox Daftar Telpon.

Tambahkan juga perintah di bawah ini di bawah konstruktor MainPage()

protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            /// Create the database connection.
            dbConn = new SQLiteConnection(DB_PATH);
            /// Create the table Task, if it doesn't exist.
            dbConn.CreateTable<Task>();
            /// Retrieve the task list from the database.
            List<Task> retrievedTasks = dbConn.Table<Task>().ToList<Task>();
            /// Clear the list box that will show all the tasks.
            DaftarTlp.Items.Clear();
            foreach (var t in retrievedTasks)
            {
                DaftarTlp.Items.Add(t);
            }
        }

        protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            if (dbConn != null)
            {
                /// Close the database connection.
                dbConn.Close();
            }
        }

Jika sudah sampai pada tahap ini berarti maka program anda sudah selesai. Project ini hanya bisa menginput data saja sedangkan untuk penghapusan akan saya bahas pada project selanjutnya. See You.. 🙂

Application Bar in Windows Phone 8

Wah tidak terasa sudah lama tidak posting.

Kali ini saya akan mempublis tentang membuat Application Bar di Windows Phone 8. Pada dasarnya Application Bar adalah standar button yang sering digunakan pada pemrogaman mobile. Application Bar adalah tempat kumpulan dari tombol-tombol dimana tombol tersebut bisa berupa tulisan atau icon. Di bawah ini adalah contoh dari application bar yang memiliki tombol yang berupa icon.

Image

Kita akan membuat application bar yang bisa digunakan pada semua halaman project. Tahap pertama, Kita harus mendesain application barnya terlebih dahulu. Code yang program yang akan ditambahkan berada di file App.xaml tepatnya diantara Application.Resources seperti coding dibawah ini.

   <Application.Resources>
        <!--Tambah Kode Disini-->
            <local:LocalizedStrings xmlns:local="clr-namespace:Beker" x:Key="LocalizedStrings"/>
    </Application.Resources>

Sedangkan code yang akan ditambahkan adalah sebagai berikut. Tetapi sebelumnya silahkan siapkan icon yang akan digunakan anda bisa mendownload disini.

            <shell:ApplicationBar x:Name="globalApplicationBar"
                              IsMenuEnabled="True" Opacity="0.7" >
            <shell:ApplicationBarIconButton Text="Add"  IconUri="add.png"/>
            <shell:ApplicationBarIconButton Text="Delete"  IconUri="delete.png"/>
            </shell:ApplicationBar>

Setelah ditambahkan code diatas tentu belum mengubah tampilan halaman aplikasi kalian. Sekarang bagaimana menampilkan application bar di halaman yang kita inginkan. Silahkan pilih halaman yang ingin ditambahkan application bar. Tambahkan code

ApplicationBar="{StaticResource globalApplicationBar}"

setelah code

shell:SystemTray.IsVisible="True"

Bagaimana? Sudah adakan application barnya… Masih ada yang kurang, tombol yang kalian buat ternyata belum ada eventnya. Maka silahkan tambahkan eventnya di setiap tombol. Di App.xaml silahkan tambahkan

Click="ApplicationBarAdd_Click"

di desain tombol Add dan

Click="ApplicationBarDelete_Click"

di desain tombol Delete.

dan selanjutnya ke App.xaml.cs untuk membuat method kliknya. Misal jika tombol Add di klik akan menampilkan message box “Tombol Tambah”.

public void ApplicationBarAdd_Click(object sender, EventArgs e){
            MessageBox.Show("Tombol Tambah");
        }

Selesai.. Semoga bermanfaat.. 🙂

 

 

 

Logika Operator

Ini adalah calculator yang sanggat sederhana yang bisa mengoperasikan perhitungan sederhana. Baiklah langsung saja, untuk tahap awal silahkan desain tampilan seperti dibawah ini:

ImageUbahlah nama semua tools sesuai dengan fungsinya. Jika namanya sudah sesuai barulah kita bisa melai membuat codingnya. Baiklah dari gambar diatas terdapat dua buah inputan yaitu nilai1 dan nilai 2 dan jika 5 tombol operator logika di klik maka akan menampilkan hasilnya di textbox hasil. Sekarang mari kita tambahkan aksi-aksi dari setiap tombol

1 btnTambah

       private void btnTambah_Click(object sender, RoutedEventArgs e)
        {
            tbHasil.Text = (int.Parse(tbNilai1.Text) + int.Parse(tbNilai2.Text)).ToString();
        }

2 btnKurang

        private void btnKurang_Click(object sender, RoutedEventArgs e)
        {
            tbHasil.Text = (int.Parse(tbNilai1.Text) -int.Parse(tbNilai2.Text)).ToString();
        }

3 btnKali

       private void Button_Click(object sender, RoutedEventArgs e)
        {
            tbHasil.Text = (int.Parse(tbNilai1.Text) * int.Parse(tbNilai2.Text)).ToString();
        }

4 btnBagi

       private void btnBagi_Click(object sender, RoutedEventArgs e)
        {
            tbHasil.Text = (int.Parse(tbNilai1.Text) / int.Parse(tbNilai2.Text)).ToString();
        }

5 btnmod

       private void btnModulus_Click(object sender, RoutedEventArgs e)
        {
            tbHasil.Text = (int.Parse(tbNilai1.Text) % int.Parse(tbNilai2.Text)).ToString();
        }

Sedangkan untuk tombol Reset berfungsi untuk menghapus isi dari textbox nilai 1, nilai 2 dan hasil dengan code berikut :

       private void btnReset_Click(object sender, RoutedEventArgs e)
        {
            tbNilai1.Text = "";
            tbNilai2.Text = "";
            tbHasil.Text = "";
        }

Tombol keluar akan kembali ke page sebelumnya yang ada di history.

       private void btnKeluar_Click(object sender, RoutedEventArgs e)
        {
            NavigationService.GoBack();
        }
%d bloggers like this: