Aptana Journal #1: Menambahkan Content Assistant jQuery

Melanjutkan dari artikel tentang Mengubah Kode Program Aptana Studio 3, kali ini saya ingin melakukan sedikit perubahan.   Pada saat memakai Aptana Studio 3 untuk meng-edit kode program jQuery, saya menemukan bahwa content assist tidak berfungsi sebagaimana harusnya.  Sama sekali tidak ada bantuan untuk fungsi-fungsi di class JQuery, seperti yang terlihat pada gambar berikut ini:

Function jQuery Tidak Ditampilkan Oleh Aptana

Function jQuery Tidak Ditampilkan Oleh Aptana

Sementara itu, pada file JavaScript (js), kadang-kadang content asisst untuk jQuery dapat ditampilkan dengan baik dan kadang-kadang tidak sama sekali.

Mengapa demikian?  Untuk menjawab pertanyaan ini, saya perlu membedah isi file JSContentAssistProcessor.java yang ada di plugin com.aptana.editor.js.   Saya dapat menampilkan class ini secara cepat dengan menekan tombol Ctrl+Shift+R di Eclipse RCP dan mengetikkan namanya.  Method yang menjadi pusat perhatian adalah doComputeCompletionProposal(). Berikut ini adalah cuplikan dari isi method tersebut:

protected ICompletionProposal[] doComputeCompletionProposal(ITextViewer viewer, int offset, char activationChar, boolean autoActivated) {
  ... // diabaikan
  LocationType location = getLocationType(document, offset);
  switch (location) {
    case IN_PROPERTY_NAME:
       addProperties(result, offset);
       break;

    case IN_VARIABLE_NAME:
    case IN_GLOBAL:
    case IN_CONSTRUCTOR:
       addKeywords(result, offset);
       addCoreGlobals(result, offset);
       addProjectGlobals(result, offset);
       addSymbolsInScope(result, offset);
       break;
    ... // diabaikan
  }
  ... // diabaikan
}

Agar method pada object JQuery ditampilkan, Aptana Studio harus mengerjakan method addProperties(). Atau dengan kata lain, getLocationType() harus mengembalikan IN_PROPERTY_NAME. Tapi ternyata yang terjadi adalah nilai IN_GLBOAL yang dikembalikan.

Wow, kenapa bisa begitu?  Untuk menjawab pertanyaan ini, saya perlu menelusuri lagi method getLocationType(). Salah satu method yang dipanggil olehnya adalah method getActiveASTNode(). Dari namanya, method ini berfungsi untuk mengembalikan Abstract Syntaxt Tree (AST). Berikut ini adalah cuplikan dari method tersebut:

IParseNode getActiveASTNode(int offset)
{
  IParseNode result = null;
  try 
  {
    ... // diabaikan
  } 
  catch (Exception e)
  {
    // ignore parse error exception since the user will get markers and/or entriesi n Problems View
  }
  return result;
}

Ok, mulai terlihat ada titik terang.  Saya melihat bahwa jika ada kesalahan parsing, maka kesalahan tersebut akan diabaikan!  Dengan perasaan ingin tahu, saya menambahkan e.printStackTrace() pada bagian catch. Ternyata benar! Ada kesalahan parsing yang terjadi padahal syntax JavaScript saya adalah syntax yang valid dan benar.

Mengapa bisa demikian?  Untuk melakukan parsing, Aptana Studio akan memanggil class JSParser.  Dan perlu diketahui bahwa saya sedang menyertakan JavaScript di dalam HTML!  Karena dokumen saya adalah campuran dari HTML dan JavaScript, tentu saja JSParser yang hanya mengola JavaScript akan protes keras.

Lalu apa saya harus mengubah isi file JSParser.java?  Tidak!  Tidak secara langsung, karena file ini dihasilkan oleh Beaver, sebuah parser generator.   Aptana Studio juga memakai JFlex sebagai scanner generator.

Apa itu scanner?  Agar komputer bisa mengerti kode program yang diketik, maka ia perlu memecah kode program tersebut ke dalam token (ibaratkan dengan “kata” dalam dunia manusia).  Bagian kode program yang memiliki tugas seperti ini disebut sebagai scanner.

Apa itu parser?  Token-token yang terpisah hasil dari scanner perlu dikelompokkan berdasarkan aturan yang berlaku sehingga bisa dimengerti komputer (ibaratkan dengan “kalimat” yang dirangkai dari “kata” dalam dunia manusia).  Bagian kode program yang memiliki tugas seperti ini disebut sebagai parser.

Lalu apa itu scanner generator dan parser generator?  Setahun setelah saya lulus kuliah, saya membantu adik kelas untuk membuat sebuah bahasa pemograman beserta compiler-nya.  Saat itu kami harus membuat sendiri scanner dan parser secara manual.  Ternyata, scanner dan parser dapat dihasilkan secara otomatis dimana kita hanya perlu memberi tahu aturan token & syntax yang berlaku.  Scanner generator seperti JFlex akan menghasilkan file Java berdasarkan aturan di file *.flex.  Parser generator seperti Beaver akan menghasilkan file Java berdasarkan aturan di file *.grammar.  Kenapa tidak buat sendiri saja dari awal?  Selain alasan waktu, juga algoritma yang kita pakai belum tentu lebih baik dari yang sudah ada.

Saya dapat menemukan file-file yang berhubungan generator di folder parsing seperti yang terlihat pada gambar berikut ini:

Isi Folder Parsing

Isi Folder Parsing

Karena saya ingin membuang HTML pada saat melakukan parsing JavaScript, tanpa mengubah struktur bahasa JavaScript, maka saya cukup melakukan perubahan pada JFlex di file JS.flex.  Perubahan yang saya lakukan bersifat naif tanpa memperhatikan aspek lain dan hanya untuk keperluan pribadi.  Saya tidak tahu apakah ini berguna bagi orang lain dan saya tidak ada kaitannya dengan tim pengembang Aptana Studio (karena ini software open-source, saya pikir, saya bebas mengubahnya untuk keperluan pribadi).

Untuk mempermudah melihat kesalahan selama bermain-main dengan JFlex, saya menambahkan option %debug di file JS.flex.  Selain itu, saya menambahkan definisi macro seperti berikut ini:

ScriptOpen = "<script" ("type=" \.*)? ~">"
ScriptClose = "</script>"
HTMLTag = "<html>"

Macro di JFlex pada dasarnya berisi regular expression yang dicocokkan dengan input (sehingga bisa mewakili sebuah token).

Berikutnya saya juga menambahkan state baru yaitu HTML sehingga terlihat seperti berikut ini:

%state DIVISION, REGEX, HTML

State YYINITIAL adalah state yang selalu ada dan akan aktif pertama kali.   Saya menambahkan dua buah lexical rule di YYINITIAL sehingga bila ditemukan tag HTML atau setelah tag </script>, akan beralih ke state HTML.  Isinya akan terlihat seperti berikut ini:

<YYINITIAL> {

  {HTMLTag}  { yybegin(HTML); }

  {ScriptClose}  { yybegin(HTML); }

  ... // diabaikan

}

Setelah itu, pada state HTML, saya akan beralih ke state YYINITIAL (melakukan parsing JavaScript secara normal) bila ditemukan tag <script> pembuka.  Isi lexical rule untuk state HTML akan terlihat seperti berikut ini:

<HTML> {
  {ScriptOpen}  { yybegin(YYINITIAL); }
  [\"']\\?|.  { /* ignore in HTML */ }
}

Langkah berikutnya setelah melakukan perubahan file JS.flex adalah menghasilkan sebuah class scanner berdasarkan aturan yang baru.  Class yang dimaksud adalah JSFlexScanner.java.  Class ini akan dihasilkan secara otomatis oleh JFlex.  Caranya adalah dengan men-klik kanan pada file build.js.xml, memilih Run As,  Ant Build.

Setelah proses build selesai,  saya perlu men-klik kanan package com.aptana.js.core.parsing dan memilih refresh seperti yang terlihat pada gambar berikut ini:

Class yang dihasilkan oleh scanner & parser generator

Class yang dihasilkan oleh scanner & parser generator

Bila terjadi kesalahan pada file JSParser.java, saya perlu membuka file tersebut, kemudian menekan tombol Ctrl+Shift+O untuk memperbaharui import.  Selain itu, build.js.xml juga mengandung salah ketik sehingga menghasilkan package di lokasi baru (saya tidak memeriksa apakah versi terbaru sudah diperbaiki oleh tim developernya).

Langkah terakhir, saya membuka file ParseUtil.java di package com.aptana.editor.js.contentassist.  Pada method getParentObjectTypes(), terdapat komentar FIXME: (hopefully temporary) hack to fixup static properties on $ and jQuery. Saya menghilangkan bagian tersebut dan hanya menyisakan result.add(type);.

Sekarang, bila saya menjalankan proyek ini, saya akan menemukan bahwa content assist untuk jQuery telah bekerja seperti yang terlihat di gambar berikut ini:

Content Assist Untuk jQuery Yang Sudah Bekerja

Content Assist Untuk jQuery Yang Sudah Bekerja

Perlu diperhatikan bahwa saya perlu menyertakan sebuah file source  jQuery seperti file jquery-1.8.2.js di proyek (letaknya boleh dimana saja).  Aptana Studio akan men-parsing file ini dan memberikan item content assist berdasarkan hasil parsing tersebut.  Hal ini berbeda dengan cara yang ditempuh di Adobe Dreamweaver CS5.5, dimana hint untuk jQuery bersifat ‘statis‘ sehingga untuk menyesuaikan dengan jQuery versi baru, saya perlu meng-update Dreamweaver.

Iklan

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

Membuat Aplikasi Desktop Dengan Eclipse RCP

Dalam membuat sebuah aplikasi desktop, saya selalu berusaha sebisa mungkin berkonsentrasi pada domain permasalahan dan menghabiskan sedikit mungkin waktu pada permasalahan infrastruktur.   Yang saya maksud dengan domain permasalahan adalah hal-hal yang berhubungan permasalahan spesifik yang saya hadapi misalnya restoran, penjualan, pengelolaan sdm, dan sebagainya.  Biasanya domain permasalahan selalu berbeda dan itu sebabnya saya perlu membuat aplikasi baru.  Lalu apa itu permasalahan infrastruktur?  Contohnya adalah pertanyaan bagaimana menampilkan laporan, bagaimana mencetak ke printer, bagaimana membuat window MDI, bagaimana connect ke database dan sebagainya.  Permasalahan infrastruktur umumnya selalu sama dalam setiap aplikasi desktop.  Semakin saya tidak familiar pada sebuah teknologi, maka semakin banyak waktu saya yang harus terbuang pada permasalahan infrastruktur.  Beruntungnya, permasalahan infrastruktur bisa diselesaikan dengan memakai framework.

Java bisa dibilang bukanlah yang terbaik untuk pengembangan aplikasi dekstop di Windows (yup, Visual Studio tetap populer disini!).  Banyak pemula yang menyerah dalam mempelajari Swing (API GUI untuk Java).   Walaupun demikian, ada beberapa framework yang dapat dipakai untuk meringankan penderitaan  programmer Java sehingga mereka bisa lebih banyak berkonsentrasi di domain permasalahan.  Salah satunya adalah Eclipse RCP.

Eclipse RCP?  Bukankah Eclipse adalah sebuah IDE untuk berbagai bahasa pemograman terutama Java?  Itu adalah Eclipse IDE.  Tapi Eclipse RCP adalah sebuah platform (saya akan menyebutnya framework) untuk mengembangkan aplikasi desktop dengan memanfaatkan elemen tampilan yang sudah sering saya lihat di Eclipse IDE.

Untuk mengembangkan aplikasi dengan Eclipse RCP, saya akan memakai platform Eclipse Indigo SR2.  Platform yang terbaru adalah  Juno, tapi kabarnya platform ini mengalami bug  performance sehingga lebih berat dibanding Indigo.  Untuk mendownload Eclipse Indigo SR2 for RCP and RAP Developers, saya men-klik link berikut ini: http://www.eclipse.org/downloads/download.php?file=/technology/epp/downloads/release/indigo/SR2/eclipse-rcp-indigo-SR2-win32.zip.

Setelah menjalankan Eclipse for RCP and RAP Developers, saya memilih File, New, Plug-in Project.  Saya mengisi Project name dengan com.jocki.blog.aplikasi.  Setelah itu saya men-klik tombol Next.

Pada dialog berikutnya, saya mengisi dengan informasi seperti dengan yang terlihat pada gambar berikut ini:

Informasi plug-in untuk aplikasi RCP

Informasi plug-in untuk aplikasi RCP

Setelah itu, saya men-klik tombol Next.  Untuk melihat seperti apa contoh sebuah aplikasi Eclipse RCP, saya memilih RCP Mail Template dari Available Templates.  Setelah itu, saya men-klik tombol Finish.

Struktur proyek sebuah aplikasi Eclipse RCP akan terlihat seperti berikut ini:

Struktur Proyek Eclipse RCP

Struktur Proyek Eclipse RCP

File konfigurasi yang penting adalah file META-INF/MANIFEST.MF dan plugin.xml.  Sementara file kode program Java terletak di folder src.

Saya perlu mengubah plugin ini agar dapat dijalankan secara langsung seperti aplikasi desktop biasanya.  Saya mulai dengan memilih menu File, New, Product Configuration.   Pada dialog yang muncul, saya memilih proyek com.jocki.blog.aplikasi, lalu pada File name, saya mengisinya dengan aplikasi.product.   Saya memilih Use an existing product, dan memilih com.jocki.blog.aplikasi.product dari combo.  Setelah itu, saya men-klik tombol Finish.

Pada editor aplikasi.product yang muncul, saya mengisi ID dengan com.jocki.blog.aplikasi.product.

Sekarang, saya akan mencoba menjalankan aplikasi RCP tersebut.  Tetapi sebelumnya, saya akan melakukan sinkronisasi dengan men-klik link Synchronize di bagian Testing.  Setelah itu, saya men-klik link Launch an Eclipse application seperti yang terlihat pada gambar berikut ini:

Menjalankan Aplikasi RCP Dari Eclipse

Menjalankan Aplikasi RCP Dari Eclipse

Akan muncul aplikasi RCP yang terlihat seperti berikut ini:

Tampilan Aplikasi RCP dari RCP Mail Template

Tampilan Aplikasi RCP dari RCP Mail Template

Aplikasi ini hanya terdiri atas sebuah perspective dengan ID berupa com.jocki.blog.aplikasi.perspective.  Definisi perspective ini dapat dilihat di kode program /src/com/jocki/blog/aplikasi/Perspective.java.  Bila saya melihat isi kode program tersebut, saya akan menemukan bahwa pada perspective didefinisikan sebuah view dengan ID berupa com.jocki.blog.aplikasi.view yang kode programnya dapat dilihat di folder /src/com/jocki/blog/aplikasi/View.java.  Selain itu, editor tidak ditampilkan karena terdapat baris layout.setEditorAreaVisible(false).

Kode program yang membuat menu dan toolbar  dapat ditemukan di folder /src/com/jocki/blog/aplikasi/ApplicationActionBarAdvisor.java.  

Method makeActions(IWorkbenchWindow) akan mendefinisikan IAction yang ada (IAction adalah sesuatu yang mewakili aksi yang akan dikerjakan bila sebuah menu, toolbar, atau shortcut dipilih).  Action untuk exitAction, aboutAction, dan newWindowAction adalah action standar yang sudah disediakan oleh Eclipse RCP.   Hal ini bisa meringankan beban saya karena saya tidak perlu membuat semua IAction dari awal.  Method fillMenuBar(IMenuManager) akan membuat definisi menu yang dapat dipilih.  Tidak berbeda jauh, method fillCoolBar(ICoolBarManager) akan membuat definisi toolbar.

Satu hal yang perlu diperhatikan adalah extensions.  Ini adalah metode komunikasi antar-plugin di Eclipse secara deklaratif tanpa kode program (mirip seperti application context XML di Spring, bukan?).  Sebuah plugin boleh menyediakan extension point.  Plugin lain yang memakai plugin tersebut boleh mengimplementasikan extension point tersebut dalam bentuk extension.

Untuk melihat extension di proyek, saya men-double click file plugin.xml, lalu memilih tab Extensions.  Berikut ini adalah contoh tampilan extension yang didefinisikan di proyek saya:

Melihat Extension Di Proyek

Melihat Extension Di Proyek

Ok, seandainya saya telah selesai membuat aplikasi ini.  Apa yang harus saya lakukan?  Setiap aplikasi desktop di Window memiliki file exe yang bisa dijalankan.  Begitu juga dengan aplikasi yang memakai Eclipse RCP.  Saya men-double click file aplikasi.product. kemudian memilih tab Launching.  Pada bagian Program Launcher, saya mengisi aplikasi di bagian Launcher Name.  Ini akan mewakili nama file exe yang dihasilkan.  Saya juga dapat memberikan icon untuk file exe tersebut seperti yang terlihat pada gambar berikut ini:

Mengatur Launcher Untuk Aplikasi Berbasis Eclipse RCP

Mengatur Launcher Untuk Aplikasi Berbasis Eclipse RCP

Karena saya hanya menargetkan platform win32, saya tidak perlu mengkhawatirkan tab lainnya.  Walaupun demikian, Eclipse RCP dapat menghasilkan launcher untuk platform yang berbeda, dengan syarat saya harus meng-install RCP delta pack untuk masing-masing target tujuan.

Untuk menghasilkan program yang dapat didistribusikan, saya kembali membuka file aplikasi.product, lalu memilih link Eclipse Product export wizard.  Saya menentukan lokasi dan nama file tujuan di bagian Archive file seperti yang terlihat pada gambar berikut ini:

Men-export Aplikasi Berbasis Eclipse RCP

Men-export Aplikasi Berbasis Eclipse RCP

Untuk mendistribusikan aplikasi, saya hanya perlu membagi-bagikan file aplikasi.zip ke calon pengguna.  Aplikasi dapat langsung dijalankan tanpa installer.  Bila seorang pengguna men-extract file aplikasi.zip, ia akan menemukan struktur folder seperti berikut ini:

Struktur Aplikasi Yang Didistribusikan

Struktur Aplikasi Yang Didistribusikan

Pengguna hanya perlu men-double click file aplikasi.exe untuk menjalankan aplikasi yang telah saya buat dengan Eclipse RCP.

Mengubah “Kode Program” Aptana Studio 3

Selama ini di lingkungan saya, seorang dosen dipandang terdiri atas 2 golongan: dosen praktisi yang mengisi waktu luang mengajar dimana mereka menceritakan pengalaman mereka, atau mereka yang serius mencari nafkah  dari “teori” pelajaran.   Cara berpikir seperti ini berujung pada pandangan bahwa dosen yang tidak terjun langsung bekerja di industri software memiliki prestige yang lebih rendah.  Saya sendiri memiliki pandangan berbeda dimana dunia akademis/penelitian dan dunia industri adalah dua hal yang berbeda tetapi saling melengkapi.  Pada dunia industri, para pekerja bekerja keras membangun sistem memenuhi kebutuhan bisnis.  Semantara saya memandang dunia akademis sebagai tempat dimana para peneliti mengamati teknik yang dipakai oleh beragam industri, mengembangkannya dan memperbaharuinya.  Sebagai contoh, seorang developer di industri hanya akan berkonsentrasi pada kode program Java dimana ia bisa menyelesaikan kerjaannya secara cepat.  Begitu juga developer PHP dan pekerjaannya.  Mereka umumnya tidak punya banyak waktu untuk bereksperimen dengan hal-hal diluar kebutuhan perusahaan.  Sementara itu, dosen/professor/peneliti punya banyak waktu untuk mengamati setiap bahasa, membandingkannya, menambahkan kemampuan atau menciptakan bahasa baru yang lebih efektif.  Dengan demikian, dalam pandangan saya, masing-masing memiliki peran penting yang tidak dapat digantikan, baik itu peneliti maupun praktisi.

Dikti sering kali me-“maksa” dosen untuk meneliti.  Ini adalah hal bagus.  Di bidang computer science (TI), para dosen bisa mulai dengan membongkar kode program open source.  Alangkah indahnya bila dosen yang mengajar matakuliah database adalah dosen yang sudah biasa mengotak-atik kode program MySQL yang bebas di-download. Hal ini sama halnya seperti  para calon dokter di-didik untuk memahami cara kerja organ tubuh secara detail dan rinci;  mereka tidak mungkin hanya perlu diajarin resep praktis seperti “kalau demam, kasih saja paracetamol dan vitamin”.  Selain itu, program open source dapat dipakai untuk menunjukkan kepada mahasiswa se-‘rumit’ apa sebuah software yang sehari-hari mereka pakai (yang menjadi alasan kenapa mereka butuh arsitektur yang jelas dan tidak membuat kode program sesuka hati sesuai mood).

Aptana Studio 3 adalah salah satu software open source berbasis Eclipse yang menarik untuk dijadikan bahan pembelajaran (atau penelitian).  Mengapa?  Karena saat mencoba memakai versi terbarunya, saya menemukan bahwa code assistant untuk jQuery tidak bekerja dengan baik.   Aptana Studio 3 dikembangkan dengan Eclipse RCP, sehingga kode program GUI-nya sudah adalah kode program Eclipse RCP.  Hal ini akan mempermudah memahami dan mengembangkan Aptana Studio 3.  Dosen pembimbing dan tim asistan lab, misalnya, dapat menambahkan fitur yang sering diperlukan oleh programmer  jQuery, seperti dukungan code assistant saat mengetik selector di jQuery;  mengetik $(“.b –> akan muncul code assistant untuk .baru dan .buat sesuai dengan class yang ada di HTML.

Sebelum mulai mengembangkan Aptana Studio 3, pertanyaan yang harus dijawab adalah bagaimana cara mengambil source code dan menghasilkan program dari source code tersebut? Langkah pertama adalah men-download  Eclipse for RCP and RAP Developers.  Ini adalah IDE yang dipakai untuk mengembangkan plugin  Eclipse dan aplikasi berbasis Eclipse RCP .  Versi yang disarankan adalah  http://www.eclipse.org/downloads/packages/eclipse-rcp-and-rap-developers/indigosr1.

Langkah berikutnya adalah mengambil source code dari Git.  Karena Eclipse for RCP and RAP Developers telah dilengkapi dengan plugin EGit, saya dapat langsung men-download dari dalam Eclipse.  Caranya adalah dengan memilih menu File, Import.  Kemudian saya memilih Git, Projects from Git dan men-klik tombol Next.  Lalu, saya men-klik tombol Clone… Pada dialog yang muncul, saya mengisi URI dengan git://github.com/aptana/studio3 seperti yang terlihat pada gambar berikut ini:

Memilih Source Git Repository

Memilih Source Git Repository

Lalu saya men-klik tombol Next.  Pada daftar Brach Selection, saya memilih Development untuk mendapatkan source code terbaru yang sedang dikerjakan oleh developer lain.  Setelah itu saya men-klik tombol Finish. Setelah kembali ke halaman Select A Git Repository, saya memilih repository studio3 dan men-klik tombol Next.  Lalu pada halaman berikutnya, saya memilih Import existing projects dan men-klik tombol Next.   Pada halaman berikutnya, saya memberi centang pada seluruh project yang ada dengan memilih Select All, kemudian saya men-klik tombol Finish. Saya memastikan sedang terkoneksi ke internet karena eGit akan men-download source code Aptana Studio 3 dari repository Git.

Setelah selesai, saya mengulangi hal yang sama untuk mengambil proyek yang ada di lokasi berikut ini:

  • git://github.com/aptana/studio3-rcp
  • git://github.com/aptana/libraries_com

Karena saya tidak akan bekerja dengan PHP, Python dan Ruby, saya tidak mengambil kode program yang tidak dibutuhkan.

Langkah berikutnya adalah menghilangkan pesan kesalahan pada kode program.  Aptana Studio 3 tidak menyertakan library FTP dengan alasan lisensi.  Beruntungnya, saya juga tidak butuh fitur FTP, sehingga saya bisa menghapus proyek plugin yang berhubungan dengan FTP. Karena telah menghapus plugin FTP, saya perlu menyesuaikan dengan dependency yang ada.   Beberapa perubahan yang saya lakukan adalah:

  1. Mengedit file MANIFEST.MF di com.aptana.ide.libraries.subcription dimana saya menghilangkan seluruh baris Export-Package yang ada.
  2. Membuka plugin com.aptana.syncing.ui.  Menghapus referensi ke com.aptana.filesystem.ftp.FTPConnectionPoint dan com.aptana.ui.ftp.internal.FTPPropertyDialogProvider di file SiteConnectionPropertiesWidget.java.  Juga menghapus referensi ke com.aptana.ui.ftp.preferences.UpdatePermissionsComposite di file SmartSyncDialog.java.
  3. Membuka MANIFEST.MF untuk com.aptana.syncing.ui.  Lalu menghapus baris yang mengandung com.aptana.filesystem.ftp dan com.aptana.ui.ftp.

Perubahan lain yang saya lakukan adalah:

  1. Plugin com.aptana.portal.ui.  Mengubah file BrowserFunctionWrapper.java dan BrowserWrapper.java dengan menghilangkan referensi ke com.aptana.swt.webkitbrowser.BrowserFunction.
  2. Menutup atau menghapus project yang diakhiri oleh tests karena project tersebut hanya dibutuhkan untuk pengujian.

Bagaimana cara mencari sebuah file secara cepat di tumpukan proyek yang segitu banyaknya?   Berikut ini adalah contoh tampilan project Eclipse yang ada:

Daftar Eclipse Project Yang Membentuk Aptana Studio 3

Daftar Eclipse Project Yang Membentuk Aptana Studio 3

Rasanya akan cape sekali mencari sebuah file dengan membuka setiap tree proyek satu per satu.  Saya selalu membiasakan diri menekan shortcut Ctrl+Shift+R di Eclipse.   Shortcut ini akan memunculkan dialog Open Resource dimana saya bisa melakukan pencarian dengan mengetikkan nama file seperti yang terlihat pada gambar berikut ini:

Dialog Open Resource

Dialog Open Resource

Untuk menjalankan program Aptana Studio 3, saya perlu membuka file aptana.product, kemudian memilih Launch an Eclipse application, seperti yang terlihat pada gambar berikut ini:

Menjalankan aplikasi

Menjalankan aplikasi

Bila seandainya perubahan telah selesai dibuat, saya harus membuat binary untuk distribusi.  Caranya adalah dengan membuka file aptana.product dan memilih Eclipse Product export wizard seperti yang terlihat pada gambar berikut ini:

Membuat binary distribusi untuk proyek

Membuat binary distribusi untuk proyek

Pada dialog Export, saya mengisi Directory dengan lokasi yang akan berisi binary distribusi.  Selain itu, saya juga menghilangkan tanda centang di Generate metadata repository.  Dialog Export akan terlihat seperti pada gambar berikut ini:

Dialog Export

Dialog Export

Setelah proses export selesai, saya bisa menjalankan Aptana Studio 3 hasil perubahan saya dengan membuka folder C:\Program Files\aptana\eclipse, lalu men-double click file AptanaStudio3.exe.