Pemrograman User Interface

Bisa?

Jenis-jenis pemrograman

• High level (pascal, basic, cobol, fortran)

• Midle level (C)

• Low level (assambler)

Rapid Aplication Development

• Kebutuhan perangkat lunak berkualitas semakin meningkat

• Waktu pembuatan perangkat lunak semakin singkat

• Graphical User Interface (GUI)• Menerapkan konsep-konsep RAD seperti

OO, Visual Programming, Event-Driven Programming dan Client/Server Programming

Jenis-jenis pemrograman

• Pemrograman Konvensional (Conventional / Traditional Programming)

• Pemrograman yang berOrientasi pada Object (Object-Oriented Programming)

• Pemrograman Visual (Visual Programming)• Pemrograman yang berbasis Event (Event-

Driven Programming)• Pemrograman Client-Server (Client/Server

Programming)

Interface berbasis grafik

• Membutuhkan hardware yang relative lebih mahal dari interface berbasis teks

• GUI (Graphical User Interface) ----- WIMP (Window, Icon, Menu and Pointer)

• Direct Manipulation ----- WYSIWYG (what you see is what you get)

• Better Interface Design

AlgorithmAnimation

User Interfaces

Visual Programming

End User Languages

ComputerGraphics

ScientificVisualization

Visual Computing

Pemrograman Visual :

Languages that use visual notationsor “Diagrams” for

expressing programming constructs,

Definition

Pemrograman Visual

• Reusable Components– Memiliki berbagai jenis komponen standard siap pakai (menu,

buttons, ...)– Pemrogram bisa mengembangkan komponen baru yang

sesuai dengan kebutuhannya

• Time Saving– Waktu development lebih singkat dibandingkan dengan

pemrograman konvensional– Pengembang sistem bisa lebih berkonsentrasi pada sistem,

bukan pada teknik pemrograman

• GUI based interface– Secara umum, memiliki tampilan lebih menarik daripada text-

based interface.

Contoh

• Foxpro for windows

• Visual Basic

• Delphi

Pembuatan Menu

Menu Bar

Popup menu

Separator

Menu item

Accelarator Key

Alternate Key

Menu Name

Menu Icon

Falsafah Menu

• Susunan: kiri->kanan, Atas ->Bawah• Actions (Command)

menu item => arahan

• Dialog box… more input requested

• Settingscheck, disabled (grayed)

• Submenus (cascade)

• Short-Cutalternate-underline, accellarator- key name

Jenis-jenis Menu• Menu Utama

mengandungi menu bar dan beberapa pop-up menu

• Cascading Menuterdapat submenu dalam menu

• Floating menu• Menu sistem

Cascading Menu

Floating Menu

Menu Sistem

/**** RESOURCE FILE: menu.rc ******/

#include "menu.h"

MainMenu MENU{ POPUP "&File" { MENUITEM "New...", IDM_FILENEW MENUITEM "&Open...", CM_FILEOPEN MENUITEM "&Close...", CM_FILECLOSE, GRAYED MENUITEM "&Save", CM_FILESAVE, GRAYED MENUITEM "Save &As...", CM_FILESAVE_AS, GRAYED MENUITEM SEPARATOR POPUP "Send &To" { MENUITEM "Floppy (A)", CM_POPUPITEM MENUITEM "Desktop (create shortcut)", CM_POPUPDESKTOP_CREATE_SHORTCUT MENUITEM "Notepad", CM_POPUPNOTEPAD }

MENUITEM SEPARATOR MENUITEM "E&xit", IDM_FILEEXIT }

POPUP "&Edit" { MENUITEM "Cu&t", IDM_EDITCUT MENUITEM "&Copy", IDM_EDITCOPY MENUITEM "&Paste", IDM_EDITPASTE, GRAYED MENUITEM SEPARATOR MENUITEM "Select A&ll", IDM_EDITSELECT_ALL }

POPUP "&Help", HELP { MENUITEM "&About", IDM_HELPABOUT }

}

/** HEADER FILE: menu.h **/

#define CM_POPUPNOTEPAD 115#define CM_POPUPDESKTOP_CREATE_SHORTCUT 114#define CM_POPUPITEM 113#define IDM_HELPABOUT 111#define IDM_FILEEXIT 110#define CM_FILESAVE_AS 109#define CM_FILESAVE 108#define CM_FILECLOSE 107#define CM_FILEOPEN 106#define IDM_EDITSELECT_ALL 105#define IDM_EDITPASTE 104#define IDM_EDITCOPY 103#define IDM_EDITCUT 102#define IDM_FILENEW 101

Object-Oriented Programming • Object-orientation sebagai suatu cara membuat

program, ia mempunyai beberapa keuntungan. Ia membantu perkembangan pendekatan yang didasarkan pada komponen untuk pengembangan software sehingga pertama kali membuat suatu sistem dengan membuat sekumpulan object.

• Kemudian saat seseorang memperluas sistem dengan menambahkan kapasitas ke komponen-komponennya, cukup seseorang tersebut mengunakan ulang object-object yang telah dibuatnya ke sistem baru yang sedang ia bangun.

OBJECT DAN CLASS

• Object, yang kongkrit atau tidak, adalah segala sesuatu disekitar kita. Object-object yang menyusun dunia ini. Azahari, Sumanto, Inul adalah contoh object dari class manusia.

• Object mempunyai attribut dan operasi. Attribut dari object di atas adalah umur, tinggi, berat badan dsb. Sedangkan operasi dari object di atas adalah makan, minum, tidur, ngebor dsb.

• Class adalah sebuah katagori, ia merupakan katagori dari object-object yang mempunyai attribut dan operasi yang sama. 

Asal,Asal, Berat,Berat,Tinggi ...Tinggi ...

Dangdut Class

ngebor( ), patah( )...ngebor( ), patah( )...

Asal = JabarAsal = Jabar

patah( )patah( )Berat = 60 kgBerat = 60 kg

AnisaAnisa

VariablesVariables

MethodsMethods

BehaviorBehavior

ss

StatStatee

Asal = JatimAsal = Jatim Berat = Berat = 50Kg50Kg

InulInul

ngebor( )ngebor( )

ObjectObject

http://jan.netcomp.monash.edu.au/java/swingtut/tut1a.html

Event-based Programming

• adalah pemrograman yang memakai event (seperti event penekanan tombol keyboard atau mouse) sebagai dasarnya dan memberikan respon untuk event tersebut.

• User bisa menginputkan informasi tanpa tergantung urutan

Panoramic

Event-based Programming (2)

• suatu event adalah suatu aksi yang dikenal oleh objek, misalnya event penekanan tombol mouse, penggerakan mouse atau penekanan tombol keyboard, sedemikian rupa sehingga programmer bisa menuliskan program sebagai respon dari event tersebut.

Event-driven Programming

WINDOWS(OS)

WM_LBUTTONDOWN WM_KEYDOWN

GetMessage()

TranslateMessage()

DispatchMessage()

User Press F1

case WM_KEYDOWN: ……//actual operationsbreak;

WM_KEYDOWN

case WM_LBUTTONDOWN: …… SendMessage(WM_KEYDOWN,F1)break;

WM_LBUTTONDOWN

App’s msg queue

User click mouse

msg loop

Event-based Programming (3)

• Event bisa terjadi karena tiga hal yaitu:– Aksi dari user– Aksi dari program– Trigger dari sistem

• Event bisa terjadi pada urutan apapun dan pada posisi manapun dalam program.

• Event yang terjadi harus selalu ada event-handler nya

Mekanisme pemrograman berbasis event

Kelemahan

• Program harus selalu siap untuk menerima event yang terjadi.

• Style dari pemrograman berbasis event menuntut penyelesaian suatu task dalam waktu singkat, sehingga event-event bisa di-handle dengan cepat dan user bisa mendapatkan respon dengan cepat.

Client/Server Programming

• Istilah client/server dipakai untuk menjelaskan berbagai macam topik dalam lingkungan pemrograman

• DLL (Dynamic Link Library) dan OLE (Object Linking and Embeding)

• Konsep client/server juga banyak dipakai dalam konteks penyimpanan dan manipulasi database

Bagian Client

• Client/server diartikan sebagai program yang dijalankan pada terminal komputer yang terhubung dalam suatu network.

• Client ini berfungsi sebagai tempat dimana semua proses input dan output data terjadi.

Misalnya…

• sebuah program yang dibuat dengan Delphi berfungsi sebagai aplikasi client yang melakukan proses input dan output data pada suatu server database yang berada dalam network tersebut.

Bagian Server

• Bagian server dari konsep client/server diartikan sebagai server database yang berfungsi untuk melayani permintaan dari program aplikasi untuk mengambil, memanipulasi dan menyimpan data.

• Server database bisa dibayangkan sebagai sebuah kotak hitam yang menyediakan fungsi-fungsi database dalam memanipulasi data.

• Suatu server database biasanya didesain untuk mampu melayani user dan transaksi network dalam jumlah besar.

Link

• http://home.online.no/~pethesse/uip.html• http://ou800doc.caldera.com/SDK_charm/• http://www.programming123.com/topics/use

r_interface_programming.html