Alexander Rahardjo's Blog

Membuat Aplikasi Translator pada Microsoft Word 2010 menggunakan VSTO 4.0

2011-03-17T17:57:06Z

Setelah membaca dan mencoba tutorial saya yang sebelumnya mengenai VSTO, sekarang saatnya kita mencoba sesuatu dengan VSTO ini ke tingkat yang lebih tinggi . 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:

Microsoft Visual Studio 2010
Microsoft Office 2010
Google Translate API (versi yang saya gunakan pada tutorial ini adalah 3.0)
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”.

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

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.

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

10. Berikut adalah tampilan User Control buatan saya.

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:

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

  1:     public partial class WTUserControl : UserControl
  2:     {
  3:         List<string> _srcGoogle;
  4:         List<string> _destGoogle;
  5:         List<string> _srcBing;
  6:         List<string> _destBing;
  7:         List<string> _srcBingName;
  8:         List<string> _destBingName;
  9:         BingTranslatorService.LanguageServiceClient _proxy;
 10:         TranslateClient _client;
 11:         
 12: 
 13:         public WTUserControl()
 14:         {
 15:             InitializeComponent();
 16:             InitGoogleTranslate();
 17:             InitBingTranslate();
 18:         }
 19: 
 20:         private void InitGoogleTranslate()
 21:         {
 22:             _srcGoogle = Google.API.Translate.Language.TranslatableCollection.Select(a => a.ToString()).ToList();
 23:             _destGoogle = Google.API.Translate.Language.TranslatableCollection.Select(a => a.ToString()).ToList();
 24:         }
 25: 
 26:         private void InitBingTranslate()
 27:         {
 28:             _proxy = new BingTranslatorService.LanguageServiceClient();
 29:             string[] languageCodes = _proxy.GetLanguagesForTranslate(AppId);
 30:             _srcBing = languageCodes.ToList();
 31:             _destBing = languageCodes.ToList();
 32:             _srcBingName = _proxy.GetLanguageNames(AppId, "en", languageCodes).ToList();
 33:             _destBingName = _proxy.GetLanguageNames(AppId, "en", languageCodes).ToList();
 34:             
 35:         }
 36: 
 37:         private void btnTranslate_Click(object sender, EventArgs e)
 38:         {
 39:             string text;
 40:             string src;
 41:             string dest;
 42:             string srcName;
 43:             string destName;
 44:             string translated;
 45: 
 46:             //get text from active document
 47:             text = Globals.ThisAddIn.Application.ActiveDocument.Content.Text;
 48: 
 49:             try
 50:             {   
 51:                 if (rbGoogle.Checked)  //user checked Google
 52:                 {   
 53:                     src = _srcGoogle[cmbSrcLang.SelectedIndex];
 54:                     dest = _destGoogle[cmbDestLang.SelectedIndex];
 55:                     label3.Visible = true;
 56:                     label3.Text = src + " to " + dest;
 57:                     _client = new TranslateClient("");
 58:                     translated = _client.Translate(text, GetLang(src),GetLang(dest));
 59:                     txtResult.Text = translated;
 60:                 }
 61:                 else if (rbBing.Checked)  //user checked Bing
 62:                 {
 63:                     src = _srcBing[cmbSrcLang.SelectedIndex];
 64:                     dest = _destBing[cmbDestLang.SelectedIndex];
 65:                     srcName = _srcBingName[cmbSrcLang.SelectedIndex];
 66:                     destName = _destBingName[cmbDestLang.SelectedIndex];
 67:                     label3.Visible = true;
 68:                     label3.Text = srcName + " to " + destName;
 69:                     translated = _proxy.Translate(AppId, text, src, dest,"","");
 70:                     txtResult.Text = translated;
 71:                 }
 72:             }
 73:             catch (Exception ex)
 74:             {
 75:                 MessageBox.Show("Error, " + ex.Message);
 76:             }
 77:         }
 78: 
 79:         private void FillLanguageGoogle()
 80:         {
 81:             cmbSrcLang.Items.Clear();
 82:             cmbSrcLang.Items.AddRange(_srcGoogle.ToArray());
 83:             cmbSrcLang.SelectedIndex = 0;
 84: 
 85:             cmbDestLang.Items.Clear();
 86:             cmbDestLang.Items.AddRange(_destGoogle.ToArray());
 87:             cmbDestLang.SelectedIndex = 0;
 88: 
 89:         }
 90: 
 91:         private void FillLanguageBing()
 92:         {
 93:             cmbSrcLang.Items.Clear();
 94:             cmbSrcLang.Items.AddRange(_srcBingName.ToArray());
 95:             cmbSrcLang.SelectedIndex = 0;
 96: 
 97:             cmbDestLang.Items.Clear();
 98:             cmbDestLang.Items.AddRange(_destBingName.ToArray());
 99:             cmbDestLang.SelectedIndex = 0;
100:         }
101: 
102:         private void rbGoogle_CheckedChanged(object sender, EventArgs e)
103:         {
104:             FillLanguageGoogle();
105:         }
106: 
107:         private void rbBing_CheckedChanged(object sender, EventArgs e)
108:         {
109:             FillLanguageBing();
110:         }
111: 
112:         public Language GetLang(string lang)
113:         {
114:             foreach (Language language in Google.API.Translate.Language.TranslatableCollection)
115:             {
116:                 if (language.ToString().Equals(lang))
117:                 {
118:                     return language;
119:                 }
120:             }
121:             return Language.English;
122:         }
123: 
124:         private static string AppId
125:         {
126:             get { return ConfigurationManager.AppSettings["appID"]; }
127:         }
128: 
129:         private void btnDetect_Click(object sender, EventArgs e)
130:         {
131:             string text = Globals.ThisAddIn.Application.ActiveDocument.Content.Text;
132:             if (rbGoogle.Checked)
133:             {
134:                 bool reliable;
135:                 double confidence;
136:                 _client = new TranslateClient("");
137:                 MessageBox.Show("Your current language is "+_client.Detect(text, out reliable, out confidence));
138:             }
139:             else if (rbBing.Checked)
140:             {
141:                 MessageBox.Show(_proxy.Detect(AppId,text));
142:             }
143:         }        
144:     }

15. Tambahkan kode berikut pada ThisAddIn.cs.

  1:     public partial class ThisAddIn
  2:     {
  3:         Microsoft.Office.Tools.CustomTaskPane _ctp;
  4:         private void ThisAddIn_Startup(object sender, System.EventArgs e)
  5:         {
  6:             _ctp = Globals.ThisAddIn.CustomTaskPanes.Add(new WTUserControl(), "WordTranslator");
  7:         }
  8: 
  9:         public void ShowWordTranslator()
 10:         {
 11:             _ctp.Visible = true;
 12:         }
 13: 
 14:         public void HideWordTranslator()
 15:         {
 16:             _ctp.Visible = false;
 17:         }
 18: 
 19:         private void ThisAddIn_Shutdown(object sender, System.EventArgs e)
 20:         {
 21:         }
 22: 
 23:         #region VSTO generated code
 24: 
 25:         /// <summary>
 26:         /// Required method for Designer support - do not modify
 27:         /// the contents of this method with the code editor.
 28:         /// </summary>
 29:         private void InternalStartup()
 30:         {
 31:             this.Startup += new System.EventHandler(ThisAddIn_Startup);
 32:             this.Shutdown += new System.EventHandler(ThisAddIn_Shutdown);
 33:         }
 34:         
 35:         #endregion
 36:     }

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

  1:         private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
  2:         {
  3:             if (toggleButton1.Checked)
  4:             {
  5:                 Globals.ThisAddIn.ShowWordTranslator();
  6:             }
  7:             else
  8:             {
  9:                 Globals.ThisAddIn.HideWordTranslator();
 10:             }
 11:         }

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

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

Microsoft Technology Update Road Trip 2011 @Ma Chung, Malang

2011-03-05T16:20:00Z

Pendahuluan

Pada hari Jumat tanggal 4 Maret 2011, MSP Regional Jawa Timur bekerja sama dengan MUGI Ma Chung mengadakan acara Microsoft Technology Update Road Trip 2011 di Universitas Ma Chung, Malang. Tujuan utama dari acara ini adalah memberikan update mengenai teknologi terbaru dan pengenalan program-program akademik dari Microsoft. Pembicara dalam kegiatan ini, yaitu: Julius Fenata (Academic Developer Advisor Microsoft Indonesia), Jeffrey Hermanto Halimsetiawan (MSP ITS), Alexander Rahardjo (MSP ITS), dan Izzuddin Gumilar (MSP ITS).

Pelaksanaan

Hari / Tanggal : Jumat, 4 Maret 2011
Waktu : 15.00 - 18.00 WIB
Tempat : Balai Pertiwi, Univ Ma Chung

Agenda

Acara ini dibuka dengan sesi pertama oleh Julius Fenata yang memberikan penjelasan mulai dari MSDN AA, Did You Know?, showcase aplikasi WPF, Silverlight, XNA dan Microsoft Surface dalam bentuk video serta Imagine Cup sebagai kompetisi IT terbesar di dunia.

Acara dilanjutkan dengan sesi kedua yang diisi oleh Jeffrey Hermanto Halimsetiawan(MSP ITS) mengenai Windows Phone 7 yang merupakan Smartphone OS terbaru yang dikeluarkan oleh Microsoft. Penjelasan ini dimulai dari hardware dari Windows Phone 7 lalu Windows Phone 7 dari sisi consumer dan developer. Di dalam sesi ini dijelaskan mengenai pembangunan aplikasi mobile pada Windows Phone 7 OS dan dilengkapi dengan demo aplikasi Windows Phone 7 yang dikembangkan bernama Petualangan Aksara di Tanah Jawa for WP7. Dalam sesi ini peserta cukup antusias dalam mencoba aplikasi yang didemokan ini.

Berikut adalah materi presentasi Windows Phone 7:

Kemudian dilanjutkan dengan sesi ketiga yang diisi oleh Alexander Rahardjo(MSP ITS). Pada sesi ini dijelaskan mengenai asal mula teknologi MultiPoint, penerapan aplikasi MultiPoint melalui sebuah video, sekilas mengenai Windows MultiPoint Mouse SDK 1.5.1, membangun aplikasi Flash dengan memanfaatkan Microsoft MultiPoint SDK 1.1 dan diakhiri demo aplikasi Flash MultiPoint bernama Petualangan Aksara di Tanah Jawa.

Berikut adalah materi presentasi MultiPoint:

Selanjutnya sesi keempat diisi oleh Izzuddin Gumilar (MSP ITS) mengenai Microsoft Webmatrix dan Razor View Engine. Di dalam sesi ini, dijelaskan mudahnya membangun sebuah aplikasi web yang bresifat pre-build application dengan menggunakan Microsoft webmatrix yang disertai dengan demo dengan menggunakan web template and gallery yang telah disediakan oleh webmatrix. Selain itu sesi ini dilengkapi dengan penjelasan mengenai Razor View Engine yang merupakan salah satu option view engine yang dimiliki oleh asp.net framework yang juga merupakan komponen yang dibundle di dalam Microsoft Webmatrix.

Berikut adalah materi presentasi Microsoft Webmatrix:

Acara terakhir dimeriahkan dengan demo langsung game Kinect Adventures dengan Microsoft Kinect oleh para MSP yang kemudian dicoba secara langsung oleh beberapa peserta. Demo Kinect ini memperoleh antusias yang sangat besar dari penonton.

Acara ditutup dengan penyerahan penghargaan bagi para pembicara oleh panitia acara dari Universitas Ma Chung, kemudian dilanjutkan dengan foto bersama.

Berikut adalah beberapa foto yang menunjukkan antusiasme peserta acara ini.

Puji syukur acara Microsoft Technology Update Road Trip 2011di Universitas Ma Chung ini dapat berjalan sukses dan lancar, tidak lupa kami sampaikan terima kasih kepada MUGI Universitas Ma Chung yang telah bekerja sama dalam menyelenggarakan acara ini. Semoga dengan adanya acara ini dapat menumbuhkan motivasi mahasiswa Ma Chung untuk berkarya dengan menggunakan teknologi-teknologi terbaru Microsoft untuk berkompetisi dalam Imagine Cup 2012 tahun depan.

Membuat Aplikasi Twitter pada Microsoft Word 2010 menggunakan VSTO 4.0

2011-02-22T05:53:00Z

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:

Microsoft Visual Studio 2010
Microsoft Office 2010
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”.

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

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

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.

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

Panel; Dock: Fill
Label; Text: Enter your PIN; Enable: false
Label; Text: Your Tweet; Enable: false
Textbox; Enable: false
Button; Name: btnGetPin, Text: Get PIN
Button; Name: btnTweet, Text: Tweet it!; Enable: false
RichTextbox; Enable: false
Label; Visible: false
PictureBox

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

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

TweetSharp.dll
Hammock.ClientProfile.dll
Newtonsoft.Json.dll

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

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

  1: public WTUserControl()
  2: {
  3:     InitializeComponent();
  4:     _twitterClientInfo = new TwitterClientInfo();
  5:     _twitterClientInfo.ConsumerKey = ConsumerKey; //Read ConsumerKey out of the app.config
  6:     _twitterClientInfo.ConsumerSecret = ConsumerSecret; //Read the ConsumerSecret out the app.config
  7: 
  8:     _twitterService = new TwitterService(_twitterClientInfo);
  9: 
 10: }
 11: 
 12: private void btnTweet_Click(object sender, EventArgs e)
 13: {
 14:    if (richTextBox1.Text.Length <= MAX_TWEET)
 15:     {
 16:         if (string.IsNullOrEmpty(_token) || string.IsNullOrEmpty(_tokenSecret))
 17:         {
 18:             //Get the pin from text box
 19:             string pin = textBox1.Text;
 20: 
 21:             OAuthAccessToken accessToken = _twitterService.GetAccessToken(_requestToken, pin);
 22:             //Now we need the Token and TokenSecret
 23:             _token = accessToken.Token;
 24:             _tokenSecret = accessToken.TokenSecret;
 25: 
 26:         }
 27: 
 28:         _twitterService.AuthenticateWith(_token, _tokenSecret);
 29:         string tweetMessage = richTextBox1.Text;
 30:         _twitterService.SendTweet(tweetMessage);
 31:         label4.Visible = true;
 32:         label4.Text = "Your Tweet has been posted!";
 33:     }
 34:     else
 35:     {
 36:         label4.Visible = true;
 37:         label4.Text = "Too many character!";
 38:     }
 39: }
 40: 
 41: #region ConsumerKey & ConsumerSecret
 42: private static string ConsumerSecret
 43: {
 44:     get { return ConfigurationManager.AppSettings["ConsumerSecret"]; }
 45: }
 46: 
 47: private static string ConsumerKey
 48: {
 49:     get { return ConfigurationManager.AppSettings["ConsumerKey"]; }
 50: }
 51: #endregion
 52: 
 53: private void btnGetPin_Click(object sender, EventArgs e)
 54: {
 55:     if (string.IsNullOrEmpty(_token) || string.IsNullOrEmpty(_tokenSecret))
 56:     {
 57:         //Firstly we need the RequestToken and the AuthorisationUrl
 58:         _requestToken = _twitterService.GetRequestToken();
 59:         Uri authUrl = _twitterService.GetAuthorizationUri(_requestToken);
 60: 
 61:         //authUrl is just a URL we can open IE and paste it in if we want
 62:         //Please Allow This App to send Tweets on your behalf");
 63:         Process.Start(authUrl.AbsoluteUri); //Launches a browser that'll go to the AuthUrl.
 64:         textBox1.Enabled = true;
 65:         richTextBox1.Enabled = true;
 66:         btnTweet.Enabled = true;
 67:     }
 68: 
 69: }

14. Tambahkan kode berikut pada ThisAddIn.cs.

  1: Microsoft.Office.Tools.CustomTaskPane _ctp;
  2: private void ThisAddIn_Startup(object sender, System.EventArgs e)
  3: {
  4:     _ctp = Globals.ThisAddIn.CustomTaskPanes.Add(new WMBUserControl(), "WordTweet");
  5: }
  6: 
  7: public void ShowMiniBrowser()
  8: {
  9:     _ctp.Visible = true;
 10: }
 11: 
 12: public void HideMiniBrowser()
 13: {
 14:     _ctp.Visible = false;
 15: }

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

  1: private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
  2: {
  3:     if (toggleButton1.Checked)
  4:     {
  5:         Globals.ThisAddIn.ShowMiniBrowser();
  6:     }
  7:     else
  8:     {
  9:         Globals.ThisAddIn.HideMiniBrowser();
 10:     }
 11: }

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.

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

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

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

Selamat mencoba

Word Mini Browser 2010 untuk Microsoft Word 2010 menggunakan VSTO 4.0

2011-02-21T04:38:00Z

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:

Microsoft Visual Studio 2010
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”.

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

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

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.

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

Panel; Dock: Fill
Label; Text: Insert URL
ComboBox; Anchor: Top, Left, Right
Button; Name: btnGo, Text: Go
Button; Name: btnStop, Text: Stop
Button; Name: btnBack, Text: <<
Button; Name: btnForward, Text: >>
WebBrowser; Anchor: Top, Bottom, Left, Right

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

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

  1:         private void btnGo_Click(object sender, EventArgs e)
  2:         {
  3:             if(comboBox1.Text.Trim() != "")
  4:             {
  5:                 webBrowser1.Navigate(comboBox1.Text);
  6:                 comboBox1.Items.Add(comboBox1.Text);
  7:                 if (comboBox1.Items.Count > 5)
  8:                 {
  9:                     comboBox1.Items.RemoveAt(1);
 10:                 }
 11:             }
 12:         }
 13: 
 14:         private void btnStop_Click(object sender, EventArgs e)
 15:         {
 16:             webBrowser1.Stop();
 17:         }
 18: 
 19:         private void btnBack_Click(object sender, EventArgs e)
 20:         {
 21:             webBrowser1.GoBack();
 22:         }
 23: 
 24:         private void btnForward_Click(object sender, EventArgs e)
 25:         {
 26:             webBrowser1.GoForward();
 27:         }

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

  1:         private void toggleButton1_Click(object sender, RibbonControlEventArgs e)
  2:         {
  3:             if (toggleButton1.Checked)
  4:             {
  5:                 Globals.ThisAddIn.ShowMiniBrowser();
  6:             }
  7:             else
  8:             {
  9:                 Globals.ThisAddIn.HideMiniBrowser();
 10:             }
 11:         }

13. Kemudian jalankan program anda dengan menekan tombol F5.

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

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

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

Selamat mencoba

MultiPoint pada XNA

2011-02-14T19:45:00Z

MultiPoint merupakan sebuah teknologi yang memungkinkan banyak tetikus (mouse) terhubung dalam sebuah komputer. Teknologi MultiPoint memungkinkan beberapa pengguna mengakses satu komputer secara bersama-sama. Microsoft sendiri telah mengembangkan teknologi ini pada Windows Presentation Foundation (WPF) melalui MultiPoint Mouse SDK. Namun pada kenyataannya MultiPoint tidak hanya dapat diterapkan pada WPF namun dapat diterapkan pada platform lain, salah satunya yaitu XNA yang tentu saja tidak menggunakan SDK dari Microsoft.

Pada kesempatan kali ini, saya akan memperkenalkan sebuah teknologi MultiPoint yang dikembangkan pada XNA dan library yang digunakan adalah MultiInput. Tentu saja dengan adanya teknologi ini memungkinkan kita untuk mengembangkan sebuah permainan yang menarik dan interaktif karena XNA merupakan sebuah teknologi untuk pengembangan permainan yang dibuat oleh Microsoft.

Namun sayangnya berdasarkan uji coba yang telah saya lakukan, library ini masih terdapat kekurangan khususnya apabila dijalankan pada Sistem Operasi Windows 7. Library ini tidak dapat mendeteksi jumlah tetikus yang terhubung dengan komputer secara tepat.

Berikut adalah langkah-langkah untuk membuat sebuah project MultiPoint pada XNA:

1. Buat sebuah project XNA

2. Unduh library MultiInput di sini

3. Kemudian masukkan kode berikut pada project anda:

  1: using System;
  2: using System.Collections.Generic;
  3: using System.Linq;
  4: using Microsoft.Xna.Framework;
  5: using Microsoft.Xna.Framework.Audio;
  6: using Microsoft.Xna.Framework.Content;
  7: using Microsoft.Xna.Framework.GamerServices;
  8: using Microsoft.Xna.Framework.Graphics;
  9: using Microsoft.Xna.Framework.Input;
 10: using Microsoft.Xna.Framework.Media;
 11: using Microsoft.Xna.Framework.Net;
 12: using Microsoft.Xna.Framework.Storage;
 13: using MultiInput;
 14: 
 15: namespace Game1
 16: {
 17:     /// <summary>
 18:     /// This is the main type for your game
 19:     /// </summary>
 20:     public class Game1 : Microsoft.Xna.Framework.Game
 21:     {
 22:         GraphicsDeviceManager _graphics;
 23:         SpriteBatch _spriteBatch;
 24: 
 25:         MultiInputController _inputController;
 26:         Color[] _mousecolors = new Color[] { Color.Red, Color.Blue,
 27:             Color.Green, Color.Yellow, Color.White, Color.Pink };
 28: 
 29:         Texture2D _cursor;
 30: 
 31:         SpriteFont _font; 
 32: 
 33:         public Game1()
 34:         {
 35:             _graphics = new GraphicsDeviceManager(this);
 36:             _graphics.PreferredBackBufferWidth = 800;
 37:             _graphics.PreferredBackBufferHeight = 600;
 38:             this.Window.Title = "MultiPoint XNA";
 39:             Content.RootDirectory = "Content";
 40:             _inputController = new MultiInputController(this.Window.Handle);
 41:             
 42:         }
 43: 
 44:         /// <summary>
 45:         /// Allows the game to perform any initialization it needs to before starting to run.
 46:         /// This is where it can query for any required services and load any non-graphic
 47:         /// related content.  Calling base.Initialize will enumerate through any components
 48:         /// and initialize them as well.
 49:         /// </summary>
 50:         protected override void Initialize()
 51:         {
 52:             // TODO: Add your initialization logic here
 53: 
 54:             base.Initialize();
 55:         }
 56: 
 57:         /// <summary>
 58:         /// LoadContent will be called once per game and is the place to load
 59:         /// all of your content.
 60:         /// </summary>
 61:         protected override void LoadContent()
 62:         {
 63:             // Create a new SpriteBatch, which can be used to draw textures.
 64:             _spriteBatch = new SpriteBatch(GraphicsDevice);
 65: 
 66:             _cursor = this.Content.Load<Texture2D>(@"Sprite\hand");
 67:             _font = this.Content.Load<SpriteFont>(@"Fonts\Pericles");
 68:             // TODO: use this.Content to load your game content here
 69:         }
 70: 
 71:         /// <summary>
 72:         /// UnloadContent will be called once per game and is the place to unload
 73:         /// all content.
 74:         /// </summary>
 75:         protected override void UnloadContent()
 76:         {
 77:             // TODO: Unload any non ContentManager content here
 78:             // YOU MUST!!! USE THIS LINE, otherwise your game won't exit
 79:             _inputController.Dispose();
 80: 
 81:             this.Content.Unload();
 82: 
 83:         }
 84: 
 85:         /// <summary>
 86:         /// Allows the game to run logic such as updating the world,
 87:         /// checking for collisions, gathering input, and playing audio.
 88:         /// </summary>
 89:         /// <param name="gameTime">Provides a snapshot of timing values.</param>
 90:         protected override void Update(GameTime gameTime)
 91:         {
 92:             // Allows the game to exit
 93:             if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
 94:                 this.Exit();
 95: 
 96:             // TODO: Add your update logic here
 97:             foreach (RawMouse rawmouse in _inputController.Mice)
 98:             {
 99:                 // do whatever you like here
100:             }
101: 
102:             //hidden mouse for temporary
103:             Mouse.SetPosition(_graphics.GraphicsDevice.Viewport.Width / 2, _graphics.GraphicsDevice.Viewport.Height / 2);
104: 
105:             
106:             base.Update(gameTime);
107:         }
108: 
109:         /// <summary>
110:         /// This is called when the game should draw itself.
111:         /// </summary>
112:         /// <param name="gameTime">Provides a snapshot of timing values.</param>
113:         protected override void Draw(GameTime gameTime)
114:         {
115:             GraphicsDevice.Clear(Color.CornflowerBlue);
116: 
117:             // TODO: Add your drawing code here
118: 
119:             _spriteBatch.Begin();
120: 
121:             // Draw mouse count
122:             _spriteBatch.DrawString(_font, "Jumlah mouse = " + _inputController.MiceCount, new Vector2(0, 0), Color.White);
123: 
124:             // Draw each cursor
125:             for (int i = 0; i < _inputController.MiceCount; i++)
126:             {
127:                 RawMouse mouse = _inputController.Mice[i];
128:                 _spriteBatch.Draw(_cursor,
129: new Vector2((float)(mouse.X - _cursor.Width/2),
130: (float)(mouse.Y - _cursor.Height/2)), _mousecolors[i]);
131:                
132:             }
133: 
134:             _spriteBatch.End();
135: 
136: 
137: 
138:             base.Draw(gameTime);
139:         }
140:     }
141: }
142:

4. Hasil run dari project ini adalah sebagai berikut:

Selamat mencoba dan semoga bermanfaat

Tutorial XNA Project Menggunakan Farseer Physics Engine

2011-02-09T23:12:00Z

Farseer Physic Engine merupakan engine fisika yang open source untuk .NET.
Pada tutorial kali ini kita akan mencoba membuat contoh implementasi dari sebuah kotak dan lingkaran. Kotak dan lingkaran tersebut dapat digerakkan dan bertabrakan satu sama lain.

Program yang diperlukan (yang digunakan dalam tutorial ini) :

- Microsoft Visual Studio 2008 SP 1

- XNAGS 31

Packages atau project yang dibutuhkan :

- Farseer Physics 2.1.3 XNA

- DemoBaseXNA

Langkah-langkah :

Buat project baru XNA Game Studio 3.1 -> Windows Game 3.1

Add Packages Farseer Physics 2.1.3 XNA & DemoBaseXNA

Add Reference Farseer Physics 2.1.3 XNA & DemoBaseXNA

Buat Class yang diturunkan dari class DemoBaseXNA.ScreenSystem.GameScreen

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using DemoBaseXNA;
using DemoBaseXNA.DrawingSystem;
using DemoBaseXNA.ScreenSystem;
using FarseerGames.FarseerPhysics;
using FarseerGames.FarseerPhysics.Dynamics;
using FarseerGames.FarseerPhysics.Factories;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;
namespace WindowsGame2.Contoh1
{
    class contoh1:GameScreen
    {
        //inisialisasi awal gamescreen
        public override void Initialize()
        {
        }
        //load object, digunakan untuk load lingkaran dan kotak
        public override void LoadContent()
        {
        }
        //digunakan untuk menggambar objek ke layar
        public override void Draw(GameTime gameTime)
        {
        }
        //handle input state dari gamescreen
        public override void HandleInput(InputState input)
        {
        }
        //handle input dari keyboard
        private void HandleKeyboardInput(InputState input)
        {
        }
        //text detail saat dilayar pause
        private static string GetDetails()
        {
        }
    }
}

Inisialisasi Class GameScreen

public override void Initialize()
        {
            //inisialisasi physic simulator
            PhysicsSimulator = new PhysicsSimulator(new Vector2(0, 0));
            //add physic simulator ke view
            PhysicsSimulatorView = new hysicsSimulatorView(PhysicsSimulator);
            base.Initialize();
        }

Load objek gambar geometry yang akan diload

public override void LoadContent()
        {
            //membuat brush untuk draw lingkaran
            //radius, fill color, border color
            _circleBrush = new CircleBrush(64, Color.White, Color.Black);
            _circleBrush.Load(ScreenManager.GraphicsDevice);
            //membuat body dari lingkaran untuk simulasi gaya dan impuls
            //radius, masa
            _circleBody = BodyFactory.Instance.CreateCircleBody(PhysicsSimulator, 64, 1);
            _circleBody.Position = new Vector2(500, 384);
            //mmebuat geometri untuk deteksi tabrakan dari lingkaran
            //body, radius, jumlah edge/garis
            GeomFactory.Instance.CreateCircleGeom(PhysicsSimulator, _circleBody, 64, 20);
            //membuat body kotak untuk simulasi gaya dan impuls
            //width, height, mass
            _rectangleBody = BodyFactory.Instance.CreateRectangleBody(PhysicsSimulator, 128, 128, 1);
            _rectangleBody.Position = new Vector2(256, 384);
            //membuat geometri untuk deteksi tabrakan dari kotak
            //width, height
            GeomFactory.Instance.CreateRectangleGeom(PhysicsSimulator, _rectangleBody, 128, 128);
            //membuat brush untuk draw kotak
            //width, height, fill color, border color
            _rectangleBrush = new RectangleBrush(128, 128, Color.Gold, Color.Black);
            _rectangleBrush.Load(ScreenManager.GraphicsDevice);
            base.LoadContent();
        }

Draw brush model sesuai dengan bodynya

public override void Draw(GameTime gameTime)
        {
            //memulai proses drawing pada SpriteBatch
            ScreenManager.SpriteBatch.Begin(SpriteBlendMode.AlphaBlend);
            //menggambar brush lingkaran sesuai dengan body lingkaran
            _circleBrush.Draw(ScreenManager.SpriteBatch, _circleBody.Position);
            //menggambar brush kotak sesuai dengan body kotak
            _rectangleBrush.Draw(ScreenManager.SpriteBatch, _rectangleBody.Position, _rectangleBody.Rotation);
            //menutup SpriteBatch
            ScreenManager.SpriteBatch.End();
            base.Draw(gameTime);
        }

Mengatur handle input

public override void HandleInput(InputState input)
        {
            //jika gamescreen pertama kali dijalankan
            if (firstRun)
            {
                //tambah pause screen ke screen manager
                ScreenManager.AddScreen(new PauseScreen(GetTitle(), GetDetails()));
                firstRun = false;
            }
            //jika screen dalam keadaan pause/ berhentei sejenak
            if (input.PauseGame)
            {
                ScreenManager.AddScreen(new PauseScreen(GetTitle(), GetDetails()));
            }
            //handle input keyboard
            HandleKeyboardInput(input);
            base.HandleInput(input);
        }
        private void HandleKeyboardInput(InputState input)
        {
            //set besarnya penambahan gaya jika user menekan A/S/D/W
            const float forceAmount = 50;
            //set gaya awal sebesar 0/ diam
            Vector2 force = Vector2.Zero;
            //set Y negatif/ ke bawah
            force.Y = -force.Y;
            //user menekan tombol A
            if (input.CurrentKeyboardState.IsKeyDown(Keys.A)) { force += new Vector2(-forceAmount, 0); }
            //user menekan tombol S
            if (input.CurrentKeyboardState.IsKeyDown(Keys.S)) { force += new Vector2(0, forceAmount); }
            //user menekan tombol D
            if (input.CurrentKeyboardState.IsKeyDown(Keys.D)) { force += new Vector2(forceAmount, 0); }
            //user menekan tombol W
            if (input.CurrentKeyboardState.IsKeyDown(Keys.W)) { force += new Vector2(0, -forceAmount); }
            //berikan gaya pada body kotak
            _rectangleBody.ApplyForce(force);
            //set besarnya pertambahan torsi pada kotak
            const float torqueAmount = 1000;
            //set torsi awal menjadi 0/ tidak berputar
            float torque = 0;
            //user menekan tombol left
            if (input.CurrentKeyboardState.IsKeyDown(Keys.Left)) { torque -= torqueAmount; }
            //user menekan tombol right
            if (input.CurrentKeyboardState.IsKeyDown(Keys.Right)) { torque += torqueAmount; }
            //berikan torsi pada kotak
            _rectangleBody.ApplyTorque(torque);
        }

Set atribut lain dalam GameSreen

//judul dari GameScreen
        public static string GetTitle()
        {
            return "Contoh 1 : kotak dan lingkaran";
        }
        //Deskripsi dari GameScreen (akan dipasang di pause screen)
        private static string GetDetails()
        {
            StringBuilder sb = new StringBuilder();
            sb.AppendLine("Contoh isi dari layar pause/menu");
            sb.AppendLine("object attached.");
            sb.AppendLine(string.Empty);
            sb.AppendLine("Keyboard:");
            sb.AppendLine("  -Rotasi : panah kanan atau kiri");
            sb.AppendLine("  -Gerak: A,S,D,W");
            sb.AppendLine(string.Empty);
            sb.AppendLine("Mouse");
            sb.AppendLine("  -Tahan mouse kiri lalu drag mouse");
            return sb.ToString();
        }

Set constructor Game, add GameScreen ke Game

public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            //set judul game
            Window.Title = "Contoh Farseer Physics Engine XNA";
            graphics.SynchronizeWithVerticalRetrace = false;
            TargetElapsedTime = new TimeSpan(0, 0, 0, 0, 10);
            IsFixedTimeStep = true;
            //set ukuran jendela game
            graphics.PreferredBackBufferWidth = 800;
            graphics.PreferredBackBufferHeight = 600;
            graphics.IsFullScreen = false;
            //set apakah mouse di draw atau tidak
            IsMouseVisible = true;
            //Set window defaults. Parent game can override in constructor
            Window.AllowUserResizing = false;
            //new-up components and add to Game.Components
            ScreenManager screenmanager= new ScreenManager(this);
            Components.Add(screenmanager);
            //set frame counter
            FrameRateCounter frameRateCounter = new FrameRateCounter(screenmanager);
            frameRateCounter.DrawOrder = 101;
            Components.Add(frameRateCounter);
            //tambah GameScreen yang sudah Anda buat(contoh1)
            screenmanager.MainMenuScreen.AddMainMenuItem(contoh1.GetTitle(), new contoh1());
            screenmanager.MainMenuScreen.AddMainMenuItem("Keluar", null, true);
            //arahkan game ke main menu
            screenmanager.GoToMainMenu();
        }

Selesai

Dan berikut adalah hasil akhir dari tutorial di atas

Coded UI Test With Assertion pada Visual Studio 2010

2010-12-21T20:18:39Z

Setelah mencoba tutorial sebelumnya yaitu Coded UI Test pada Visual Studio 2010, sampai pada tahap tersebut yang dilakukan oleh Visual Studio 2010 hanyalah merekam langkah-langkah yang dilakukan. Bagaimana jika anda ingin melakukan pengujian akan output dari aplikasi?

Sekarang saatnya saya mencoba memberikan tambahan testing pada GUI test yaitu Coded UI Test With Assertion

Untuk melakukan testing ini saya menggunakan aplikasi yang sama dengan pada tutorial sebelumnya :)

Berikut adalah langkah-langkahnya:

1. Setelah melakukan testing Coded UI pada Coded UI Test pada Visual Studio 2010 kemudian masuk ke menu Test kemudian pilih Generate Code for Coded UI Test > Use Coded UI Test Builder.

2. Setelah itu akan muncul windows di sebelah kanan anda untuk melakukan test GUI

3. Kemudian jalankan IE 8

4. Buka aplikasi, dalam hal ini saya melakukan uji coba terhadap Login Administrator

5. Setelah melakukan Login akan muncul halaman baru

6. Klik kiri tahan dengan mouse anda Assertion pada Window UIMap - Coded UI Test Builder

7. Arahkan pointer mouse anda ke hasil yang ingin dibandingkan kemudian lepaskan klik, dalam hal ini saya membandingkan dari isi halaman

8. Kemudian akan muncul jendela properti dan tambahkan properti pengecekan dengan mengklik tombol "Add Assertion" setelah anda memilih properti mana yang akan diberi Assertion, dalam hal ini saya memilih "IsNotNull" lalu klik OK

9. Lalu klik tombol paling kanan/generate code/ALT+G dan isikan nama method anda dan klik tombol Add and Generate

10. Kemudian secara otomatis Visual Studio 2010 akan melakukan generate program untuk assert test UI

11. Setelah itu, karena akan melakukan testing terhadap halaman Login, maka halaman tersebut harus diakses secara otomatis oleh sistem oleh karena itu diperlukan adanya test gabungan antara GUI test yang pada tahap awal dengan assert GUI test ini. Caranya memanggil method assert tadi ketika dilakukan GUI test atau cara yang paling mudah yaitu dengan menyalin code dari method assert anda ke dalam method GUI test yang ada pada tahap awal tujuannya agar pada saat test dijalankan kedua test ini akan berjalan

12. Lalu untuk melakukan test anda cukup klik kanan pada method yang baru digenerate oleh Visual Studio 2010 tersebut lalu pilih Run Tests

13. Proses GUI Testing dan GUI Assert Testing akan terlaksana secara otomatis (jangan menyentuh keyboard atau mouse karena akan mengganggu proses testing :))

14. Apabila proses testing berjalan dengan baik maka akan keluar tanda passed pada Test Result di Visual Studio anda

15. Apabila Anda ingin melakukan test lagi maka anda perlu masuk ke menu Test kemudian pilih Generate Code for Coded UI Test > Use Coded UI Test Builder

Demikian tutorial dari saya mengenai Coded UI Test With Assertion pada Visual Studio 2010

Selamat mencoba

Coded UI Test ASP.NET MVC 2 pada Visual Studio 2010

2010-12-03T17:05:01Z

Setelah saya menjelaskan mengenai salah satu fitur baru pada Visual Studio 2010 pada artikel sebelumnya Generate Sequence Diagram from Visual Studio 2010 dan Unit Testing ASP.NET MVC 2 pada Visual Studio 2010. Selanjutnya pada kesempatan kali ini saya akan mengenalkan sebuah fitur baru yang dimiliki oleh Visual Studio 2010 yang tentunya belum dimiliki oleh versi sebelumnya .

Fitur yang satu ini cukup menarik yaitu Coded UI Test yang digunakan untuk GUI Test, dimana tester dimudahkan untuk melakukan testing GUI pada suatu perangkat lunak.

Pada kesempatan kali ini saya akan memberikan tutorial untuk menggunakan fitur baru tersebut. Adapun perangkat lunak yang saya gunakan di sini adalah ASP.NET MVC 2, Visual Studio 2010, dan Windows XP SP 3.

Berikut adalah tutorialnya:

1. Buka perangkat lunak anda pada Visual Studio 2010

2. Pilih menu Test, lalu new test

3. Lalu akan keluar sebuah windows dimana anda harus memilih Coded UI Test dan isikan nama test anda, dalam tutorial ini saya mengisikan AdminUITest, lalu klik OK

4. Apabila anda belum memiliki project test maka akan keluar windows untuk new project, dalam tutorial ini saya mengisikan MvcMusicStoreUI.Tests, lalu klik OK

5. Setelah itu akan muncul windows baru lagi, dimana anda harus memilih option yang atas Record actions, edit UI map or add assertions, lalu klik OK

6. Setelah itu akan muncul windows di sebelah kanan anda untuk melakukan test GUI

fungsi dari windows di atas antara lain (dari kiri ke kanan):

Record : berguna jika anda ingin mulai merekan aktivitas testing.
Show Recorded Steps : untuk menunjukkan langkah-langkah mana saja yang telah dieksekusi.
Assertion : untuk menambahkan asersi/ pengencekan terhapa output dari aplikasi yang sedang ditest
Generate Code : untuk menerjemahkan kode hasil rekaman tadi

7. Lalu klik tombol paling kiri/start recording/ALT+R

8. Karena saya menggunakan ASP.NET maka saya menggunakan Internet Explorer 8 ( IE 8 ) untuk melakukan GUI testing ini
9. Setelah itu jalankan IE 8 dan lakukan yang anda ingin testing (dalam tutorial ini saya melakukan testing terhadap GUI Admin, dengan melakukan masukan username dan password)
10. Visual Studio 2010 akan secara otomatis melakukan record perilaku anda terhadap GUI yang anda test
11. Setelah selesai melakukan testing klik tombol paling kiri/pause recording/ALT+P
12. Dan anda dapat melihat hasil/step yang anda lakukan pada testing tadi dengan mengklik tombol Show Recorded Steps/ALT+S

13. Lalu klik tombol paling kanan/generate code/ALT+G dan isikan nama method anda dan klik tombol Add and Generate

14. Kemudian secara otomatis Visual Studio 2010 akan melakukan generate program untuk test UI

15. Sebelum melakukan test jangan lupa untuk menutup program yang dijalankan tadi

16. Lalu untuk melakukan test anda cukup klik kanan pada method yang baru digenerate oleh Visual Studio 2010 tersebut lalu pilih Run Tests

17. Proses GUI Testing akan terlaksana secara otomatis (jangan menyentuh keyboard atau mouse karena akan mengganggu proses testing )
18. Apabila proses testing berjalan dengan baik maka akan keluar tanda passed pada Test Result di Visual Studio anda

19. Apabila Anda ingin melakukan test lagi maka anda perlu masuk ke menu Test kemudian pilih Generate Code for Coded UI Test > Use Coded UI Test Builder

Demikian tutorial dari saya mengenai Coded UI Test pada Visual Studio 2010

Selamat mencoba

Tutorial Posting Wordpress Menggunakan Windows Live Writer

2010-11-26T05:31:00Z

Mungkin sudah banyak yang tahu mengenai penggunaan Windows Live Writer untuk menulis artikel di blog students ini. Namun pada tulisan kali ini saya mencoba berbagi mengenai penggunaan Windows Live Writer pada blog account lainnya, yang cukup terkenal juga, seperti Wordpress.

Pertama-tama mari kita ketahui terlebih dahulu apa itu Windows Live Writer. Windows Live Writer merupakan aplikasi Microsoft untuk post dan manajemen blog. Dengan menggunakan aplikasi ini anda dapat menuliskan blog secara offline dan mempublishkannya kemudian. Banyak terdapat tools yang dapat membantu kita dalam membuat suatu artikel blog menjadi lebih mudah seperti:

Penggunaan themes pada blog anda secara WYSIWIG
Manipulasi gambar
Spell checker
Terdapat tabel HTML
Terdapat Virtual Earth
dan masih banyak lagi

Lalu cara menggunakan aplikasi ini akan saya tunjukkan kepada anda melalui artikel ini. Berikut adalah langkah-langkahnya: Download dan install aplikasi Windows Live Writer pada link berikut http://explore.live.com/windows-live-writer?os=other Setelah Windows Live Writer-nya terbuka, masuk ke menu “Blogs” –> “Add blog account”. Lalu pilih Wordpress. Kemudian masukkan alamat blog anda pada menu ini dan jangan lupa untuk memasukkan username dan password blog anda Setelah itu akan muncul jendela seperti di bawah ini. Hal ini menunjukkan anda telah berhasil dan aplikasi sedang melakukan sinkronisasi dengan blog anda. Setelah menunggu kemudian akan muncul jendela berikut yang menunjukkan anda telah siap untuk melakukan posting pada Wordpress . Ketikkan artikel anda kemudian klik "Publish". Demikian tutorial saya kali ini mengenai Windows Live Writer yang merupakan salah satu aplikasi dari Microsoft yang tentu saja akan sangat mempermudah kita dalam melakukan posting pada blog dan juga akan membuat aktifitas blogging menjadi lebih menyenangkan bukan. Saya sendiri telah mencobanya untuk melakukan posting di blog saya, seperti postingan untuk artikel ini juga saya posting menggunakan Windows Live Writer . Sekian dan semoga membantu

Unit Testing ASP.NET MVC 2 dengan Visual Studio 2010

2010-11-23T23:56:00Z

Pada kesempatan kali ini saya akan memaparkan mengenai Unit Testing pada Visual Studio 2010 yang berjalan pada OS Windows XP SP 3
Pada Unit Testing pertama-tama anda harus mempersiapkan aplikasi anda yang akan ditesting berikut dengan dokumen-dokumennya seperti usecase dan sequence diagram serta Test Skenario nya dimana yang telah saya paparkan pada artikel sebelumnya dan anda juga dapat dengan mudah melakukan generate sequence diagram seperti pada tutorial sebelumnya

Dalam tutorial ini saya menggunakan aplikasi ASP.NET MVC 2. Framework ASP.NET MVC sendiri telah dirancang agar mudah digunakan dengan objek mock yang diperlukan dalam unit testing tertentu. Mock adalah objek-objek yang sengaja diciptakan untuk meniru objek yang sesungguhnya, namun jauh lebih sederhana dan bisa dikondisikan dengan konteks test unit tertentu. Objek-objek yang sering di-mock dalam sebuah program web diantaranya adalah HTTP Context, HTTP Request, dan HTTP Response. Oleh karena itu anda membutuhkan library Moq untuk keperluan pembuatan mocking terhadap objek. Library Moq versi terbaru bisa di-download dari alamat berikut ini: http://code.google.com/p/moq/ dan anda juga membutuhkan MvcMockHelpers yang dapat anda lihat di sini atau ini. Selanjutnya buka aplikasi anda :)

Langkah-langkahnya adalah sebagai berikut:

1. Buka project ASP.NET MVC 2 anda pada Visual Studio 2010

2. Pilih menu Test, lalu new test

3. Lalu akan keluar sebuah windows dimana anda harus memilih Unit Test Wizard dan isikan nama project test anda, dalam tutorial ini saya mengisikan MvcMusicStore.Tests, lalu klik Create

4. Setelah itu akan muncul windows lagi dimana anda harus memilih method pada project anda yang akan anda test, pada tutorial ini saya akan mengetes method LogOn() yang digunakan untuk Login, lalu klik OK

5. Kemudian secara otomatis Visual Studio 2010 akan melakukan generate pada program test anda.

6. Namun karena kita akan melakukan testing terhadap ASP.NET MVC 2, maka kita tidak akan bisa menggunakan code dasar yang di-generate oleh Visual Studio 2010. Yang anda harus lakukan adalah memberikan code sebagai berikut pada method tersebut:

1:  // Setup  
2:        var formsAuthenticationMock = new Mock<IFormsAuthenticationService>();  
3:        var membershipProviderMock = new Mock<IMembershipService>();  
4:        AccountController target = new AccountController(formsAuthenticationMock.Object, membershipProviderMock.Object);  
5:        target.SetFakeControllerContext();  
6:        // Execute  
7:        ViewResult result = target.LogOn() as ViewResult;  
8:        // Verify  
9:        ViewDataDictionary viewData = result.ViewData;  
10:        Assert.AreEqual("LoginGet", viewData["Title"]);  
11:        Assert.AreEqual(1, viewData.Count);

7. Setelah itu jangan lupa anda perlu menghapus code bagian ini pada method tersebut, karena testing akan berjalan bukan pada browser.

1:  [HostType("ASP.NET")]  
2:      [AspNetDevelopmentServerHost("C:\\Documents and Settings\\Alexander Rahardjo\\Desktop\\Verval_MusicStoreMVC\\tutorial\\2\\Source\\MvcMusicStore", "/")]  
3:      [UrlToTest("http://localhost:1397/")]

8. Maka secara keseluruhan code anda akan menjadi seperti ini

1:  [TestMethod()]  
2:      public void LogOnTest()  
3:      {  
4:        // Setup  
5:        var formsAuthenticationMock = new Mock<IFormsAuthenticationService>();  
6:        var membershipProviderMock = new Mock<IMembershipService>();  
7:        AccountController target = new AccountController(formsAuthenticationMock.Object, membershipProviderMock.Object);  
8:        target.SetFakeControllerContext();  
9:        // Execute  
10:        ViewResult result = target.LogOn() as ViewResult;  
11:        // Verify  
12:        ViewDataDictionary viewData = result.ViewData;  
13:        Assert.AreEqual("LoginGet", viewData["Title"]);  
14:        Assert.AreEqual(1, viewData.Count);  
15:      }

9. Lalu setelah ini anda perlu melakukan klik kanan pada method yang akan di tes tadi dan pilih Run Tests

10. Dan berikut adalah hasilnya pada Test Results

11. Setelah itu pada tutorial ini saya mengetes 2 method LogOn() yang awalnya saya test adalah LogOn() untuk GET dan sekarang akan saya test LogOn() untuk POST 12. Dan berikut adalah contoh code untuk LogOn() POST:

1:  [TestMethod()]  
2:      public void LogOnTest2()  
3:      {  
4:        //AccountController target = new AccountController(); // TODO: Initialize to an appropriate value  
5:        //ActionResult expected = null; // TODO: Initialize to an appropriate value  
6:        //ActionResult actual;  
7:        //actual = target.LogOff();  
8:        //Assert.AreEqual(expected, actual);  
9:        //Assert.Inconclusive("Verify the correctness of this test method.");  
10:        // Setup  
11:        var formsAuthenticationMock = new Mock<IFormsAuthenticationService>();  
12:        var membershipProviderMock = new Mock<IMembershipService>();  
13:        string username = "Administrator";  
14:        string password = "password123";  
15:        string returnUrl = "StoreManager";  
16:        bool rememberMe = false;  
17:        LogOnModel model = new LogOnModel();  
18:        model.UserName = username;  
19:        model.Password = password;  
20:        model.RememberMe = rememberMe;  
21:        formsAuthenticationMock.Expect(f => f.SignIn(username, rememberMe));  
22:        AccountController target = new AccountController(formsAuthenticationMock.Object, membershipProviderMock.Object);  
23:        target.SetFakeControllerContext();  
24:        target.HttpContext.Request.SetHttpMethodResult("POST");  
25:        //// Execute  
26:        //RedirectToRouteResult result = target.LogOn(model,returnUrl) as RedirectToRouteResult;  
27:        // Execute  
28:        ViewResult result = target.LogOn(model, returnUrl) as ViewResult;  
29:        membershipProviderMock  
30:          .Expect(m => m.ValidateUser(username, password))  
31:          .Returns(true);  
32:        // Verify  
33:        ViewDataDictionary viewData = result.ViewData;  
34:        Assert.AreEqual("LoginPost", viewData["Title"]);  
35:        Assert.AreEqual(1, viewData.Count);  
36:      }

13. Lakukan Run Test lagi dan berikut adalah hasilnya pada Test Results

14. Anda juga dapat menjalankan 2 test tadi sekaligus, caranya adalah dengan pilih menu Tests-->Windows-->Test List Editor

15. Setelah itu akan keluar windows seperti di bawah ini:Anda hanya perlu memilih test mana yang akan anda jalankan, dalam tutorial ini saya menjalankan LogOnTest() dan LogOnTest2()

16. Setelah itu anda perlu mengklik tombol Run Checked Tests pada ujung kiri 17. Dan berikut adalah hasilnya pada Test Results

Demikian tutorial dari saya mengenai Unit Test menggunakan Visual Studio 2010. Selamat mencoba :) Dan untuk testing berikutnya yaitu GUI Testing akan saya paparkan pada artikel berikutnya. GUI Testing akan menggunakan sebuah fitur baru pada Visual Studio 2010 :)

Gathering MSP Regional Jawa Timur - Tunjungan Plaza

2010-11-19T02:15:00Z

Hari Jumat, tanggal 18 November 2010 tepatnya, kami para MSP Regional Jawa Timur baik dari ITS, PENS, dan juga UNAIR berkumpul bersama di Tunjungan Plaza Surabaya. Pada acara kumpul bersama kali ini dihadiri juga oleh Bapak Julius yang memang sengaja datang ke Surabaya untuk mengisi acara Road to Imagine Cup 2011 yang diadakan di Teknik Informatika ITS. Acara kumpul kali ini juga ditujukan untuk saling sharing bersama Bapak Julius dan melakukan persiapan untuk acara Road to Imagine Cup 2011 dan tak kalah pentingnya pada acara kumpul kali ini, kami juga menunjuk MSP Lead Regional Jawa Timur yang baru, yaitu Jeffrey yang menggantikan Vincent yang merupakan MSP Lead periode sebelumnya :). Selamat kepada Jeffrey dan terima kasih banyak kepada Bapak Julius yang telah berkenan hadir dan menjadi sponsor pada acara gathering pada kali ini hehe :). Kami juga tidak lupa foto-foto, berikut adalah fotonya :)

FYI: untuk melihat laporan dari gathering ini dapat berkunjung ke link ini

Road to Imagine Cup 2011 - ITS

2010-11-18T04:25:00Z

Halo teman-teman terutama yang berada di ITS dan PENS, kami Microsoft Students Partner Jawa Timur bekerja sama dengan HMTC akan mengadakan sebuah acara yang kami sebut Road to Imagine Cup 2011, dimana pada acara tersebut akan diisi juga oleh Bapak Julius Fenata selaku Academic Developer Evangelist Microsoft. Pada acara ini juga akan diperkenalkan teknologi-teknologi terbaru dari Microsoft. Penasaran dengan acaranya? Ayo segera mendaftar dan bagi 100 pendaftar pertama akan diberi CD Multipoint.

Untuk mengetahui lebih lanjut mengenai Imagine Cup 2011 itu sendiri bisa dikunjungi di situs ini