Programmer's Diary

Sebuah diary mahasiswa Teknik Informatika.

Word Mini Browser 2010 untuk Microsoft Word 2010 menggunakan VSTO 4.0

Posted by Alexander Rahardjo on February 21, 2011

Pada tutorial kali ini, terlebih dahulu saya akan menjelaskan sedikit mengenai VSTO.

Apa itu VSTO?

VSTO merupakan suatu kakas pengembang yang berupa add in dari Visual Studio dan sebuah runtime yang mengijinkan Microsoft Office untuk menggunakan .NET dengan membuka fungsi – fungsi dari Microsoft Office itu menggunakan cara-cara .NET. Dengan cara tersebut maka, seseorang dapat membuat suatu fungsionalitas atau add in ke dalam Microsoft Office dengan menggunakan bahasa-bahasa yang di support oleh .NET (C#, VB.NET, C++ Managed). Cara- cara lama di dalam mengembangkan suatu add in pada office yang sebelumnya di dominasi oleh C++ (Unmanaged) dan VBA, membutuhkan waktu yang relatif lebih lama secara perlahan-lahan bisa di lengkapi atau bahkan di gantikan dengan pengembangan menggunakan .NET. VSTO 4.0 digunakan pada Microsoft Office 2010.

Setelah memahami sedikit mengenai VSTO, selanjutnya saya akan membimbing anda sekalian membangun sebuah project sederhana yang saya beri nama Word Mini Browser 2010, aplikasi ini ditujukan penggunaannya pada Microsoft Word 2010 dan pembangunan aplikasi ini menggunakan VSTO 4.0. Pembuatan aplikasi ini bertujuan untuk memudahkan anda dalam melakukan browsing sekaligus mengerjakan pekerjaan anda pada Microsoft Word 2010.

Sebelum melakukan pembuatan aplikasi ini berikut adalah kakas yang anda butuhkan dalam pengembangan aplikasi ini harus telah tersedia dalam komputer anda:

  1. Microsoft Visual Studio 2010
  2. Microsoft Office 2010

Setelah itu, berikut adalah langkah-langkah pembuatan aplikasi:

1. Buka Visual Studio 2010 anda.

2. Buat sebuah project baru, pilih office, kemudian pilih Word 2010 Add-in, lalu tuliskan nama project yang anda kehendaki, di sini saya   menuliskan “WordMiniBrowser”, lalu tekan tombol “OK”.

image

3. Kemudian tambahkan User Control pada project anda dengan cara klik kanan pada project anda lalu pilih Add User Control, maka akan tampil jendela berikut. Isi nama User Control kemudian tekan tombol “OK”.

image

4. Kemudian tambahkan Ribbon pada project anda dengan cara klik kanan pada project anda lalu pilih Add New Item, maka akan tampil jendela berikut. Isi nama Ribbon kemudian tekan tombol “OK”.

image

5. Kemudian pastikan bahwa 2 item tadi telah berada dalam project anda.

6. Tambahkan kontrol ToggleButton ke Ribbon anda melalui toolbox bagian Office Ribbon Controls. Anda dapat mengganti nama dari Ribbon anda yang semula group1, saya mengubahnya menjadi “WMB Add-Ins”.

7. Ubah label ToggleButton tadi melalui jendela properties, pada project saya, saya mengubahnya menjadi “Word Mini Browser Pane”.

8. Lalu Ribbon anda akan tampak seperti gambar berikut.

image

9. Kemudian masukkan beberapa kontrol pada User Control dan ubah propertiesnya sebagai berikut:

  1. Panel; Dock: Fill
  2. Label; Text: Insert URL
  3. ComboBox; Anchor: Top, Left, Right
  4. Button; Name: btnGo, Text: Go
  5. Button; Name: btnStop, Text: Stop
  6. Button; Name: btnBack, Text: <<
  7. Button; Name: btnForward, Text: >>
  8. WebBrowser; Anchor: Top, Bottom, Left, Right

10. Kemudian User Control anda akan tampak seperti gambar berikut.

image

11. Setelah itu masukkan kode berikut pada User Control, dengan melakukan klik 2x setiap kontrol.

        private void btnGo_Click(object sender, EventArgs e)
        {
            if(comboBox1.Text.Trim() != "")
            {
                webBrowser1.Navigate(comboBox1.Text);
                comboBox1.Items.Add(comboBox1.Text);
                if (comboBox1.Items.Count > 5)
                {
                    comboBox1.Items.RemoveAt(1);
                }
            }
        }

        private void btnStop_Click(object sender, EventArgs e)
        {
            webBrowser1.Stop();
        }

        private void btnBack_Click(object sender, EventArgs e)
        {
            webBrowser1.GoBack();
        }

        private void btnForward_Click(object sender, EventArgs e)
        {
            webBrowser1.GoForward();
        }

12. Tambahkan kode berikut pada ThisAddIn.cs.

        Microsoft.Office.Tools.CustomTaskPane _ctp;
        private void ThisAddIn_Startup(object sender, System.EventArgs e)
        {
            _ctp = Globals.ThisAddIn.CustomTaskPanes.Add(new WMBUserControl(), "WMB MINI BROWSER");
        }

        public void ShowMiniBrowser()
        {
            _ctp.Visible = true;
        }

        public void HideMiniBrowser()
        {
            _ctp.Visible = false;
        }

13. Kemudian tambahkan kode berikut pada Ribbon dengan melakukan klik 2x pada ToggleButton.

        private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
        {
            if (toggleButton1.Checked)
            {
                Globals.ThisAddIn.ShowMiniBrowser();
            }
            else
            {
                Globals.ThisAddIn.HideMiniBrowser();
            }
        }

14. Kemudian jalankan program anda dengan menekan tombol F5.

15. Masukkan alamat situs yang ingin anda buka lalu tekan tombol “Go”.

16. Apabila berhasil, maka hasilnya akan tampak seperti gambar berikut.

image

Demikian tutorial mengenai salah satu project menggunakan VSTO dari saya. Semoga bermanfaat Smile

Selamat mencoba Smile

8 Responses to “Word Mini Browser 2010 untuk Microsoft Word 2010 menggunakan VSTO 4.0”

  1. […] Update Road Trip 2011 Wilayah Jawa TimurNormalisasi Basis DataKerja Praktek di Mitrais Kuta, BaliWord Mini Browser 2010 untuk Microsoft Word 2010 menggunakan VSTO 4.0PortfolioUnit Testing ASP.NET MVC 2 dengan Visual Studio 2010 – Part 2AboutKonsep Dasar Basis […]

  2. oz said

    Gw pernah coba buat plurk client. Belom sempat gw dokumentasikan
    Mantab

  3. Yugie said

    lex, mu tanya ko pas di klik toogle buttonya gak muncul ya yg user control pane utk masukin urlnya itu.. 😀

    thx…

  4. […] Posts Word Mini Browser 2010 untuk Microsoft Word 2010 menggunakan VSTO 4.0Generating Test Cases From Use Cases Studi Kasus PerpustakaanGenerate Sequence Diagram pada Visual […]

  5. Denny said

    cara membuat tampilan kayak ms office di vb.net
    gimana cara nya
    mohon bantuan nya

Leave a reply to Alexander Rahardjo Cancel reply