Programmer's Diary

Sebuah diary mahasiswa Teknik Informatika.

Posts Tagged ‘Microsoft Word 2010’

Membuat Aplikasi Translator pada Microsoft Word 2010 menggunakan VSTO 4.0

Posted by Alexander Rahardjo on March 18, 2011

Setelah membaca dan mencoba tutorial saya yang sebelumnya mengenai VSTO, sekarang saatnya kita mencoba sesuatu dengan VSTO ini ke tingkat yang lebih tinggi Smile. Pada tutorial kali ini kita akan mencoba bersama membuat sebuah kakas penerjemah atau add-ins untuk Microsoft Word 2010 dengan menggunakan VSTO dan nama aplikasi kali ini saya namakan WordTranslator dimana aplikasi ini digunakan untuk melakukan translasi dalam Microsoft Word 2010 dan aplikasi ini menggunakan layanan yang berasal dari Google dan Bing sebagai translator.

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

  1. Microsoft Visual Studio 2010
  2. Microsoft Office 2010
  3. Google Translate API (versi yang saya gunakan pada tutorial ini adalah 3.0)
  4. Mendaftarkan diri di http://www.bing.com/developers/appids.aspx untuk mendapatkan appID

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 “WordTranslator2010”, lalu tekan tombol “OK”.

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_thumb1_thumb

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_thumb4_thumb

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 “WordTranslator”.

7. Ubah label ToggleButton tadi melalui jendela properties, pada project saya, saya mengubahnya menjadi “WordTranslator 2010”.

8. Lalu Ribbon anda akan tampak seperti gambar berikut.

image

9. Kemudian masukkan beberapa kontrol pada User Control dan ubah propertiesnya sesuai kebutuhan anda.

10. Berikut adalah tampilan User Control buatan saya.

image

11. Setelah itu lakukan add reference kemudian pilih library GoogleTranslate yang telah anda unduh tadi, dll yang digunakan adalah: GoogleTranslateAPI.dll.

12. Kemudian lakukan add service renference dengan mengisikan web service berikut http://api.microsofttranslator.com/V2/Soap.svc.

13. Buat sebuah App.config dengan cara Add New Item lalu isikan dengan konfigurasi sebagai berikut:

image

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

    public partial class WTUserControl : UserControl
    {
        List _srcGoogle;
        List _destGoogle;
        List _srcBing;
        List _destBing;
        List _srcBingName;
        List _destBingName;
        BingTranslatorService.LanguageServiceClient _proxy;
        TranslateClient _client;

        public WTUserControl()
        {
            InitializeComponent();
            InitGoogleTranslate();
            InitBingTranslate();
        }

        private void InitGoogleTranslate()
        {
            _srcGoogle = Google.API.Translate.Language.TranslatableCollection.Select(a => a.ToString()).ToList();
            _destGoogle = Google.API.Translate.Language.TranslatableCollection.Select(a => a.ToString()).ToList();
        }

        private void InitBingTranslate()
        {
            _proxy = new BingTranslatorService.LanguageServiceClient();
            string[] languageCodes = _proxy.GetLanguagesForTranslate(AppId);
            _srcBing = languageCodes.ToList();
            _destBing = languageCodes.ToList();
            _srcBingName = _proxy.GetLanguageNames(AppId, "en", languageCodes).ToList();
            _destBingName = _proxy.GetLanguageNames(AppId, "en", languageCodes).ToList();

        }

        private void btnTranslate_Click(object sender, EventArgs e)
        {
            string text;
            string src;
            string dest;
            string srcName;
            string destName;
            string translated;

            //get text from active document
            text = Globals.ThisAddIn.Application.ActiveDocument.Content.Text;

            try
            {
                if (rbGoogle.Checked)  //user checked Google
                {
                    src = _srcGoogle[cmbSrcLang.SelectedIndex];
                    dest = _destGoogle[cmbDestLang.SelectedIndex];
                    label3.Visible = true;
                    label3.Text = src + " to " + dest;
                    _client = new TranslateClient("");
                    translated = _client.Translate(text, GetLang(src),GetLang(dest));
                    txtResult.Text = translated;
                }
                else if (rbBing.Checked)  //user checked Bing
                {
                    src = _srcBing[cmbSrcLang.SelectedIndex];
                    dest = _destBing[cmbDestLang.SelectedIndex];
                    srcName = _srcBingName[cmbSrcLang.SelectedIndex];
                    destName = _destBingName[cmbDestLang.SelectedIndex];
                    label3.Visible = true;
                    label3.Text = srcName + " to " + destName;
                    translated = _proxy.Translate(AppId, text, src, dest,"","");
                    txtResult.Text = translated;
                }
            }
            catch (Exception ex)
            {
                MessageBox.Show("Error, " + ex.Message);
            }
        }

        private void FillLanguageGoogle()
        {
            cmbSrcLang.Items.Clear();
            cmbSrcLang.Items.AddRange(_srcGoogle.ToArray());
            cmbSrcLang.SelectedIndex = 0;

            cmbDestLang.Items.Clear();
            cmbDestLang.Items.AddRange(_destGoogle.ToArray());
            cmbDestLang.SelectedIndex = 0;

        }

        private void FillLanguageBing()
        {
            cmbSrcLang.Items.Clear();
            cmbSrcLang.Items.AddRange(_srcBingName.ToArray());
            cmbSrcLang.SelectedIndex = 0;

            cmbDestLang.Items.Clear();
            cmbDestLang.Items.AddRange(_destBingName.ToArray());
            cmbDestLang.SelectedIndex = 0;
        }

        private void rbGoogle_CheckedChanged(object sender, EventArgs e)
        {
            FillLanguageGoogle();
        }

        private void rbBing_CheckedChanged(object sender, EventArgs e)
        {
            FillLanguageBing();
        }

        public Language GetLang(string lang)
        {
            foreach (Language language in Google.API.Translate.Language.TranslatableCollection)
            {
                if (language.ToString().Equals(lang))
                {
                    return language;
                }
            }
            return Language.English;
        }

        private static string AppId
        {
            get { return ConfigurationManager.AppSettings["appID"]; }
        }

        private void btnDetect_Click(object sender, EventArgs e)
        {
            string text = Globals.ThisAddIn.Application.ActiveDocument.Content.Text;
            if (rbGoogle.Checked)
            {
                bool reliable;
                double confidence;
                _client = new TranslateClient("");
                MessageBox.Show("Your current language is "+_client.Detect(text, out reliable, out confidence));
            }
            else if (rbBing.Checked)
            {
                MessageBox.Show(_proxy.Detect(AppId,text));
            }
        }
    }

15. Tambahkan kode berikut pada ThisAddIn.cs.


    public partial class ThisAddIn
    {
        Microsoft.Office.Tools.CustomTaskPane _ctp;
        private void ThisAddIn_Startup(object sender, System.EventArgs e)
        {
            _ctp = Globals.ThisAddIn.CustomTaskPanes.Add(new WTUserControl(), "WordTranslator");
        }

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

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

        private void ThisAddIn_Shutdown(object sender, System.EventArgs e)
        {
        }

        #region VSTO generated code

        ///
        /// Required method for Designer support - do not modify
        /// the contents of this method with the code editor.
        ///
        private void InternalStartup()
        {
            this.Startup += new System.EventHandler(ThisAddIn_Startup);
            this.Shutdown += new System.EventHandler(ThisAddIn_Shutdown);
        }

        #endregion
    }

16. 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.ShowWordTranslator();
            }
            else
            {
                Globals.ThisAddIn.HideWordTranslator();
            }
        }

17. Kemudian jalankan program anda dengan menekan tombol F5. Berikut adalah tampilan aplikasi:

image

Demikian tutorial dari saya kali ini yang mengaplikasikan 2 buah API yang salah satunya berupa web service. Semoga bermanfaat Smile.

Posted in Tutorial, VSTO | Tagged: , , , , , , | 1 Comment »

Membuat Aplikasi Twitter pada Microsoft Word 2010 menggunakan VSTO 4.0

Posted by Alexander Rahardjo on February 22, 2011

Setelah menulis tutorial untuk membuat Word Mini Browser 2010 yaitu sebuah aplikasi yang memungkinkan pengguna untuk menjelajah web melalui Microsoft Word 2010, saat ini saya akan menuliskan sebuah tutorial yang tidak kalah seru dari yang lalu yaitu tutorial mengenai pembuatan sebuah add-in untuk Microsoft Word 2010 yang kegunaannya untuk melakukan tweet pada akun twitter anda melalui Word 2010, aplikasi ini saya namai WordTweet 2010.

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

  1. Microsoft Visual Studio 2010
  2. Microsoft Office 2010
  3. TweetSharp (yang saya gunakan pada tutorial kali ini adalah v2.0)

Sebelum itu anda terlebih dahulu perlu mendaftarkan diri pada alamat ini http://dev.twitter.com/apps dengan langkah-langkah sebagai berikut:

1. Klik pada Register a new app

2. Isi form tersebut, untuk ApplicationType pilih Client, sedangkan untuk Default Access Type pilih Read & Writer.

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 “WordTweet2010”, lalu tekan tombol “OK”.

1_thumb[1]

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_thumb[1]

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_thumb[4]

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 “WordTweet”.

7. Ubah label ToggleButton tadi melalui jendela properties, pada project saya, saya mengubahnya menjadi “WordTweet 2010”.

8. Lalu Ribbon anda akan tampak seperti gambar berikut.

image_thumb[14]

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

  1. Panel; Dock: Fill
  2. Label; Text: Enter your PIN; Enable: false
  3. Label; Text: Your Tweet; Enable: false
  4. Textbox; Enable: false
  5. Button; Name: btnGetPin, Text: Get PIN
  6. Button; Name: btnTweet, Text: Tweet it!; Enable: false
  7. RichTextbox; Enable: false
  8. Label; Visible: false
  9. PictureBox

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

image_thumb[25]

11. Setelah itu lakukan add reference kemudian pilih library TweetSharp yang telah anda unduh tadi, dll yang digunakan adalah:

  1. TweetSharp.dll
  2. Hammock.ClientProfile.dll
  3. Newtonsoft.Json.dll

12. Buat sebuah App.config dengan cara Add New Item lalu isikan dengan konfigurasi sebagai berikut:

image_thumb[33]

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

        public WTUserControl()
        {
            InitializeComponent();
            _twitterClientInfo = new TwitterClientInfo();
            _twitterClientInfo.ConsumerKey = ConsumerKey; //Read ConsumerKey out of the app.config
            _twitterClientInfo.ConsumerSecret = ConsumerSecret; //Read the ConsumerSecret out the app.config

            _twitterService = new TwitterService(_twitterClientInfo);

        }

        private void btnTweet_Click(object sender, EventArgs e)
        {
           if (richTextBox1.Text.Length <= MAX_TWEET)
            {
                if (string.IsNullOrEmpty(_token) || string.IsNullOrEmpty(_tokenSecret))
                {
                    //Get the pin from text box
                    string pin = textBox1.Text;

                    OAuthAccessToken accessToken = _twitterService.GetAccessToken(_requestToken, pin);
                    //Now we need the Token and TokenSecret
                    _token = accessToken.Token;
                    _tokenSecret = accessToken.TokenSecret;

                }

                _twitterService.AuthenticateWith(_token, _tokenSecret);
                string tweetMessage = richTextBox1.Text;
                _twitterService.SendTweet(tweetMessage);
                label4.Visible = true;
                label4.Text = "Your Tweet has been posted!";
            }
            else
            {
                label4.Visible = true;
                label4.Text = "Too many character!";
            }
        }

        #region ConsumerKey & ConsumerSecret
        private static string ConsumerSecret
        {
            get { return ConfigurationManager.AppSettings["ConsumerSecret"]; }
        }

        private static string ConsumerKey
        {
            get { return ConfigurationManager.AppSettings["ConsumerKey"]; }
        }
        #endregion

        private void btnGetPin_Click(object sender, EventArgs e)
        {
            if (string.IsNullOrEmpty(_token) || string.IsNullOrEmpty(_tokenSecret))
            {
                //Firstly we need the RequestToken and the AuthorisationUrl
                _requestToken = _twitterService.GetRequestToken();
                Uri authUrl = _twitterService.GetAuthorizationUri(_requestToken);

                //authUrl is just a URL we can open IE and paste it in if we want
                //Please Allow This App to send Tweets on your behalf");
                Process.Start(authUrl.AbsoluteUri); //Launches a browser that'll go to the AuthUrl.
                textBox1.Enabled = true;
                richTextBox1.Enabled = true;
                btnTweet.Enabled = true;
            }

        }

14. 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 WTUserControl(), "WordTweet");
        }

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

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

15. 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.ShowWordTweet();
            }
            else
            {
                Globals.ThisAddIn.HideWordTweet();
            }
        }

16. Kemudian jalankan program anda dengan menekan tombol F5.

17. Pilih tombol “Get PIN” terlebih dahulu, kemudian secara otomatis aplikasi akan menampilkan browser anda, lalu masuk ke dalam twitter anda dan pilih “Allow” aplikasi. Kemudian PIN akan muncul.

3_thumb[7]

18. Masukkan PIN tersebut ke dalam aplikasi anda dan masukkan tweet anda, kemudian klik tombol “Tweet It!”

image_thumb[35]

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

image_thumb[42]

Demikian tutorial membuat aplikasi twitter pada Microsoft Word 2010 menggunakan VSTO dari saya. Semoga bermanfaat Smile

Selamat mencoba Smile

Posted in Microsoft, Tutorial, VSTO | Tagged: , , , | Leave a Comment »

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

Posted in Microsoft, Tutorial, VSTO | Tagged: , , , , | 8 Comments »

 
%d bloggers like this: