Pengolahan Input User Lanjutan dan Basis Data Mobile
A. Teknik Pengolahan input User
Design interface sangat berpengaruh pada user dalam berkomunikasi dengan komputer. Apabila suatu program sulit untuk digunakan, maka hal ini akan memaksa user untuk melakukan suatu kesalahan saadenenggunakan program tersebut. Istilah desain antarmuka (design interface) identik dengan desain untuk komputer, peralatah desin, perangkat komunikasi mobile, aplikasi perangkat lunak, dan situs web yang berfokus pada pengalaman dan interaksi penggunanya. Tujuan dari penggunaan design interface adalah untuk membuat interaksi pengguna sesederhana dan seefisien mungkin tentang bagaimana user berinteraksi dengan komputer menggunakan tampilan antarmuka (interface) yang ada pada layar komputer.
1. Konsep Penggunaan User Interface Aplikasi dalam Perangkat Bergerak
Untuk dapat membuat sebuah user interface yang menarik, harus memahami kontrol user interface yang terdapat di android, karena keberadaan user interface pada Aplikasi android memberikan pengaruh terhadap penggunanya. Padahal tujuan utama dari adanya sebuah aplikasi ketika membantu atau mempermudah penggunanya Jangan sampai user bingung ketika menggunakan aplikasi yang telah dibuat
A. View
View identik dengan sebuah objek untuk menggambar sesuatu pada layar di mana user dapat berinteraksi dengannya dan viewgroup adalah sebuah objek yang memegang objek view lainnya untuk menentukan layout user interface. Untuk me- nentukan layout dapat membuatnya di file XML yang menawarkan struktur mudah terbaca untuk layout (secara mendasar mirip dengan HTML). Perhatikan bentuk layout vertikal dengan sebuah text view dan sebuah button sebagai berikut.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/ android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
tools:context="com.example.rizaova.project1.MainActivity">
<TextView android:id="@+id/teks"
android:text="Ini Teks"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/tombol"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ini Tombol content"/>
</LinearLayout>
b. Kontrol User Interface
Terdapat banyak kontrol user interface yang disediakan oleh android yang diizinkan untuk membangun grafis user interface pada aplikasi. Beberapa jenis kontrol user interface yang digunakan antara lain sebagai berikut.
Jenis-Jenis Kontrol User Interface:
1 TextView
Kontrol ini digunakan untuk menampilkan teks ke pengguna.
2. EditText
Subclass yang telah ditetapkan dari TextView yang mencakup kemampuan.
3. AutoCompleteTextView
Deskripsi AutoCompleteTextView adalah tampilan yang mirip dengan EditText, kecuali bahwa menunjukkan daftar saran penyelesai- an secara otomatis saat pengguna mengetik
4. Button
Button bisa ditekan atau diklik oleh pengguna untuk melaku- kan suatu tindakan.
5. ImageButton
ImageButton adalah sebuah AbsoluteLayout untuk menentu- kan lokasi yang tepat dari dengan menunjukkan sebuah button berupa gambar bisa ditekan atau diklik oleh pengguna.
6. CheckBox
Switch on/off dapat diubah oleh pengguna
7 ToggleButton
Sebuah button on/off dengan lampu indikator. RadioButton memiliki dua sifat yaitu dicentang atau tidak
8. RadioButton
RadioButton memiliki dua sifat yaitu dicentang atau tidak dicentang
9. RadioGroup
RadioGroup digunakan untuk kelompok bersama RadioButton.
10. ProgressBar
ProgressBar memberikan umpan balik visual tentang beberapa tugas yang sedang berlangsung.
11. Spinner
Sebuah daftar yang berisi salah satu nilai dari satu set.
12. TimePicker
Untuk memilih waktu dengan mode 24 jam atau mode AM/PM.
13. DatePicker
Untuk memilih tanggal
C. Membuat User Interface
Android menyediakan berbagai jenis kontrol yang dapat digunakan dalam user interface seperti button, text field, seek bar, check box, zoom button, toggle button, dan lain-lain. Kontrol input, yaitu komponen interaktif yang terdapat pada user interface suatu aplikasi. Sebagaimana diketahui bahwa pada saat membuat user interface pada android, objek view memiliki ID unik yang ditugaskan untuk mengidentifikasi. Sintaks untuk ID dalam sebuah tag XML adalah sebagai berikut.
android:id="@+id/teks"
Guna membuat sebuah kontrol user interface/view/widget harus menentukan view/widget dalam file dan menetapkan ID unik sebagai berikut.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout"xmlns:android="http://schemas.android.com/apk/res/android"
Sedangkan untuk memanggilnya dapat menggunakan perintah berikut.
TextView my/Teks=(Textview)findViewById(R.id.teks);
2. Prosedur Desain User Interface dalam Aplikasi Perangkat Bergerak
User interface (UI) untuk aplikasi Android dibuat menggunakan hierarki layout (objek ViewGroup) dan widget (objek View). Layout identik dengan kontainer tidak terlihat yang mengontrol bagaimana tampilan sub/cabang yang diposisikan pada layar, sedangkan Widget identik dengan komponen UI, seperti tombol dan kotak teks. Di samping itu, Android menyediakan kosakata XML untuk kelas ViewGroup dan View, sehingga sebagian besar Ul dapat didefinisikan dalam file XML. Namun demikian, membuat layout menggunakan Android Studio Layout Editor memudahkan pembuatan layout dengan tampilan seret dan letakkan.
a. Membuka Layout Editor
Langkah-langkah mempersiapkan ruang kerja untuk membuat project Android adalah sebagai berikut.
1) Di jendela Project Android Studio, buka app→ res→ layout activity_main xml.
2) Untuk memberi lebih banyak ruang bagi Layout Editor, sembunyikan jendela Project dengan memilih View → Tool Windows Project (atau klik Project di sisi kıri Android Studio).
3) Bila editor Anda menampilkan sumber XML, klik tab Design di bagian bawah jendela.
4) Klik Select Design Surface dan pilih Blueprint.
5) Klik Show di toolbar dan pastikan Show Constraints telah dicentang.
6) Pastikan Autoconnect tidak aktif. Tooltip pada toolbar akan tertulis Turn On Autoconnect (karena sekarang Autoconnect tidak aktif).
7) Klik Default Margins 8 di toolbar dan pilih 16 (Anda tetap bisa mengatur margin untuk setiap tampilan nanti).
8) Klik Device in Editor di toolbar dan pilih Pixel XL.
Editor layar akan menampilkan gambar sebagai berikut.
Jendela Component Tree yang berada di sisi kiri bawah menunjukkan tampilan hierarki layout. Tampilan root adalah ConstraintLayout yang berisi satu objek Text View. Constraint Layout identik dengan layout yang mendefinisikan posisi untuk setiap tampilan berdasarkan batas terhadap tampilan dan layout induk. Dengan cara ini, minimal mampu membuat layout sederhana dan kompleks dengan hierarki tampilan datar. Oleh sebab itu, cara tersebut digunakan untuk menghindari layout tersarang (layout di dalam layout) sehingga dapat meningkatkan waktu yang dibutuhkan untuk menggambar UI. Misalnya, untuk mendeklarasikan ukuran tampilan layout menjadi sebagai berikut.
1) Tampilan A terletak 16dp dari kiri layout induk.
2) Tampilan A terletak 16dp dari atas layout induk.
3) Tampilan B sejajar dengan bagian atas tampilan A.
4) Tampilan B terletak 16dp di sebelah kanan tampilan A.
Hasil layout akan tampak sebagai berikut.
b. Menambahkan Kotak Teks
Langkah-langkah dalam menambahkan kotak teks adalah sebagai berikut.
1) Menghapus semua yang terdapat dalam layout dengan cara klik TextView di jendela Component Tree, kemudian tekan Delete.
2) Dari jendela Palette di sebelah kiri, klik Text di panel kiri, selanjutnya seret Plain Text ke dalam editor desain dan letakkan di dekat bagian atas layout. Hal ini bertujuan untuk membuat widget EditText menerima masukan teks biasa.
3) Klik tampilan di editor desain dengan menggeser tuas pengubah ukuran di setiap sudut (kotak), dan jangkar pembatas di setiap sisi (lingkaran).
4) Guna kontrol yang lebih baik, memerlukan zoom in pada editor menggunakan tombol pada toolbar.
5) Klik-tahan jangkar di sisi atas, selanjutnya diseret ke atas sampai terkunci ke bagian atas layout dan lepaskan. Hasilnya adalah pembatas untuk menetapkan tampilan harus 16dp dari atas layout (karena menyetel margin default ke 16dp). Selanjutnya membuat pembatas dari sisi kiri tampilan ke sisi kiri layout.
Hasilnya akan terlihat sebagai berikut.
C. Menambahkan Tombol
Langkah-langkah dalam menambahkan kotak tombol diawali dari jendela Palette, klik Widgets di panel kiri, lalu seret Button ke dalam editor desain dan letakkan di dekat sisi kanan. Selanjutnya, membuat pembatas dari sisi kiri tombol ke sisi kanan kotak teks. Guna membatasi tampilan dalam penjajaran horizontal, perlu membuat pembatas antara garis dasar teks. Langkahnya adalah klik tombol tersebut, lalu klik
Edit Baseline yang muncul di editor desain tepat di bawah tampilan yang dipilih dan jangkar garis dasar muncul di dalam tombol. Klik-tahan jangkar ini lalu seret ke jangkar garis dasar yang muncul di kotak teks. Di samping itu, membuat penjajaran horizontal menggunakan tepi atas/bawah, tetapi tombolnya memuat pengisi di sekitar gambar sehingga penjajaran visual tidak akan tepat bila menyejajarkan tampilan dengan cara tersebut. Hasilnya akan terlihat seperti gambar berikut.
d. Mengubah String Ul
Guna melihat pratinjau UI dilakukan dengan klik Select Design Surface di bagian toolbar dan pilih Design. Pada layar terlihat masukan teks sudah terisi dengan "Name"
dan tombolnya diberi label "Button." Langkah langkah dalam mengubah string U antara lain sebagai berikut.
1) Buka jendela Project lalu buka app→ res values strings.xml strings.xml merupakan file sumber daya string untuk menetapkan dan mengelola semua string Ul di satu lokasi dengan tujuan mempermudah untuk menemukan, meng update, dan melakukan pelokalan (dibandingkan dengan string hard-coding dalam layout atau kode aplikasi).
2) Klik Open editor di bagian atas jendela editor untuk membuka Translations Editor, yang menyediakan antarmuka simpel untuk menambahkan dan mengedit string default, serta membantu semua string terjemahan tetap teratur.
3) Klik Add Key untuk membuat string baru sebagai "hint text untuk kotak teks Selanjutnya, masukkan "edit message untuk nama kunci, masukkan "enter a message untuk nilainya dan klik OK
4) Tambahkan kunci lain bernama "button_send" dengan nilai "Send"
Untuk melakukan konfigurasi string untuk setiap tampilan harus kembali ke file layout dengan mengklik activity_main.xml di bilah tab, dan tambahkan string sebagai berikut.
1) Klik kotak teks di layout dan klik Attributes di sidebar kanan, apabila jendela Attributes belum terlihat di sebelah kanan.
2) Cari properti text (yang saat ini disetel ke "Name") dan hapus nilainya.
3) Cari properti hint lalu klik Pick a Resource di sebelah kanan kotak teks. Pada kotak dialog yang muncul, klik dua kali edit_message dari daftar yang ada.
4) Klik tombol di layout dan cari properti text→ klik Pick a Resource pilih button_send.
e. Membuat Ukuran Kotak Teks yang Fleksibel
Untuk membuat layout yang responsif terhadap beragam ukuran layar, dapat dilakukan dengan merancang kotak teks supaya dapat membentang untuk mengisi semua ruang horizontal yang ada dengan memperhitungkan keberadaan tombol dan margin. Sebelum melanjutkan, klik Show di toolbar dan pilih Blueprint.
Langkah-langkah dalam membuat ukuran kotak teks yang fleksibel adalah sebagai berikut.
1) Pilih kedua tampilan (klik satu tampilan, tahan Shift dan klik tampilan lain). lalu klik kanan salah satu tampilan dan pilih Chain → Create Horizontal Chain. Rantai adalah pembatas dua arah di antara dua atau beberapa tampilan yang memungkinkan Anda untuk memasang tampilan yang diikat secara bersamaan.
2) Pilih tombol dan buka jendela Attributes. Dengan menggunakan pemeriksa tampilan di bagian atas jendela Attributes, margin kanan diatur menjadi 16.
3) Sekarang, klik kotak teks untuk melihat atributnya. Klik indikator lebar dua kali, sehingga disetel ke Match Constraints, seperti yang ditunjukkan oleh gambar berikut.
Match constraints, berarti lebar akan meluas memenuhi definisi batasan dan margin horizontal. Oleh karena itu, kotak teks membentang untuk mengisi ruang horizontal setelah memperhitungkan tombol dan semua margin yang ada. Bila layout tidak berubah seperti yang diharapkan, klik pada bagian bawah untuk melihat tampilan XML yang seharusnya dan bandingkan dengan apa yang lihat di tab Text. Sekarang layout sudah selesai dan akan terlihat seperti gambar berikut.
f. Menjalankan Aplikasi
Apabila aplikasi sudah terinstal pada perangkat yang digunakan, cukup klik Apply Changes di toolbar untuk meng-update aplikasi dengan layout baru, atau klik Run untuk menginstal dan menjalankan aplikasi.
3. Teknik Desain Aplikasi Lanjutan
Beberapa hal yang paling mendasar yang harus diperhatikan dalam pembuatan User interface Design adalah sebagai berikut.
a. Menggunakan Hierarki Visual
Sedapat mungkin kita membuat suatu desain interface di mana user dapat fokus pada suatu yang penting. Ukuran, warna, dan penempatan pada setiap elemen yang selaras dapat membuat suatu alur yang jelas, sehingga dimengerti oleh user. Hierarki yang jelas akan menjadi runtutan yang baik dalam menurunkan kompleksitas suatu action. Walaupun action tersebut memanglah kompleks.
b. Mengetahui tentang User dari Aplikasi yang Digunakan.
Tujuan dari user adalah tujuan programmer juga, sehingga seorang programmer harus mengerti user lebih lagi. Pelajari mengenai pengalaman dan keahlian-keahlian yang dimilikinya, serta apa yang dibutuhkan oleh user sekarang. Mengetahui serta mempelajari interface yang user sukai serta mencari tahu bagaimana user meng- gunakannya. Tidak perlu terpaku dengan tren yang ada sekarang ini. Fokus pada apa yang user butuhkan agar dapat menyelesaikan setiap tujuannya.
c. Tetap Konsisten
User membutuhkan suatu konsistensi. Bahasa, layout, dan desain adalah sesuatu hal kecil dari elemen interface yang membutuhkan konsistensi. Interface yang konsisten membuat user dapat dengan mudah mengerti untuk apa itu berfungsi, sehingga meningkatkan efisiensi mereka.
d. Menyediakan Feedback
Interface yang baik harus dapat memberitahu user setiap action yang terjadi seperti error, loading, dan lain-lainnya. Hal ini dilakukan untuk menghindari adanya kesalahpahaman user.
e. Keep It Simple
Desain interface yang paling baik itu tidak pernah terlihat. Mereka tidak per- nah menampilkan sesuatu yang tidak perlu untuk ditampilkan. Ketika kita akan menambahkan suatu elemen di dalam desain interface, hal yang paling utama harus dipertanyakan adalah "Apakah elemen tersebut benar-benar diperlukan?" atau "Mengapa user sangat menginginkan animasi yang bagus pada desain kita?" Apakah menambahkan sesuatu hanya karena ingin atau itu merupakan hal yang penting. Jangan biarkan desain interface hanya untuk "pamer" dan uji kemampuan saja.
f. Keep Moving Forward
Dalam membuat desain interface pasti akan membuat kesalahan. Tetapi, tetap terus mencoba karena dari situlah akan menjadikan desain antarmuka (interface) Anda menjadi yang lebih baik lagi.
g. Perhatikan Pattern-Pattern yang Penting
Sekarang ini, user lebih banyak menggunakan aplikasi-aplikasi selain aplikasi yang dibuat, misalnya Facebook, Twiter, dan lain-lainnya. Hal tersebut dikarenakan pattern-pattern yang digunakan sesuai dengan user dan mudah dimengerti oleh user. Oleh karena itu, gunakanlah pattern-pattern yang mudah dimengerti oleh user dan membuat mereka merasa nyaman dan diberi kemudahan dalam memakai aplikasi yang dibuat.
h. Empower Your User
Apabila ada bagian-bagian yang kompleks, berikan user sebuah tutorial sehingga mereka dapat mengerti. Kemudian, user dapat dipermudah juga dengan beberapa shortcut keyboard untuk beberapa aksi khusus. Hal-hal tersebut dapat menambahkan pengalaman user terhadap desain.
i. Speak Their Language
Tetap menjaga desain yang interaktif dengan user bukan hanya mendesain sesuatu yang mengagumkan, tetapi tidak interaktif. Label dan pesan-pesan yang digunakan haruslah singkat, padat, dan jelas, sehingga tidak menimbulkan kerancuan terhadap user. Dengan ini, user akan mengapresiasi desain yang dibuat karena mereka tidak dipaksakan untuk mendengarkan apa yang diinginkan, tetapi mereka mengikuti apa yang mereka inginkan.
j. Be Forgiving
Seberapa baik dan jelas interface yang dibuat, pasti user akan tetap saja melakukan kesalahan. Interface harus dapat mentolerir setiap kesalahan yang dilakukan oleh user. Desain yang baik juga harus dapat memberikan user kesempatan untuk melakukan Undo Action. Selain itu, Anda harus dapat memberitahu apabila ada kesalahan action dari user. Misalnya ketika memasukkan input tanggal yang tidak sesuai harus ada pesan kesalahan sebagai penanda.
B. Aplikasi Basis Data Mobile
Sistem operasi Android memiliki library SQLite yang dapat digunakan untuk membuat aplikasi basis data cli- ent. Library SQLite telah diintegrasikan dengan teknologi browser, sehingga me miliki kemampuan aplikasi berbasis web client (javascript) untuk menggunakan fitur database ini. Dukungan ini secara default telah diaktifkan, sehingga tidak perlu menggunakan konfigurasi (aktivasi). Sebagai library untuk pengolahan data SQLite memiliki beberapa tipe data yang didukung, yaitu Text sebagai data alfanu- merik (kumpulan karakter atau kata), Integer sebagai jenis data numerik tanpa koma, dan Real sebagai jenis data numerik dengan bilangan berkoma.
1. Konsep dan Prosedur Akses Basis Data dalam Aplikasi Perangkat Bergerak
Di aplikasi mobile, menggunakan backend database SQLite dapat berguna untuk untuk pembuatan dan pemeliharaan database. Misalnya, membuat dan menggunakan prepopulated database dan menggunakan SQLite utility library untuk mengimplementasikan database backend pada aplikasi restoran. Aplikasi ini dapat digunakan baik oleh chef maupun user biasa untuk melihat berbagai macam kategori menu dan kuliner. Aplikasi restoran menggunakan gerakan mengusap untuk berganti kategori, serta memilih salah satu menu yang akan ditampilkan detailnya. Sebuah database SQLite dapat digunakan untuk menyimpan semua kategori menu dan detail menu. Menggunakan Android SQLite API secara langsung dapat menghasilkan berbagai bentuk boilerplate code. Ada beberapa Android utility library untuk membantu mempermudah proses ini dan juga menyajikan fitur-fitur tambahan untuk penggunaan database SQLite yang lebih mudah dan efisien di aplikasi Android. Salah satunya berupa SQLiteAssetHelper yang identik dengan salah satu library yang populer di kalangan komunitas pengembang aplikasi Android berdasarkan keterlibatan pengembang aplikasi dan penggunaannya.
a. Pembukaan/Pembuatan Database
Pada dasarnya, tahapan dalam mengakses program ke database dilakukan melalui dua tahap, yaitu membuka/membuat database dan menjalankan perintah SQL. Penutupan database tidak diperlukan karena akan secara otomatis ditutup apabila program ditutup. Pembukaan atau pembuatan database dapat dilakukan dengan satu perintah, yaitu open Database (string namadb, string versi, string deskripsı, int ukuran). Apabila database yang akan dibuka belum ada, maka web engine akan secara otomatis membuatkan database-nya. Misalnya var db = openDatabase("diary", "1.0", "database diary", 6000);
b. Eksekusi Perintah SQL
Perintah SQL diberikan pada parameter pertama dari fungsi executeSql. Perintah SQL yang dapat diberikan berupa perintah CREATE, DROP, INSERT, UPDATE, DELETE dan SELECT. Eksekusi perintah SQL dapat dilakukan dengan menggunakan perintah berikut.
db.transaction (
function (transaction)
{
transaction.executeSql (sql, undefined,
function (transaction, result)
{ //sukses
}, function (transaction, err)
{
//error
}
);
}
);
c. Membaca Data Tabel
Pencarian/pembacaan data Android dari suatu tabel dapat dilakukan dengan menggunakan perintah SQL SELECT. Supaya dapat menampilkannya, Anda dapat menggunakan perintah berikut.
transaction.executeSql (sqlSELECT, undefined,
function (transaction, result)
{
if (result.rows.length)
for (var i = 0; i < result.rows.length; i i++)
{
var row = result.rows.item (i);
var kolom = row.column;
}
}
},
undefined
);
Keterangan:
1) sqlSELECT digunakan sebagai perintah SQL SELECT yang akan dijalankan.
2) result digunakan sebagai objek yang berisikan data hasil seleksi jika berhasil.
3) rows digunakan sebagai objek properti dari result dengan kumpulan item (baris) hasil seleksi.
4) column digunakan sebagai nama kolom sesuai definisi tabel yang akan diambil nilainya dari baris terpilih.
2. Penggunaan Konektor dalam Aplikasi Akses Basis Data
Terdapat berbagai cara dalam menghubungkan App Client (Android) ke Remote Database Server seperti MySQL, SQL Server, Oracle, Sybase, DB2, postgreSQL, Firebird dan lainnya. Salah satu caranya, yaitu dengan bantuan Remote Database Connector (RDC). RDC, yaitu sebuah middleware berupa Java web server yang membantu memudahkan dalam menghubungkan aplikasi android ke berbagai Remote Database Server, sehingga tidak perlu membuat Web Server dengan PHP atau sejenisnya. Misalnya, membuat database MySQL-nya dengan nama: trq-jual dan satu tabel dengan nama: brng. Field-field yang dibutuhkan adalah sebagai berikut.
Jika database MySQL sudah dibuat, maka masukkan beberapa data. Misalnya sebagai berikut.
Lalu, perbatikan langkah-langkah berikut.
a. Pastikan Windows-nya sudah terinstal lava dan RDC Server sudah terekstrak
b. Buka config.properties dan menyesuaikan config database-nya seperti JdbcUrl, User, dan Pussword. Sedangkan lainnya dapat diabaikan untuk sementara.
#Lines starting with 'a' are comments.
#Backslash character at the end of line means that the command continues in the next line.
DriverClass com.mysql.jdbc.Driver
JdbcUrl=jdbc:mysql://localhost/trq-jualfcharacterEncoding=utf8
#SQL Server
#DriverClass net.sourceforge.jtds.jdbc.Driver
#JdbcUrl=jdbcijtds.sqlserver://<database server ip>/<database>
User-root
Password qwerty12
Server Port-17178
#If Debug is true then this file will be reloaded on every query.
#This is useful if you need to modify the queries.
Debug-true
#commands
sql.select_brng SELECT FROM brng
c. Kemudian aktifkan text editor seperti Notepad++ dan buka RunRLC.bat untuk menyesuaikan path direktori java.exe pada Windows yang digunakan.
d. Untuk mengaktifkan atau menjalankan RDC-nya, klik dua kali pada RunRLC. bat. Maka, akan muncul seperti gambar di bawah ini:
e. Untuk memastikan lagi apakah RDC sudah running atau belum, bisa dicek dengan cara membuka: http://localhost:17178/?method=test di browser yang digunakan atau diganti dengan localhost IP yang bersangkutan. Jika sudah running, maka akan muncul tulisan seperti pada gambar berikut.
f. Selanjutnya, membuat project baru, misalnya dengan nama: MyConnectDB. Setelah tersimpan, import Class Table dan DBRequestManager dengan baik.
g. Setelah selesai, aktifkan Class Table dan masukkan code sebagai berikut.
'load data from a RDC Request
'Result = DBResult object got from a RDC request
'AutomaticWidths True > set the column widths automaticaly
'Written by Abhisar Thoriq
Public Sub LoadRDCResult (Result As DBResult, AutomaticWidths As Boolean)
cAutomaticWidths = AutomaticWidths NumberOfColumns = Result.Columns.Size innerClearAll(NumberOfColumns)
Dim Headers(NumberOfColumns) As String Dim ColumnWidths(NumberOfColumns) As Int Dim HeaderWidths (NumberOfColumns) As Int Dim DataWidths(NumberOfColumns) As Int Dim col, row As Int Dim str As String For col = 0 To NumberOfColumns - 1 Headers(col) = Result.Columns.GetKeyAt(col) If Automatic Widths = False Then ColumnWidths(col) = 130dip HeaderWidths(col) = 130dip DataWidths(col) = 130dip Else HeaderWidths(col) = cvs. MeasureStringWidth(Headers(col), Typeface.DEFAULT, cTextSize) + 8dip + cLineWidth DataWidths(col) = 0
Dim FieldValue As Object For row = 0 To Result.Rows.Size - 1 Dim Record() As Object = Result.Rows.Get(row) FieldValue = Record(col) If FieldValue <> Null Then FieldValue = FieldValue Else FieldValue = "" End If If GetType(FieldValue) = "java.lang.String" Then Data Widths(col) = Max(DataWidths(col), cvs. MeasureStringWidth(str, Typeface.DEFAULT, cTextSize) + 150dip + cLineWidth)
Else
Data Widths (col) Max(DataWidths(col), cvs. MeasureStringWidth(str, Typeface.DEFAULT, 50dip + cLineWidth) cTextSize) +
End If
Next
Column Widths(col) = Max(HeaderWidths(col), Data Widths(col))
End If
Next
SetHeader(Headers)
SetColumns Widths(ColumnWidths)
For Each Record() As Object In Result.Rows
Dim R(NumberOfColumns) As String
Dim FieldV As String
For col = 0 To NumberOfColumns - 1
FieldV Record(col)
R(col) = FieldV
Next
AddRow(R)
Next
End Sub
h.Setelah semuanya selesai, aktifkan pada aktifity main. Pada sub proces_Globals dan sub Globals deklarasikan objek - objek sebagai berikut.
Sub Process Globals
"These global variables will be declared once when the application starts.
"These variables can be accessed from all modules.
Dim reqManager As DBRequestManager
'Sesuaikan alamat IP Server RDC
Dim RDCServer As String = "http://192.168.100.34:17178"
End Sub
Sub Globals
"These global variables will be redeclared each time the activity is created.
"These variables can only be accessed from this module.
Dim Table1 As Table
Dim PnlTable As Panel
End Sub
i. Pada event Activity_Create masukkan code code berikut.
Sub Activity Create(FirstTime As Boolean)
'Do not forget to load the layout file created with the visual designer.
For example:
'Set judul untuk activity ini.
Activity. Title = "List Brng"
Tambahkan menu.
Activity.AddMenultem("Sync data Brng","SyncBrng")
Initialize Panel.
PulTable. Initialize("")
"Tampilkan Panel di activity ini.
Activity.AddView(PnlTable, 0,0,100%x,100%y)
Initialize Table.
Table1. Initialize(Me, "Table1", 4, Gravity.CENTER_HORIZONTAL, True)
Table1.CellAlignment = Bit.OR(Gravity.LEFT, Gravity.CENTER_ VERTICAL)
Table1.HeaderColor = Colors.Blue
Table1.HeaderTextColor = Colors. Yellow
Tablet.TextColor = Colors Blue Table
TableColor = Colors Red
Table1.AddToActivity(Pn/Table, 0, 0, PniTable.Width, PulTable. Height)
If First Time Then
Initialize RDC-nya. req
Manager.Initialize(Me, RDCServer)
End If
End Sub
J. Berikutnya, membuat fungsi baru dengan nama GetDataBrng sebagai berikut.
Sub GetDataBrng
Dim cmd As DBCommand
cmd.Initialize
cmd.Name "select_brng"
req Manager.ExecuteQuery(cmd, 0, "select_brng")
End Sub
k. Selanjutnya membuat event Click untuk object menu SyncBrng seperti code berikut.
Sub SyncBrng Click()
ProgressDialog Show 2("Loading data from server. Please wait...", False)
GetDataBrng
End Sub
l. Setelah itu membuat event Job Dene yang akan berjalan ketika proses komunikasi antara App Client (Android) dengan web server selesai dikerjakan. Perintahnya adalah sebagai berikut.
Sub JobDone(Job As HttpJob)
If Job.Success = False Then
Log("Peringatan: " & Job. ErrorMessage)
ProgressDialogHide
Else
If Job. JobName = "DBRequest" Then
Dim result As DBResult = reqManager.HandleJob(Job)
Tampilkan data ke dalam bentuk Tabel.
Table1.LoadRDCResult(result, True)
Progress DialogHide
End If
End If
Job.Release
End Sub
m. Pada akhirnya, lakukan penyimpanan (Save) dan Run/Compile project dalam versi Release. Jika datanya ingin ditampilkan ke dalam ListView, akan tampak sebagai berikut.
Tidak ada komentar:
Posting Komentar