[Xamarin iOS] Understanding Navigation

Xamarin iOS Navigation

Salah satu tantangan dalam pengembangan aplikasi mobile adalah ukuran screen yang terbatas sehingga memaksa developer untuk berpikir keras untuk menampilkan konten aplikasinya dalam beberapa screen dengan navigasi yang tepat. Pada bahasan kali ini kita akan mempelajari navigasi pada iOS yang melibatkan lebih dari satu screen.

UINavigationController

Silahkan buka Main.storyboard dan tambahkan UINavigationController pada storyboard anda.

screen-shot-2016-10-31-at-10-29-01-am

UINavigationController adalah controller yang mengelola navigasi dari hirarki konten. Jika anda menambahkan UINavigationController pada storyboard anda, maka akan muncul dua Controller yang terdiri dari UINavigationController dan sebuah Controller yang terhubung ke UINavigationController oleh sebuah garis yang disebut seague. Pada gambar di atas UINavigationController terhubung dengan UITableViewController sedangkan yang akan kita buat UINavigationController akan terhubung dengan UIViewController.

Menghubungkan UINavigationController dengan Controller

Karena kita ingin menghubungkan UINavigationController dengan UIViewController, hapus UITableViewController yang ada pada storyboard. Bagaimana cara menghapusnya? Click pada kotak berwarna putih pada bagian bawah controller, kemudian tekan tombol “delete” pada keyboard. Tambahkan UIViewController baru pada storyboard, beri identitas pada Class dengan nama “WelcomeController”. Setelah diberikan identitas maka project secara otomatis membuat class “WelcomeController”. Hubungkan UINavigationController dengan seague ke WelcomeController dengan menekan “Ctrl”+drag dari UINavagationController ke WelcomeController, berikan Relationship “Root” pada keterangan relation. Pindahkan default controller dari “ViewController” ke “UINavigationController” yang baru kita buat.

screen-shot-2016-10-30-at-7-49-27-am

(Catatan : jika anda mengalami kesulitan membuat seague pada Xamarin Studio, lakukan dengan menggunakan Xcode Interface Builder. Lakukan secondary click pada file storyboard pilih “Open With” kemudian pilih Xcode Interface Builder)

screen-shot-2016-10-30-at-8-14-12-am

Tambahkan sebuah UIButton pada WelcomeController seperti gambar diatas dan berikan UIButton identitas nama “Btn_nav”. UINavigationController dan WelcomeController sudah terhubung, hubungkan juga “ViewController” dari “WelcomeController. Anda tidak bisa menghubungkan controller dari WelcomeController ke ViewController layaknya dari UINavigationController. Anda harus memilih UIButton pada “WelcomeController” terlebih dahulu kemudian lakukan “Ctrl” + drag ke ViewController, pilih Action Seague “Show”.

screen-shot-2016-10-30-at-10-24-18-am

Ketika aplikasi dijalankan akan muncul pada halaman utama seperti berikut : 

screen-shot-2016-10-31-at-8-19-36-am

Jika anda menekan tombol “Go To Dashboard”, akan muncul halaman berikut :

screen-shot-2016-10-31-at-8-21-27-am

Pada contoh diatas perubahan halaman akan terjadi dengan action seague “Show”. Pada Xamarin anda dapat memilih beberapa jenis action seague, untuk merubah jenis seague silahkan click pada garis seague pada storyboard dan pada boks property akan muncul pilhan  seperti berikut :

screen-shot-2016-10-31-at-8-26-21-am

Setiap jenis seagues memiliki perlakuan berbeda-beda ketika menjalankan proses transisi navigasi. Berikut kegunaan masing-masing seagues :

  • Show : menampilkan screen baru pada aplikasi.
  • Show Detail : digunakan pada aplikasi yang menampilkan master detail view yang biasanya aplikasi ditampilkan dalam dua frame view, frame master dan detail. Ketika proses transisi terjadi, maka aplikasi hanya akan merubah tampilan pada frame detail.
  • Present Modally : menampilkan halaman penuh dan menyediakan pilhan untuk mengatur jenis transisi halaman.
  • Present As Popover : pilihan ini akan menampilkan konten dalam bentuk popover.

Silahkan langsung mencoba menggunakan berbagai macam seagues.

Parameter

Penggunaan parameter adalah suatu hal yang sering dilakukan dalam proses transisi halaman. Dengan menggunakan aplikasi yang telah kita buat sebelumnya, kita akan mencoba menerapkan penggunaan parameter. Pada ViewController, tambahkan sebuah label dengan nama “Txt_param”

screen-shot-2016-10-31-at-10-12-19-am

Pada class ViewController masukkan code berikut :

 //definisikan variabel public dengan nama “Param1”
 public string Param1; 

 public override void ViewDidLoad()
 {
    base.ViewDidLoad();
    //tambahkan code ini agar text diambil dari variabel Param1
    this.Txt_param.Text = Param1;
    this.Txt_Name.EditingChanged += (sender, ea) =>{
        this.Label_count.Text = "Count of character : " + ((UITextField)sender).Text.Length;
    }; 
 }

Pada class WelcomeController, tambahkan code berikut :

 public override void PrepareForSegue(UIStoryboardSegue segue, NSObject sender)
 {
    base.PrepareForSegue(segue, sender);
    var viewContoller = segue.DestinationViewController as ViewController;
    if (viewContoller != null)
    {
       viewContoller.Param1 = "I love you";
    }
 }

Code di atas memerintahkan program menjalankan suatu proses ketika proses transisi halaman akan dilakukan. Perintah yang dilakuakn adalah melakukan set nilai “Param1” dengan suatu string yang diinginkan.

screen-shot-2016-10-31-at-10-24-11-am

Gambar diatas adalah tampilan screen setelah kita lakukan modifikasi pada code. Happy coding..

[React Native] Understanding JSX, Style and Component

[React Native] Understanding JSX, Style and Component

Beberapa konsep dasar yang akan sering anda temui dalam pengembangan aplikasi dengan react native diantaranya adalah Component, JSX, Props dan State. Pastikan anda memahami hal tersebut agar tidak kesulitan dalam mengembangkan aplikasi dengan react native.

JSX dan Style

Dalam react native kita akan menampilkan sebuah screen/tampilan dengan menggunakan JSX. JSX sendiri menggunakan syntax XML yang dimasukkan ke dalam Javascript dari aplikasi react native. Berikut adalah contoh dari JSX :

       <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to {judul}!
        </Text>
        <Text style={styles.instructions}>
          Hola React Native Developer!
        </Text>
      </View>     

Code tersebut adalah potongan code JSX yang terdiri dari tag “View” dan tag “Text”.  Bagi anda yang sudah familiar dengan HTML besar kemungkinan mudah dalam memahami struktur penulisan code JSX. Pada JSX anda dapat menampilkan nilai suatu variabel atau fungsi dengan menambahkan tag kurung kurawal “{ }”. Penggunaan { } juga dapat digunakan untuk menyisipkan styles, contoh :

<View style={styles.container}>

Bagaimana pengaturan style pada react native?

Style digunakan untuk mengatur dan memperindah tampilan aplikasi anda. Dengan style anda dapat mengatur warna, font huruf, margin, dll. Style bisa langsung anda sisipkan dalam suatu tag control bisa juga anda definisikan secara terpisah dimana style yang telah didefinisikan tadi akan dipanggil langsung dari suatu control. Contoh style yang langsung disisipkan langsung adalah seperti berikut :

 <Image source={pic} style={{width: 193, height: 110}}/>

Sedangkan untuk membuat style yang terpisah dari component-nya, dapat dilakukan dengan menambahkan variabel styles di luar class Component seperti berikut :

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Variabel styles di atas dapat digunakan langsung pada component :

 <View style={styles.container}>

Code di atas menggunakan styles.container yang telah di definisikan pada variabel styles. Anda juga dapat menggunakan styles.welcome dan styles.instructions.

Component

Semua tampilan yang anda lihat pada aplikasi react native adalah kumpulan dari component. Dimana masing-masing component minimal harus memiliki sebuah fungsi yang me-render sebuah tampilan (menggunakan JSX). Berikut adalah contoh code sebuah aplikasi kecil yang mungkin bisa membantu anda untuk memahami strukturnya :

import React, { Component } from 'react'; //import React dari react
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  View
} from 'react-native';  // import beberapa class yang akan digunakan dalam program

// class myfirstApp meng-extends class Component.
export default class myfirstApp extends Component { 
  //fungsi render pada class myfirstApp, jika fungsi ini dipanggil
  //maka secara otomatis aplikasi akan memanggil fungsi render
  //untuk menampilkannya ke aplikasi
  render() {
    let judul='React Native'; //definisi sebuah variabel
    return (
      //ini adalah kumpulan JSX yang akan ditampilkan pada aplikasi
      <View style={styles.container}> // contoh penggunaan styles pada suatu control
        <Text style={styles.welcome}>
          Welcome to {judul}!  // contoh menampilkan sebuah variabel
        </Text>
        <Text style={styles.instructions}>
          Hola React Native Developer!
        </Text>
      </View>
    );
  }
}

//baris di bawah adalah kumpulan definisi styles yang dapat dipanggil
//dari class myfirstApp
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
//baris ini adalah yang pertama kali dieksekusi oleh aplikasi
//baris ini memanggil Component myfirstApp untuk ditampilkan
AppRegistry.registerComponent('myfirstApp', () => myfirstApp);

Catatan : Silahkan hapus code komentar dengan awalan “//” jika mengganggu.

Code tersebut akan menampilkan tampilan aplikasi seperti berikut :

screen-shot-2016-10-30-at-4-25-53-pm

React native memiliki banyak component untuk digunakan, silahkan explore pada website resmi react native.

Happy coding..

[ React Native ] Introduction and Installation

Pengembangan aplikasi mobile saat ini menjadi semakin seksi terutama aplikasi Android dan iOS. Para penyedia layanan melalui website pun banyak yang menyediakan layanannya dalam bentuk aplikasi smartphone. Pada kenyataannya pengembangan aplikasi smartphone yang kompleks tidaklah mudah. Ditambah lagi kebutuhan pengembangan untuk platform Android dan iOS guna memenuhi kebutuhan pengguna yang sebagian besar menggunakan dua jenis platform tersebut. Dari permasalahan tersebut, telah bermunculan beberapa framework yang menciptakan tools untuk mempermudah pengembangan aplikasi Android dan iOS. Apa saja framework tersebut?

Hybrid App

Pengembangan aplikasi  hybrid menampilkan komponen web ke dalam aplikasi smartphone dengan menggunakan webview. Dengan hybrid anda cukup menulis satu buah aplikasi dan akan berjalan pada platform Android dan iOS. Walaupun hanya menggunakan webview, pengembangan dengan hybrid tetap memungkinkan anda mengakses hardware dari perangkat mobile. Kelemahan dari hybrid adalah bukan aplikasi native dan berjalan pada webview sehingga aplikasi hybrid memiliki performa masih kalah jika dibandingkan aplikasi native. Sedangkan kelebihannya adalah kemudahan dalam pengembangannya, terutama untuk anda yang telah terbiasa dengan pemrograman web. Pengembangan Hybrid menggunakan HTML5, Javascript dan CSS. Terdapat beberapa framework dalam hybrid seperti phone gap, cordova dengan ionic, kendoui, dll. Berdasarkan pengalaman pribadi pengembangan aplikasi dengan hybrid cukup mudah, running aplikasi dapat dilakukan lewat browser (tidak perlu berdarah-darah dengan emulator yang sangat berat). Tetapi untuk pengembangan aplikasi kompleks perlu anda pertimbangkan kembali karena performa yang masih di bawah aplikasi native.

Xamarin

Xamarin adalah framework yang dimiliki Microsoft yang memungkinkan anda membangun aplikasi Android, iOS dan Windows Phone dengan bahasa pemrograman C#. Berbeda dengan hybrid, kelebihan pengembangan dengan Xamarin adalah aplikasi dibangun dengan native dan karenanya Xamarin memberikan performa yang baik. Sedangkan kelemahannya pengembangan dengan Xamarin tidaklah mudah. Jika anda tidak terbiasa menggunakan bahasa pemrograman C# dengan .NET kemungkinan anda akan cukup kesulitan untuk menggunakan Xamarin. Pada Xamarin anda tetap harus memodifikasi code anda untuk masing-masing platform Android, iOS dan Windows Phone.

React Native

Jika hybrid menggunakan pemrograman web dan Xamarin dengan native yang dikonversi dari C#, kemudian muncul Facebook yang mengembangkan React Native. React Native adalah framework besutan Facebook yang memungkinkan anda membuat aplikasi Android dan iOS dengan Javascript. Walau dibangun dengan Javascript, React Native merupakan aplikasi native dimana komponen javascript akan dikonversi menjadi komponen native Android atau iOS. Anda juga membutuhkan iOS dan Android sdk dalam pengembangan dengan react native. Kelebihan dari React Native adalah performanya yang baik karena merupakan aplikasi native. Pengembangan dengan javascript juga menjadi keuntungan tersendiri bagi developer. Kekurangan dari react native anda harus memahami react tidak hanya javascript.

Pada tulisan selanjutnya saya akan membahas proses instalasi React Native. Untuk menjelajah react native lebih lanjut silahkan buka website https://facebook.github.io/react-native/. Berikut ini adalah panduan instalasi menggunakan mac ox, untuk proses instalasi pada windows atau linux dapat dilihat di https://facebook.github.io/react-native/docs/getting-started.html. Proses instalasi react native untuk development aplikasi ios dan android dilakukan terpisah.

Instalasi Pada iOS

Untuk melakukan instalasi react native pada IOS development, yang ada butuhkan adalah node.js, watchman, React Native command line interface, dan xcode.

Node.js dan Watchman dapat anda instal menggunakan Homebrew : http://brew.sh/.

Installasi Homebrew

Silahkan buka website homebrew, kemudian buka terminal pada mac os. Masukkan perintah berikut :

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”. 

Perintah tersebut akan melakukan instalasi pada homebrew pada PC anda.

Catatan : Jika pada proses instalasi homebrew terdapat pesan :

“You have not agreed to the Xcode license.
Before running the installer again please agree to the license by opening
Xcode.app or running:
    sudo xcodebuild -license”

silahkan buka xcode anda lalu klik agree pada xcode license. Jika telah sukses melakukan instalasi homebrew, maka akan muncul pesan :

==> Installation successful!
==> Next steps
Run `brew help` to get started
Further documentation: https://git.io/brew-docs

Installasi Node.js dan Watchmen

Setelah selesai melakukan instalasi homebrew, lakukan instalasi node.js dan watchmen dengan memasukkan perintah berikut pada terminal anda :

  • brew install node (untuk installasi node.js)
  • brew install watchman (untuk installasi watchman)

Installasi React Native

Setelah selesai melakukan node.js dan watchman, kita akan melakukan instalasi react native menggunakan fitur npm yang dimiliki node.js. Ketik perintah berikut pada terminal anda untuk melakukan instalasi react native : npm install -g react-native-cli.

Instalasi Xcode

Buka mac app store anda lalu cari aplikasi xcode, kemudian install aplikasi xcode.

Membuat project React Native

Setelah melakukan installasi semua komponen yang dibutuhkan, sekarang kita mencoba membuat sebuah aplikasi react native. Jalankan perintah berikut di terminal anda :

react-native init myfirstApp 

Perintah ini digunakan untuk membuat sebuah project react native, aplikasi react-native akan diinstal dan memakan cukup waktu untuk menjalankannya. Setelah proses instalasi selesai, masukkan perintah berikut :

cd myfirstApp 

Perintah di atas akan mengarahkan ke path directory project yang telah dibuat. Masukkan perintah berikut untuk menjalankan aplikasi yang telah dibuat.

react-native run-ios

Jika berhasil maka akan muncul ios emulator seperti gambar berikut :

screen-shot-2016-10-29-at-2-32-41-pm

Tampilan di sebelah kiri adalah tampilan dari code “index.ios.js” sedangkan tampilan di sebelah kanan adalah tampilan dari emulator ios.

Instalasi ANDROID

Instalasi pada android juga memerlukan komponen node.js, watchman dan React Native command line interface. Sebagai tambahan untuk menjalankan androidnya, kita juga harus  memiliki android studio beserta android sdk-nya.

Instalasi Android Studio

Unduh android studio pada tautan berikut : https://developer.android.com/studio/install.html dan lakukan instalasi Android studio pada PC anda. Pastikan anda sudah melakukan konfigurasi SDK android anda, caranya? Ketika anda membuka android studio, pada menu halaman welcome pilih tombol “configure” kemudian pilih SDK Manager.

screen-shot-2016-10-29-at-2-34-04-pm

akan tampil menu SDK seperti berikut :

screen-shot-2016-10-29-at-2-35-34-pm

Anda dapat melakukan pengaturan konfigurasi SDK baik merubah path, melakukan update SDK, dll.

React Native command line interface membutuhkan ANDROID_HOME variabel agar dapat mendapatkan path dari android sdk yang kita miliki. Lakukan setting nilai variabel ANDROID_HOME dengan memasukkan perintah berikut pada terminal anda :

 export ANDROID_HOME=pathAndroidAnda

Kemudian jalankan aplikasi anda dengan memasukkan perintah berikut pada terminal :

react-native init myfirtsApp
cd myfirstApp
react-native run-android

Kode di atas sama dengan kode untuk menjalankan react-native pada aplikasi IOS, hanya saja ketika akan menjalankan aplikasi anda perlu mendefinisikan perintah run-android. Berikut tampilan aplikasi android yang telah dibuat :

screen-shot-2016-10-29-at-2-37-18-pm

Catatan : jika aplikasi hanya menampilkan halaman blank berwarna putih, buka SDK command prompt anda, kemudian ketikkan perintah :

adb reverse tcp:8081 tcp:8081

Jika tampilan pada PC anda menampilkan halaman yang sama seperti gambar di atas, artinya anda telah berhasil melakukan instalasi react-native pada IOS dan android..

Happy coding…

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

%d bloggers like this: