<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Andi Sunyoto Personal Blog &#187; GUI</title>
	<atom:link href="http://www.andisun.com/tag/gui/feed" rel="self" type="application/rss+xml" />
	<link>http://www.andisun.com</link>
	<description>andi&#124;blog</description>
	<lastBuildDate>Wed, 28 Dec 2011 12:24:37 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>User Interface pada J2ME</title>
		<link>http://www.andisun.com/tutorials/j2me-programming/user-interface-pada-j2me</link>
		<comments>http://www.andisun.com/tutorials/j2me-programming/user-interface-pada-j2me#comments</comments>
		<pubDate>Thu, 23 Jul 2009 03:43:38 +0000</pubDate>
		<dc:creator>myandisun</dc:creator>
				<category><![CDATA[J2ME-Mobile Programming]]></category>
		<category><![CDATA[API]]></category>
		<category><![CDATA[class]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[High]]></category>
		<category><![CDATA[Interface]]></category>
		<category><![CDATA[J2ME]]></category>

		<guid isPermaLink="false">http://www.andisun.com/?p=256</guid>
		<description><![CDATA[Satu hal terpenting dalam sebuah aplikasi adalah Graphical User Interface (GUI). GUI dapat dimanfaatkan sebagai media input dalam sebuah aplikasi. Class-class untuk membangun GUI dalam MIDP disimpan dalam lcdui (javax.microedition.lcdui), sehingga agar dapat memanfaatkan class tersebut dengan mengimport paketnya. Struktur GUI dalam MIDP GUI di dalam MIDP dibagi menjadi dua bagian, yaitu: high-level API (yang [...]]]></description>
			<content:encoded><![CDATA[<p>Satu hal terpenting dalam sebuah aplikasi adalah <em>Graphical User Interface (GUI)</em>. GUI dapat dimanfaatkan sebagai media input dalam sebuah aplikasi.</p>
<p><em>Class-class</em> untuk membangun GUI dalam MIDP disimpan dalam lcdui (<span style="font-family: courier new,courier;">javax.microedition.lcdui</span>), sehingga agar dapat memanfaatkan class tersebut dengan mengimport paketnya.</p>
<p><strong>Struktur GUI dalam MIDP</strong></p>
<p>GUI di dalam MIDP dibagi menjadi dua bagian, yaitu: <em>high-level API</em> (yang didasarkan pada penbentukan window) dan <em>low-level API</em> (yang didasarkan pada pembentukan canvas dan pixel). Penggunaan <em>high-level API</em> lebih mudah disbanding mengunakan <em>low-level API</em> untuk membangun sebuah interface pada suatu aplikasi. Namun dengan menggunakan <em>low level API</em> lebih leluasa dalam mendesain sebuah interface.</p>
<p>Model high-level API menyediakan class-class standar yang digunakan untuk membangun UI <em>(User Interface)</em> seperti component <span style="font-family: courier new,courier;">Form, TextBox, List, Alert</span>. Model High-level mengimplementasikan class-class yang diturunkan dari class Screen.</p>
<p>Model Low-level API memberikan akses yang kepada programmer untuk melakukan control terhadap tampilan layer, termasuk pengembaran menggunakan pixel, pembentukan bentuk geometri (segitiga, segiempat,lingkaran,elips, arc, dll). Model ini sering digunakan untuk membuat game. Karena model ini dapat membuat bentuk tek graphic yang lebih spesifik sesaui dengan keinginan. Model ini juga dapat membaca tombol-tombol yang ditekan oleh user.</p>
<p>Dalam paket lcdui yang dimport menggunakan:</p>
<p style="padding-left: 30px;"><span style="font-family: terminal,monaco;">import javax.microedition.lcdui.*;</span></p>
<p>Paket ini terdiri dari interface dan class.</p>
<p>Tabel daftar interface:</p>
<table style="width: 599px; height: 120px;" border="0" cellspacing="1" cellpadding="2">
<tbody>
<tr>
<td width="157"><strong>Interface</strong></td>
<td width="424"><strong>Keterangan</strong></td>
</tr>
<tr>
<td width="157"><span style="font-family: courier new,courier;">Choice</span></td>
<td width="424">Mengimplementasikan sejumah item pilihan yang   didefinisikan.</td>
</tr>
<tr>
<td width="157"><span style="font-family: courier new,courier;">CommandListener</span></td>
<td width="424">Menerima <em>event-event</em> level tinggi.</td>
</tr>
<tr>
<td width="157"><span style="font-family: courier new,courier;">ItemStateListener</span></td>
<td width="424">Menerima <em>event</em> yang mengindikasikan perubahan keadaan dari item yang terdapat pada obyek Form</td>
</tr>
</tbody>
</table>
<p><span id="more-256"></span></p>
<p>Daftar kelas paket lcdui:</p>
<table style="width: 596px; height: 613px;" border="0" cellspacing="1" cellpadding="2">
<tbody>
<tr>
<td width="118"><strong>Class</strong></td>
<td width="464"><strong>Keterangan</strong></td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Alert</span></td>
<td width="464">Menampilkan pesan ke user untuk periode waktu tertentu</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">AlertType</span></td>
<td width="464">Mendefinisikan tipe objek Alert yang akan ditampilkan</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Canvas</span></td>
<td width="464">Class yang digunakan untuk aplikasi yang membutuhkan   event-event rendah seperti game dan untuk mengambar dilayar.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">ChoiceGroup</span></td>
<td width="464">Meyajikan sekumpulan elemen yang dapat dipilih yang   dimasukkan di dalam Form.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Command</span></td>
<td width="464">Konstruksi yang mebungkus informasi-informasi yang   dilakukan oleh user.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">CustomItem</span></td>
<td width="464">Membuat   elemen user interface baru yang ditempatkan pada sebuah Form.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">DateField</span></td>
<td width="464">Komponen yang   digunakan untuk menampilkan tanggal dan waktu.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Display</span></td>
<td width="464">Manager   tampilan</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Displayable</span></td>
<td width="464">Objek yang   memiliki kemampuan ditampilkan pada layar.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Font</span></td>
<td width="464">Mengatur   huruf yang akan ditampilkan ke layar.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Gauge</span></td>
<td width="464">Tampilan   grafis yang digunakan untuk memvisualisasikan nilai tertentu yang diletakkan   pada Form.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Graphics</span></td>
<td width="464">Menyediakan   kemampuan menggambar pada sebuah Canvas.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Image</span></td>
<td width="464">Digunakan   untuk menyimpan data gambar.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">ImageItem</span></td>
<td width="464">Meyediakan   kotrol layout untuk gambar-gambar yang ditempatkan pada sebuah Form.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Item</span></td>
<td width="464">Kelas dasar   untuk menempatkan komponen-komponen yang dapat ditempatkan pada sebuah Form.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">List</span></td>
<td width="464">Layar yang   berisi daftar pilihan</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Screen</span></td>
<td width="464">Kelas dasar   semua komponen layar dalam high-level user interface.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">StringItem</span></td>
<td width="464">Item yang   berisi string yang kemudian ditempatkan pada Form.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">TextBox</span></td>
<td width="464">Layar yang   mengijinkan user memanipulasi teks dan bisa juga dijadikan media input.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">TextField</span></td>
<td width="464">Komponen   untuk memasukkan teks di atas Form.</td>
</tr>
<tr>
<td width="118"><span style="font-family: courier new,courier;">Ticker</span></td>
<td width="464">Bagian teks   yang berjalan terus-menerus di atas layar. Ticker tidak dapat ditempelkan   pada Canvas.</td>
</tr>
</tbody>
</table>
<p><strong>Arsitektur LCDUI</strong></p>
<p>Beriku hierarki class-class yang diambil dari pake lcdui (<span style="font-family: courier new,courier;">javax.microedition.lcdui</span>)</p>
<div id="attachment_257" class="wp-caption alignnone" style="width: 577px"><img class="size-full wp-image-257 " title="j2me_class_lcdui" src="http://www.andisun.com/wp-content/uploads/2009/07/j2me_class_lcdui.png" alt="Hierarki Class LCDUI" width="567" height="262" /><p class="wp-caption-text">Hierarki Class LCDUI</p></div>
<p>Dari class-class di atas yang dapat langsung ditampilkan ke layar hanya turunan dari class <span style="font-family: courier new,courier;">Displayable</span>.</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p256code2'); return false;">View Code</a> JAVA</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table><tr id="p2562"><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
</pre></td><td class="code" id="p256code2"><pre class="java" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javax.microedition.lcdui.*</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">import</span> <span style="color: #006699;">javax.microedition.midlet.*</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> MIDAlert <span style="color: #000000; font-weight: bold;">extends</span> MIDlet <span style="color: #000000; font-weight: bold;">implements</span> CommandListener <span style="color: #009900;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">private</span> Display display<span style="color: #339933;">;</span>
    <span style="color: #000000; font-weight: bold;">private</span> Form form<span style="color: #339933;">;</span>
    <span style="color: #000000; font-weight: bold;">private</span> Alert alert<span style="color: #339933;">;</span>
    <span style="color: #000000; font-weight: bold;">private</span> Command cmdExit<span style="color: #339933;">;</span>
    <span style="color: #000000; font-weight: bold;">private</span> Command cmdAlert<span style="color: #339933;">;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">public</span> MIDAlert<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        display <span style="color: #339933;">=</span> Display.<span style="color: #006633;">getDisplay</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #666666; font-style: italic;">//membuat objek Form</span>
        form <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Form<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Demo Alert&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">//membuat objek Command</span>
        cmdExit <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Command<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Exit&quot;</span>, Command.<span style="color: #006633;">EXIT</span>, <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        cmdAlert <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Command<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Alert&quot;</span>, Command.<span style="color: #006633;">SCREEN</span>, <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">//menambahkan objek Command &quot;cmdExit&quot; dan &quot;cmdAlert&quot;</span>
        form.<span style="color: #006633;">addCommand</span><span style="color: #009900;">&#40;</span>cmdExit<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        form.<span style="color: #006633;">addCommand</span><span style="color: #009900;">&#40;</span>cmdAlert<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">//menset event</span>
        form.<span style="color: #006633;">setCommandListener</span><span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> startApp<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #666666; font-style: italic;">//menentukan objek yang ditampilkan di layar</span>
        display.<span style="color: #006633;">setCurrent</span><span style="color: #009900;">&#40;</span>form<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> pauseApp<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> destroyApp<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">boolean</span> unconditional<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000066; font-weight: bold;">void</span> commandAction<span style="color: #009900;">&#40;</span>Command c, Displayable d<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>c <span style="color: #339933;">==</span> cmdAlert<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">//memanggil method tampilAlert</span>
            tampilAlert<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">else</span> <span style="color: #000000; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span>c <span style="color: #339933;">==</span> cmdExit<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            destroyApp<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
            notifyDestroyed<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">private</span> <span style="color: #000066; font-weight: bold;">void</span> tampilAlert<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        <span style="color: #000000; font-weight: bold;">try</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">//membuat objek Alert dan menentukan String yang ditampilkan</span>
            alert <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> Alert<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Informasi&quot;</span>, <span style="color: #0000ff;">&quot;Pesan ini tampil di User&quot;</span>, <span style="color: #000066; font-weight: bold;">null</span>, <span style="color: #000066; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #666666; font-style: italic;">//menentukan tipe Alert</span>
            alert.<span style="color: #006633;">setType</span><span style="color: #009900;">&#40;</span>AlertType.<span style="color: #006633;">ALARM</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #666666; font-style: italic;">//menentukan lamanya Alert tampil</span>
            alert.<span style="color: #006633;">setTimeout</span><span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">5000</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
            <span style="color: #666666; font-style: italic;">//menampilkan Alert</span>
            display.<span style="color: #006633;">setCurrent</span><span style="color: #009900;">&#40;</span>alert<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span> <span style="color: #000000; font-weight: bold;">catch</span><span style="color: #009900;">&#40;</span><a href="http://www.google.com/search?hl=en&amp;q=allinurl%3Aexception+java.sun.com&amp;btnI=I%27m%20Feeling%20Lucky"><span style="color: #003399;">Exception</span></a> e<span style="color: #009900;">&#41;</span>  <span style="color: #009900;">&#123;</span>
            <a href="http://www.google.com/search?hl=en&amp;q=allinurl%3Asystem+java.sun.com&amp;btnI=I%27m%20Feeling%20Lucky"><span style="color: #003399;">System</span></a>.<span style="color: #006633;">out</span>.<span style="color: #006633;">println</span><span style="color: #009900;">&#40;</span>e.<span style="color: #006633;">getMessage</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
    <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>Sebuah aplikasi biasanya ketika menampilkan pesan menggunakan icon atau gambar tertentu, berikut tambahan kode program agar pesan yang ditampilkan di atas dapat menampilkan pesan yang disertai dengan gambar.</p>
<p>Hasil output dari program di atas adalah:</p>
<div id="attachment_258" class="wp-caption alignnone" style="width: 458px"><img class="size-full wp-image-258" title="j2me_ui_01" src="http://www.andisun.com/wp-content/uploads/2009/07/j2me_ui_01.png" alt="Sesudah dan sebelum diklik Alert" width="448" height="234" /><p class="wp-caption-text">Sesudah dan sebelum diklik Alert</p></div>
<p>Ubahlah method <span style="font-family: courier new,courier;">tampilAlert()</span> menjadi seperti berikut:</p>
<div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 2806px; width: 1px; height: 1px;"><!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Normal</w:View> <w:Zoom>0</w:Zoom> <w:TrackMoves /> <w:TrackFormatting /> <w:PunctuationKerning /> <w:ValidateAgainstSchemas /> <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid> <w:IgnoreMixedContent>false</w:IgnoreMixedContent> <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText> <w:DoNotPromoteQF /> <w:LidThemeOther>EN-US</w:LidThemeOther> <w:LidThemeAsian>X-NONE</w:LidThemeAsian> <w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript> <w:Compatibility> <w:BreakWrappedTables /> <w:SnapToGridInCell /> <w:WrapTextWithPunct /> <w:UseAsianBreakRules /> <w:DontGrowAutofit /> <w:SplitPgBreakAndParaMark /> <w:DontVertAlignCellWithSp /> <w:DontBreakConstrainedForcedTables /> <w:DontVertAlignInTxbx /> <w:Word11KerningPairs /> <w:CachedColBalance /> </w:Compatibility> <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel> <m:mathPr> <m:mathFont m:val="Cambria Math" /> <m:brkBin m:val="before" /> <m:brkBinSub m:val=" " /> <m:smallFrac m:val="off" /> <m:dispDef /> <m:lMargin m:val="0" /> <m:rMargin m:val="0" /> <m:defJc m:val="centerGroup" /> <m:wrapIndent m:val="1440" /> <m:intLim m:val="subSup" /> <m:naryLim m:val="undOvr" /> </m:mathPr></w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:LatentStyles DefLockedState="false" DefUnhideWhenUsed="true"   DefSemiHidden="true" DefQFormat="false" DefPriority="99"   LatentStyleCount="267"> <w:LsdException Locked="false" Priority="0" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Normal" /> <w:LsdException Locked="false" Priority="0" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="heading 1" /> <w:LsdException Locked="false" Priority="0" QFormat="true" Name="heading 2" /> <w:LsdException Locked="false" Priority="0" QFormat="true" Name="heading 3" /> <w:LsdException Locked="false" Priority="0" QFormat="true" Name="heading 4" /> <w:LsdException Locked="false" Priority="0" QFormat="true" Name="heading 5" /> <w:LsdException Locked="false" Priority="0" QFormat="true" Name="heading 6" /> <w:LsdException Locked="false" Priority="0" QFormat="true" Name="heading 7" /> <w:LsdException Locked="false" Priority="0" QFormat="true" Name="heading 8" /> <w:LsdException Locked="false" Priority="0" QFormat="true" Name="heading 9" /> <w:LsdException Locked="false" Priority="39" Name="toc 1" /> <w:LsdException Locked="false" Priority="39" Name="toc 2" /> <w:LsdException Locked="false" Priority="39" Name="toc 3" /> <w:LsdException Locked="false" Priority="39" Name="toc 4" /> <w:LsdException Locked="false" Priority="39" Name="toc 5" /> <w:LsdException Locked="false" Priority="39" Name="toc 6" /> <w:LsdException Locked="false" Priority="39" Name="toc 7" /> <w:LsdException Locked="false" Priority="39" Name="toc 8" /> <w:LsdException Locked="false" Priority="39" Name="toc 9" /> <w:LsdException Locked="false" Priority="0" QFormat="true" Name="caption" /> <w:LsdException Locked="false" Priority="10" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Title" /> <w:LsdException Locked="false" Priority="1" Name="Default Paragraph Font" /> <w:LsdException Locked="false" Priority="0" Name="Body Text" /> <w:LsdException Locked="false" Priority="11" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Subtitle" /> <w:LsdException Locked="false" Priority="22" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Strong" /> <w:LsdException Locked="false" Priority="0" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Emphasis" /> <w:LsdException Locked="false" Priority="0" Name="Plain Text" /> <w:LsdException Locked="false" Priority="59" SemiHidden="false"    UnhideWhenUsed="false" Name="Table Grid" /> <w:LsdException Locked="false" UnhideWhenUsed="false" Name="Placeholder Text" /> <w:LsdException Locked="false" Priority="1" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="No Spacing" /> <w:LsdException Locked="false" Priority="60" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Shading" /> <w:LsdException Locked="false" Priority="61" SemiHidden="false"    UnhideWhenUsed="false" Name="Light List" /> <w:LsdException Locked="false" Priority="62" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Grid" /> <w:LsdException Locked="false" Priority="63" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 1" /> <w:LsdException Locked="false" Priority="64" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 2" /> <w:LsdException Locked="false" Priority="65" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 1" /> <w:LsdException Locked="false" Priority="66" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 2" /> <w:LsdException Locked="false" Priority="67" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 1" /> <w:LsdException Locked="false" Priority="68" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 2" /> <w:LsdException Locked="false" Priority="69" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 3" /> <w:LsdException Locked="false" Priority="70" SemiHidden="false"    UnhideWhenUsed="false" Name="Dark List" /> <w:LsdException Locked="false" Priority="71" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Shading" /> <w:LsdException Locked="false" Priority="72" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful List" /> <w:LsdException Locked="false" Priority="73" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Grid" /> <w:LsdException Locked="false" Priority="60" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Shading Accent 1" /> <w:LsdException Locked="false" Priority="61" SemiHidden="false"    UnhideWhenUsed="false" Name="Light List Accent 1" /> <w:LsdException Locked="false" Priority="62" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Grid Accent 1" /> <w:LsdException Locked="false" Priority="63" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 1 Accent 1" /> <w:LsdException Locked="false" Priority="64" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 2 Accent 1" /> <w:LsdException Locked="false" Priority="65" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 1 Accent 1" /> <w:LsdException Locked="false" UnhideWhenUsed="false" Name="Revision" /> <w:LsdException Locked="false" Priority="34" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="List Paragraph" /> <w:LsdException Locked="false" Priority="29" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Quote" /> <w:LsdException Locked="false" Priority="30" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Intense Quote" /> <w:LsdException Locked="false" Priority="66" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 2 Accent 1" /> <w:LsdException Locked="false" Priority="67" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 1 Accent 1" /> <w:LsdException Locked="false" Priority="68" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 2 Accent 1" /> <w:LsdException Locked="false" Priority="69" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 3 Accent 1" /> <w:LsdException Locked="false" Priority="70" SemiHidden="false"    UnhideWhenUsed="false" Name="Dark List Accent 1" /> <w:LsdException Locked="false" Priority="71" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Shading Accent 1" /> <w:LsdException Locked="false" Priority="72" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful List Accent 1" /> <w:LsdException Locked="false" Priority="73" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Grid Accent 1" /> <w:LsdException Locked="false" Priority="60" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Shading Accent 2" /> <w:LsdException Locked="false" Priority="61" SemiHidden="false"    UnhideWhenUsed="false" Name="Light List Accent 2" /> <w:LsdException Locked="false" Priority="62" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Grid Accent 2" /> <w:LsdException Locked="false" Priority="63" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 1 Accent 2" /> <w:LsdException Locked="false" Priority="64" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 2 Accent 2" /> <w:LsdException Locked="false" Priority="65" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 1 Accent 2" /> <w:LsdException Locked="false" Priority="66" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 2 Accent 2" /> <w:LsdException Locked="false" Priority="67" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 1 Accent 2" /> <w:LsdException Locked="false" Priority="68" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 2 Accent 2" /> <w:LsdException Locked="false" Priority="69" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 3 Accent 2" /> <w:LsdException Locked="false" Priority="70" SemiHidden="false"    UnhideWhenUsed="false" Name="Dark List Accent 2" /> <w:LsdException Locked="false" Priority="71" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Shading Accent 2" /> <w:LsdException Locked="false" Priority="72" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful List Accent 2" /> <w:LsdException Locked="false" Priority="73" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Grid Accent 2" /> <w:LsdException Locked="false" Priority="60" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Shading Accent 3" /> <w:LsdException Locked="false" Priority="61" SemiHidden="false"    UnhideWhenUsed="false" Name="Light List Accent 3" /> <w:LsdException Locked="false" Priority="62" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Grid Accent 3" /> <w:LsdException Locked="false" Priority="63" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 1 Accent 3" /> <w:LsdException Locked="false" Priority="64" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 2 Accent 3" /> <w:LsdException Locked="false" Priority="65" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 1 Accent 3" /> <w:LsdException Locked="false" Priority="66" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 2 Accent 3" /> <w:LsdException Locked="false" Priority="67" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 1 Accent 3" /> <w:LsdException Locked="false" Priority="68" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 2 Accent 3" /> <w:LsdException Locked="false" Priority="69" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 3 Accent 3" /> <w:LsdException Locked="false" Priority="70" SemiHidden="false"    UnhideWhenUsed="false" Name="Dark List Accent 3" /> <w:LsdException Locked="false" Priority="71" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Shading Accent 3" /> <w:LsdException Locked="false" Priority="72" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful List Accent 3" /> <w:LsdException Locked="false" Priority="73" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Grid Accent 3" /> <w:LsdException Locked="false" Priority="60" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Shading Accent 4" /> <w:LsdException Locked="false" Priority="61" SemiHidden="false"    UnhideWhenUsed="false" Name="Light List Accent 4" /> <w:LsdException Locked="false" Priority="62" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Grid Accent 4" /> <w:LsdException Locked="false" Priority="63" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 1 Accent 4" /> <w:LsdException Locked="false" Priority="64" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 2 Accent 4" /> <w:LsdException Locked="false" Priority="65" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 1 Accent 4" /> <w:LsdException Locked="false" Priority="66" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 2 Accent 4" /> <w:LsdException Locked="false" Priority="67" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 1 Accent 4" /> <w:LsdException Locked="false" Priority="68" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 2 Accent 4" /> <w:LsdException Locked="false" Priority="69" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 3 Accent 4" /> <w:LsdException Locked="false" Priority="70" SemiHidden="false"    UnhideWhenUsed="false" Name="Dark List Accent 4" /> <w:LsdException Locked="false" Priority="71" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Shading Accent 4" /> <w:LsdException Locked="false" Priority="72" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful List Accent 4" /> <w:LsdException Locked="false" Priority="73" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Grid Accent 4" /> <w:LsdException Locked="false" Priority="60" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Shading Accent 5" /> <w:LsdException Locked="false" Priority="61" SemiHidden="false"    UnhideWhenUsed="false" Name="Light List Accent 5" /> <w:LsdException Locked="false" Priority="62" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Grid Accent 5" /> <w:LsdException Locked="false" Priority="63" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 1 Accent 5" /> <w:LsdException Locked="false" Priority="64" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 2 Accent 5" /> <w:LsdException Locked="false" Priority="65" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 1 Accent 5" /> <w:LsdException Locked="false" Priority="66" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 2 Accent 5" /> <w:LsdException Locked="false" Priority="67" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 1 Accent 5" /> <w:LsdException Locked="false" Priority="68" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 2 Accent 5" /> <w:LsdException Locked="false" Priority="69" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 3 Accent 5" /> <w:LsdException Locked="false" Priority="70" SemiHidden="false"    UnhideWhenUsed="false" Name="Dark List Accent 5" /> <w:LsdException Locked="false" Priority="71" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Shading Accent 5" /> <w:LsdException Locked="false" Priority="72" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful List Accent 5" /> <w:LsdException Locked="false" Priority="73" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Grid Accent 5" /> <w:LsdException Locked="false" Priority="60" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Shading Accent 6" /> <w:LsdException Locked="false" Priority="61" SemiHidden="false"    UnhideWhenUsed="false" Name="Light List Accent 6" /> <w:LsdException Locked="false" Priority="62" SemiHidden="false"    UnhideWhenUsed="false" Name="Light Grid Accent 6" /> <w:LsdException Locked="false" Priority="63" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 1 Accent 6" /> <w:LsdException Locked="false" Priority="64" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Shading 2 Accent 6" /> <w:LsdException Locked="false" Priority="65" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 1 Accent 6" /> <w:LsdException Locked="false" Priority="66" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium List 2 Accent 6" /> <w:LsdException Locked="false" Priority="67" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 1 Accent 6" /> <w:LsdException Locked="false" Priority="68" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 2 Accent 6" /> <w:LsdException Locked="false" Priority="69" SemiHidden="false"    UnhideWhenUsed="false" Name="Medium Grid 3 Accent 6" /> <w:LsdException Locked="false" Priority="70" SemiHidden="false"    UnhideWhenUsed="false" Name="Dark List Accent 6" /> <w:LsdException Locked="false" Priority="71" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Shading Accent 6" /> <w:LsdException Locked="false" Priority="72" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful List Accent 6" /> <w:LsdException Locked="false" Priority="73" SemiHidden="false"    UnhideWhenUsed="false" Name="Colorful Grid Accent 6" /> <w:LsdException Locked="false" Priority="19" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Subtle Emphasis" /> <w:LsdException Locked="false" Priority="21" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Intense Emphasis" /> <w:LsdException Locked="false" Priority="31" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Subtle Reference" /> <w:LsdException Locked="false" Priority="32" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Intense Reference" /> <w:LsdException Locked="false" Priority="33" SemiHidden="false"    UnhideWhenUsed="false" QFormat="true" Name="Book Title" /> <w:LsdException Locked="false" Priority="37" Name="Bibliography" /> <w:LsdException Locked="false" Priority="39" QFormat="true" Name="TOC Heading" /> </w:LatentStyles> </xml><![endif]--><!--  /* Font Definitions */  @font-face 	{font-family:"Cambria Math"; 	panose-1:2 4 5 3 5 4 6 3 2 4; 	mso-font-charset:0; 	mso-generic-font-family:roman; 	mso-font-pitch:variable; 	mso-font-signature:-1610611985 1107304683 0 0 159 0;} @font-face 	{font-family:Verdana; 	panose-1:2 11 6 4 3 5 4 4 2 4; 	mso-font-charset:0; 	mso-generic-font-family:swiss; 	mso-font-pitch:variable; 	mso-font-signature:536871559 0 0 0 415 0;}  /* Style Definitions */  p.MsoNormal, li.MsoNormal, div.MsoNormal 	{mso-style-unhide:no; 	mso-style-qformat:yes; 	mso-style-parent:""; 	margin:0in; 	margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:10.0pt; 	mso-bidi-font-size:12.0pt; 	font-family:"Verdana","sans-serif"; 	mso-fareast-font-family:"Times New Roman"; 	mso-bidi-font-family:"Times New Roman";} p.CodeBody, li.CodeBody, div.CodeBody 	{mso-style-name:"Code Body"; 	mso-style-unhide:no; 	margin-top:0in; 	margin-right:8.5pt; 	margin-bottom:3.0pt; 	margin-left:8.5pt; 	mso-pagination:widow-orphan; 	background:#F3F3F3; 	mso-layout-grid-align:none; 	text-autospace:none; 	border:none; 	mso-border-top-alt:solid windowtext .5pt; 	mso-border-bottom-alt:solid windowtext .5pt; 	padding:0in; 	mso-padding-alt:1.0pt 0in 1.0pt 0in; 	font-size:10.0pt; 	mso-bidi-font-size:9.0pt; 	font-family:"Courier New"; 	mso-fareast-font-family:"Times New Roman"; 	color:#231F20;} .MsoChpDefault 	{mso-style-type:export-only; 	mso-default-props:yes; 	font-size:10.0pt; 	mso-ansi-font-size:10.0pt; 	mso-bidi-font-size:10.0pt;} @page Section1 	{size:8.5in 11.0in; 	margin:1.0in 1.0in 1.0in 1.0in; 	mso-header-margin:.5in; 	mso-footer-margin:.5in; 	mso-paper-source:0;} div.Section1 	{page:Section1;} --><!--[if gte mso 10]> <mce:style><!   /* Style Definitions */  table.MsoNormalTable 	{mso-style-name:"Table Normal"; 	mso-tstyle-rowband-size:0; 	mso-tstyle-colband-size:0; 	mso-style-noshow:yes; 	mso-style-priority:99; 	mso-style-qformat:yes; 	mso-style-parent:""; 	mso-padding-alt:0in 5.4pt 0in 5.4pt; 	mso-para-margin:0in; 	mso-para-margin-bottom:.0001pt; 	mso-pagination:widow-orphan; 	font-size:10.0pt; 	font-family:"Times New Roman","serif";} --> <!--[endif]--></p>
<div style="border-style: solid none; border-color: windowtext -moz-use-text-color; border-width: 1pt medium; padding: 1pt 0in; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; margin-left: 8.5pt; margin-right: 8.5pt;">
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">private void tampilAlert() {</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">try {</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">//membuat objek Image</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">Image img = Image.createImage(&#8220;/globe.png&#8221;);</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">//membuat objek Alert dan menentukan String yang ditampilkan</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">alert = new Alert(&#8220;Informasi&#8221;, &#8220;Pesan ini tampil di User&#8221;, img, null);</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">//menentukan tipe Alert</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">alert.setType(AlertType.ALARM);</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">//menentukan lamanya Alert tampil</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">alert.setTimeout(5000);</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">//menampilkan Alert</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">display.setCurrent(alert);</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">} catch(Exception e) {</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">System.out.println(e.getMessage());</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">}</p>
<p class="CodeBody" style="margin: 0in 0in 3pt; background: #f3f3f3 none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;">}</p>
</div>
</div>
<pre>private void tampilAlert() {
	try {
		//membuat objek Image
		Image img = Image.createImage("/globe.png");

		//membuat objek Alert dan menentukan String yang ditampilkan
		alert = new Alert("Informasi", "Pesan ini tampil di User", img, null);

		//menentukan tipe Alert
		alert.setType(AlertType.ALARM);

		//menentukan lamanya Alert tampil
		alert.setTimeout(5000);

		//menampilkan Alert
		display.setCurrent(alert);
	} catch(Exception e)  {
		System.out.println(e.getMessage());
	}
}</pre>
<p>Tampilan ketika ditambahkan gambar pada <span style="font-family: courier new,courier;">Alert</span>.</p>
<div id="attachment_259" class="wp-caption alignnone" style="width: 259px"><img class="size-full wp-image-259" title="j2me_alert_icon" src="http://www.andisun.com/wp-content/uploads/2009/07/j2me_alert_icon.png" alt="Tampilan Alert setelah ditambah image" width="249" height="271" /><p class="wp-caption-text">Tampilan Alert setelah ditambah image</p></div>
]]></content:encoded>
			<wfw:commentRss>http://www.andisun.com/tutorials/j2me-programming/user-interface-pada-j2me/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Basic Mendesain Graphical User Interface (GUI)</title>
		<link>http://www.andisun.com/jurnal/basic-mendesain-graphical-user-interface-gui</link>
		<comments>http://www.andisun.com/jurnal/basic-mendesain-graphical-user-interface-gui#comments</comments>
		<pubDate>Tue, 14 Jul 2009 06:23:43 +0000</pubDate>
		<dc:creator>myandisun</dc:creator>
				<category><![CDATA[Jurnal]]></category>
		<category><![CDATA[Antar muka]]></category>
		<category><![CDATA[desain]]></category>
		<category><![CDATA[Form]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[Interface]]></category>
		<category><![CDATA[Kontrol]]></category>
		<category><![CDATA[Label]]></category>
		<category><![CDATA[listbox]]></category>
		<category><![CDATA[multiple]]></category>
		<category><![CDATA[Navigasi]]></category>
		<category><![CDATA[optionbox]]></category>
		<category><![CDATA[sederhana]]></category>
		<category><![CDATA[single]]></category>
		<category><![CDATA[TextBox]]></category>
		<category><![CDATA[User]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://www.andisun.com/?p=91</guid>
		<description><![CDATA[Prinsip dasar untuk membuat sebuah tampilan antar muka sama halnya dengan prinsip desain dalam mendesain sebuah karya seni di atas kanvas. Prinsip desain adalah cara menyusun (meletakkan) obyek, warna yang semua itu sama dengan tampilan pada layar komputer.
Meskipun banyak alat (tool) pemrograman membuat mudah dalam mendesain dengan hanya drag drop komponen kedalam form anda atau halaman web anda, dengan hanya sedikit rencana dalam mendesain sebuah aplikasi nantinya akan banyak perubahan desain. Team pengenbang software biasanya mendesain elemen dulu dalam kertas, medesain keutuhan komponen atau kontrol yang dibutuhkan dalam software tersebut dan relasi antar form.
Prinsip dasar desain harus diterapkan dalam antar muka program aplikasi atau desain yang berbasiskan web agar diperoleh desain yang bagus. Untuk software aplikasi dan Web base aplikasi berbeda, tapi bagaimanapun juga kedua model aplikasi dan web base mempunyai proses yang mirip.]]></description>
			<content:encoded><![CDATA[<div>Oleh: Andi Sunyoto</div>
<div><strong>Pendahuluan</strong><br />
Prinsip dasar untuk membuat sebuah tampilan antar muka sama halnya dengan prinsip desain dalam mendesain sebuah karya seni di atas kanvas. Prinsip desain adalah cara menyusun (meletakkan) obyek, warna yang semua itu sama dengan tampilan pada layar komputer.<br />
Meskipun banyak alat (tool) pemrograman membuat mudah dalam mendesain dengan hanya drag drop komponen kedalam form anda atau halaman web anda, dengan hanya sedikit rencana dalam mendesain sebuah aplikasi nantinya akan banyak perubahan desain. Team pengenbang software biasanya mendesain elemen dulu dalam kertas, medesain keutuhan komponen atau kontrol yang dibutuhkan dalam software tersebut dan relasi antar form.<br />
Prinsip dasar desain harus diterapkan dalam antar muka program aplikasi atau desain yang berbasiskan web agar diperoleh desain yang bagus. Untuk software aplikasi dan Web base aplikasi berbeda, tapi bagaimanapun juga kedua model aplikasi dan web base mempunyai proses yang mirip.</div>
<p><strong> </strong></p>
<p><strong>Pembahasan</strong><br />
<strong>Elemen Antar Muka</strong><br />
Beberapa elemen digunakan dalam banyak implementasi. Jika elemen dalam antar muka digunakan dengan tepat, akan membantu membuat efisiensi dan produktivitas untuk penguna nantinya. Meskipun elemen itu memiliki banyak perbedaan untuk software aplikasi dan berbasis web, semua fungsinya mirip di lingkungan masing-masing.</p>
<p><strong>Bentuk Desain Antar Muka</strong><br />
Dalam aplikasi berbasis windows, tidak semua sama, ada tiga bentuk utama:<br />
<em><strong>1. Single Document Interface (SDI),</strong></em> Sebuah contoh antar muka SDI adalah aplikasi WordPad yang include di windows. Di dalam WordPad, hanya satu dokumen yang dapat di buka dalam waktu yang sama, dokumen harus ditutup sebelum dokumen lain di buka. Kita tidak bisa bekerja pada dua dokumen yang berbeda dalam waktu yang sama.</p>
<div id="attachment_92" class="wp-caption alignnone" style="width: 310px"><img class="size-full wp-image-92" title="single_document-300x227" src="http://www.andisun.com/wp-content/uploads/2009/07/single_document-300x227.jpg" alt="Model Single Document Interface" width="300" height="227" /><p class="wp-caption-text">Model Single Document Interface</p></div>
<p><span id="more-91"></span></p>
<p><em><strong>2. Multiple-Document Interface (MDI)</strong></em>, sebagi contoh adalah aplikasi  Microsoft Word 2000 and Microsoft Excel 2000. Perangkat lunak tersebut membolehkan membuka, dan menampilkan  banyak dokumen dalam waktu yang sama, tiap dokumen ditampilkan dalam masing-masing window. Untuk berpindah antar dokumen bias menggunakan menu dan sub menu yang ada.</p>
<div id="attachment_93" class="wp-caption alignnone" style="width: 310px"><img class="size-full wp-image-93" title="multiple_dokumen-300x213" src="http://www.andisun.com/wp-content/uploads/2009/07/multiple_dokumen-300x213.jpg" alt="Gambar Model Antar Muka Multiple-Document Interface (MDI)" width="300" height="213" /><p class="wp-caption-text">Gambar Model Antar Muka Multiple-Document Interface (MDI)</p></div>
<p><strong><em>3. Explorer-Style Interface</em>,</strong> Dalam bentuk ini terdapat satu window yang berisi dua panel atau daerah, biasanya konsisten ada tampilan tiga hierarchi di kiri tampilan dan di kanan, seperti Microsoft Windows Explorer.</p>
<div id="attachment_94" class="wp-caption alignnone" style="width: 310px"><img class="size-full wp-image-94" title="explorer-300x273" src="http://www.andisun.com/wp-content/uploads/2009/07/explorer-300x273.jpg" alt="Model Antar Muka Explorer-Style interface" width="300" height="273" /><p class="wp-caption-text">Model Antar Muka Explorer-Style interface</p></div>
<p><em><strong>4. Report Interface.</strong></em> Informasi laporan dapat ditampilkan dalam banyak tipe grafik, row and colom, atau format tek, atau kombinasinya. Banyak aplikasi membolehkan user menampilkan laporan atau mengirim laporan tersebut ke printer untuk keluaran hard-copy.</p>
<div id="attachment_95" class="wp-caption alignnone" style="width: 310px"><img class="size-full wp-image-95" title="report_style-300x225" src="http://www.andisun.com/wp-content/uploads/2009/07/report_style-300x225.jpg" alt="Model Antar Muka Explorer-Style interface" width="300" height="225" /><p class="wp-caption-text">Model Antar Muka Explorer-Style interface</p></div>
<p>Dalam menentukan model antar muka yang mana yang terbaik, tim pengembang software (sotfware developer) perlu melihat tujuanan pembuatan program aplikasi tersebut. Membuat aplikasi jam yang simple model SDI adalah yang terbaik, karena sepertinya tidak ada seseorang yang membuka jam lebih dari satu. Aplikasi asuransi yang model MDI adalah yang terbaik karena akan bekerja pada satu atau lebih pada klien secara bersamaan. Model Windows Explorer akan berguna dalam berbagai macam aplikasi baru, karena dapat menampilkan berbagai macam dokumen, gambar atau file. Model laporan (report) menampilkan format yang permanen untuk menampilkan laporan dan tidak memerlukan interaksi user yang banyak.</p>
<div id="attachment_96" class="wp-caption alignnone" style="width: 310px"><img class="size-full wp-image-96" title="dialogbox" src="http://www.andisun.com/wp-content/uploads/2009/07/dialogbox.jpg" alt="Tampilan dialog pesan konfirmasi penyimpanan" width="300" height="87" /><p class="wp-caption-text">Tampilan dialog pesan konfirmasi penyimpanan</p></div>
<p><strong>Mekanisme Kontrol Dialog Box<br />
</strong>Hampir semua aplikasi memerlukan komunikasi dengan user. Dalam basis windows, dialog box menyuruh user memilih aksi, dan akan melanjutkan aplikasi. Dialog Box adalah salah satu bentuk form yang spesial untuk menampilkan informasi kepada user dan biasanya memerlukan interaksi user untuk melanjutkan aplikasi.<br />
Aplikasi juga harus menampilkan pilihan pada pengguna, dari bentuk Yes/No sampai ke pilihan yang berisi banyak pilihan. Salah satunya seperti gambar dibawah.</p>
<p>Pemilihan komponen yang berlebihan akan membuat deesain kita kurang bagus, pemilihan komponen yang sesaui dengan kebutuhan dan menggunakannya seperti fungsinya akan membuat desain kita lebih berguna. Berikut beberapa macam kontrol.</p>
<div id="attachment_97" class="wp-caption alignnone" style="width: 310px"><img class="size-full wp-image-97" title="toolbox-300x38" src="http://www.andisun.com/wp-content/uploads/2009/07/toolbox-300x38.jpg" alt="Tampilan standar komponen (kontrol) pada Visual Basic." width="300" height="38" /><p class="wp-caption-text">Tampilan standar komponen (kontrol) pada Visual Basic.</p></div>
<p>Adapun fungsi dan nama masing-masing konponen bisa dilihat pada tabel berikut.</p>
<p>Tabel toolbox dan fungsinya.</p>
<table style="height: 390px;" border="0" width="529">
<tbody>
<tr>
<td><strong>Nama</strong></td>
<td><strong>Symbol</strong></td>
<td><strong>Keterangan Fungsi</strong></td>
</tr>
<tr>
<td>Label</td>
<td><img class="alignnone size-full wp-image-98" title="toolbox_label" src="http://www.andisun.com/wp-content/uploads/2009/07/toolbox_label.jpg" alt="toolbox_label" width="25" height="26" /></td>
<td>Hanya menampilkan teks. Dalam aplikasi lingkungan windows bersimbol tanda huruf “A”</td>
</tr>
<tr>
<td>TextBox</td>
<td><img class="alignnone size-full wp-image-99" title="toolbox_textbox" src="http://www.andisun.com/wp-content/uploads/2009/07/toolbox_textbox.jpg" alt="toolbox_textbox" width="27" height="26" /></td>
<td>Teks dapat di edit oleh user. Text Box menampilkan infomasi yang dapat dirubah oleh user. Biasanya text Box digunakan untuk menginputkan data yang akan di rekam datanya.</td>
</tr>
<tr>
<td>Command Button</td>
<td><img class="alignnone size-full wp-image-100" title="toolbox_commandbutton" src="http://www.andisun.com/wp-content/uploads/2009/07/toolbox_commandbutton.jpg" alt="toolbox_commandbutton" width="28" height="26" /></td>
<td>Tampilan khas dari Command Button adalah berupa tombol segi empat. Ketika tombol dipilih maka akan mengeksekusi perintah-printah yang ada didalamnya.</td>
</tr>
<tr>
<td>Check Box</td>
<td><img class="alignnone size-full wp-image-101" title="toolbox_checkbox" src="http://www.andisun.com/wp-content/uploads/2009/07/toolbox_checkbox.jpg" alt="toolbox_checkbox" width="23" height="26" /></td>
<td>Salah satu bentuk pilihan yang kecil dimana user dapat memilih lebih dari satu pilihan. Yang menandakan pilihan terhadap suatu kondisi yaitu on or off, true or false, yes or no. Ketika di tampilkan dalam sebuah group, Check Box akan bekerja sendiri secara independen. Pengguna dapat memilih beberapa pilihan dalam satu waktu.</td>
</tr>
<tr>
<td>Option Button</td>
<td><img class="alignnone size-full wp-image-102" title="toolbox_optionbutton" src="http://www.andisun.com/wp-content/uploads/2009/07/toolbox_optionbutton.jpg" alt="toolbox_optionbutton" width="25" height="25" /></td>
<td>Option Button berbentuk pilihan option dimana pengguna hanya di perbolehkan memilih satu. Option Button harus bekerja pada bagian grup, jika kita memilih salah satu option maka yang lainnya akan bersih dari pilihan.</td>
</tr>
<tr>
<td>List Box</td>
<td><img class="alignnone size-full wp-image-103" title="toolbox_listbox" src="http://www.andisun.com/wp-content/uploads/2009/07/toolbox_listbox.jpg" alt="toolbox_listbox" width="25" height="25" /></td>
<td>Bebentuk list yang dapat di pilih dan di scroll. Khasnya, daftar list yang di pilih akan di tamilka pada tampilan vertical dikolom tunggal, meskipun semua list pilihan dapat diguakan semua. Jika yang terpilih melewati jumlah yang di tampilkan maka akan kelua scroll bar. Untuk melihat isi dari pilihan semua kita juga bisa menggunakan drop down. Kita juga bisa memilih lebih dari satu pilihan dengan menggunakan tombol Control yang menandakan pilihan lebih dari satu.</td>
</tr>
<tr>
<td>Combo Box</td>
<td><img class="alignnone size-full wp-image-104" title="toolbox_combobox" src="http://www.andisun.com/wp-content/uploads/2009/07/toolbox_combobox.jpg" alt="toolbox_combobox" width="23" height="27" /></td>
<td>A scrollable list of choices along with a text edit field. Iden- tical to a list box, except the user can either type information in the text box or choose the item from the list.</p>
<p>Pilihan yang berbentuk scroll yang dapat diedit. Penggguna dapat memilih yang sudah disediakan dan mengisikan data baru jika belum ada, tetapi identitas index tetap memakai data yang lama.</td>
</tr>
<tr>
<td>Slider Control</td>
<td><img class="alignnone size-full wp-image-105" title="toolbox_slidercontrol" src="http://www.andisun.com/wp-content/uploads/2009/07/toolbox_slidercontrol.jpg" alt="toolbox_slidercontrol" width="23" height="23" /></td>
<td>Bebentuk range yang mengindikasikan posisi ukuran. Control ini biasnya digunakan untuk input kontrol volume atau pengaturan warna pada gambar.</td>
</tr>
<tr>
<td>Progress Editor</td>
<td><img class="alignnone size-full wp-image-106" title="toolbox_progressindicator" src="http://www.andisun.com/wp-content/uploads/2009/07/toolbox_progressindicator.jpg" alt="toolbox_progressindicator" width="27" height="21" /></td>
<td>Menampilkan prosentase suatu proses. Kontrol ini berguna untuk indicator suatu performa program aplikasi. Selain prosentase proses juga bisa digunakan untuk menampilkan berapa waktu sebuah poses akan selesai.</td>
</tr>
</tbody>
</table>
<p>Ketika kontrol-kontrol tersebut dipakai bisanya pemakai menyukai setting default.</p>
<p><strong>Komposisi<br />
Peletakan Kontrol</strong><br />
Dalam desain antar muka, tidak semua elemen (komponen) digunakan. Pengembang perangkat lunak harus tahu mana yang harus digunakan dan dapat dimengerti oleh user dengan cepat. Tidak semua elemen harus ditampilkan dengan jelas, bahkan ada beberapa elemen yang harus di sembunyikan.<br />
Sejumlah bahasa membcaa dari kiri ke kanan atau dari atas ke bawah pada sebuah halaman. Itu sama dengan tampilan pada layar komputer. Mata pemakai mengarah dimulai dari kiri atas dari posisi layar, jadi elemen yag penting bisa diletakkan di sana. Sebagai contoh, jika informasi ada sebuah informasi berhubungan dengan seorang pelanggan, maka namanya akan ditampilkan dimana ia akan dilihat pertama. Tombol, seperti OK atau Next akan ditempatkan di sebelah kanan bawah pada layar, sebab pemakai yang normal tidak akan membutuhkan tombol ini sampai mereka mengakhiri pekerjaannya dengan form tersebut.<br />
Penggabungan elemen dan kontrol juga penting. Informasi harus dikelompokkan selama mereka masih berhubungan. Sebagai contoh, karena fungsi mereka terhubung, tombol untuk menunjukkan sebuah database akan di kelompokkan bersama tampilannya. Itu lebih baik dari pada tersebar seluruhnya pada form.  Informasi nama, alamat biasanya dikelompokkan bersama. Dalam hal lain relasi antar kontrol bisa direlasikan dengan frame.<br />
Secara default, jika akan memindah dari kontrol area yang satu dengan yang lain memakai tombol TAB. Tapi pengguna juga sering menggunakan tombol Enter untuk pindah antar area. Kebutuhan semacam ini harus dapat di akomodir oleh pengembang perangkat lunak.</p>
<p><strong>Konsistensi Desain Antar Muka<br />
</strong>Konsistensi adalah hal yang terbaik dalam mendesain antar muka, konsistensi membuat pogram terlihat hamonis dalam suatu program aplikasi. Ketidak konsistenan membuat antar muka menjadi membingungkan dan membuat aplikasi kacau, tak terorganisir, murah dan mungkin menyebabkan user menyangsikan kepercayaan pada aplikasi tersebut.<br />
Untuk konsistensi secara visual, pengembang software harus menyusun strategi bentuk sebelumnya dalam suatu program aplikasi. Desain tiap element, seperti control, standar ukuran dan kelompok kontrol, pemilihan jenis huruf (font) harus direncanakan terlebih dulu. Prototipe jalannya program sangat membantu memutuskan desain yang dipakai, konsistensi, sehinga pengembang tidak bingung.</p>
<ol>
<li><strong>Tipe Kontrol</strong>, karena banyaknya macam kontrol yang bisa kita pakai dalam mendesain program aplikasi saat ini, dan semua sudah disediakan dalam tool bahasa pemrograman.</li>
<li><strong>Setting Properti</strong>, konsistensi pada setting kontrol juga sangat penting. Sebagai contoh, jika kita membuat background dengan warna putih, maka lainnya harus meyesuaikan juga.</li>
<li><strong>Tipe Form</strong>, konsistensi antar form suatu program aplikasi sangat penting digunakan. Akan tidak terhubung jika kita mengunakan background efek dua dimensi, sedangkan form lainnya memakai efek tiga dimensi.</li>
</ol>
<p><strong>Penekanan Pada Kontrrol Tertentu<br />
</strong>Penekanan pada komponen visual tentang fungsi dari kontrol. Penekanan pada semua kontrol seperti tombol yang dibuat dengan warna menyala akan mengurangi keindahan sebuah desain antar muka. Tapi sebuah keharusan untuk memberikan penekanan tertentu pada suatu kontrol. Misalnya, efek tiga dimensi pada sebuah tombol menunjukkan penguna bahwa itu dapat ditekan. Jika tombol dibuat datar, maka terkesan tidak bisa diklik, tapi dalam aplikasi tertentu tepat jika kita menggunakan tombol datar, seperti dalam aplikasi yang berbasis multimedia. Contoh lain adalah kontrol text box. Text Box biasaya terdiri dari border dan latar belakang putih yang akan berisi tek yang dapat diedit.<br />
Penggunaan Spasi dalam kontrol tertentu juga dapat menekankan pada sebuah elemen. Konsistensi spasi dan perataan (Aligment) akan membuat aplikasi lebih berguna. Sebagai perbandingan kita akan merasa enak membaca majalah dengan terbagi atas beberapa kolom dan dipisahkan dengan spasi akan mudah untuk dibaca seperti halnya pada desain sebuah aplikasi.</p>
<p><strong>Menyederhanakan Desain</strong><br />
Mugkin yang paling penting dalam desain adalah kesederhaan desain. Jika antar muka sebuah aplikasi terihat susah, aplikasi itu juga mungkin akan sulit untuk digunakan. Point yang penting dalam kesederhanaan adalah mudah, enak dilihat dan bersih.<br />
Jika sudah tersedia dalam bentuk form hard copy lebih baik kita meniru bentuk dedsain tersebut dalam desain antar muka kita. Tapi nantinya masih ada permasaahan lain, misalnya: bedanya dimensi antar form komputer dengan kertas, keterbatasan (panjang) form dalam konputer. Permasalahn diatas dapat di kurangi dengan:</p>
<ol>
<li>Mengurangi bermacam variasi bentuk Shape pada sebuah desain form.</li>
<li>Mengurangi perbedaaan desain antar form yang satu dengan yang lain.</li>
<li>Ingat bahwa pengguna aplikasi bukan kita, buat desain se-familiar mungkin</li>
</ol>
<p>Pendekatan terbaik dalam mendesain sebuah antar muka aplikasi, mungkin meyamakan dengan bentuk asli form yang sudah ada. Usahakan user tidak terlalu banyak menggunakan scrollbar untuk mencapai keinginannya memperoleh sebuah nilai. Hal tersebut bisa menggunakan:</p>
<ol>
<li>List box, spin button dapat mengurangi beban penguna, selain diberi fasilitas untuk menganti nilai  melalui keyboard.</li>
<li>Sediakan bentuk default agar penguna bisa menggunakan aplikasi anda dengan setting baru setiap menjalankan aplikasi.</li>
<li>Gunakan wizard untuk memudahkan pengguna.</li>
</ol>
<p>Tes desain anda pada orang lain, jika mereka masih lama dalam memahami desain anda lakukan desain ulang aplkikasi anda.</p>
<p><strong>Warna dan Gambar</strong><br />
Pengunaan warna dalam antar muka kita dapat menambah efect visual, tapi jangan berlebih dalam menggunakannya.  Dengan kemampuan VGA sekarang dapat menampilkan milyaran warna, dan tidak mungkin semuanya digunakan. Warna sama pentingnya dengan dasar desain, akan menimbulkan masalah jika tidak digunakan secara tepat.<br />
Kecocokan warna dan variasi warna antara pengembang dan pengguna mungkin berbeda. Warna dapat membangkitkan emosi, dan warna mempunyai arti tertenu pada suatu kebudayaan. Dan biasanya agar bisa diterima gunakan warna yang lembut, netral, atau yang sudah sering digunakan diperangkat lunak lainnya.<br />
Pemilihan warna mempengaruhi maksud dari pengguna, kadang warna dalam desain mencerminkan keinginan atau kadaan emosi dari pembuat antar muka pada saat itu. Sebagai contoh perpaduan warna merah terang, hijau dan kuning diperuntukkan untuk aplikasi dengan pengguna anak-anak.<br />
Sedikit warna cerah efektif berguna untuk menekankan atau menentukan area yang dianggap penting. Bagaimanapun juga jumlah warna dalam sebuah aplikasi harus dibatasi, pemakaian warna haruslah konsisten. Jika memungkinkan gunakan standart 16 warna, karena jika menggunakan diatas 16 warna sedangkan user memakai setting VGA 16 warna maka warna diatas 16 akan rusak.<br />
Sebagai pertimbangan lain, pertimbangkan user yang buta warna. Banyak orang tidak mampu mmengatakan perbedaan antara kombinasi warna dasar seperti warna dasar merah dan hijau. Untuk orang yang kondisi seperti ini warna merah teks dalam bakground hijau akan tidak terlihat.</p>
<p><strong>Gambar dan Icon</strong><br />
Penggunaan gambar dan icon dalam aplikasi menambah menarik secara visual, tapi berhati-hati dalam mendesain adalah hal yang utama. Gambar dapat menyampaikan informasi yang efisien tanpa harus menuliskan text, tapi beda orang menerjemahkan gambar bisa juga berbeda.<br />
Toolbar dengan icon mengambar macam-macam fungsi yang digunakan sebagai media interaksi dengan pengguna, tapi user dapat membaca fungsi icon dengan melihat gambar icon. Ketika mendesain gunakan standar icon yang sudah biasa dipakai dalam aplikasi. Sebagai contoh orang akan mencetak dokumen mereka berarti dia akan memilih icon yang bergambar printer. Meskipun anda membuat icon yang lebih baik, fungsi dasar pada icon tersebut harus tetap disertakan agar tidak membingungkan pengguna.<br />
Juga sangat penting mempertimbangkan arti sebuah gambar. Misalnya untuk menggambarkan bahasa yang akan dipakai digambarkan bendera Inggris untuk Bahasa Inggris dan Bendera Perancis untuk mengambarkan Bahasa Perancis.<br />
Ketika mendedsain icon atau gambar, buatlah  icon atau gambar sederhana, Jika menggunakan warna yang komplek akan menurunkan keindahan jika di set pada 16 bit. Sebalikny jika kita menggunakan warna 16 bit, maka jika diset lain yang lebih tinggi maka akan lebih baik gambarnya.</p>
<p><strong>Jenis Huruf (Font)</strong><br />
Karena text sering digunakan untuk komunikasi infomasi, pemilihan jenis huruf yang mudah dibaca dalam resolusi yang berbeda dan berbeda tipe tampilan adalah hal penting dalam mendesain antar muka. Jika memungkinkan gunakan font yang simpel. Pemilihan font yang bagus saat ditampilkan di layar belum belum tentu enak dibaca dalam pint out, apalagi jika fontnnya terlalu kecil.<br />
Biasanya, font standar windows seperti Arial, Time New Roman, atau font yang disediakan oleh system. Jika pengembang software mengunakan font yang tidak terdapat pada syetem tempat dia menempatkan aplikasi maka system akan menganti dengan font lain.<br />
Ketika kita mendedsain sebuah aplikasi yang menggunakn adalah orang-orang sedunia. Sangat penting kita mnyelidiki font apa yang disukai dan yang mungkin terdapat pada system mereka. Yang harus deperhatkan juga adalah mempertimbangkan text yang dipakai, gunakan kata-kata yang sudah biasa digunakan. Antar form maupun satu form sangat penting mempertimbangkan konsistensi pemilihan jenis huruf yang akan digunakan. Pada kasus tertentu tidak lebih dari dua jenis huruf dalam dua atau tiga ukuran pada suatu aplikasi.</p>
<p><strong>Bagaimanakan Antar Muka yang Bagus itu ?</strong><br />
Suatu aplikasi harus dirumuskan dulu tujuan pembuatan aplikasi karena suatu progrm aplikasi bisanya digunakan untuk menyelesaikan masalah. Antar muka merupakan proses interaktif.<br />
Yang paling bagus ketika kita akan mendesain sebuah aplikasi adalah melihat referensi aplikasi yang menjadi best-selling. Mereka malakukan reset, usaha, dan mengeluarkan sumber dana yang tidak sedikit untuk membuat aplikasinya berguna. Mereka banyak menggunkan perintah, tollbar, status bar, ToolTips, sentisitive menu, tab dialog box.<br />
Tim yang memilki pegalaman desain selalu melakukan tes kepada user yang berpengalamn maupun yang belum untuk melihat apakah aplikasi mereka mudah untuk digunakan. Minta saran kepada mereka sangat penting untuk merubah desain jika kurang familiar.<br />
Sebagai tambahan, banyak aplikasi menyediakan pilihan untuk mengakomodasi bermacam-macam pengguna. Misalnya Windows Explorer meyediakan pilihan user yag akan mengkopi file dengan menu, keyboard, atau fungsi drag drop. Penyediaan pilihan dalam aplikasi minimal fungsi dapat dilakukan melalui keyboard dan mouse.</p>
<p><strong>Pedoman Antar Muka Berbasis Windows</strong><br />
Yang menjadi keunggulan dari sistem operasi windows adalah sistem menyediakan perintah interface dalam bayak aplikasinya adalah sama. Pengguna dapat belajar dalam satu basis windows yang lainnya akan mudah untuk dipelajari, karena antar mukanya sama.<br />
Menu adalah contoh yang bagus untuk menunjukkan perintar antar muka. Dalam aplikasi berbasis windows memiliki standar bahwa menu File terletak sebelah kiri dari menu bar dan menu help selalu paling kanan, dan menu opsional lainnya seperti Edit Toll diantaranya. Merubah hal yang sudah menjadi stanadar akan mengakibatkan user akan menjadi bingung dan akan menurunkan keunggulan aplikasi tersebut.<br />
Penempatan perintah juga sangat penting. Sebagai contoh, pengguna ingin menggunakan perintah Copy, Cut, Paste on Edit menu. Memindah ke tempat lain akan menyebabkan pengguna bingung.<br />
Satu kunci konsep pendayagunaan dalam percoabaan adalah penemuan. Jika pengguna tidak dapat menemukan keunggulannya. Penguna harus tahu ketika mereka akan menggerjakan sesuatu maka ia harus tau  dengan hanya melihat aplikasi. Contoh mereka harus tahu jika akan membuka form, menetup form dan lain-lain.<br />
Untuk mengetes pengguna, tim meminta penguna menjalankan aplikasi tanpa diberi tahu sebelumnya. Jika mereka dapat menggunakan aplikasi dengan baik tanpa banyak bertanya, berarti apliakasi itu bagus dan sebaliknya jika user tidak tahu maka tim penegmbang harus bekerja keras untuk merevisi programnya.</p>
<p><strong>Navigasi</strong><br />
Hampir semua pengguna komputer sudah familiar dengan sistem menu sebagai navigasi. Pengunaan elemen menu antarmuka sangat penting. Pengembang biasanya menggunakan ,memu standar windows, karena user sudah terbiasa dan familiar menggunakan standar menu windows. Dengan penambahan skrip pada browser. Aplikasi berbasis web dapat memakai sistem menu window seperti sistem menu aplikasi pemrograman klasik.  Sebagai tambahan link form pada aplikasi klasik di dalam web berubah menjadi link antar file. Dan sekali lagi kesederhaan dan konsistensi dalam mendesain sebuah aplikasi adalah poin yang bagus dalm navigasi sistem.</p>
<p><strong>Panduan Untuk Penguna</strong><br />
Bagaimanapun bagusnya sebuah antar muka haus juga dipenuhi panduan untuk pengguna, karena pegguna wewaktu-waktu membutuhkan hal tersebut. Entuk bantuan adalah berupa file help atau file HTML yang desertakan dalam aplikasi dan siap diprint untuk dokumentasi. Bentuk bantuan harus di desain sebelum aplikasi dibuat deploy, seperti bagian lain dari program.</p>
<p><strong>Kesimpulan<br />
</strong>Prinsip utama dalam mendesain sebuah program adalah bagaimana kita bisa memilih elemen sesuai fungsinya, memilih kombinasi warna, meletakkan elemen dengan mudah dan navigasi program yang baik. Tes program aplikasi  langsung kepada penguna tanpa harus memberitahu dulu. Jika mereka bisa menemukan bagaimana cara menggunakan program aplikasi anda berarti program anda sudah layak.</p>
<p><strong>Daftar Pustaka</strong></p>
<ol>
<li>Vaughan, William R, 1998, Hitchhikers Guide to Visual Basic and SQL Server Sixth Edition, Microsoft Press, United State of America.</li>
<li>Freeze, Wayne, 2000, Visual Basic 6 Database Programming Bible, Microsoft Press, Indinapolis, New York, United State of America.</li>
<li>Tim, Microsoft, 1999, Analyzing Requerements and Defining Solution Architectures, Microsoft Press, United State of America.</li>
<li><a href="http://www.microsoft.com/">www.microsoft.com</a> (Microsoft Developer Network / MSDN)</li>
</ol>
]]></content:encoded>
			<wfw:commentRss>http://www.andisun.com/jurnal/basic-mendesain-graphical-user-interface-gui/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Abstraksi: Dasar Mendesain Sebuah Antar Muka</title>
		<link>http://www.andisun.com/jurnal/dasar-mendesain-sebuah-antar-muka</link>
		<comments>http://www.andisun.com/jurnal/dasar-mendesain-sebuah-antar-muka#comments</comments>
		<pubDate>Mon, 29 Jun 2009 06:40:14 +0000</pubDate>
		<dc:creator>myandisun</dc:creator>
				<category><![CDATA[Jurnal]]></category>
		<category><![CDATA[Antar muka]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Elemen]]></category>
		<category><![CDATA[Form]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[Interface]]></category>
		<category><![CDATA[Kontrol]]></category>
		<category><![CDATA[Label]]></category>
		<category><![CDATA[Navigasi]]></category>
		<category><![CDATA[TextBox]]></category>
		<category><![CDATA[User]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://andisun.com/?p=3</guid>
		<description><![CDATA[Desain antar muka yang baik adalah salah satu hal  penting dalam menilai sebuah program aplikasi bagus atau tidak. Sebelum mendesain pilih bentuk antarmuka yang disesuaikan dengan kebutuhan pengguna.  Kesederhaan sebuah, mudah penggunaan adalah inti dari mendesain sebuah antar muka, dan hal itu dapat terwujud jika kita tepat memilih komponen (kontrol), menempatkannya dengan benar, memilih warna yang sesuai, dan membuat navigasi yang mudah.]]></description>
			<content:encoded><![CDATA[<p>Oleh : Andi Sunyoto</p>
<p><strong>Abstraksi:</strong></p>
<p>Desain antar muka yang baik adalah salah satu hal  penting dalam menilai sebuah program aplikasi bagus atau tidak. Sebelum mendesain pilih bentuk antarmuka yang disesuaikan dengan kebutuhan pengguna.  Kesederhaan sebuah, mudah penggunaan adalah inti dari mendesain sebuah antar muka, dan hal itu dapat terwujud jika kita tepat memilih komponen (kontrol), menempatkannya dengan benar, memilih warna yang sesuai, dan membuat navigasi yang mudah.</p>
<p><strong>Kata Kunci:<br />
</strong>GUI, antar muka, kontrol, desain, Sederhana, interface, penguna, user, windows, label, text box, list box, option box, form, navigasi, elemen</p>
<p><strong>Email:<br />
</strong>Jika menginginkan lebih lengkap email ke: myandisun@gmail.com</p>
]]></content:encoded>
			<wfw:commentRss>http://www.andisun.com/jurnal/dasar-mendesain-sebuah-antar-muka/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

