Xamarin iOS – Dynamic UITabBarController

Xamarin iOS – Dynamic UITabBarController

Untuk kebutuhan yang lebih spesifik, kita dapat membuat kumpulan UIViewController pada UITabBarController secara dinamis. Tahapannya adalah :

  • Tambahkan sebuah UIViewController (xib file) yang akan digunakan secara dinamis pada UITabBarController. Misal dalam contoh ini saya akan membuat sebuah file UIViewController dengan nama “DynamicController”
  • Pada UITabBarController, tambahkan sebuah button atau UITBarButtonItem yang digunakan untuk memberi perintah menambahkan DynamicController ke dalam UITabBar
  • Masukkan code berikut untuk menambah bar dengan DynamicController
 List<UIViewController> temp_list = new List<UIViewController>(this.ViewControllers);
 UIViewController new_tab = new DynamicController();
 new_tab.TabBarItem.Title = "Item #" + (temp_list.Count + 1).ToString();
 temp_list.Add(new_tab);

 this.ViewControllers = temp_list.ToArray();

Yang terjadi pada code di atas adalah :

  • Mendefinisikan variabel temp_list dalam bentuk list dan kita masukkan semua array pada this.ViewControllers (array UIViewController yang sudah ada pada BarItem
  • Mendefinisikan variabel “new_tab” yang berisi UIViewController yang akan ditambahkan
  • Konfigurasi judul TabBar untuk UIViewController “new_tab”
  • Menambahakan list “temp_list” dengan UIViewController baru
  • Atur ulang nilai this.ViewControllers

Source saya ada di : https://github.com/sabithuraira/xamarin_ios_playground/commit/3c5ea649474c69192f264461667082f267e6878b

Happy coding…

Xamarin Android – Consuming REST API

Pada tulisan bulan Mei (lama kali ya..) saya pernah posting tulisan tentang cara membuat REST Web Service dengan Silex pada tautan berikut. Sejatinya saya berencana membuat tutorial cara mengkonsumsi Web Service tersebut di beberapa jenis platform seperti android dan iOS. Tapi karena keterbatasan waktu, saya baru sempat membuat penggunaannya pada platform android dengan menggunakan Xamarin. Berikut langkah-langkahnya :

  • Buatlah sebuah project android pada Xamarin.
  • Tambahkan package “Newtonsoft.Json” dan “Xamarin.Android.Support.v4” melalui nuget
  • Buatlah sebuah model dengan nama “FoodMenu.cs” yang akan mendefinisikan class data dari FoodMenu, masukkan code berikut :
using System;

namespace SilexSample
{
	public class FoodMenu
	{
		private int id;
		private string name;
		private double price;

		public FoodMenu (string name, double price)
		{
			this.name = name;
			this.price = price;
		}

		public FoodMenu (int id, string name, double price)
		{
			this.id = id;
			this.name = name;
			this.price = price;
		}

		public int Id{get{ return this.id; }}

		public string Name{get{ return this.name; }}
		public double Price{get{ return this.price; }}
	}
}
  • Tambahkan sebuah file yang digunakan untuk melakukan komunikasi dengan REST Server, beri nama dengan “FoodLoader.cs”. Pada file ini akan mendefinisikan fungsi untuk mengambil data, melakukan insert update serta menghapus data. Masukkan code berikut pada class FoodLoader :

 

using System;
using System.Collections.Generic;
using System.Text;
using System.IO;
using System.Net;
using Newtonsoft.Json.Linq;

namespace SilexSample
{
	public class FoodLoader
	{
		private static readonly string serverLink = "url_anda/web/index.php/";

		public FoodLoader ()
		{}

		public static List LoadData()
		{
			string link = serverLink + "daftar";
			List datas = new List ();
			try {
				HttpWebRequest request = (HttpWebRequest)WebRequest.Create(link);
				request.Method="GET";
				request.ContentType = "application/json";

				HttpWebResponse response = (HttpWebResponse)request.GetResponse();

				if (response.StatusCode == HttpStatusCode.OK) {
					Stream receiveStream = response.GetResponseStream();
					StreamReader readStream = new StreamReader(receiveStream, Encoding.UTF8);
					string outputString = readStream.ReadToEnd();

					response.Close();
					readStream.Close();

					outputString = outputString.Trim().Replace("// ", "");
					var resultArray = JArray.Parse(outputString);

					for (int i=0; i < resultArray.Count; i++) {
						var jstock = (JObject)resultArray[i];

						FoodMenu temp_data=new FoodMenu(
							int.Parse((string)jstock["id"]),
							(string)jstock["name"],
							double.Parse((string)jstock["price"])
						);

						datas.Add(temp_data);
					}
				}
			}
			catch (Exception e) {
				throw;
			}
			return datas;
		}

		public static String InsertData(FoodMenu data)
		{
			string link = serverLink + "insert";
			String result = "";
			try {
				HttpWebRequest request = (HttpWebRequest)WebRequest.Create(link);

				StringBuilder postData = new StringBuilder();
				postData.Append("name="+data.Name+"&");
				postData.Append("price="+data.Price.ToString());
				var data_encode = Encoding.ASCII.GetBytes(postData.ToString());

				request.Method = "POST";
				request.ContentType = "application/x-www-form-urlencoded";
				request.ContentLength = data_encode.Length;

				using (var stream = request.GetRequestStream())
				{
					stream.Write(data_encode, 0, data_encode.Length);
				}

				var response = (HttpWebResponse)request.GetResponse();

				if (response.StatusCode == HttpStatusCode.OK) {
					Stream receiveStream = response.GetResponseStream();
					StreamReader readStream = new StreamReader(receiveStream, Encoding.UTF8);
					result = readStream.ReadToEnd();

					response.Close();
					readStream.Close();
				}
			}
			catch (Exception) {
				throw;
			}
			return result;
		}

		public static String UpdateData(FoodMenu data, int id)
		{
			string link = serverLink + "update/" + id.ToString ();
			String result = "";
			try {
				HttpWebRequest request = (HttpWebRequest)WebRequest.Create(link);

				StringBuilder postData = new StringBuilder();
				postData.Append("name="+data.Name+"&");
				postData.Append("price="+data.Price.ToString());
				var data_encode = Encoding.ASCII.GetBytes(postData.ToString());

				request.Method = "PUT";
				request.ContentType = "application/x-www-form-urlencoded";
				request.ContentLength = data_encode.Length;

				using (var stream = request.GetRequestStream())
				{
					stream.Write(data_encode, 0, data_encode.Length);
				}

				var response = (HttpWebResponse)request.GetResponse();

				if (response.StatusCode == HttpStatusCode.OK) {
					Stream receiveStream = response.GetResponseStream();
					StreamReader readStream = new StreamReader(receiveStream, Encoding.UTF8);
					result = readStream.ReadToEnd();

					response.Close();
					readStream.Close();
				}
			}
			catch (Exception) {
				throw;
			}
			return result;
		}

		public static String DeleteData(int id)
		{
			string link = serverLink + "delete/" + id.ToString ();
			String result = "";
			try {
				HttpWebRequest request = (HttpWebRequest)WebRequest.Create(link);
				request.Method = "DELETE";
				var response = (HttpWebResponse)request.GetResponse();

				if (response.StatusCode == HttpStatusCode.OK) {
					Stream receiveStream = response.GetResponseStream();
					StreamReader readStream = new StreamReader(receiveStream, Encoding.UTF8);
					result = readStream.ReadToEnd();

					response.Close();
					readStream.Close();
				}
			}
			catch (Exception) {
				throw;
			}
			return result;
		}
	}
}
  • Sekarang kita akan membuat beberapa UI yang ditampilkan pada aplikasi android. UI yang akan dibuat antara lain UI main activity yang terdiri dari sebuah listview dan text, UI form melakukan input/update data, UI untuk menu pada bar, dan untuk row masing-masing data pada listview. Pertama buatlah UI untuk tampilan main pada Main.xml dengan memasukkan code berikut :

<?xml version=1.0 encoding=utf8?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
    android:orientation=vertical
    android:layout_width=match_parent
    android:layout_height=match_parent>
    <TextView
        android:text=List of Food
        android:layout_width=wrap_content
        android:layout_height=wrap_content
        android:id=@+id/title
        android:layout_gravity=center
        android:textSize=18dp
        android:paddingBottom=8dp />
    <ListView
        android:id=@+id/my_list
        android:layout_width=match_parent
        android:layout_height=match_parent
        android:paddingLeft=5dip
        android:paddingRight=5dip
        android:layout_margin=0dip
        android:padding=0dip
        android:divider=#00000000 />
</LinearLayout>

  • Setelah itu buat layout “form_food.xml” untuk form input data :

<?xml version=1.0 encoding=utf8?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
    android:orientation=vertical
    android:layout_width=match_parent
    android:layout_height=match_parent>
    <TextView
        android:text=List of Food
        android:layout_width=wrap_content
        android:layout_height=wrap_content
        android:id=@+id/title
        android:layout_gravity=center
        android:textSize=18dp
        android:paddingBottom=8dp />
    <ListView
        android:id=@+id/my_list
        android:layout_width=match_parent
        android:layout_height=match_parent
        android:paddingLeft=5dip
        android:paddingRight=5dip
        android:layout_margin=0dip
        android:padding=0dip
        android:divider=#00000000 />
</LinearLayout>

  • Lalu UI untuk tampilan row masing-masing data pada “row_food.xml :

<?xml version=1.0 encoding=utf8?>
<LinearLayout xmlns:android=http://schemas.android.com/apk/res/android
    android:layout_width=match_parent
    android:layout_height=40dp
    android:orientation=horizontal>
    <TextView
        android:text=Name 
        android:layout_width=wrap_content
        android:layout_height=wrap_content
        android:id=@+id/name
        android:paddingLeft=5dp
        android:layout_gravity=center
        android:width=250dp
        android:textSize=18dp />
    <TextView
        android:id=@+id/price
        android:layout_width=wrap_content
        android:layout_height=wrap_content
        android:gravity=right
        android:text=Price
        android:layout_gravity=center
        android:textSize=18dp />
</LinearLayout>

  • Terakhir UI untuk tampilan top bar pada aplikasi yang terdiri dari tombol Add dan Refresh data pada “bar_menu.xml”

<?xml version=1.0 encoding=utf8?>
<RelativeLayout xmlns:android=http://schemas.android.com/apk/res/android
    xmlns:tools=http://schemas.android.com/tools
    android:layout_width=fill_parent
    android:layout_height=wrap_content>
    <ImageButton
        android:id=@+id/add
        android:layout_width=50dip
        android:layout_height=fill_parent
        android:src=@mipmap/add
        style=?android:attr/borderlessButtonStyle
        android:layout_alignParentRight=true />
    <ImageButton
        android:id=@+id/refresh
        android:layout_width=50dip
        android:layout_height=fill_parent
        android:src=@mipmap/refresh
        style=?android:attr/borderlessButtonStyle
        android:layout_toLeftOf=@id/add />
</RelativeLayout>

  • Setelah membuat UI yang dibutuhkan, sekarang raciklah MainActivity pada aplikasi anda. Berikut code lengkap dari MainActivity :

 

using System;
using System.Collections.Generic;

using Android.App;
using Android.Widget;
using Android.OS;
using Android.Content;
using Android.Views;

namespace SilexSample
{
	[Activity (Label = "SilexSample", MainLauncher = true, Icon = "@mipmap/icon")]
	public class MainActivity : Activity
	{
		AlertDialog.Builder builder;
		private ListView my_list;
		private TextView title;
		private ImageButton btn_add;
		private ImageButton btn_refresh;

		private LoadTask asyncTask;  
		private Handler mHandler = new Handler();
		Runnable mUpdateTimeTask;

		List datas = new List ();
		private FoodAdapter adapter;
		private int current_position = 0;

		protected override void OnCreate (Bundle savedInstanceState)
		{
			base.OnCreate (savedInstanceState);

			SetContentView (Resource.Layout.Main);

			my_list = FindViewById (Resource.Id.my_list);
			title = FindViewById (Resource.Id.title);

			adapter = new FoodAdapter (this, this.datas);
			my_list.Adapter = adapter;
			ListEvent ();
			SetActionBar();

			mUpdateTimeTask = new Runnable(Run);
			mHandler.RemoveCallbacks(mUpdateTimeTask);
			mHandler.Post(mUpdateTimeTask);
		}

		private void RefreshData()
		{
			mUpdateTimeTask = new Runnable(Run);
			mHandler.RemoveCallbacks(mUpdateTimeTask);
			mHandler.Post(mUpdateTimeTask);
		}

		private void SetActionBar()
		{
			Context context = ActionBar.ThemedContext;

			ActionBar.DisplayOptions = ActionBarDisplayOptions.ShowCustom;
			ActionBar.SetCustomView(Resource.Layout.bar_menu);

			btn_add = FindViewById(Resource.Id.add);
			this.btn_add.Click += (o, e) =>
			{
				builder = new AlertDialog.Builder(this);
				builder.SetTitle("Add Data");

				View view_layout = LayoutInflater.From(this).Inflate(Resource.Layout.form_food, null);
				EditText name = view_layout.FindViewById(Resource.Id.name);
				EditText price = view_layout.FindViewById(Resource.Id.price);

				builder.SetView(view_layout);
				builder.SetPositiveButton("Ok", (os, es) =>
				{
					FoodMenu temp = new FoodMenu(name.Text, double.Parse(price.Text));
					FoodLoader.InsertData(temp);
					mHandler.RemoveCallbacks(mUpdateTimeTask);
					mHandler.Post(mUpdateTimeTask);
					((Dialog)os).Dismiss();
				});

				builder.SetNegativeButton("Cancel", (os, es) =>
				{
					((Dialog)os).Dismiss();
				});
				builder.Show();
			};

			btn_refresh = FindViewById(Resource.Id.refresh);
			btn_refresh.Click += (o, e) =>
			{
				RefreshData();
			};
		}

		private void ListEvent(){
			my_list.ItemClick += (o, e) => {
				this.current_position=e.Position;
				builder = new AlertDialog.Builder (this);
				builder.SetMessage("Select an action");
				builder.SetNegativeButton ("Delete", DeleteClicked);
				builder.SetPositiveButton("Update",UpdateClicked);
				builder.Show();
			};
		}

		private void DeleteClicked (object sender, DialogClickEventArgs e)
		{
			FoodLoader.DeleteData (datas [current_position].Id);
			mHandler.RemoveCallbacks(mUpdateTimeTask);
			mHandler.Post(mUpdateTimeTask);
			((Dialog)sender).Dismiss ();
		}
			
		private void UpdateClicked (object sender, DialogClickEventArgs e)
		{
			((Dialog)sender).Dismiss ();

			builder = new AlertDialog.Builder (this);
			builder.SetTitle ("Update Data");
			//
			View view_layout = LayoutInflater.From (this).Inflate (Resource.Layout.form_food, null);

			EditText name = view_layout.FindViewById (Resource.Id.name);
			EditText price = view_layout.FindViewById (Resource.Id.price);

			name.Text = datas [current_position].Name;
			price.Text = datas [current_position].Price.ToString ();

			//
			builder.SetView (view_layout);
			builder.SetPositiveButton ("Ok", (os, es) => {
				FoodMenu temp=new FoodMenu(name.Text,double.Parse(price.Text));
				FoodLoader.UpdateData(temp,datas[current_position].Id);
				mHandler.RemoveCallbacks(mUpdateTimeTask);
				mHandler.Post(mUpdateTimeTask);
				((Dialog)os).Dismiss ();
			});

			builder.SetNegativeButton ("Cancel", (os, es) => {
				((Dialog)os).Dismiss();
			});
			builder.Show();
		}

		public void Run(){
			if (asyncTask != null)
			if (asyncTask.GetStatus() == AsyncTask.Status.Running)
				asyncTask.Cancel(true);   		

			asyncTask = (LoadTask)new LoadTask (this).Execute ();
		}

		private class MyResult {
			public Boolean success;
			public Exception exception;
		}

		private class LoadTask : AsyncTask< Java.Lang.Void , Java.Lang.Void , MyResult>{
			MainActivity parent;
			public LoadTask(MainActivity parent){
				this.parent=parent;
			}

			protected override void OnPreExecute() {
				parent.title.Text = "Loading...";
				base.OnPreExecute();
			}

			protected override void OnPostExecute(MyResult result){
				if (result.exception != null && result.success == false)
					Toast.MakeText (parent, result.exception.Message, ToastLength.Long).Show ();

				parent.title.Text = "List of Food";
				base.OnPostExecute (result);
			}

			protected override MyResult RunInBackground(params Java.Lang.Void[] @params){			
				MyResult result = new MyResult();
				result.exception = null;
				result.success = true;

				try {
					parent.RunOnUiThread(() => {
						parent.LoadData();
					});
				}
				catch (Exception e) {
					result.exception = e;
					result.success = false;
				}
				return result;
			}
		}

		public void LoadData(){
			try {
				this.datas=FoodLoader.LoadData();
				adapter = new FoodAdapter (this, this.datas);
				my_list.Adapter = adapter;
			} 
			catch (Exception) {
				Toast.MakeText (this, "Something error on the server or your connection", ToastLength.Long).Show ();
			}
		}
	}
}

Setelah itu jalankan aplikasi anda untuk melihat hasilnya..

Anda juga dapat mengunduh aplikasi yang telah saya buat di https://github.com/sabithuraira/tutor_silex (aplikasi android yang dibuat saya letakkan pada folder “SilexAndroid”..

Happy coding..

Xamarin iOS – Use UIWebView

Ya, sebenarnya panduan untuk menggunakan UIWebView pada Xamarin iOS sudah ada di https://developer.xamarin.com/recipes/ios/content_controls/web_view/load_a_web_page/. Tetapi khusus iOS9 dan ke atas terdapat permasalahan munculnya blank page setiap kali load suatu website. Sebagai contoh jika kita ingin melihat tampilan “http://xamarin.com/&#8221; (bukan https), maka yang kita harapkan adalah tampilan seperti berikut :

simulator-screen-shot-nov-27-2016-11-30-02-pm

Bukan tampilan blank page seperti berikut :

screen-shot-2016-11-27-at-11-27-07-pm

Blank page di atas akan menampilkan pesan

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure.
Temporary exceptions can be configured via your app's Info.plist file.

Pada “Application Output”-nya. Untuk mengatasi hal tersebut anda harus memodifikasi Info.plist anda agar aplikasi mengizinkan mengakses http. Buka file Info.plist (lebih baik dibuka dengan editor biasa seperti atom/sublime text). Tambahkan konfigurasi berikut di dalam tag <dict> induk :

<key>NSAppTransportSecurity</key>
<dict>
   <key>NSAllowsArbitraryLoads</key>
   <true/>
</dict>

Simpan perubahan tersebut lalu jalankan kembali aplikasi anda.. maka UIWebView sudah dapat menampilkan website dengan http kembali..

Happy coding…

React Native – ListView With Filter Header and Section Header

React Native – ListView With Filter Header and Section Header

Melanjutkan tulisan sebelumnya, kali ini kita akan mencoba menambahkan control untuk melakukan filter pada listview yang telah dibuat seperti gambar berikut :

screen-shot-2016-10-29-at-10-55-08-pm

Sebelum membuat sebuah screen seperti tampilan diatas, kita terlebih dahulu akan membuat sebuah screen yang terdiri dari ListView dan fitur untuk melakukan filter :

screen-shot-2016-10-26-at-3-43-04-pm

Untuk menambahkan component seperti gambar di atas, tambahkan header pada listview yang kita miliki dengan menambahkan code berikut pada code ListView :

         renderHeader={() =>
            <View style={styles.listview_header}>
              <TextInput style={styles.input}
                placeholder="Search..."
                onChangeText={(text) => console.log('searching for ', text)}
              />
            </View>
          }

Code di atas memasukkan code TextInput pada bagian header listview dimana jika diketikkan suatu karakter pada textinput tersebut, maka secara otomatis data pada listview akan difilter berdasarkan karakter yang kita ketikkan. Kok setelah diketik datanya masih belum ter-filter? Emang belum kita buat.. Untuk membuat fitur yang dapat melakukan filter data sesuai dengan data yang dimasukkan pengguna lakukan modifikasi code anda seperti berikut :

const data_array=[‘Music', ‘Movie', ‘Sport', 'Entertainment',];
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

export default class SampleMenu extends Component {
  constructor(props) {
    super(props);
    //definition of listview datasource
    this.state = {
      dataSource: ds.cloneWithRows(data_array),
      filter_string:'',
    };
  }

Rubah code pada bagian constructor seperti code di atas. Apa yang kita lakukan pada perubahan tersebut?

  1. Meletakkan data yang akan ditampilkan pada ListView di luar constructor/class. Kenapa ini dilakukan?
      • Jika data array diletakkan di dalam constuctor, kita tidak dapat menggunakan data array untuk di filter.
      • Antara data array dan dataSource harus dipisahkan sebab ketika proses filter berlangsung maka dataSource akan diperbaharui sesuai dengan data array yang sudah di filter.
  1. Nilai ds kita lettakkan di luar constructor/class. Kenapa?
      • Untuk memperbaharui nilai pada dataSource, kita akan menggunakan nilai ds. Jika diletakkan di constructor kita jadi tidak bisa menggunakan data ds tersebut.

Selain melakukan modifikasi code di atas, kita juga perlu menambahkan code yang akan mengeksekusi proses filter data ketika user memasukkan nilai untuk filter. Perbaharui nilai renderHeader anda seperti code berikut :

 renderHeader={() =>
            <View style={styles.listview_header}>
              <TextInput style={styles.input} placeholder="Search..."
                onChangeText={(text) =>{
                  var rows = [];
                  for (var i=0; i < data_array.length; i++) {
                     var stateName = data_array[i].toLowerCase();
                     if(stateName.search(text.toLowerCase()) !== -1){
                       rows.push(data_array[i]);
                     }
                   }
                   this.setState({dataSource:ds.cloneWithRows(rows)});
                }}
              />
            </View>
          }

Pada code di atas terdapat penambahan pada fungsi “onChangeText”. Code yang kita tambahkan adalah code yang melakukan pengecekan masing-masing data terhadap keyword untuk filter data. Setelah mendapatkan kumpulan data yang sudah sesuai dengan keyword, maka nilai dataSource akan diperbaharui kembali dengan data yang sudah ada. Setelah menambahkan code tersebut aplikasi yang kita buat akan melakukan filter sesuai keyword yang dimasukkan.

screen-shot-2016-10-26-at-11-20-13-pm

Section Header

ListView menyediakan fitur untuk melakukan grouping pada tampilan ListView anda. Hal ini sering digunakan untuk ListView yang memiliki data cukup banyak. Kita akan membuat ListView dengan section header dengan tampilan akhir seperti berikut :

screen-shot-2016-10-29-at-10-55-08-pm

Halaman tersebut menyediakan sebuah ListView dengan Section Header dan fitur filter pada bagian atas ListView. Baiklah, pertama-tama kita harus merubah jenis data yang ada pada ListView. Lakukan perubahan pada variabel data_array yang sebelumnya telah dibuat menjadi seperti berikut :

  const data_array=[];
  data_array['Sport']=['Soccer','Moto GP','Others'];
  data_array['IT & Technology']=['IT','Technology','Science'];
  data_array['Entertainment']=['Music','Movie','Art'];
  data_array['Interest']=['Travel','Style','Fashion','Business'];
  data_array['News & Info']=['Politics','World','Phenomenon'];
  data_array['Health']=['Health','Food','Lifestyle'];

Pada data sebelumnya aplikasi hanya menggunakan data array biasa sedangkan untuk kasus membuat ListView dengan section header data harus di-grouping di masing-masing data. Setelah itu pada constructor anda lakukan perubahan data pada variabel “dataSource” :

      dataSource: ds.cloneWithRowsAndSections(data_array),

Pada code ListView tepatnya code renderSeparator, lakukan perubahan berikut :

 renderSeparator={(sectionId, rowId) => <View key={sectionId+rowId} style={styles.separator_style} />}

Karena dilakukan perubahan pada struktur data_array, maka metode pada fitur filter harus kita modifikasi. Ganti code pada event “onChangeText” pada “renderHeader” menjadi seperti berikut :

                   var rows = [];
                   for (var key in data_array) {
                     if (!rows[key]) {
                       rows[key] = [];
                     }

                     for (var i=0; i < data_array[key].length; i++) {
                        var stateName = data_array[key][i].toLowerCase();
                        if(stateName.search(text.toLowerCase()) !== -1){
                          rows[key].push(data_array[key][i]);
                        }
                      }

                      if(rows[key].length==0)
                        delete rows[key];
                   }

                   this.setState({dataSource:ds.cloneWithRowsAndSections(rows)});

Yang terakhir tambahkan code renderSectionHeader pada ListView anda seperti berikut :

          renderSectionHeader={(rowData,sectionId)=>
            <View style={styles.sectionHeader}>
              <Text style={styles.sectionHeaderText}>{sectionId}</Text>
            </View>
          }

Silahkan jalankan aplikasi, jika code yang anda masukkan sudah benar maka akan tampil halaman seperti gambar aplikasi yang diinginkan.

Masih ga jalan?? Silahkan lihat project lengkap dari tulisan ini di : https://github.com/sabithuraira/react_native_playground. Untuk code tulisan ini bisa dicek langsung di https://github.com/sabithuraira/react_native_playground/blob/master/application/components/SampleMenu.js

Happy coding..

React Native – Using ListView

React Native – Using ListView

Untuk menampilkan sekumpulan data kepada pengguna, aplikasi biasanya menggunakan tabel. Untuk aplikasi android sering digunakan ListView, iOS menggunakan UITableView dan pada react native kita akan menggunakan ListView. Kita akan coba membuat sebuah tampilan seperti pada gambar berikut :

screen-shot-2016-10-26-at-1-59-45-pm

Pertama-tama buatlah sebuah componen dengan code listview di dalamnya seperti berikut :

import React, { Component } from 'react';
import {
  StyleSheet, Text, View, ListView, TouchableHighlight,
} from 'react-native';

export default class SampleMenu extends Component {
  constructor(props) {
    super(props);
    //definition of listview datasource
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'Music', 'Movie', 'Sport', 'Entertainment',
      ])
    };
  }

  render() {
    return (
      <View style={{flex: 1, paddingTop: 22,marginTop:45}}>
        <ListView style={styles.listview_style}
          dataSource={this.state.dataSource}
          renderRow={(rowData,sectionId,rowId) =>(
              <View style={styles.row}>
                <Text style={styles.row_style}>{rowData}</Text>
              </View>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  listview_style: {
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  row: {
    flexDirection: 'row',
    backgroundColor: 'white',
  },
  row_style: {
    flex: 1,
    fontSize: 15,
    textAlign: 'left',
    margin: 10,
  },
  separator_style: {
   flex: 1,
   height: StyleSheet.hairlineWidth,
   backgroundColor: '#8E8E8E',
  },
});

Code di atas akan menghasilkan interface seperti berikut :

screen-shot-2016-10-26-at-2-24-00-pm

Agar lebih enak dilihat tambahkan pembatas/separator pada setiap baris.

renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator_style} />}

Tambahkan code tersebut dibawah tag code “renderRow” pada ListView, maka tampilan listview akan berubah menjadi seperti berikut :

screen-shot-2016-10-26-at-2-31-40-pm

Selain menampilkan data, anda juga dapat menambahkan sebuah perintah yang dijalankan ketika pengguna memilih salah satu data. Pada contoh ini kita akan menampilkan sebuah pesan jika pengguna memilih salah satu data.

              <View style={styles.row}>
                <Text style={styles.row_style}>{rowData}</Text>
              </View>

Rubah code di atas menjadi seperti berikut :

            <TouchableHighlight onPress={() => {
                Alert.alert(
                  'Enter title here..',
                  'You click on '+rowData,
                );
            }}>
              <View style={styles.row}>
                <Text style={styles.row_style}>{rowData}</Text>
              </View>
            </TouchableHighlight>

Untuk memberikan respon ketika pengguna menekan suatu data, kita harus menggunakan component “TouchableHighlight”. Setelah menambahkan code tersebut maka ketika pengguna menekan salah satu data akan dijalankan fungsi “onPress”. Pada contoh ini aplikasi yang kita buat akan menampilkan pesan setiap kali pengguna menekan salah satu data.

screen-shot-2016-10-26-at-3-08-06-pm

Selesai, itulah contoh pengembangan aplikasi react native dengan listview sederhana..

Happy coding..

Xamarin iOS – Using UITabBarController

Xamarin iOS – Using UITabBarController

UITabBarController dapat digunakan untuk menyajikan beberapa controller dalam satu screen pada iOS. Bagaimana cara menggunakan UITabBarController pada iOS? dan bagaimana melempar suatu parameter ke seluruh tab yang ada?

Anda dapat menambahkan UITabBarController langsung pada file storyboard. Pilih control UITabBarController dan drag-drop pada storyboard (tambahkan segue agar terhubung dengan aplikasi yang telah dibuat sebelumnya).

screen-shot-2016-11-09-at-12-45-50-pm

Pada contoh di atas kita menghubungkan segue dari UITableCellView ke UITabBarController. Agar dapat membedakan antara UIViewController pada tab1 dan tab2, tambahkan sebuah label pada masing-masing UIViewController.

Tambahkan code berikut pada class “SimpleSource.cs” (lihat postingan Xamarin iOS sebelumnya/lihat pada code github) untuk memberikan sebuah perlakuan ketika pengguna melakukan click pada data :

 public override void RowSelected(UITableView tableView, NSIndexPath indexPath)
 {
     _controller.PerformSegue("TabBar", _controller);
 }

Dan tambahkan code berikut pada constructor-nya :

 //definition WelcomeController to get parent controller
 WelcomeController _controller;
 public SimpleSource(WelcomeController _controller, List<Player> datas)
 {
     this.datas = datas;
     this._controller = _controller;
 }

Jalankan aplikasi dan akan muncul tampilan seperti berikut :

uitabbar

Bagaimana cara melempar parameter di semua tab kemudian melakukan refresh pada semua tab tersebut? Mari tambahkan sebuah UIBarButtonItem pada TabController kita, dengan menambahkan code berikut pada class “TabController.cs” :

 public override void ViewDidLoad()
 {
     base.ViewDidLoad();
     this.InitializeBar();
 }

 private void InitializeBar()
 {
     UIBarButtonItem t1 = new UIBarButtonItem(
        UIBarButtonSystemItem.Add
        (s, e) =>
        {//this space will use for run procces when click
        }
     );

     NavigationItem.RightBarButtonItem = t1;
 }

Buatlah sebuah interface bernama “TabInterface.cs” yang akan di-extend oleh UIViewController pada setiap class pada Tab Bar, masukkan code berikut :

using System.Collections.Generic;

namespace ios_playground
{
   public interface TabInterface
   {
       void ReloadScreen(int click);
   }
}

Pada Tab1Controller.cs dan Tab2Controller.cs extend class “TabInterface” dan buat sebuah fungsi void ReloadScreen :

 public partial class Tab1Controller : UIViewController, TabInterface
 {
        string label_text = "Tab1";
        public Tab1Controller (IntPtr handle) : base (handle)

        {

        }

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
            this.Lbl_item.Text = label_text;
        }

        public void ReloadScreen(int click)
        {
            label_text = "Tab1 : You tab me " + click.ToString() + " time(s)";
            if (this.Lbl_item != null)
                this.Lbl_item.Text = label_text;
        }
    }

Tab2Controller.cs :

 public partial class Tab2Controller : UIViewController, TabInterface
 {
        string label_text = "Tab2";
        public Tab2Controller (IntPtr handle) : base (handle)
        {
        }

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);
            this.Lbl_Item.Text = label_text;
        }

        public void ReloadScreen(int click)
        {
            this.label_text = "Tab 2 : You tab me " + click.ToString() + " time(s)";
            if (this.Lbl_Item != null)
                this.Lbl_Item.Text = label_text;
        }
    } 

Sekarang kembali pada TabController.cs, masukkan code berikut pada UIBarButtonItem yang telah dibuat sebelumnya :

 public override void ViewDidLoad()
 {
     base.ViewDidLoad();
     this.InitializeBar();
 }

 private int click_count = 0;
 private void InitializeBar()
 {
     UIBarButtonItem t1 = new UIBarButtonItem(
         UIBarButtonSystemItem.Add
         (s, e) =>
         {
             ++click_count;
             foreach (UIViewController temp in this.ViewControllers)
             {
                TabInterface pi = (TabInterface)temp;
                pi.ReloadScreen(click_count);
             }
         }
    );

    NavigationItem.RightBarButtonItem = t1;
 }

Berikut adalah tampilan aplikasi setelah dijalankan :

uitabbar2

Pada video tersebut kedua bar akan merefresh nilai label setiap kali di klik pada bar button “+” pada bagian atas..

Happy coding..

Xamarin iOS – Using UITableView with Custom Cell

Xamarin iOS – Using UITableView with Custom Cell

Salah satu control yang cukup sering digunakan pada pengembangan aplikasi adalah table. Pada iOS table sering ditampilkan dengan menggunakan sebuah control bernama UITableView (bagi anda yang familiar dengan Android, control ini mirip dengan ListView). Bagaimana menggunakan UITableView pada Xamarin?

Anda dapat menambahkan UITableView yang dipilih dari “toolbox” dan memasukkannya ke dalam UIViewController. Pada tulisan ini saya akan menambahkan UITableView ke dalam WelcomeController yang sudah dibuat pada tulisan sebelumnya. Tampilan design storyboard setelah penambahan UITableView adalah sebagai berikut :

screen-shot-2016-11-02-at-12-30-37-pm

Beri initial pada UITableView yang sudah ditambahkan dengan nama “My_Table”. UITableView akan menampilkan sekumpulan data dimana setiap row data akan diletakkan pada sebuah UITableViewCell. UITableViewCell sendiri secara default sudah include di dalam UITableView seperti gambar berikut :

screen-shot-2016-11-02-at-12-49-20-pm

Setiap UITableView dapat memiliki beberapa jenis UITableViewCell yang memiliki tampilan berbeda-beda sesuai kebutuhan. Pastikan anda memberi identitas “identifier” pada setiap UITableViewCell agar dapat dikenali oleh aplikasi, pada contoh ini saya akan berikan identifier  pada cell saya dengan nama “Simple_Cell”.

UITableViewCell memiliki beberapa jenis tampilan untuk dipilih :

screen-shot-2016-11-02-at-12-52-36-pm

Jika anda memilih jenis selain “Custom” maka UITableViewCell akan memiliki tampilan simple  yang sudah memiliki format default dari iOS seperti berikut :

pizap-com14780667820401

Berikut adalah contoh membuat UITableView dengan tampilan “Right Detail”. Pertama-tama silahkan atur property UITableViewCell style anda dengan style “Right Detail”. Aplikasi yang kita buat akan membuat screen dengan sebuah UITableView yang akan menampilkan daftar nama football player beserta club-nya. Buat terlebih dahulu class model untuk Player, tambahkan sebuah class dengan nama “Player.cs” dan masukkan code berikut :

namespace ios_playground
{
   public class Player
   {
      private string name;
      private string club;

      public Player(string name,string club)
      {
          this.name = name;
          this.club = club;
      }

      public string Name
      {
           get { return this.name; }
      }

      public string Club
      {
           get { return this.club; }
      }
   }
}

UITableView akan menampilkan data source yang berasal dari class “UITableViewSource”. Class yang meng-extend UITableViewSource inilah yang akan mengeksuksi tampilan yang muncul pada setiap row data beserta event yang dilaksanakan pada setiap row. Buatlah sebuah class “SimpleSource” yang akan meng-extend class UITableViewSource dan masukkan code seperti berikut :

using System;
using System.Collections.Generic;
using Foundation;
using UIKit;

namespace ios_playground
{
   public class SimpleSource : UITableViewSource
   {
       //variable yang menyimpan list data
       List<Player> datas;
       //identifier cell yang akan ditampilkan
       string CellIdentifier = "Simple_Cell";

       public SimpleSource(List<Player> datas)
       {
           this.datas = datas;
       }

       public override nint RowsInSection(UITableView tableview, nint section)
       {
            return datas.Count;
       }

       public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
       {
            UITableViewCell cell = tableView.DequeueReusableCell(CellIdentifier);
            Player single_data = this.datas[indexPath.Row];

            if (cell == null)
            { 
                cell = new UITableViewCell(UITableViewCellStyle.Default, CellIdentifier); 
            }

            //konfigurasi data.Name ke textLabel sedangkan data.Club ditampilkan pada detailTextLabel
            cell.TextLabel.Text = single_data.Name;
            cell.DetailTextLabel.Text = single_data.Club;

            return cell;
        }
    }
}

Class di atas menampilkan row data class Player yang dikirim dari parameter constructor. Untuk menampilkan data tersebut pada UITableView WelcomeController, masukkan code berikut pada class “WelcomeController”.

        //definisikan variabel datas untuk menyimpan kumpulan data “Player”
        private List<Player> datas;

        public WelcomeController (IntPtr handle) : base (handle)
        {
           this.datas = new List<Player>();
        }

Pada class ViewDidLoad(), masukkan code berikut :

 this.datas.Add(new Player("Christiano Ronaldo", "Real Madrid"));
 this.datas.Add(new Player("Lionel Messi", "Barcelona"));
 this.datas.Add(new Player("Gareth Bale", "Real Madrid"));
 this.datas.Add(new Player("Zlatan Ibrahimovic", "Manchester United"));
 this.datas.Add(new Player("Mesut Ozil", "Arsenal"));

 //konfigurasi source table dengan class SimpleSource
 this.My_Table.Source = new SimpleSource(this.datas);

Code di atas menambahkan data Player ke dalam list, list yang sudah ada akan dilempar kedalam class “SimpleSource”. Tampilan berikut akan muncul setelah anda menjalankan aplikasi :

screen-shot-2016-11-02-at-2-08-02-pm

Custom UITableViewCell

Ada banyak kebutuhan dimana kita diharuskan menampilkan UITableViewCell dengan tampilan yang kompleks dan sering digunakan di berbagai tabel. Untuk mengatasi permasalahan tersebut kita dapat membuat sebuah custom UITableViewCell, berikut caranya.

Buatlah sebuah file “TableViewCell” baru :

screen-shot-2016-11-02-at-9-21-57-pm

Berilah nama “SimpleCustomCell” pada file tersebut. Setelah membuat SimpleCustomCell, maka akan terbentuk dua buah file yaitu “SimpleCustomCell.cs” sebagai class dari TableViewCell dan “SimpleCustomCell.xib” yang merupakan file UI dari TableViewCell. Buka data .xib dan buat UI seperti berikut:

screen-shot-2016-11-02-at-9-29-05-pm

TableViewCell terdiri dari tiga buah UILabel. Silahkan beri identitas nama pada masing-masing label: “label name” bernama “name”, “label club” bernama “club dan “label country” bernama “country”. Setelah memberi identitas masing-masing UILabel, berikan identitas “identifier” untuk UITableViewCell dengan nama “Custom_Cell”. Buka class “SimpleCustomCell.cs” dan masukkan code berikut :

using System;
using Foundation;
using UIKit;

namespace ios_playground
{
   public partial class SimpleCustomCell : UITableViewCell
   {
      protected SimpleCustomCell(IntPtr handle) : base(handle)
      {}

      public SimpleCustomCell() : base()
      {}

      //update row with current data
      public void UpdateCell(Player data)
      {
         Name.Text = data.Name;
         Club.Text = data.Club;
         Country.Text = data.Country;
       }
    }
}

Karena data player bertambah satu buah field yaitu field “Negara” maka tambahkan code berikut pada class Player:

 private string country;

 //lakukan perubahan pada constuctor
 public Player(string name,string club, string country)
 {
   this.name = name;
   this.club = club;
   this.country = country;
 }

 public string Country 
 { 
    get { return this.country; }
 }

Masukkan code berikut pada class “SimpleSource” :

using System;
using System.Collections.Generic;
using ObjCRuntime;
using Foundation;
using UIKit;

namespace ios_playground
{

  public class SimpleSource : UITableViewSource
  {
     List<Player> datas;
     NSString CellIdentifier = new NSString("Custom_Cell");

     public SimpleSource(List<Player> datas)
     {
        this.datas = datas;
     }

     public override nint RowsInSection(UITableView tableview, nint section)
     {
       return datas.Count;
     }

     public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
     {
        Player single_data = this.datas[indexPath.Row];
        SimpleCustomCell cell = tableView.DequeueReusableCell(CellIdentifier) as SimpleCustomCell;

        if (cell == null)
        {
           cell = new SimpleCustomCell();
           var views = NSBundle.MainBundle.LoadNib("SimpleCustomCell", cell, null);
           cell = Runtime.GetNSObject(views.ValueAt(0)) as SimpleCustomCell;
        }

        //update data cell
        cell.UpdateCell(single_data);
        return cell;
      }
   }
}

Berikut tampilan aplikasi setelah dijalankan :

screen-shot-2016-11-02-at-9-51-28-pm

Selamat mencoba.. Happy coding..

%d bloggers like this: