afasyah.web.id

Membuat Accelerator untuk Internet Explorer 8 – Code Converter

BTW, post ini merupakan studi kasus dari artikel yang telah dibuat sebelumnya di geeks.

Tentang Accelerator

Accelerator, yang pada Internet Explorer 8 beta disebut dengan Activities, adalah suatu konsep baru yang memungkinkan user untuk berinteraksi dengan web service atau aplikasi dari kebiasan browsing Anda (di internet). Maksudnya, katakanlah Anda kesulitan dengan bahasa Inggris, dan ketika browsing sebuah halaman web dan menemukan kalimat yang tidak Anda kenal (mungkin) seringkali Anda meng-copy kalimat tersebut kemudian membuka website atau program lain untuk menterjemahkan, paste kalimat tadi dan bum! Anda mendapatkan kalimat yang sudah diterjemahkan.

Proses diatas sebetulnya sederhana tapi sebetulnya membutuhkan beberapa tahapan:

1. Copy kalimat ke clipboard
2. Buka Website/Program lain untuk menterjemahkan.
3. Paste kalimat tadi.
4. Eksekusi untuk mendapatkan apa yang Anda inginkan.

Nah, dengan Acceleratornya IE8, tahapan diatas jadi lebih mudah lagi, cukup (1) sorot kalimat yang akan ditranslate (2) Klik kanan atau klik icon biru untuk menampilkan daftar Accelerator yang tersedia di PC Anda, dan (3) Pilih/klik pada menu Accelerator untuk translate.

Jika Accelerator mendukung mode Preview, sebetulnya ketika menyorot Accelerator untuk Translate hasilnya dapat Anda lihat langsung tanpa harus browser membuka tab baru.

Walaupun bisa menampilkan jendela preview, ternyata fitur preview ini masih mempunyai kekurangan,

Fitur preview ini sangatlah bagus, tapi menurut dokumentasinya, fitur ini masih mempunyai kekurangan, diantaranya ukuran yang terbatas (sekitar 320×240 pixel), diluar itu konten akan kepotong, juga tidak disarankan untuk menampilkan scrollbar pada jendela preview ini.

Tentang Code Converter

Untuk mempelajari teknologi baru seperti Accelerator ini tidaklah seru kalo tidak dengan membuat satu produk yang bermanfaat. Dan salah satu yang menjadi kandidat adalah code converter. Mengapa ? jika Anda sebagai VB developer mungkin bisa jadi tahu kalau artikel-artikel di internet kebanyakan kodenya dibuat pake C#. Kalo sampai beberapa baris mungkin masi ok lah, masi bisa dicerna tapi kalo sudah puluhan baris dan kompleks si… gile dah.

Nah disinilah Accelerator-nya si IE ini bisa bermanfaat. Jadinya kalo nemu kode C# tinggal sorot aja, pilih menu “Convert C# to VB” maka kode VB-nya akan tampil di window preview. Untuk lebih detailnya, Anda dapat juga meng-klik menu “Convert C# to VB” dan kode VB-nya akan ditampilkan di halaman tersendiri.

Untuk membuat code converter tidaklah sulit karena sebetulnya sudah ada engine untuk itu, yaitu NRefactory* buatan SharpDevelop, bahkan beberapa online converter yang populer seperti milik telerik, dsb. sebetulnya dibuat dengan memanfaatkan engine yang sama.

* NRefactory (assembly-nya punya nama ICSharpCode.NRefactory.dll) dapat Anda temukan jika Anda sudah memasang SharpDevelop di PC Anda.

Contoh kode untuk konversi dari C# ke VB menggunakan NRefactory:

Imports ICSharpCode.NRefactory

Imports ICSharpCode.NRefactory.Ast

Imports ICSharpCode.NRefactory.Parser

Imports ICSharpCode.NRefactory.PrettyPrinter

Imports ICSharpCode.NRefactory.Visitors

''' <summary>

''' Konversi dari C# ke VB

''' </summary>

''' <param name="input">Blok kode</param>

''' <param name="errorMsg">Pesan error</param>

''' <returns>String</returns>

''' <remarks></remarks>

Private Function ConvertCSharpToVB(ByVal input As String, ByRef errorMsg As String) As String

    Dim parser As SnippetParser = New SnippetParser(SupportedLanguage.CSharp)

    Dim node As INode

    Try

        node = parser.Parse(input)

    Catch ex As Exception

        errorMsg = parser.Errors.ErrorOutput

        Return ""

    End Try

    If (parser.Errors.Count > 0) Then

        errorMsg = parser.Errors.ErrorOutput

        Return ""

    End If

    PreprocessingDirective.CSharpToVB(parser.Specials)

    node.AcceptVisitor(New CSharpConstructsConvertVisitor(), Nothing)

    node.AcceptVisitor(New ToVBNetConvertVisitor(), Nothing)

    Dim output As VBNetOutputVisitor = New VBNetOutputVisitor()

    Using (SpecialNodesInserter.Install(parser.Specials, output))

        node.AcceptVisitor(output, Nothing)

    End Using

    Return output.Text

End Function

Membuat Accelerator

Untuk Accelerator ini dibuat website yang berfungsi sebagai penyedia jasa konversi kode diatas. Website ini dibuat menggunakan ASP.NET MVC tapi sebetulnya pake WebForm bisa juga,

“Inti” dari konversi kode ini sebetulnya ada di pada 2 form berikut :

Form Preview

   1: <form action="http://localhost:1800/convert/preview">

   2: <input type="text" name="f" value="cstovb" />

   3: <input type="text" name="c" />

   4: </form>

Form Convert

   1: <form action="http://localhost:1800/convert">

   2: <input type="text" name="f" value="cstovb" />

   3: <input type="text" name="c" />

   4: </form>

Jika Anda perhatikan form diatas menggunakan 2 parameter, yaitu f/format dan c/code untuk kode yang akan dikonversi. Jika kode diatas kita buat kedalam format OpenService yang digunakan oleh Accelerator maka akan menjadi file xml dengan isi sebagai berikut (file ini kemudian diberi nama cstovb-accelerator.xml):

<?xml version="1.0" encoding="UTF-8" ?>

<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">

  <homepageUrl>http://localhost:1800</homepageUrl>

  <display>

    <name>Convert C# to VB</name>

    <icon>http://localhost:1800/favicon.ico</icon>

  </display>

  <activity category="C# Converter">

    <activityAction context="selection">

      <preview method="post" action="http://localhost:1800/convert/preview">

        <parameter name="f" value="cstovb" ></parameter>

        <parameter name="c" value="{selection}" ></parameter>

      </preview>

      <execute method="post" action="http://localhost:1800/convert">

        <parameter name="f" value="cstovb" ></parameter>

        <parameter name="c" value="{selection}" ></parameter>

      </execute>

    </activityAction>

  </activity>

</openServiceDescription>

Catatan : URL yang digunakan diatas adalah URL di pc lokal. {selection} adalah string yang dikirimkan oleh accelerator.

Agar pengunjung dapat menambahkan Accelerator yang kita buat ini, dibuat link untuk instalasinya sebagai berikut:

   1:

   2: <button id="cstovb" onclick="javascript:window.external.addservice('cstovb-accelerator.xml')">Install C# to VB Converter - Accelerator</button>

   3:

Setelah dijalankan, aplikasi ini akan tampil seperti gambar diatas.