Membuat View Baru Di Eclipse RCP


Melanjutkan kembali tulisan Mengubah Kode Program Aptana Studio 3, kali ini saya akan mencoba menambahkan sebuah View baru di aplikasi Eclipse RCP tersebut.  Sebagai “bahan percobaan”, saya akan menambahkan sebuah View dimana saya bisa mengetikkan ekspresi JavaScript kemudian melihat hasilnya (tanpa harus melakukan debugging).  Selama ini, untuk menguji ekspresi, saya harus membuka console Firebug di browser.  Akan lebih baik bila saya bisa menguji ekspresi secara langsung di dalam IDE saya (bukankah itu makna kata “integrated” di IDE?).  Saya akan mulai dari sesuatu yang sederhana, misalnya memakai Rhino yang hanya mengevaluasi JavaScript (tanpa DOM).   Agar cepat, saya juga akan langsung menambahkan View ini di com.aptana.ui (ini tidak modular!).

Saya mulai dengan membuka file plugin.xml dari proyek com.aptana.ui.  Pada tab Dependencies, saya men-klik tombol Add.  Pada dialog Plug-in Selection yang muncul, saya mengetik org.mozilla.rhino.  Kemudian saya me-klik tombol OK.  Kebetulan Rhino sudah disertakan sebagai salah satu proyek plug-in saat sehingga saya hanya perlu menambahkannya saja.

Berikutnya, masih di file plugin.xml, saya men-klik tab Extensions.  Saya men-klik kanan pada extension org.eclipse.ui.views,  lalu memilih New, view.  Saya mengisi Extension Element Details sehingga terlihat seperti pada gambar berikut ini:

Membuat extension View

Kemudian, saya men-klik tulisan class* di bagian Extension Element Details di baris ke 3.  Hal ini akan memunculkan dialog New Java Class.  Saya hanya perlu men-klik tombol Finish.

Saya memberikan kode program berikut ini pada class JavaScriptEvalView.java:

package com.jocki.test;

import org.eclipse.swt.SWT;
import org.eclipse.swt.events.SelectionEvent;
import org.eclipse.swt.events.SelectionListener;
import org.eclipse.swt.layout.GridData;
import org.eclipse.swt.layout.GridLayout;
import org.eclipse.swt.widgets.Button;
import org.eclipse.swt.widgets.Composite;
import org.eclipse.swt.widgets.Label;
import org.eclipse.swt.widgets.Text;
import org.eclipse.ui.part.ViewPart;
import org.mozilla.javascript.Context;
import org.mozilla.javascript.EcmaError;
import org.mozilla.javascript.EvaluatorException;
import org.mozilla.javascript.Scriptable;

public class JavaScriptEvalView extends ViewPart implements SelectionListener {

	public static final String VIEW_ID = "com.jocki.JavaScriptEvalView"; //$NON-NLS-1$

	private Text txtInput, txtOutput;
	private Button btnProses;
	private Context rhinoContext;
	private Scriptable scope;

	public JavaScriptEvalView() {
		rhinoContext = Context.enter();
		scope = rhinoContext.initStandardObjects();
	}

	@Override
	public void createPartControl(Composite parent) {

		parent.setLayout(new GridLayout(3, false));

		Label lblNama = new Label(parent, SWT.NONE);
		lblNama.setText("Expression: ");

		txtInput = new Text(parent, SWT.BORDER);
		GridData gridData = new GridData();
		gridData.horizontalAlignment = SWT.FILL;
		gridData.grabExcessHorizontalSpace = true;
		txtInput.setLayoutData(gridData);
		txtInput.addSelectionListener(this);

		btnProses = new Button(parent, SWT.PUSH);
		btnProses.setText("E&xecute");
		btnProses.addSelectionListener(this);

		txtOutput = new Text(parent, SWT.BORDER | SWT.MULTI | SWT.WRAP | SWT.V_SCROLL | SWT.H_SCROLL);		
		gridData = new GridData();
		gridData.horizontalAlignment = SWT.FILL;
		gridData.verticalAlignment = SWT.FILL;
		gridData.horizontalSpan = 3;
		gridData.grabExcessHorizontalSpace = true;
		gridData.grabExcessVerticalSpace = true;
		txtOutput.setLayoutData(gridData);
		txtOutput.setEditable(false);		
	}

	@Override
	public void setFocus() {
		txtInput.selectAll();
		txtInput.setFocus();
	}

	public void widgetSelected(SelectionEvent e) {
		prosesJavaScript();
	}

	public void widgetDefaultSelected(SelectionEvent e) {
		prosesJavaScript();
	}

	private void prosesJavaScript() {
		Object result = null;
		try {
			result = rhinoContext.evaluateString(scope, txtInput.getText(), "<eval>", 1, null);
		} catch (EcmaError error) {
			result = error.getErrorMessage();			
		} catch (EvaluatorException error) {
			result = error.getMessage();
		} catch (Exception ex) {
			result = ex.getMessage();
		}
		txtOutput.setText(Context.toString(result));
	}

	@Override
	public void dispose() {
		Context.exit();
	}

}

Pada method createPartControl(Composite parent), saya mendefinisikan tampilan View dengan menggunakan Eclipse SWT. Pada method setFocus(), saya memberitahu apa yang harus dikerjakan bila View menjadi aktif.

Pada txtInput maupun btnProses, telah terdaftar selection listener sehingga method widgetSelected(SelectionEvent e) akan dikerjakan bila tombol btnProses di-klik dan method widgetDefaultSelected(SelectionEvent e) akan dikerjakan bila pengguna menekan tombol ENTER di txtInput. Kedua method tersebut mendelegasikan pemrosesan pada method prosesJavaScript(). Saat ini, method prosesJavaScript() masih sangat sederhana, hanya mengerjakan apa yang diketik oleh pengguna dan menampilkan hasilnya di txtOutput.

Langkah berikutnya, saya perlu mendaftarkan View ini ke dalam perspective.  Untuk itu, saya membuka file WebPerspectiveFactory.java, lalu saya menambahkan baris berikut ini di bagian paling bawah dari method createInitialLayout(IPageLayout layout):

bottomArea.addView(JavaScriptEvalView.VIEW_ID);

Sekarang, saya akan menguji aplikasi dengan membuka file aptana.product,  men-klik Synchronize, lalu men-klik Launch an Eclipse application.

Pada saat Aptana Studio 3 hasil modifikasi dijalankan, saya akan menemukan sebuah View baru di bagian bawah, dengan nama JavaScript Eval dan icon sesuai dengan yang saya berikan pada waktu mendefinisikan extension.  Saya bisa mencoba memberikan ekspersi JavaScript sederhana, menekan tombol ENTER, dan melihat hasilnya, seperti yang terlihat pada gambar berikut ini:

Tampilan View yang dibuat

Perihal Solid Snake
I'm nothing...

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: