tag:blogger.com,1999:blog-38913461705167174442024-03-18T11:03:22.638+08:00Start Codinggaryhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.comBlogger82125tag:blogger.com,1999:blog-3891346170516717444.post-49056504756425335092015-07-13T11:19:00.002+08:002015-07-13T11:19:13.237+08:00Android development in Windows, using Android StudioRecently I have a try on <a href="https://www.android.com/wear/">Android Wear</a> in the workshop, using the sample given from <a href="http://io2015codelabs.appspot.com/codelabs/watchface#1">Google IO</a>. I downloaded the sample and followed the instructions given.<br />
<br />
As the <a href="http://android-developers.blogspot.com/2015/06/an-update-on-eclipse-android-developer.html">official support on Eclipse ADT is going to end soon</a>, I have to pick-up the new skill on the official Android Studio IDE. I was getting this error message after building it, saying:<br />
<br />
<i><span style="font-size: x-small;">Error:Error: com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:\Users\gan\AppData\Local\Android\sdk\build-tools\21.1.2\aapt.exe'' finished with non-zero exit value 42</span></i><br />
<br />
on this file:<br />
<br />
<i><span style="font-size: x-small;">C:\Users\gan\Desktop\gan\project\AndroidStudio\android-codelab-watchface-master\android-codelab-watchface-master\1-base\build\intermediates\exploded-aar\com.google.android.gms\play-services-base\6.5.87\res\drawable-xhdpi\common_signin_btn_text_focus_light.9.png <b><span style="color: red;">ERROR: Unable to open PNG file</span></b></span></i><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1rG4tNQbrJ1xI-VLzapKZHWRO-A30Y4bDg6WxKiEZ5lg1YiZUGi_TpYnD3ChanX8LxO3lMh6DIA0B3zqQnqXTNQRxrqfYjHXACjTkLlkappb2uDZCFq88fiNTAUhxfYpjeUU22punxug/s1600/finished+with+non-zero+exit+value+42.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1rG4tNQbrJ1xI-VLzapKZHWRO-A30Y4bDg6WxKiEZ5lg1YiZUGi_TpYnD3ChanX8LxO3lMh6DIA0B3zqQnqXTNQRxrqfYjHXACjTkLlkappb2uDZCFq88fiNTAUhxfYpjeUU22punxug/s1600/finished+with+non-zero+exit+value+42.png" /></a></div>
<br />
However, other people using SDK version 21 ran fine without error. It is quite weird.<br />
<a href="http://stackoverflow.com/questions/29249986/finished-with-non-zero-exit-value">Some said it's SDK issue, some said it's gradle issue.</a> I have tried few of them but no luck. I also thought it could be this "C:\Users\gan\AppData\Local\Android\sdk\build-tools\21.1.2\aapt.exe" file having execution-right issue, but running it from command-line found no issue at all.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ_PCyRFWNmt8gWk8aoaXbBgKwHY04aVWl0SU_YMsLRwD-GENl_TKkKW7_WvyHSklNDVdE9Z78GK9xmDB1KDR6rForS9kFNw1cB-K0mSgGFBu_vZDHM4fYkumrFSfdG_7UJsSaxAvgJCY/s1600/aapt+from+command+line.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ_PCyRFWNmt8gWk8aoaXbBgKwHY04aVWl0SU_YMsLRwD-GENl_TKkKW7_WvyHSklNDVdE9Z78GK9xmDB1KDR6rForS9kFNw1cB-K0mSgGFBu_vZDHM4fYkumrFSfdG_7UJsSaxAvgJCY/s1600/aapt+from+command+line.png" /></a></div>
<br />
I was suggested by instructor, that it could be this image "<i><span style="font-size: x-small;">common_signin_btn_text_focus_light.9.png</span></i>" was the main culprit. So I was intended to replace with another dummy image. After finding a new dummy file and when I tried to replace it, I was getting another error message from Windows: "Destination Path Too Long"<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNN7UrVAJTo_aGCnwSoTjDtgobO4Nn4UG7BvapfKOLXrIScsPJY64PGKWGLtqj9ei8voVBS-jRLyELWlSI3P0S3ILl-2c6zCfaueE7k7Sinm9WGaWNmqOw4t-UKXkaJfFRZBLHyfA29WI/s1600/Destination+Path+Too+Long.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNN7UrVAJTo_aGCnwSoTjDtgobO4Nn4UG7BvapfKOLXrIScsPJY64PGKWGLtqj9ei8voVBS-jRLyELWlSI3P0S3ILl-2c6zCfaueE7k7Sinm9WGaWNmqOw4t-UKXkaJfFRZBLHyfA29WI/s1600/Destination+Path+Too+Long.png" /></a></div>
<br />
That gave me the idea, it could be the <a href="https://support.microsoft.com/en-us/kb/2891362">Windows OS cannot handle the path which is too long</a>, thus causing the the Android building process failed. By renaming to a shorter name, and it works!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmyV4PN99H4ASk1VDSbqYi1-LvfwwgZHA8km4q-edQOueS-JsH5AYThGXXgbiQsjPSHiJ1zogxhkXk3yQ8myxmnttS30SoQqrcRNZ59WjoCUgrrPfa5kAvE2YiDYIw40pFy4p991qgqPk/s1600/rename+to+a+shorter+name.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmyV4PN99H4ASk1VDSbqYi1-LvfwwgZHA8km4q-edQOueS-JsH5AYThGXXgbiQsjPSHiJ1zogxhkXk3yQ8myxmnttS30SoQqrcRNZ59WjoCUgrrPfa5kAvE2YiDYIw40pFy4p991qgqPk/s1600/rename+to+a+shorter+name.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKj3DyXAqIaDI4aRqWGeoD_21uVvw4ZwSpJjcZe1RuPC426JFooKRpY08heKtpJdvksNXUJL8d2QbzL3DaSrCE5myWNMIXUwdlUwhTtHP21l_OMqkhTSnZiUF1Al5fkx7ImyJWiuiEGFI/s1600/deployed+to+Android+Wear+Simulator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKj3DyXAqIaDI4aRqWGeoD_21uVvw4ZwSpJjcZe1RuPC426JFooKRpY08heKtpJdvksNXUJL8d2QbzL3DaSrCE5myWNMIXUwdlUwhTtHP21l_OMqkhTSnZiUF1Al5fkx7ImyJWiuiEGFI/s1600/deployed+to+Android+Wear+Simulator.png" /></a></div>
garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com5tag:blogger.com,1999:blog-3891346170516717444.post-56772680215193363022015-05-28T18:08:00.002+08:002015-05-28T18:16:52.756+08:00Run Unity-generated android APK file in device, with FB app installed (Part 2)From <a href="http://start-coding.blogspot.com/2015/05/run-unity-generated-android-apk-file-in.html">previous post</a>, now we can proceed to test on the Android device. If you are directly generated the APK, then you are wrong (partially. If your device does not has Facebook app, then it works fine mostly, but it'll not work if other way round)<br />
<br />
1) Make sure you have Android SDK installed. Go to Unity Editor, click on "Build Settings"<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuULhWTjb5sEaySkebcfBMCv0sr3_o3YEdDkJI7eK1rqn-Zpd0mJa8GKsc9wb9yPrxsWVkzc7cl1swCKuip8HiB5Bq0OEjgkU4BKFd6YYI9YvqwG2yMSMFPvezec1Xt-19I7JOVjd2u48/s1600/build+settings.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuULhWTjb5sEaySkebcfBMCv0sr3_o3YEdDkJI7eK1rqn-Zpd0mJa8GKsc9wb9yPrxsWVkzc7cl1swCKuip8HiB5Bq0OEjgkU4BKFd6YYI9YvqwG2yMSMFPvezec1Xt-19I7JOVjd2u48/s1600/build+settings.png" /></a></div>
<br />
2) Add the interactive scene, and click "Android" platform, then click "Player Settings ...". Configure the "Company Name", "Product Name, and "bundle identifier"<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5R3icT6jRi10UtMWHcV75mxcHnn_wOulQLcwC_3p6ZLi6lAo4J_MNeO44H3s5uqYWwA4Hr9844w5SBo9KQkz0YYV22MwTXcqilY-OsV17sYJwA4aqerKFrpt57tlFYoYCgJmalQuOa4U/s1600/bundle+identifier.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="405" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5R3icT6jRi10UtMWHcV75mxcHnn_wOulQLcwC_3p6ZLi6lAo4J_MNeO44H3s5uqYWwA4Hr9844w5SBo9KQkz0YYV22MwTXcqilY-OsV17sYJwA4aqerKFrpt57tlFYoYCgJmalQuOa4U/s640/bundle+identifier.png" width="640" /></a></div>
<br />
3) Click "Build" button in "Build Settings" to generate APK file.<br />
<br />
4) Copy the APK file to your device, and install it. Some of the tools (eg. "<a href="https://play.google.com/store/apps/details?id=com.metago.astro&hl=en">ASTRO File Manager</a>" you might need it. <a href="http://www.android.pk/blog/tutorials/how-to-enable-third-party-apps-installation-on-android-phones/">You need to enable third-party apps installation on android phones too</a>.<br />
<br />
5) After installation is done, launch the app you installed. Click the "FB.Init" and follow by "Login". Everything should be fine.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYF0UcJxoRvFNhy3SHvKzvPnVvUZ4n3rLynQYZywcsNRz8xP3vqBvlP6DSIHSb2Ybqh0lD7A0seNW95xzXZOFfUbHM1k-e0Ky5wdrHdgeUqmiQ_osn50TAwcektDtnLdvO6-F_Sp8VSnc/s1600/facebook+login.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYF0UcJxoRvFNhy3SHvKzvPnVvUZ4n3rLynQYZywcsNRz8xP3vqBvlP6DSIHSb2Ybqh0lD7A0seNW95xzXZOFfUbHM1k-e0Ky5wdrHdgeUqmiQ_osn50TAwcektDtnLdvO6-F_Sp8VSnc/s1600/facebook+login.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIP056ottm__M6LqdI5R1pTYx8xH3OiZoVxE7r8xzjD9QEVEBuRETgAP13Pmi_YPj6U1IIxpG8KiB2-OLF3WSUYYMn7SF4MK7AMkDLIYuDwWVxvQ3DjYVGTAAZE_OSYfGySDJ2EsM3FK8/s1600/facebook+login_02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIP056ottm__M6LqdI5R1pTYx8xH3OiZoVxE7r8xzjD9QEVEBuRETgAP13Pmi_YPj6U1IIxpG8KiB2-OLF3WSUYYMn7SF4MK7AMkDLIYuDwWVxvQ3DjYVGTAAZE_OSYfGySDJ2EsM3FK8/s1600/facebook+login_02.png" /></a></div>
<br />
<br />
6) But if you install <a href="https://play.google.com/store/apps/details?id=com.facebook.katana&hl=en">Facebook app</a> in your device and run the sample interactive apk. This time will fail. <br />
<br />
7) To generate the debug log (idea is from <a href="http://forum.unity3d.com/threads/any-tips-for-debugging-android.70197/#post-448453">here</a>; You might need these tools: <a href="http://developer.android.com/tools/help/adb.html">adb</a>, <a href="http://developer.android.com/tools/help/logcat.html">logcat</a>), connect your device to laptop with cable, and run this in command prompt:<br />
<br />
<b><i><span style="color: blue;">$ adb logcat -d > logcat.txt</span></i></b><br />
<br />
then start the app in device again. Repeat the login process until you hit the login error. Then press <i><b><span style="color: blue;">Ctrl-C</span></b></i> to stop the logging in command prompt.<br />
<br />
8) I saw this message "<i><span style="color: blue;">Login cancelled by player</span></i>" in the log captured. By printing the keyHash sent to server, then I <a href="http://answers.unity3d.com/questions/609810/using-facebook-api-with-android-says-login-is-canc.html">realized</a> it was caused by missing keyhash.<br />
<br />
9) <a href="https://developers.facebook.com/docs/android/getting-started">To run in Andoid, you need to get a keyhash</a>. To get a keyhash, you need <a href="https://slproweb.com/products/Win32OpenSSL.html">OpenSSL</a>.<br />
If you are on Windows, you need to install OpenSSL. If you use 64-bit Windows, download and install "Win64 OpenSSL v1.0.2a". If you use 32-bit Windows, download and install "Win32 OpenSSL v1.0.2a". Make sure you configure the "PATH" variable in "Environment Variables" too. I get the idea <a href="http://answers.unity3d.com/questions/573199/debug-android-hash-key-facebook-sdk.html">here</a>.<br />
(I was reported this step is not needed in MacOS.)<br />
<br />
10) Restart the Unity Editor, Click on "Facebook" menu. This time you go to: "Android Build Facebook Settings". You see the "Debug Android Key Hash" automatically now.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi48yuYrKnXrqsZsyddSfEkxgbjwdNUtcChpLUwRDwzEL2KCKbujH_ecz3ZX5f7JRmRYF7wPY5JR7nPefm72wZLp1oXsTael2KED8RwXpmHAi8f4WeBzM3WE15Ts-_vG-6ya_aFA9yB6uI/s1600/debug+hash+key.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi48yuYrKnXrqsZsyddSfEkxgbjwdNUtcChpLUwRDwzEL2KCKbujH_ecz3ZX5f7JRmRYF7wPY5JR7nPefm72wZLp1oXsTael2KED8RwXpmHAi8f4WeBzM3WE15Ts-_vG-6ya_aFA9yB6uI/s1600/debug+hash+key.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<b>*If you found out you see nothing in the "Debug Android Key Hash" then you probably miss the above step (9), it is needed, as in GetKeyHash() function in "~\Assets\Facebook\Editor\android\FacebookAndroidUtil.cs"</b>(see more <a href="http://answers.unity3d.com/questions/605507/keytool-not-found-while-working-with-facebook.html">here</a>)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI1eLh1Zt9YgsBI-yYJZlzJGltGuqbbScvGeuxfVbAMKqG8c-T2MbfIEdEfv4cB9EBOzplXt_AdzMKn1-g7F4LXgjyaGNbiV9_A2nAb0uN8orAvnf-CEI7oE6xDU1CkRY7w8OMnzwwknA/s1600/empty+keyhash.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI1eLh1Zt9YgsBI-yYJZlzJGltGuqbbScvGeuxfVbAMKqG8c-T2MbfIEdEfv4cB9EBOzplXt_AdzMKn1-g7F4LXgjyaGNbiV9_A2nAb0uN8orAvnf-CEI7oE6xDU1CkRY7w8OMnzwwknA/s1600/empty+keyhash.png" /></a></div>
<br />
* Execute the command can see the same result too(you can use <a href="http://gnuwin32.sourceforge.net/packages/openssl.htm">OpenSSL version 0.9.8h</a> too):<br />
<br />
<b><i><span style="color: blue;">keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | C:\openssl-0.9.8h-1-bin\bin\openssl.exe sha1 -binary | C:\openssl-0.9.8h-1-bin\bin\openssl.exe base64</span></i></b><br />
<br />
default password for debugging purpose is: <b><span style="color: blue;">android</span></b><br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWBxiXEx24NdHr6VFlZfkTeDE2n_fvYmbaQvYvy4twPR9t2kFw380KlcGLB_y6mftQHfgr31dzvFmk9oYJJMZh4keUyokYseWwHMyCww_iRG8Wymlj_QtpMoinh8Nni8wIZ4rPShPjpk/s1600/generate+keyhash.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWBxiXEx24NdHr6VFlZfkTeDE2n_fvYmbaQvYvy4twPR9t2kFw380KlcGLB_y6mftQHfgr31dzvFmk9oYJJMZh4keUyokYseWwHMyCww_iRG8Wymlj_QtpMoinh8Nni8wIZ4rPShPjpk/s1600/generate+keyhash.png" /></a><br />
<br />
11) This time, I built the APK file and run again in device. Still failed. From the debug log, this time I get:<br />
<br />
<i><span style="color: blue;">OnLoginComplete({"cancelled":true})</span></i><br />
<br />
12) I have to go to Facebook developer page again (the one you created early to get the AppId) to add configuration for Android. (got the idea <a href="http://stackoverflow.com/questions/20477229/not-able-to-login-in-my-app-using-fb-unity-sdk-onlogincompletecancelledtr">here</a>) Go to "Settings" and click "Add Platform".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeVN7MxKqcDfe1rL8gckFT5YFgJXOVTxOJxtQkk6sH-Y6wdZ-cm08r4nq1GUTOMIMSEAg2gzV6UXICnOptjTyqG4Z5pQ0AxB9TU5PirsCx4X1am1v_A4kFNWcrVe7g9v9DRYACGdFAiMI/s1600/step_06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeVN7MxKqcDfe1rL8gckFT5YFgJXOVTxOJxtQkk6sH-Y6wdZ-cm08r4nq1GUTOMIMSEAg2gzV6UXICnOptjTyqG4Z5pQ0AxB9TU5PirsCx4X1am1v_A4kFNWcrVe7g9v9DRYACGdFAiMI/s640/step_06.png" width="640" /></a></div>
<br />
13) Choose "Android"<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Tu-R8XCoGcDCoYuDFFYCggD2wOfQMdjMPTuW2B8e2oUMpcfBFOMXWqLbEtKqhhR71tq1Cvlaq_Uh0KxVv-b6dw3wk6_W4ektsFqhpCyhum9g4WMWCbx22CkoX8eMKRb1AXSe9v1iPbw/s1600/step_07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Tu-R8XCoGcDCoYuDFFYCggD2wOfQMdjMPTuW2B8e2oUMpcfBFOMXWqLbEtKqhhR71tq1Cvlaq_Uh0KxVv-b6dw3wk6_W4ektsFqhpCyhum9g4WMWCbx22CkoX8eMKRb1AXSe9v1iPbw/s1600/step_07.png" /></a></div>
<br />
14) Copy all the values "Package Name", "Class Name" and "Debug Android Key Hash" from Unity Editor and paste in the new "Android" setting.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg232struwlzY_BKwFg7LBEjOwK6P6sasQVU-JtEDFY9tU2bz15kHYZhQijLMbcFqH_YvVBxo8pupo8WFQV-D1gHYTWTTDe6XtTzp4Kh9elHzdAbmFX8ae7n3MowndSG1rrhUd38YYOsTc/s1600/step_08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg232struwlzY_BKwFg7LBEjOwK6P6sasQVU-JtEDFY9tU2bz15kHYZhQijLMbcFqH_YvVBxo8pupo8WFQV-D1gHYTWTTDe6XtTzp4Kh9elHzdAbmFX8ae7n3MowndSG1rrhUd38YYOsTc/s1600/step_08.png" /></a></div>
<br />
15) Build the APK again and run from device. This time everything is OK, even with Facebook app installed. (this time the the login pop up will be from Facebook app)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj629iKIF7UNUp9Z7bFNJ7YW04h3Av2TU8Q2FutkxByjSWTddyrDZaFynUz3GgsvJa27ojrMP2YgsECNK9ZZsXq6YfgZjlJp-RZzokGzNc9TH_4qKQH4Gy3kSzrUsIOUzBvM9j0GPQLoi4/s1600/facebook+login_03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj629iKIF7UNUp9Z7bFNJ7YW04h3Av2TU8Q2FutkxByjSWTddyrDZaFynUz3GgsvJa27ojrMP2YgsECNK9ZZsXq6YfgZjlJp-RZzokGzNc9TH_4qKQH4Gy3kSzrUsIOUzBvM9j0GPQLoi4/s1600/facebook+login_03.png" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib1ZEHi1VUD4-o37JpHQVs0MeTk8IjyEAfYddBgZNzbqDiQHufL0x5a6pWuwsvV90nXgAMtLOzqv_fIJGvAQTOl8XCsbrl8ns2Sd1FCOk2fat6IdIJigUs8SuCU1OSjYmNHbR2vI2qnxI/s1600/facebook+login_04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib1ZEHi1VUD4-o37JpHQVs0MeTk8IjyEAfYddBgZNzbqDiQHufL0x5a6pWuwsvV90nXgAMtLOzqv_fIJGvAQTOl8XCsbrl8ns2Sd1FCOk2fat6IdIJigUs8SuCU1OSjYmNHbR2vI2qnxI/s1600/facebook+login_04.png" /></a></div>
<br />
Phew! Finally done.<br />
<br />
<br />
<br />
<br />
<br />
<br />garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com5tag:blogger.com,1999:blog-3891346170516717444.post-50595353527247203352015-05-28T15:33:00.001+08:002015-05-28T18:09:18.490+08:00Run Unity-generated android APK file in device, with FB app installed (Part 1)Recently I switch my focus a bit more to game development. <a href="https://unity3d.com/">Unity</a> is quite a popular tool now, since you can focus more on game design, and <a href="https://unity3d.com/unity/multiplatform">it runs more than 20 platforms</a>. Facebook has release <a href="https://developers.facebook.com/docs/unity">SDK</a> for it as well, so game developer can easily integrate social feature into the game.<br />
<br />
Though it runs on multiple platforms, there's something to be done specifically on certain platform. One of it is Android OS.<br />
<br />
If your Android device has no Facebook app installed, everything is as smooth as silk, but it you has Facebook app installed, your problem comes. There's few helpful <a href="https://developers.facebook.com/docs/unity/getting-started/canvas">videos</a> in Facebook sdk website, however to make it works for almost all circumstances, there's few extra steps to be done. Let's start with basic stuffs first.<br />
<br />
1) Go to <a href="https://developers.facebook.com/docs/unity/downloads">download the latest Facebook-SDK for Unity</a>, at the time of writing it's 6.2.2.<br />
2) Launch Unity 5 and create a new empty project. Import the Facebook-SDK for Unity ("FacebookSDK-150414_6.2.2.unitypackage")<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinaBjK21ygObu2MeTF-iKsdYTVyf62xDEg6nUUnItauaXmg3QDI4RncsJyQlkKzTmFeqdlYI-TxLWwsf-y-DlvyVo7qipf1tua6yvwGEKP0gprh0n_svSlydbTNl4qixIKjCTyH4Fn7dI/s1600/Import+custom+package.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinaBjK21ygObu2MeTF-iKsdYTVyf62xDEg6nUUnItauaXmg3QDI4RncsJyQlkKzTmFeqdlYI-TxLWwsf-y-DlvyVo7qipf1tua6yvwGEKP0gprh0n_svSlydbTNl4qixIKjCTyH4Fn7dI/s1600/Import+custom+package.png" /></a></div>
<br />
<br />
3) The Facebook-SDK for Unity comes with an interactive scene. Go to "Assets>Examples", open the "InteractiveConsole.unity" scene. This is the place you can test all the Facebook APIs, before integrate it with your game.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUMRO4xn9x8Xvq6xGzxcUd9YV-AG03jo8GW6lirW4E0_2JD8YoEnwePHtup5_kxRLQIb2lINhbymvg6nd3BdwPooUmxeD7xQBAEcOba_noWg1rnVFZ5rZrabPLYw-dTAaTZUBzIA06cUI/s1600/Interactive+scene.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUMRO4xn9x8Xvq6xGzxcUd9YV-AG03jo8GW6lirW4E0_2JD8YoEnwePHtup5_kxRLQIb2lINhbymvg6nd3BdwPooUmxeD7xQBAEcOba_noWg1rnVFZ5rZrabPLYw-dTAaTZUBzIA06cUI/s1600/Interactive+scene.png" /></a></div>
<br />
4) To run this in Editor, there's few setup you need to do, as describe it the SDK.<br />
5) First, go to "<a href="https://developers.facebook.com/apps/">https://developers.facebook.com/apps/</a>" and on top menu, click "My Apps">"Add a New App".<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXH0b0mlfSipCE3TgYqX1w37VIC-481PQeRRxiT4dyl9JWicCPWMV6WVo_ES67EcEtaeQgfk3v_z9avqX1eJVd-WHLbwJ2FNYXtBxeN1ZduT_lB2rHjIS_mk6Z6TgCYCHj1-fkoWOoIoE/s1600/step_01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXH0b0mlfSipCE3TgYqX1w37VIC-481PQeRRxiT4dyl9JWicCPWMV6WVo_ES67EcEtaeQgfk3v_z9avqX1eJVd-WHLbwJ2FNYXtBxeN1ZduT_lB2rHjIS_mk6Z6TgCYCHj1-fkoWOoIoE/s1600/step_01.png" /></a></div>
<br />
6) Go to "Advanced setup" for familiar the whole picture.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56_BT1NY7JF-WTBcT7ja3Au2UxMbO1I5qt6RtM6NBEBZOCKChz-IzeOovFwlTu4e5WrYVgq6mlkfgX4VKETS4W60xDCpcvyJ8bvMyTRCWGYnst122wT4eqWNI2tsW8573wTl1lMe5bJk/s1600/step_02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="223" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56_BT1NY7JF-WTBcT7ja3Au2UxMbO1I5qt6RtM6NBEBZOCKChz-IzeOovFwlTu4e5WrYVgq6mlkfgX4VKETS4W60xDCpcvyJ8bvMyTRCWGYnst122wT4eqWNI2tsW8573wTl1lMe5bJk/s400/step_02.png" width="400" /></a></div>
<br />
7) Create a new app id.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHj2xhTH8hG9-MmbOBw_KTenZNOQoF6w3etfFbr2RCxpM74jgOC9t0OVNYnnkc2asVNszG0yAfAPy4Av-tv4972Ks5LSEzeNshqgT-A9Dvimxoo0RgFGa6YIjhEt92lLcIawZeXM3UirU/s1600/step_03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="350" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHj2xhTH8hG9-MmbOBw_KTenZNOQoF6w3etfFbr2RCxpM74jgOC9t0OVNYnnkc2asVNszG0yAfAPy4Av-tv4972Ks5LSEzeNshqgT-A9Dvimxoo0RgFGa6YIjhEt92lLcIawZeXM3UirU/s640/step_03.png" width="640" /></a></div>
<br />
8) You should be brought to the dashboard of the new app you created. You have "App ID" and "App Secret" given, and you need these info later.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsztCXSpBtTPaH9ekgie2L_-xCvs_2vUEwVsve4MlHWWcH_h3PJuRmh7ijsUinaMsk-cIHxb3RwM2e048ojloD0-FojD0-CrHbnY5r489fQ9aqRpWzFZSxbfEkTXePYshtM-l2-yfG8I8/s1600/step_03_01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsztCXSpBtTPaH9ekgie2L_-xCvs_2vUEwVsve4MlHWWcH_h3PJuRmh7ijsUinaMsk-cIHxb3RwM2e048ojloD0-FojD0-CrHbnY5r489fQ9aqRpWzFZSxbfEkTXePYshtM-l2-yfG8I8/s640/step_03_01.png" width="640" /></a></div>
<br />
<br />
9) Go to "Settings", and key-in your email address.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijagFkB_lA7AiZ64YV3tF3Mn4rXTIKYtGoD5M4SGnX74ScXY8tnTeUZjRiPVB6qPaFZN4HnjP-sQr6S4T0mXnYPYUJAAQ_0_Gp2PWDpfuk9MMBtjf_SrHnybmQ5-wxL6C0bCcPUJsmAGM/s1600/step_04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijagFkB_lA7AiZ64YV3tF3Mn4rXTIKYtGoD5M4SGnX74ScXY8tnTeUZjRiPVB6qPaFZN4HnjP-sQr6S4T0mXnYPYUJAAQ_0_Gp2PWDpfuk9MMBtjf_SrHnybmQ5-wxL6C0bCcPUJsmAGM/s640/step_04.png" width="640" /></a></div>
<br />
10) Go to "Status & Review", and make it public. Now these are all the steps to make Facebook SDK run on Unity Editor, but more to come to make it run in Android later.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilqvoBILgLppdYhKDNb3Nvyfu4_G4OE7pGoUdQBx1X9UP9Qh14Ldo5Up4K1oXE7uDIVNYiVK2Y6rW4rWXBqnoHgpLSDZ9bGyXtCU5-cSuTTzkOc0Z6SZBiB_8d9sJEnGRqJV6wNk9W7wI/s1600/step_05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilqvoBILgLppdYhKDNb3Nvyfu4_G4OE7pGoUdQBx1X9UP9Qh14Ldo5Up4K1oXE7uDIVNYiVK2Y6rW4rWXBqnoHgpLSDZ9bGyXtCU5-cSuTTzkOc0Z6SZBiB_8d9sJEnGRqJV6wNk9W7wI/s640/step_05.png" width="640" /></a></div>
<br />
11) Go back to Unity Editor of the project you created just now. By importing the Facebook-SDK for Unity, you should have a "Facebook" menu right now. Click on it, and you should see something in "Inspector" pane. Copy the "App ID" from step (8) and paste in the Inspector section.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0OY0wMj2Zo3xSUN33dHOtbjcwag4aWpUoND_W1NgzCk8QASnCq5FoDCrOhRL-nAv6RuUx2MKRYI2syIuz7b36q4V6Oyq-5YFE70KRjePGAdm0lg03kj_GYP5Xq1gJKSKB4t8KOj1Vgn8/s1600/step_05_01.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0OY0wMj2Zo3xSUN33dHOtbjcwag4aWpUoND_W1NgzCk8QASnCq5FoDCrOhRL-nAv6RuUx2MKRYI2syIuz7b36q4V6Oyq-5YFE70KRjePGAdm0lg03kj_GYP5Xq1gJKSKB4t8KOj1Vgn8/s640/step_05_01.png" width="640" /></a></div>
<br />
12) Click "Play" and you should see the "Game" section is active by now. Click on the "FB.Init" button.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeeC96n8nWEyg1P6wkSOWxi_JruQ2st_RAWmv6_-I8_iyjADpIgNwXCFi1F3bKzka_YCGx91YQAWV_Pru2r6BtqghTmXyoI3KcG43zQr_LVFnepsyadt9WZqSD9LftHx1Q2h8sSSKGw6M/s1600/step_05_02.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeeC96n8nWEyg1P6wkSOWxi_JruQ2st_RAWmv6_-I8_iyjADpIgNwXCFi1F3bKzka_YCGx91YQAWV_Pru2r6BtqghTmXyoI3KcG43zQr_LVFnepsyadt9WZqSD9LftHx1Q2h8sSSKGw6M/s1600/step_05_02.png" /></a></div>
<br />
13) Click the "Login" button, if your AppID is correct. You can see the AppID you pass to Facebook server in the status pane at the top.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxJofRsDpm5AUUxQsSrlVC8gT56U1fDCcj_f0Yr-FhqQuKv-jGL3YU8KZpFKV3i_yGp711AQa9X-UgQBiDKn2GB2WE_EYK0Or_LQst-2DWLuDeu4KqlPfsICkgmHCSXuWixwG_rDmqNW0/s1600/step_05_03.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxJofRsDpm5AUUxQsSrlVC8gT56U1fDCcj_f0Yr-FhqQuKv-jGL3YU8KZpFKV3i_yGp711AQa9X-UgQBiDKn2GB2WE_EYK0Or_LQst-2DWLuDeu4KqlPfsICkgmHCSXuWixwG_rDmqNW0/s1600/step_05_03.png" /></a></div>
<br />
14) In Unity Editor, you will be greeted with another pop-up, click "Find Access Token" to get a valid "User Access Token". Don't worry, this screen will be replaced with Facebook login in actual device.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUoo97GC4LG4hiy_EkVOn3zx_BnRjnb97p5Kw4miD_FL5XNJdbdcsuI2LQYs5YZK5C-dLp1oVjqAMKIp0QVwuABQ8CD3aIlER41Q0iY21WfRG86N7orLJmtxJWcxdotid7C2m5lXNloIM/s1600/step_05_04.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUoo97GC4LG4hiy_EkVOn3zx_BnRjnb97p5Kw4miD_FL5XNJdbdcsuI2LQYs5YZK5C-dLp1oVjqAMKIp0QVwuABQ8CD3aIlER41Q0iY21WfRG86N7orLJmtxJWcxdotid7C2m5lXNloIM/s1600/step_05_04.png" /></a></div>
<br />
15) It will trigger you default OS browser, and see it supplies along with "AppID" again.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3To31u0N0J3repu2tZ7oBetF4K5PZqy8mazVHRN4K9bMj3bL4wpQdoc6iwJTs4m1DrFFNVIFA-Xz72ztyhB04qGuHlun30obPAEHxzHENY_lPs7tPYdvN5wumnUQxN9ITAHbr5gmhPiM/s1600/step_05_05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="329" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3To31u0N0J3repu2tZ7oBetF4K5PZqy8mazVHRN4K9bMj3bL4wpQdoc6iwJTs4m1DrFFNVIFA-Xz72ztyhB04qGuHlun30obPAEHxzHENY_lPs7tPYdvN5wumnUQxN9ITAHbr5gmhPiM/s640/step_05_05.png" width="640" /></a></div>
<br />
16) For the first-time, you will need to grant permission to gain access. Click that hyperlink in the "User Token" section.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0IqaHVxL_T688z4uvO3Bawuqdr4u9rSoU7dh2b-cZ7PbIQBBLwxUurZtRCbpZavGxNy0yJdf3uVijoS9UUqglGtoSndLSqNMjnBIsk_3_6IjyYnft5eX-N3ouFomAfeaY-bx_gHws8oM/s1600/step_05_06.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="203" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0IqaHVxL_T688z4uvO3Bawuqdr4u9rSoU7dh2b-cZ7PbIQBBLwxUurZtRCbpZavGxNy0yJdf3uVijoS9UUqglGtoSndLSqNMjnBIsk_3_6IjyYnft5eX-N3ouFomAfeaY-bx_gHws8oM/s640/step_05_06.png" width="640" /></a></div>
<br />
17) Then it'll tell you the token is created. Click "Continue".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh-PTNyWvIiCQPPg4ATGN_minVovoiV1sbAfOLEl0JKQpuZxfjlIRWaSIu0cC4uQUfmY58XyKBSb7X2cXfDhWOhlH6iBI6MPBQItDD-es1P2LUrbF6P4pfd8BF5AMqR2yQutEHmh1xGJk/s1600/step_05_07.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh-PTNyWvIiCQPPg4ATGN_minVovoiV1sbAfOLEl0JKQpuZxfjlIRWaSIu0cC4uQUfmY58XyKBSb7X2cXfDhWOhlH6iBI6MPBQItDD-es1P2LUrbF6P4pfd8BF5AMqR2yQutEHmh1xGJk/s1600/step_05_07.png" /></a></div>
<br />
18) You will be brought back to previous page, but this time with "User Access Token". Copy this "User Token" value.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCYtGgF0b2ivILPJL50-CgqrZcgqk1RDO6quhEaqzTKzsquzqReE7KgMUqyYzl9jTGowd3R2s0ls4P5yjbb_SREs0zL7wP2YzfR0zydDuXklxs8pFULlINPvEEy7l7cd_omaXCe-8GzfI/s1600/step_05_08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCYtGgF0b2ivILPJL50-CgqrZcgqk1RDO6quhEaqzTKzsquzqReE7KgMUqyYzl9jTGowd3R2s0ls4P5yjbb_SREs0zL7wP2YzfR0zydDuXklxs8pFULlINPvEEy7l7cd_omaXCe-8GzfI/s640/step_05_08.png" width="640" /></a></div>
<br />
19) Paste it in the Unity Editor dialog in step (14) just now.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvJu7_pfbzb7vRmJXbvmWTJ1R6gtacZDaB5GQi_bH5-P2yd9RKJPQWUFEHlj3nul7z9g1H3Y8jBK_MRTERjchAQCMwn0fa7J8qICY24X9pHubLz0IQAEDYairMRQZWp7D5vb-bAlDmWU/s1600/step_05_09.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHvJu7_pfbzb7vRmJXbvmWTJ1R6gtacZDaB5GQi_bH5-P2yd9RKJPQWUFEHlj3nul7z9g1H3Y8jBK_MRTERjchAQCMwn0fa7J8qICY24X9pHubLz0IQAEDYairMRQZWp7D5vb-bAlDmWU/s1600/step_05_09.png" /></a></div>
<br />
20) More button will be revealed in the Editor, if the token is valid. Now you are official logged-in. Feel free to try other function.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqgWJHY6yhz4pPw0LRel815tTGLRAN3DavKqZf9OKWo8eAMtLGAFmrFMqBdUw7OCp3K1wjtbFV2KP4zuMIQjU9Zizq0jrKyOxiBPMhizJRBT2oH-NQoD7R8G24N4uQ-A7K1nCQimtsf0/s1600/step_05_10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqgWJHY6yhz4pPw0LRel815tTGLRAN3DavKqZf9OKWo8eAMtLGAFmrFMqBdUw7OCp3K1wjtbFV2KP4zuMIQjU9Zizq0jrKyOxiBPMhizJRBT2oH-NQoD7R8G24N4uQ-A7K1nCQimtsf0/s1600/step_05_10.png" /></a></div>
<br />
We proceed to test on Android device testing in <a href="http://start-coding.blogspot.com/2015/05/run-unity-generated-android-apk-file-in_28.html">another page</a>.garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com3tag:blogger.com,1999:blog-3891346170516717444.post-89862867988427141752014-06-06T17:30:00.000+08:002014-06-06T23:20:14.240+08:00Folder-like html nested lists & Create your own CSS Icon FontRecent trend saw the rise of mobile technology. In order to accommodate it, websites have to cater mobile users as well. <a href="http://getbootstrap.com/">Bootstrap</a>, the most popular front-end framework for developing responsive, has take to web development to a more elegant way. At the same time, Icon Font has rode along the wave. Two major popular clans of Icon Font is <a href="http://getbootstrap.com/2.3.2/base-css.html#icons">Glyphicons</a> & <a href="http://fortawesome.github.io/Font-Awesome/">Font Awesome</a>. Icon Font comes with a lots of benefits, eg, <a href="http://css-tricks.com/examples/IconFont/">size, color, shape</a>. Why it has such advantages? Reads more.<br />
<br />
I involved in a website, where one of the requirement is to create Folder-like html nested lists. There's some trick to do it, some have introduced at:<br />
1) <a href="http://www.maxdesign.com.au/articles/folder-metaphor/">using image</a> (simple)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWTOBVv_iTIMSsXAJviTfl0ClRqhTr39WQtNIrspBEb2gDYiyktWmv-9IP2gHyyY-XN6uBq3ndom0X5CGocr-jVDX9GYMqtFvhoeoBIt6LxOvZJut4aGMndS03oEm6U2BYwLuGtjaO1eE/s1600/image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWTOBVv_iTIMSsXAJviTfl0ClRqhTr39WQtNIrspBEb2gDYiyktWmv-9IP2gHyyY-XN6uBq3ndom0X5CGocr-jVDX9GYMqtFvhoeoBIt6LxOvZJut4aGMndS03oEm6U2BYwLuGtjaO1eE/s1600/image.png" height="320" width="245" /></a></div>
<br />
2) CSS <a href="http://www.w3schools.com/cssref/css3_pr_background.asp">background</a> property (<a href="http://css-tricks.com/examples/ULStyle/">a bit imagination requires</a>)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNtvvSZ0PHrshZ4_Qw0Q4WWpXEcJxugBUVXyyFj1xoBBttHShhcAXoWq-yqQRnl9STuBs0UlNboMvY3vos5J3rWJml9RocqxPEWtK17Q8Q9q86_NGg5j2bXayzyKxrjrtDm9vrmQXXHoc/s1600/css+trick.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNtvvSZ0PHrshZ4_Qw0Q4WWpXEcJxugBUVXyyFj1xoBBttHShhcAXoWq-yqQRnl9STuBs0UlNboMvY3vos5J3rWJml9RocqxPEWtK17Q8Q9q86_NGg5j2bXayzyKxrjrtDm9vrmQXXHoc/s1600/css+trick.png" height="262" width="320" /></a></div>
<br />
So far no issue, but to apply them on HTML with bootstrap, it really takes a bit extra of time, especially for those people that are not good in CSS, like me. I was looking fast-and-clean approach, something like CSS Icon Fonts, but built-in Glyphicons & Font Awesome does not come with it, Goggling other existing icon font also yields no result.<br />
<br />
Then I bumped into this website, <a href="http://app.fontastic.me/">fontastic</a>, prompting the idea of creating my Icon Font. From here, I found out that it needs .svg file to create icon font. <a href="http://en.wikipedia.org/wiki/Scalable_Vector_Graphics">SVG defines graphics in XML format</a>. Now you know why Icon Font can be sized, since it's vector image. Thus I pick-up the tool, <a href="https://code.google.com/p/svg-edit/">svg-edit</a>, I used before in this <a href="http://start-coding.blogspot.com/2013/08/web-based-javascript-interactive-map.html">post</a>, and start creating the asset. Let's begin.<br />
<br />
1) Download the "svg-edit", extract the zip file and click "svg-editor.html" to load the editor.<br />
2) You'll be welcomed with default blank canvas. Click on the "Rectangle".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkBeG1s81Z-P1I5N-AIyuNEtxSYzC_p6926nGNwQQkCSJ-VSPfxiGLKd3l1w00F7c_fhyphenhyphenkKqlPGxFgOZ33Tcc0uCxZorZN9rghCmIzsjAvBZLhMpLUcr_qlIqXhwenwZRbtNUZohWnYZU/s1600/step+000+use+rect.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkBeG1s81Z-P1I5N-AIyuNEtxSYzC_p6926nGNwQQkCSJ-VSPfxiGLKd3l1w00F7c_fhyphenhyphenkKqlPGxFgOZ33Tcc0uCxZorZN9rghCmIzsjAvBZLhMpLUcr_qlIqXhwenwZRbtNUZohWnYZU/s1600/step+000+use+rect.png" height="320" width="309" /></a></div>
<br />
3) Try to create something like this. As you can see, I create the vertical rectangle over the size of the canvas. If i create with exact fit, it'd be far too small when Icon Font generated later, could be padding or margin issue. Try it yourself. And I found out that the color does not matter now.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLzdkUrV1DpObGUPOpsCejPXZKN6rxlI7sC1230FJWcC5sPIqE-etBfLGWWLZDroP4Vz6dZ4bL_f6Js2R3mNls6JXqXmNSStML6cPwOOilqXFtnasXFCXj71TyADfegxw1hKGq4LoOxPQ/s1600/step+001+create+folder.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLzdkUrV1DpObGUPOpsCejPXZKN6rxlI7sC1230FJWcC5sPIqE-etBfLGWWLZDroP4Vz6dZ4bL_f6Js2R3mNls6JXqXmNSStML6cPwOOilqXFtnasXFCXj71TyADfegxw1hKGq4LoOxPQ/s1600/step+001+create+folder.png" height="464" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
4) When you done, save the file, let's say "m.svg". You can click on the "SVG", and reveal the svg content.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJjmbnaruZZ_O-J38wSz9YoJUDcHzOnXZEotLpUBfQn_3vQiwgn1o7xH6ghLYGeiBt6H8e1sVn_7m4-ocOITWAPte1JsMjqvNcW28gINKSuWlf_-_T1VNGEMyX9CaPltltg6FJnKTVrI/s1600/002+svg+xml.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihJjmbnaruZZ_O-J38wSz9YoJUDcHzOnXZEotLpUBfQn_3vQiwgn1o7xH6ghLYGeiBt6H8e1sVn_7m4-ocOITWAPte1JsMjqvNcW28gINKSuWlf_-_T1VNGEMyX9CaPltltg6FJnKTVrI/s1600/002+svg+xml.png" /></a></div>
<br />
<br />
5) Now the asset is done. Let's go to create the Icon Font at <a href="http://app.fontastic.me/">fontastic</a>.<br />
6) Select "Modify Font" if it default to it, else create new font.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhF7Pq1eBv2otv_60N4L463mSxrML2VLrXURCtRdecY1hNrL50ADVM9Z9xbt0PZxECgTjhw8bkITXVfn4uRrrUfKPhyphenhyphen2Mww86Re0LR3EmCXt0JC5Jag6T1FWS7YafhKkUFD3MdXRDpyI/s1600/step+01+Modify+Font.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXhF7Pq1eBv2otv_60N4L463mSxrML2VLrXURCtRdecY1hNrL50ADVM9Z9xbt0PZxECgTjhw8bkITXVfn4uRrrUfKPhyphenhyphen2Mww86Re0LR3EmCXt0JC5Jag6T1FWS7YafhKkUFD3MdXRDpyI/s1600/step+01+Modify+Font.png" /></a></div>
<br />
<br />
7) Give a descriptive name, this will be the name use in html.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6cPImrH1_UFFYL79KVQ7h-a5nVo3lUWp1J0trzzLe6OdmTu8_s0-9eY-RxRFcmulMsQeYJAorqz2deEXnLlCxAl9NwCnj5crTkdn94_TM5I6TJUnKkPFg8YP7ag9Rbw5Si-gmPo8WYYA/s1600/Step+02+Font+Settings.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6cPImrH1_UFFYL79KVQ7h-a5nVo3lUWp1J0trzzLe6OdmTu8_s0-9eY-RxRFcmulMsQeYJAorqz2deEXnLlCxAl9NwCnj5crTkdn94_TM5I6TJUnKkPFg8YP7ag9Rbw5Si-gmPo8WYYA/s1600/Step+02+Font+Settings.png" height="251" width="320" /></a></div>
<br />
8) Now we import the "m.svg" created early.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfrri7u93BIGox1M2-Dy9m9QF62phEoJ_qw9fCuZZvPUleQfGDKAfLhKfOaTi0CTqtxK7e36O0AgYAKB84dQ2EVjfkuwjLUCLTnzzpOJS5VAgR5BtJVzDw81DQIOgEC_y4lpix7uAdKjA/s1600/Step+03+Import+Icon.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfrri7u93BIGox1M2-Dy9m9QF62phEoJ_qw9fCuZZvPUleQfGDKAfLhKfOaTi0CTqtxK7e36O0AgYAKB84dQ2EVjfkuwjLUCLTnzzpOJS5VAgR5BtJVzDw81DQIOgEC_y4lpix7uAdKjA/s1600/Step+03+Import+Icon.png" /></a></div>
<br />
9) Import successful!<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMGTaW_jH3mLkJEmYtt7DPVUR7T8tMbYNpTKG9BQ4FDj-iPMR2sZEmLO1y4_vmeO6fSgQWhSAGkd_HJGKDdCw497kXQpwDbO5kf8lS5Qw1vFuwPOcM4OGGp4PWNlks3o56NKqX1hkAvRY/s1600/Step+04+Import+success.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMGTaW_jH3mLkJEmYtt7DPVUR7T8tMbYNpTKG9BQ4FDj-iPMR2sZEmLO1y4_vmeO6fSgQWhSAGkd_HJGKDdCw497kXQpwDbO5kf8lS5Qw1vFuwPOcM4OGGp4PWNlks3o56NKqX1hkAvRY/s1600/Step+04+Import+success.png" height="307" width="320" /></a></div>
<br />
10) Preview of our Icon Font. It still looks weird, huh? Bear for while, click "Change set name".<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsyA-kXU7sji-HO0ZWUFwwN1j59S3ubBMDBPX_X3fb33D1wRaN_ihTQQsqsUG38OdB9kZ64_W4EQP_L9H6LF3pWqI9HZoPDEQ67MWecxAT7xRH6PdiEhMcMwhR7J3cvmCAJtlmOPW84mQ/s1600/Step+051+Change+Set+Name.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsyA-kXU7sji-HO0ZWUFwwN1j59S3ubBMDBPX_X3fb33D1wRaN_ihTQQsqsUG38OdB9kZ64_W4EQP_L9H6LF3pWqI9HZoPDEQ67MWecxAT7xRH6PdiEhMcMwhR7J3cvmCAJtlmOPW84mQ/s1600/Step+051+Change+Set+Name.png" height="216" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
11) Change the set name<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0oyj5re-wWus4ydM3MtsuBZhxRNU0i3TC4jLV9pjHhzia9NR0uHLCgBix_2YXVotEhyphenhyphenI6RMHMAPA-tPFVS3lM7xmsGrl_rvh0trCqGrVBnaWXge99X1QvO28qtNFg0j8RiZK2fDNzKc/s1600/Step+06+Give+Set+Name.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz0oyj5re-wWus4ydM3MtsuBZhxRNU0i3TC4jLV9pjHhzia9NR0uHLCgBix_2YXVotEhyphenhyphenI6RMHMAPA-tPFVS3lM7xmsGrl_rvh0trCqGrVBnaWXge99X1QvO28qtNFg0j8RiZK2fDNzKc/s1600/Step+06+Give+Set+Name.png" height="187" width="320" /></a></div>
<br />
<br />
12) Click this set to add to your font, and you can see you have "1" ready to publish.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9GWICOgAToeJ76v3BCTQl9WdWj0guwWTZZqmIb-JjrW9v8YAdfcrkZWmZEo9cBJh5Yzk4uxuUtBprjeUV4zNlzoWx3lEPobmL-que1R5gqR78-gClD8erav2AmE1PVjw9oBSc5ZhhrQ/s1600/Step+071+Click+to+Publish.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-9GWICOgAToeJ76v3BCTQl9WdWj0guwWTZZqmIb-JjrW9v8YAdfcrkZWmZEo9cBJh5Yzk4uxuUtBprjeUV4zNlzoWx3lEPobmL-que1R5gqR78-gClD8erav2AmE1PVjw9oBSc5ZhhrQ/s1600/Step+071+Click+to+Publish.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
13) Click "Publish" tab and click the "Manual Download" button.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvZBZeNqiOz8exz3RNIXrIjxXAsnwaqQOqtXbWRUwb7QOJxgawzQxbrqqlQ1zOnblJuoptDhe7Ed01efxnWZ3RxXyvpXnXVyNkMVfRraUOM5Bldn7Y881r5-E2diya53kNT9S68j0jkyw/s1600/Step+08+Publish+and+Download.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvZBZeNqiOz8exz3RNIXrIjxXAsnwaqQOqtXbWRUwb7QOJxgawzQxbrqqlQ1zOnblJuoptDhe7Ed01efxnWZ3RxXyvpXnXVyNkMVfRraUOM5Bldn7Y881r5-E2diya53kNT9S68j0jkyw/s1600/Step+08+Publish+and+Download.png" /></a></div>
<br />
14) Now you can prepare to add it to your HTML. Let's use one of the very nice bootstrap menu library, <a href="https://github.com/onokumus/metisMenu">metisMenu</a>.<br />
<br />
15) Download it's js library and sample. Add these few lines into the sample html provided by metisMenu.<br />
<br />
<pre class="brush:xml"> <link href="styles.css" rel="stylesheet"></link>
</pre>
<br />
This CSS is for adding extra second-level indentation.
<br />
<pre class="brush:xml">
<style type="text/css">
.sidebar-nav > ul > li > ul > li > ul > li > a > i {
padding-left: 15px;
}
</style>
</pre>
<br />
Add this HTML to all the nested list "li" , and it is for adding the Icon Font generated.
<br />
<pre class="brush:xml"> <i class="icon" data-icon="a"></i>
</pre>
<br />
16) Yeah, a nice folder-like html nested lists you got by now! You can download the <a href="https://onedrive.live.com/?cid=92292CC7B2F5EA6D&id=92292CC7B2F5EA6D%21196">source</a> here.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RX_k-cn15rp_Ralwf_PMU8WdvXdHjQhyhKch8QGcEWazHxR3nBFHKPFai1IgZpwWS0Qlgvn9BSCQ5eWT06IX_K6CgS__rQ1tedi7U6hKRbgEww3SPffbPg7iOG1eG8m5lrDxpntSSVg/s1600/Step+09+Click+to+Publish.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9RX_k-cn15rp_Ralwf_PMU8WdvXdHjQhyhKch8QGcEWazHxR3nBFHKPFai1IgZpwWS0Qlgvn9BSCQ5eWT06IX_K6CgS__rQ1tedi7U6hKRbgEww3SPffbPg7iOG1eG8m5lrDxpntSSVg/s1600/Step+09+Click+to+Publish.png" /></a></div>
<br />
<span style="color: blue; font-size: x-small;"><b>p/s: When you use this Icon Font in Google Chrome browser, you might experience some weird issue. I think Google Chrome use some scaling technique to adjust the web content, so when you enlarge the browser to a special size like "110%", it skewed.</b></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1aDfkVr37z0nk26kMRjKwAlh2icThc7ITlbQuMn8H3Iaro121ymWt6PxIWXbMUQPUMngwGVuXtWZA-tifSPUhLwCoQxqgiFzTZXkt30Mzxro3_5zF4RjMlGNS7dyAP5hYFDfZ6cP6T68/s1600/google+chrome+issue+on+Icon+Font.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1aDfkVr37z0nk26kMRjKwAlh2icThc7ITlbQuMn8H3Iaro121ymWt6PxIWXbMUQPUMngwGVuXtWZA-tifSPUhLwCoQxqgiFzTZXkt30Mzxro3_5zF4RjMlGNS7dyAP5hYFDfZ6cP6T68/s1600/google+chrome+issue+on+Icon+Font.png" height="536" width="640" /></a></div>
<br />
So, you have to apply the fix, for more please follow <a href="http://www.adtrak.co.uk/blog/font-face-chrome-rendering/">this link</a>.<br />
<pre class="brush:javascript">@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'startcoding';
src: url("fonts/startcoding.svg#startcoding") format("svg");
}
}
</pre>
<br />garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com11tag:blogger.com,1999:blog-3891346170516717444.post-23012053091607808302014-06-04T18:13:00.000+08:002014-06-04T23:06:55.853+08:00"HTTP Error 401.3 - Unauthorized" on a unity web player page?Recently, i involved in a project that has to rush to deploy. Since I work in mobile game company, some games have to be able to run in web browser as well. <a href="https://unity3d.com/webplayer">Unity web player</a> usually would be generated by Unity along with a html page, my task was just to link to that page. So, I uploaded the zipped game content using <a href="https://filezilla-project.org/">FileZilla</a> to the Azure server.<br />
<br />
To host in IIS 7.5, and allow ".unity3d" to be downloaded is not an issue, what you need to add is new MIME, as explain <a href="http://forum.unity3d.com/threads/unity-web-player-on-iis-hosting.4841/">here</a>.<br />
<pre class='brush:xml'>
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension=".unity3d" mimeType="application/vnd.unity" />
</staticContent>
</system.webServer>
</configuration>
</pre>
<br />
Easy, huh? I thought so. Then I browse to my page.<br />
Kaboom!<br />
<br />
<span style="color: red; font-size: x-small;"><b>HTTP Error 401.3 - Unauthorized</b></span><br />
<span style="color: red; font-size: x-small;"><b><br /></b></span>
<span style="color: red; font-size: x-small;"><b>You do not have permission to view this directory or page because of the access control list (ACL) configuration or encryption settings for this resource on the Web server.</b></span><br />
<span style="font-size: x-small;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIWaQTV4C3y2ntBPwKuG1FwaFIHd8OrWOp2smQ7EbH6gaQhy8hh7uIazucOF23rQBapOzM9RAoN-MHu5wT4lm1hdSEN2DqH3FQidBR-6s6KkkgCA8NaqTdhrTTlvIVjIOcYtXsWFO18NA/s1600/HTTP+error+401.3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIWaQTV4C3y2ntBPwKuG1FwaFIHd8OrWOp2smQ7EbH6gaQhy8hh7uIazucOF23rQBapOzM9RAoN-MHu5wT4lm1hdSEN2DqH3FQidBR-6s6KkkgCA8NaqTdhrTTlvIVjIOcYtXsWFO18NA/s1600/HTTP+error+401.3.png" height="372" width="640" /></a></div>
<span style="font-size: x-small;"><br /></span>
I just did what's considered normal process, right? As rushing for live, I was cracking my head and wonder what went wrong. Goggling on internet gave me no result which could link error 401.3 with Unity web player. After few hours of trial-and-error, 2 workarounds came into my mind:<br />
<br />
1) <a href="http://support.microsoft.com/kb/981949">Permissions and user rights</a> : I have tried to give full-rights on the folder, but failed.<br />
2) Thinking to write code on <a href="http://support.microsoft.com/kb/306158">Asp.net Impersonation</a>, but it invites security concerns.<br />
<br />
Suddenly, I found something special:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzeLa9wHdmPTg6HZPx72MXg9Rctxwwg6JpHJJ3xVhZXytTQQL2H52wOiUkCPsrRm2jJ5CZNo2K6gOsqRUvaHtpuD495079jE7ksGyHueFd0L9QBRHROgyzB9R5fqZmc1XL3PWO5R272x0/s1600/green+text.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzeLa9wHdmPTg6HZPx72MXg9Rctxwwg6JpHJJ3xVhZXytTQQL2H52wOiUkCPsrRm2jJ5CZNo2K6gOsqRUvaHtpuD495079jE7ksGyHueFd0L9QBRHROgyzB9R5fqZmc1XL3PWO5R272x0/s1600/green+text.png" height="420" width="640" /></a></div>
<br />
<br />
Hey, why the file name is in green color?<br />
And another googling on this, I found out that:<br />
<a href="http://superuser.com/questions/29424/what-do-green-folders-mean-in-windows-7-explorer">Green means encrypted, blue means compressed</a><b style="color: blue; font-size: x-large;"> </b>in Windows.<br />
<br />
The resolution is:<br />
1) Right-click the file, click "Properties"<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvmc_WbXq1oMubf0bTmThrcZrRU6K8SZuAGUp4NUGacBIF27H61bVTLJxC7JN4nokbnFZKgQxDmUuidTC91KXi7OyC0nPrjve20udRy5Qn88Xta6TX3q3mrxcje5XrQPXO0dIR-SuIjI/s1600/Properties.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbvmc_WbXq1oMubf0bTmThrcZrRU6K8SZuAGUp4NUGacBIF27H61bVTLJxC7JN4nokbnFZKgQxDmUuidTC91KXi7OyC0nPrjve20udRy5Qn88Xta6TX3q3mrxcje5XrQPXO0dIR-SuIjI/s1600/Properties.png" height="385" width="640" /></a></div>
<br />
2) Click the "Advanced.." button.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MG1_xqso6JWOHviJLDWypCrMIpHh2NFyfecJm6xLkjc867JSVK9ztPp8K_DSfbbY7F_uwiIvqDWQdGBk68dkBuQurxPUyOwQHb_qcOZpMhzLpbFO9U3HbzLHvWTECw3v1FyhZ12DcAM/s1600/Attribute.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MG1_xqso6JWOHviJLDWypCrMIpHh2NFyfecJm6xLkjc867JSVK9ztPp8K_DSfbbY7F_uwiIvqDWQdGBk68dkBuQurxPUyOwQHb_qcOZpMhzLpbFO9U3HbzLHvWTECw3v1FyhZ12DcAM/s1600/Attribute.png" height="640" width="464" /></a></div>
<br />
3) On the "Compress or Encrypt attributes" section, un-check the "Encrypt contents to secure data"<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzzt8wiEhC_4eYEtjktfQ5Uvc4zQ8T-PGfeRXkZOQxtps5UwCv9TVCMtfw6YX0qth6kOLMjo4GpYo48b4AqbvY49_BG6uY3fzHw9jKZor8n6XQaQJLAnoQ3c_IfrO4h3PFaYbDNtnqvJM/s1600/Advanced+Attributes.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzzt8wiEhC_4eYEtjktfQ5Uvc4zQ8T-PGfeRXkZOQxtps5UwCv9TVCMtfw6YX0qth6kOLMjo4GpYo48b4AqbvY49_BG6uY3fzHw9jKZor8n6XQaQJLAnoQ3c_IfrO4h3PFaYbDNtnqvJM/s1600/Advanced+Attributes.png" height="297" width="400" /></a></div>
<br />
After the decryption, the text becomes normal black color.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Oyd4Yncw5liNP-oycG5hmBYgMAw8FC3KmlC4LP1UKf58yQ-iBgWN6YtbEAdfYU81gGeIRBhEifO4EDtHOf-iwviG9UAUKWrPG7HhpUVR5WO2dXFMdeG8vRlD8j1162tFNX3icbxZ1hA/s1600/black+text.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Oyd4Yncw5liNP-oycG5hmBYgMAw8FC3KmlC4LP1UKf58yQ-iBgWN6YtbEAdfYU81gGeIRBhEifO4EDtHOf-iwviG9UAUKWrPG7HhpUVR5WO2dXFMdeG8vRlD8j1162tFNX3icbxZ1hA/s1600/black+text.png" height="329" width="640" /></a></div>
<br />
And refresh the browser again, it's ok.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgICCdDTBBuAoTsIIZh1EvAbOeQliNMSkGUcl9WHmUczGKZpwTfrD2kzgROfSikCz1SHAYM7HnHAwxmhUC7dE4WzCqbo4UJKBXojJqlT2IPGGzaSUcQMPFVopy0vWsACZxv355OVprtDoA/s1600/unity+web+player.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgICCdDTBBuAoTsIIZh1EvAbOeQliNMSkGUcl9WHmUczGKZpwTfrD2kzgROfSikCz1SHAYM7HnHAwxmhUC7dE4WzCqbo4UJKBXojJqlT2IPGGzaSUcQMPFVopy0vWsACZxv355OVprtDoA/s1600/unity+web+player.png" height="440" width="640" /></a></div>
<br />
I found out that:<br />
1) when i uploaded the zipped content thru' FileZilla, then this encryption will happen. It must be caused by the FTP issue.<br />
2) when i uploaded the extracted content thru' FileZilla, no issue.<br />
<br />
<br />garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-68792687532246877252014-04-15T13:00:00.002+08:002014-04-15T13:00:46.545+08:00Private domain SSL setup on Winodws Azure VMNine years of programming life, and finally I got the chance to setup the domain & SSL on my own. Usually I work in enterprises, this will be done by MIS guy and programmer will be shut-off from production environment. With the new job and as a new back-end department pioneer, here comes the opportunities.<br />
<br />
For the first few steps, I'll show more on hosting with Windows Azure, if any other hosting company, the steps will be roughly the same.<br />
<br />
1) <b>Hosting with Windows Azure</b>: You have to purchase a cloud server. My case I use: <a href="http://azure.microsoft.com/en-us/">http://azure.microsoft.com/en-us/</a>. You can start with trial plan but it will not last long, at most few days only. Here're the few links you can start with:<br />
<br />
<ul>
<li><a href="http://azure.microsoft.com/en-us/documentation/articles/virtual-machines-provision-sql-server/">http://azure.microsoft.com/en-us/documentation/articles/virtual-machines-provision-sql-server/</a></li>
<li><a href="http://azure.microsoft.com/en-us/documentation/articles/virtual-machines-windows-tutorial/">http://azure.microsoft.com/en-us/documentation/articles/virtual-machines-windows-tutorial/</a></li>
</ul>
<br />
<b><span style="color: red;">It's highly recommended that you use new IE (I use IE9) for accessing Windows Azure, even for service payment. Most of the standard browsers do not work well with IE-only Windows Azure.</span></b><br />
<br />
2) <b>Hosting with Windows Azure</b>: Your web binary files can be deployed through FTP, and this is the steps: <a href="http://www.intstrings.com/ramivemula/articles/enable-ftp-access-on-windows-azure-vm/">http://www.intstrings.com/ramivemula/articles/enable-ftp-access-on-windows-azure-vm/</a><br />
<br />
3) <b>Hosting with Windows Azure</b>: Remember to open the Azure HTTPS endpoints (usually is port 443) of the server:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwwFG3IlXeweVCnIyWX-7f11BK-oBlJZj84imryoeT3Oprx83OE1uyUwJEobkCEPtkJloV3FBeZMuCJ1cfaeZaE3sDzVLukpL_LMNHWDOnWODTPnZEz6P3zpfLernFmZPy4JaIZ_9ET8/s1600/Azure+End+Points+for+HTTPS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwwFG3IlXeweVCnIyWX-7f11BK-oBlJZj84imryoeT3Oprx83OE1uyUwJEobkCEPtkJloV3FBeZMuCJ1cfaeZaE3sDzVLukpL_LMNHWDOnWODTPnZEz6P3zpfLernFmZPy4JaIZ_9ET8/s1600/Azure+End+Points+for+HTTPS.png" height="346" width="640" /></a></div>
<br />
4) <b>Domain with GoDaddy</b>: For hosting with Azure server, you'll get a sub-domain that looks like this: xxx.cloudapp.net. But for a HTTPS to be worked, you need your own private domain. No choice but have to buy one. My company bought one at: <a href="http://my.godaddy.com/">http://my.godaddy.com/</a>. Mind you, there's no such thing called customer service in GoDaddy, everything is on your own. When you get the domain, go to: <a href="https://mya.godaddy.com/default.aspx?prog_id=GoDaddy&">https://mya.godaddy.com/default.aspx?prog_id=GoDaddy&</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpp1m_CL_rYgN7RG5C2H15Kq-dYHZKfCkLxbCTl8IECASHFNZacmb-mLNiScryDphsxsN1yhwCHKGcprAOfFD9C8vpDxURMI2q5XipsYic1rdaz8x4v9T3Y6EcZjG5wVbJglD3WHJUCgw/s1600/GoDaddy+domain.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpp1m_CL_rYgN7RG5C2H15Kq-dYHZKfCkLxbCTl8IECASHFNZacmb-mLNiScryDphsxsN1yhwCHKGcprAOfFD9C8vpDxURMI2q5XipsYic1rdaz8x4v9T3Y6EcZjG5wVbJglD3WHJUCgw/s1600/GoDaddy+domain.png" height="248" width="640" /></a></div>
<br />
Click on the "Launch" near the domain and you will see the domain you purchased.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQqZpUBFXzYQQRVLXdet2D1aCMcZ_pZ6NyX622tLGBtBbWJZIKGIJR9xH-urznwbzXpgSDFMb3u9OHs2AGjJX9gM1yq9ENez45Ykq52d8vjlsc7rGhXOD8eS8oM6JXX1P9Lua3VvL-Aw/s1600/domain+list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQqZpUBFXzYQQRVLXdet2D1aCMcZ_pZ6NyX622tLGBtBbWJZIKGIJR9xH-urznwbzXpgSDFMb3u9OHs2AGjJX9gM1yq9ENez45Ykq52d8vjlsc7rGhXOD8eS8oM6JXX1P9Lua3VvL-Aw/s1600/domain+list.png" height="226" width="640" /></a></div>
<br />
5) <b>Domain with GoDaddy</b>: For hooking up the domain and the Windows Azure server, some details is on here: <a href="http://blog.smarx.com/posts/custom-domain-names-in-windows-azure">http://blog.smarx.com/posts/custom-domain-names-in-windows-azure</a>. The latest GoDaddy site might looks like this. Click on the "Manage" near the "Forwarding".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmvnYyAn8oR55KTzjROOuhlnKLYjmhFTFNC77ZzKULkecjwYR5oANx4BgEJxMvDWMny443PblQBP2szTvTv4FX2KyPU89-Y923oZwHKS3k-XH-Faiqdg3zAAWmyY7mJU4XSOi9atI2wP4/s1600/Domain+Forwading.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmvnYyAn8oR55KTzjROOuhlnKLYjmhFTFNC77ZzKULkecjwYR5oANx4BgEJxMvDWMny443PblQBP2szTvTv4FX2KyPU89-Y923oZwHKS3k-XH-Faiqdg3zAAWmyY7mJU4XSOi9atI2wP4/s1600/Domain+Forwading.png" height="636" width="640" /></a></div>
<br />
Add one entry of your domain here.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsthbFKVSbIZWH8tXg1fvvRI1VkpjkSfO60stANSVrPq8ZVJ2ZsJex9Bk3P2BPo5hJKSAR-EWw4_QkXJMQn39prK1YMrcco01m6-HTH-9N8aUsnb4NXMUY1r-Ecl3ZQrK24NGXYbcqFCY/s1600/Forwarding+and+Masking.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsthbFKVSbIZWH8tXg1fvvRI1VkpjkSfO60stANSVrPq8ZVJ2ZsJex9Bk3P2BPo5hJKSAR-EWw4_QkXJMQn39prK1YMrcco01m6-HTH-9N8aUsnb4NXMUY1r-Ecl3ZQrK24NGXYbcqFCY/s1600/Forwarding+and+Masking.png" height="360" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Click on the "DNS Zone". Change the Host,"@" to Windows Azure Virtual IP & CName,"www" to Azure DNS name. You can get this from Windows Azure Dashboard.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFsS03HXLXNXzjGR9lDkvQwMoFHxZIU-isN_HoPevp9CX05_5c2tHaAImnt9pW9vrBaONxKjHcpWuv7nizt8S9h4zEGfJaI69kIbBPLbvGWB4ZC3T6FB81cq__QS1887ELtmPJ7k-8_GY/s1600/Host+and+CName.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFsS03HXLXNXzjGR9lDkvQwMoFHxZIU-isN_HoPevp9CX05_5c2tHaAImnt9pW9vrBaONxKjHcpWuv7nizt8S9h4zEGfJaI69kIbBPLbvGWB4ZC3T6FB81cq__QS1887ELtmPJ7k-8_GY/s1600/Host+and+CName.png" height="548" width="640" /></a></div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgipPI9yjPQ5xjAZXEIBIGEhFa7XFyLlt4QVZqecyFbUjjsxgJZJtBQLGKxw67GY4VegZAh_2BVs8rt1LrpZLd9kR-pvf6O2ULodTClZZ0D9IDr6mmLQvIfT5ofPcghdZaXi10d8ISqrR4/s1600/Azure+Dashboard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgipPI9yjPQ5xjAZXEIBIGEhFa7XFyLlt4QVZqecyFbUjjsxgJZJtBQLGKxw67GY4VegZAh_2BVs8rt1LrpZLd9kR-pvf6O2ULodTClZZ0D9IDr6mmLQvIfT5ofPcghdZaXi10d8ISqrR4/s1600/Azure+Dashboard.png" height="230" width="640" /></a></div>
<br />
<br />
6) <b>Domain & Hosting</b>: After the <a href="http://kb.mediatemple.net/questions/908/Understanding+TTL+(time-to-live)">TTL</a> period, you can go to the website through the domain. You will get the standard IIS welcome page that looks like this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://i.technet.microsoft.com/dynimg/IC387714.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://i.technet.microsoft.com/dynimg/IC387714.gif" height="482" width="640" /></a></div>
<br />
7) <b>Domain & Hosting</b>: You have to go back to Azure IIS and add this domain to the website. Click "Add Web Site".<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW0Tt3HNHP2CqBlmM9mGBA_1dhxggbjusN3x4-mnqnaj5sRHqS6xcVicmlv7Lj76pRcJ0VfsBNCu9SxjqwZe_B-mgROTm4lt-xlUFdyTJ4SY3y7ghCQfG3A0JWQbyKswhEQvttcXfk0fw/s1600/Add+Web+Site.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhW0Tt3HNHP2CqBlmM9mGBA_1dhxggbjusN3x4-mnqnaj5sRHqS6xcVicmlv7Lj76pRcJ0VfsBNCu9SxjqwZe_B-mgROTm4lt-xlUFdyTJ4SY3y7ghCQfG3A0JWQbyKswhEQvttcXfk0fw/s1600/Add+Web+Site.png" height="510" width="640" /></a></div>
<br />
On the new website added, click "Bindings" and key-in the domain info.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWMNDda6IJWOFo96JblngKt94eM5kCJ0HwPMi9I9RlATbSP7gRxydbzvepQlaL2fhyImkrg3Q2bznw-dCTPcbhOuIBZ5EF5jHTHAPpvhyYHhm6Ifj0WSJat_L4ehRlNS68Pp3MotWhTlM/s1600/Add+Binding.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWMNDda6IJWOFo96JblngKt94eM5kCJ0HwPMi9I9RlATbSP7gRxydbzvepQlaL2fhyImkrg3Q2bznw-dCTPcbhOuIBZ5EF5jHTHAPpvhyYHhm6Ifj0WSJat_L4ehRlNS68Pp3MotWhTlM/s1600/Add+Binding.png" height="206" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
And your website should be browsable by now.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaCtFMMCv-6OYj2_-bsUR56cAvoGdmJNybUCIE2dhMnZCs2z4zcFY9NodpxNHbjDUn-xo_gMqMP2NSvrc0jFpPgonO2JsYbx0WRUhf4_gj3N7TfTK4rlQjDkhsk4i_2o0HY-8j3BnQ_1A/s1600/browsable.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaCtFMMCv-6OYj2_-bsUR56cAvoGdmJNybUCIE2dhMnZCs2z4zcFY9NodpxNHbjDUn-xo_gMqMP2NSvrc0jFpPgonO2JsYbx0WRUhf4_gj3N7TfTK4rlQjDkhsk4i_2o0HY-8j3BnQ_1A/s1600/browsable.png" height="374" width="640" /></a></div>
<br />
8) <b>SSL with GoDaddy</b>: Now we come to final part, which is SSL. Purchase the SSL from GoDaddy. Create the certificate by following this link: <a href="http://azure.codegrains.com/2013/07/step-by-step-guide-for-implementing.html">http://azure.codegrains.com/2013/07/step-by-step-guide-for-implementing.html</a> (until step 8). It takes only few minutes for SSL to be signed.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-44_ZxYlMPUn38cUr82zhuJBhvZTB5V479X1XhbAo1w0RNWy_aOhjX75ELYbbKtj_uQLymwo9_gcZ1eIK051n5fwcizPcxrZehsFQafSu-c_Ju-ESBQZz93qvT5oLYc-z5j4k9vCUJ0U/s1600/SSL+cert+is+ready.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-44_ZxYlMPUn38cUr82zhuJBhvZTB5V479X1XhbAo1w0RNWy_aOhjX75ELYbbKtj_uQLymwo9_gcZ1eIK051n5fwcizPcxrZehsFQafSu-c_Ju-ESBQZz93qvT5oLYc-z5j4k9vCUJ0U/s1600/SSL+cert+is+ready.png" height="222" width="640" /></a></div>
<br />
Install the SSL certificate by following this link: [<b>To Install an SSL Certificate in Microsoft IIS 7]</b> <a href="http://support.godaddy.com/help/article/4801/installing-an-ssl-certificate-in-microsoft-iis-7?locale=en&countrysite=my&pc_split_value=4">http://support.godaddy.com/help/article/4801/installing-an-ssl-certificate-in-microsoft-iis-7?locale=en&countrysite=my&pc_split_value=4</a><br />
<br />
9) <b>SSL:</b> Do not forget the HTTPS binding in the new website.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIUv4xQd5Hrw89Lgt154_pws9mbLxwWVDXb9f1x7stuhL-WA4xZz0BePHVEWUAkXVvXcqDfrkS4c8qSD_MXWO-4O0LbzLXpmt01PcrMUUlRCZH1NPIn5okw-CaLfjFC3qir1z6euugRI/s1600/Add+HTTPS+binding.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIUv4xQd5Hrw89Lgt154_pws9mbLxwWVDXb9f1x7stuhL-WA4xZz0BePHVEWUAkXVvXcqDfrkS4c8qSD_MXWO-4O0LbzLXpmt01PcrMUUlRCZH1NPIn5okw-CaLfjFC3qir1z6euugRI/s1600/Add+HTTPS+binding.png" height="416" width="640" /></a></div>
<br />
And your site should be browsable through HTTPS by now.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aASgPBGRM_pcHVsFlpZvHCOC0oSnulJeZbTVyWR7ry61_QNTUTlZLnLy_z4fpp9-bu0gfFNGQTwEfCuByNUu9b96C3vh9Nxc6D8QNp0PPOd2zrLmLqqQdSIRCdC5FtbalrI4-cy7SkM/s1600/HTTPS+browsable.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6aASgPBGRM_pcHVsFlpZvHCOC0oSnulJeZbTVyWR7ry61_QNTUTlZLnLy_z4fpp9-bu0gfFNGQTwEfCuByNUu9b96C3vh9Nxc6D8QNp0PPOd2zrLmLqqQdSIRCdC5FtbalrI4-cy7SkM/s1600/HTTPS+browsable.png" height="384" width="640" /></a></div>
<br />
10) <b>SSL:</b> After the SSL is setup, you can check your SSL security level on your server. Here're the few websites that you can check:<br />
<br />
<ol>
<li><a href="https://sslcheck.casecurity.org/en_US">https://sslcheck.casecurity.org/en_US</a> (you might need to clear your cache after your first run)</li>
<li><a href="https://www.ssllabs.com/ssltest/analyze.html">https://www.ssllabs.com/ssltest/analyze.html</a></li>
<li><a href="http://foundeo.com/products/iis-weak-ssl-ciphers/test.cfm">http://foundeo.com/products/iis-weak-ssl-ciphers/test.cfm</a></li>
</ol>
<br />
<div class="separator" style="clear: both; text-align: left;">
11) <b>SSL:</b> With default settings on Windows Server 2008 R2, most probably you'll be getting an "<span style="color: red; font-size: large;">F</span>".</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD1rXfjU6AZkPw8_r3k8DqPFPLCsVI2rJSvN5uSK7Wg0rg3VhIVX30QdHEs7QiXN7PTrJYFh5h7w7tt18jNzKKhKjWpTZbaXbL0pgZ0XdDCiGY-nOxESBlPQdPJqo4vaM_X_3JdBVMZVU/s1600/F+on+SSL+security+level.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD1rXfjU6AZkPw8_r3k8DqPFPLCsVI2rJSvN5uSK7Wg0rg3VhIVX30QdHEs7QiXN7PTrJYFh5h7w7tt18jNzKKhKjWpTZbaXbL0pgZ0XdDCiGY-nOxESBlPQdPJqo4vaM_X_3JdBVMZVU/s1600/F+on+SSL+security+level.png" height="332" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
it's because of SSL version 2 is not disabled on server. Here're the links that you can refer to.</div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ol>
<li><a href="http://support.microsoft.com/kb/187498">http://support.microsoft.com/kb/187498</a></li>
<li><a href="http://hosting.com/support/pci-security-scan/disable-sslv2-for-microsoft-iis7-under-windows-server-2008-64bit/">http://hosting.com/support/pci-security-scan/disable-sslv2-for-microsoft-iis7-under-windows-server-2008-64bit/</a></li>
<li><a href="http://blogs.msdn.com/b/httpcontext/archive/2012/02/17/how-to-disable-ssl-2-0-on-windows-server-2008-r2.aspx">http://blogs.msdn.com/b/httpcontext/archive/2012/02/17/how-to-disable-ssl-2-0-on-windows-server-2008-r2.aspx</a></li>
</ol>
<div class="separator" style="clear: both; text-align: left;">
12) <b>SSL: </b>After adding new entries on registry and <span style="color: red;"><b>restart the server</b></span>, I got this, a "<span style="color: orange; font-size: large;">B</span>".</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaYeY3e7PHx6WsmfxS2e2xeNOX8ID04fzae5HYjSkmXp13xBeGejDPPsIqbNaLDJDopNwk7unjMVEZA1t3kVyQWf7sJxL7FHqijkF8wy61Vxc18SA_8d4-CaQsIPM-384UD_UJLPsKYWA/s1600/SSL+security+check.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaYeY3e7PHx6WsmfxS2e2xeNOX8ID04fzae5HYjSkmXp13xBeGejDPPsIqbNaLDJDopNwk7unjMVEZA1t3kVyQWf7sJxL7FHqijkF8wy61Vxc18SA_8d4-CaQsIPM-384UD_UJLPsKYWA/s1600/SSL+security+check.png" height="321" width="640" /></a></div>
<br />
13) Done! Phew, what a long way.garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com2tag:blogger.com,1999:blog-3891346170516717444.post-25702134122260825182014-01-02T11:32:00.001+08:002014-01-02T11:45:46.825+08:00Developing a FPS game with Unity3DAlmost after 10-year ago I developed some basic stuffs on OpenGL, I manage to regain some interests on developing a FPS (<a href="http://en.wikipedia.org/wiki/First-person_shooter">First-person shooter</a>) game again. I have to admit I am not an avid-gamer, and just a casual gamer, but it's kinda fun to work on it.<br />
<br />
There're couples of top-notch free 3D game engines in the markets, ie:<br />
<ol>
<li><a href="http://unity3d.com/">Unity</a></li>
<li><a href="http://mycryengine.com/">CryEngine</a></li>
<li><a href="http://www.unrealengine.com/en/udk/">Unreal Development Kit</a> (UDK)</li>
</ol>
and many more. By starting with the game engine, you focus your work on game itself, and not the engine.<br />
<br />
After some tries-and-errors, I chose to start with Unity. Its UI looks simple and the requirement on hardware spec is low, if compare with CryEngine & UDK. The ability to export to multiple platforms, likes Apple's iOS & Google's Android, is also another reason I choose it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__6lOTSib8Vx3hv1tQY-W1cYfgzrkbmTdHrbYroDRnCSI0Mgl-uKU9RBJscxzKpI9JU6AcRGhDg0vMgOHL_6qNO63HEV9ohFAIl0lies4z_m0cGJld_yyN3TVKUM3knRlNgWn6KVadMw/s1600/Unity+UI.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__6lOTSib8Vx3hv1tQY-W1cYfgzrkbmTdHrbYroDRnCSI0Mgl-uKU9RBJscxzKpI9JU6AcRGhDg0vMgOHL_6qNO63HEV9ohFAIl0lies4z_m0cGJld_yyN3TVKUM3knRlNgWn6KVadMw/s640/Unity+UI.png" width="640" /></a></div>
<br />
For those FPS lover, I highly-recommend to try the Unity3D with this book: "<a href="http://www.apress.com/9781430248996">Beginning 3D Game Development with Unity 4</a>", by Sue Blackman. <br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlA6tXeGG96Rf36_Z1L9Jzytol-jh6G99jMAGtenK8lJeidH9QHwOiGm0XDM4D0zWwYYBh9YBMboxDAmiwSG1deHAjaCKnAYQnhfRQSoEzzzInpeGSOXM-uqdd_tj6tfpPGx5bG2Y3eQ/s1600/book+cover.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJlA6tXeGG96Rf36_Z1L9Jzytol-jh6G99jMAGtenK8lJeidH9QHwOiGm0XDM4D0zWwYYBh9YBMboxDAmiwSG1deHAjaCKnAYQnhfRQSoEzzzInpeGSOXM-uqdd_tj6tfpPGx5bG2Y3eQ/s320/book+cover.png" width="260" /></a></div>
<br />
Not only it guides you with some basic concept, it also comes with chapters on building a FPS game on one of the level from scratch. And for the past few months, I was following all the chapters closely and it's quite fun.<br />
<br />
Here are some of the screenshots from the sample of the book (credit to the author)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6P9tAEqkHWU8GX3QsVhAzwXt0PTaadnNWsT6ne7XrhRlEpc9NZ0YIZ4duB36p4RXFy_Hel6vMtElJGi5HRP7SQwjNfkfYTMtrzu48PmxrBDFSR23qVR_ks6XuvtqSu3_hdqPKIQNiak/s1600/intro.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="416" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic6P9tAEqkHWU8GX3QsVhAzwXt0PTaadnNWsT6ne7XrhRlEpc9NZ0YIZ4duB36p4RXFy_Hel6vMtElJGi5HRP7SQwjNfkfYTMtrzu48PmxrBDFSR23qVR_ks6XuvtqSu3_hdqPKIQNiak/s640/intro.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhccsGWBvWRdSKtGV4MeAITVxDErvffsC9tDQgsbPv3O8ymQKQcFGf0PVlNHaytPASjNw8EFCCanZn5_2yvLHNs1pWuClIKoIYFSC-61eRPs7cA9Ih6zJH_HETruP8dDwurLzsxLEWC6SY/s1600/environment.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="402" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhccsGWBvWRdSKtGV4MeAITVxDErvffsC9tDQgsbPv3O8ymQKQcFGf0PVlNHaytPASjNw8EFCCanZn5_2yvLHNs1pWuClIKoIYFSC-61eRPs7cA9Ih6zJH_HETruP8dDwurLzsxLEWC6SY/s640/environment.png" width="640" /></a></div>
<br />
Impressive with the graphics, huh? Why waits then? :)<br />
<br />
You can reach the author <a href="http://3dadventurous.com/">here</a>, and sometimes she is at <a href="http://forum.unity3d.com/threads/199717-Beginning-3D-Game-Development-with-Unity-4">Unity forum</a> as well.<br />
You can read some free excerption from <a href="http://books.google.com.my/books?id=kcC9AAAAQBAJ&printsec=frontcover&dq=Beginning+3D+Game+Development+with+Unity+4&hl=en&sa=X&ei=39vEUtioMYGzrgfhxoCgDw&ved=0CDgQ6AEwAA#v=onepage&q=Beginning%203D%20Game%20Development%20with%20Unity%204&f=false">Google Books</a> too.<br />
<br />
<span style="color: red; font-size: x-small;"><b>Two things bear in mind:</b></span><br />
<ul>
<li><span style="color: red; font-size: x-small;"><b>Unity is getting updated frequently, some of the old features might not available (or even works, a.k.a bugs) in new version. To follow the chapters in this book, please download a suitable version <a href="http://unity3d.com/unity/download/archive">4.2.X</a> from here.</b></span></li>
<li><span style="color: red; font-size: x-small;"><b>There're couple of erratas in the book, my suggestion is: please open the finished chapter along with you own project, side-by-side, to compare whenever something's wrong.</b></span></li>
</ul>
garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-44159452505680923092013-11-12T11:26:00.002+08:002013-11-20T14:03:12.234+08:00Access Denied: XXX needs the following permission(s) to perform this action: View collection-level informationDue to some mis-understanding, my windows account in server that hosts TFS 2010 was deleted, thru 'Computer Management->System Tools->Local Users & Groups'. Then I found I got problem to log-in.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4npTeWooy0vsC26HZ3SKw_J_rdLaWXoaIyda3FDb6AjxmqzIYR-GMTz1r5dOezSZMlrLI4klbdVwaGCY987OZuztVG_AXKRbln3z7vRRLASeGU6II76f7rJj9xlp6LxaxiIVXBa-ZEzk/s1600/Computer+Management.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4npTeWooy0vsC26HZ3SKw_J_rdLaWXoaIyda3FDb6AjxmqzIYR-GMTz1r5dOezSZMlrLI4klbdVwaGCY987OZuztVG_AXKRbln3z7vRRLASeGU6II76f7rJj9xlp6LxaxiIVXBa-ZEzk/s1600/Computer+Management.png" /></a></div>
<br />
After I added my account back, I encountered this error message when connect to VS2010:<br />
<br />
<i>Access Denied: 'XXX\gan' needs the following permission(s) to perform this action: View collection-level information.</i><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSeExenXkoAg8h0diVwu3b7L5_DmbSPoOb47JPkFLTLF-otzsa4uQ2IiJGTW3f1JiFkz1iJW9lRH9ZYOuZlEWX42IeJycWlPGLD4ruHGZK9Qgqb1vMyMw5njyV2I-uyPkmgYD620-_kYs/s1600/View+collection-levle+information.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSeExenXkoAg8h0diVwu3b7L5_DmbSPoOb47JPkFLTLF-otzsa4uQ2IiJGTW3f1JiFkz1iJW9lRH9ZYOuZlEWX42IeJycWlPGLD4ruHGZK9Qgqb1vMyMw5njyV2I-uyPkmgYD620-_kYs/s1600/View+collection-levle+information.png" /></a></div>
<br />
At the TFS server, I launched the "Team Foundation Server Administration Console", I found my windows account is still there. I know my account is not associated with TFS properly anymore.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNAXm5fsDGHjIEeQxu_fQA037xmG_bBL5xg0YQqlAXyT8-s94U_HJ3rb1nY0U_5CvOF0GodS7tN_GW-d0LrvMtLEaYhTYgBNatsVbaJbRj1Qx6Th-gVtivp2hFU1CO7ejw8nr_uIUbgs/s1600/Team+Foundation+Server+Administration+Console.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbNAXm5fsDGHjIEeQxu_fQA037xmG_bBL5xg0YQqlAXyT8-s94U_HJ3rb1nY0U_5CvOF0GodS7tN_GW-d0LrvMtLEaYhTYgBNatsVbaJbRj1Qx6Th-gVtivp2hFU1CO7ejw8nr_uIUbgs/s1600/Team+Foundation+Server+Administration+Console.png" /></a></div>
<br />
From MSDN: <a href="http://msdn.microsoft.com/en-us/library/ms252587(v=vs.100).aspx">Team Foundation Server Permissions</a>, it got something to do with 'Project-Level Permissions':<br />
<br />
<div class="subsection" style="font-family: 'Segoe UI', 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; font-size: 12.800000190734863px; line-height: 13.600000381469727px;">
<div class="caption">
</div>
<div class="tableSection">
<table style="border-collapse: collapse; border: 1px solid rgb(187, 187, 187); padding: 0px; width: 923.2000122070313px;"><tbody>
<tr><th style="background-color: #ededed; border: 1px solid rgb(187, 187, 187); color: #636363; margin: 10px; padding: 10px 8px;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 0px;">
<span class="label">Permission Name</span></div>
</th><th style="background-color: #ededed; border: 1px solid rgb(187, 187, 187); color: #636363; margin: 10px; padding: 10px 8px;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 0px;">
<span class="label">Name at Command Line</span></div>
</th><th style="background-color: #ededed; border: 1px solid rgb(187, 187, 187); color: #636363; margin: 10px; padding: 10px 8px;"><div style="color: #2a2a2a; line-height: 18px; padding-bottom: 0px;">
<span class="label">Description</span></div>
</th></tr>
<tr><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Create test runs</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
PUBLISH_TEST_RESULTS</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Users who have this permission can add and remove test results and add or modify test runs for the team project.</div>
</td></tr>
<tr><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Delete team project</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
DELETE</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Users who have this permission can delete the project for which they have this permission from Team Foundation Server.</div>
</td></tr>
<tr><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Delete test runs</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
DELETE_TEST_RESULTS</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Users who have this permission can delete a scheduled test for this team project.</div>
</td></tr>
<tr><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Edit project-level information</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
GENERIC_WRITE</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Users who have this permission can edit project-level permissions for users and groups on Team Foundation Server.</div>
</td></tr>
<tr><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Manage test configurations</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
MANAGE_TEST_CONFIGURATIONS</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Users who have this permission can create and delete test configurations for this team project.</div>
</td></tr>
<tr><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Manage test environments</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
MANAGE_TEST_ENVIRONMENTS</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Users who have this permission can create and delete test environments for this team project.</div>
</td></tr>
<tr><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
<span style="background-color: yellow;">View project-level information</span></div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
<span style="background-color: yellow;">GENERIC_READ</span></div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
<span style="background-color: yellow;">Users who have this permission can view project-level group membership and the permissions of those project users.</span></div>
</td></tr>
<tr><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
View test runs</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
VIEW_TEST_RESULTS</div>
</td><td style="border: 1px solid rgb(187, 187, 187); color: #2a2a2a; margin: 10px; padding: 10px 8px; vertical-align: top;"><div style="line-height: 18px; padding-bottom: 0px;">
Users who have this permission can view test plans in this node.</div>
<div>
<br /></div>
</td></tr>
</tbody></table>
</div>
</div>
<br />
Browsing from 'Source Control Explorer', I really got no idea whether is my account still there. Can you tell??<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir9mlefpv8E9boxqZ92Psx2Uk6p-V7IsOoP4I6ZB3QRs_V2NqTP7AD-4414NHBuMcxwOpGZuZPPhWF0pQUztGYK9YHauaHZcZWeviEWQSeh5VQhZPJ26Z9juWdyqmpzBIPZZRCrDrK8o4/s1600/new+Source+Control+Explorer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir9mlefpv8E9boxqZ92Psx2Uk6p-V7IsOoP4I6ZB3QRs_V2NqTP7AD-4414NHBuMcxwOpGZuZPPhWF0pQUztGYK9YHauaHZcZWeviEWQSeh5VQhZPJ26Z9juWdyqmpzBIPZZRCrDrK8o4/s1600/new+Source+Control+Explorer.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirLGJ_QrdAa8JoAbEYy8bvjonPknKxHTLthdAyn2zqWShWRbkmc549ar_INSoLomzZuii0uWq7x-8YRZCFp7L4acItzSaXrIFsVwYZSAG5QvMyCyFGe6VEOivKUjAA2RFjyUYJm_8C8r0/s1600/new+Properties.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirLGJ_QrdAa8JoAbEYy8bvjonPknKxHTLthdAyn2zqWShWRbkmc549ar_INSoLomzZuii0uWq7x-8YRZCFp7L4acItzSaXrIFsVwYZSAG5QvMyCyFGe6VEOivKUjAA2RFjyUYJm_8C8r0/s1600/new+Properties.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
No choice, I have to remove and re-add. After adding my windows account in the "Team Foundation Server Administration Console->Administration Console Users-Add", no error logged but my windows account is not there.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhssPzQ0ZC2pJgFYn_BFtcZo7luJ2tFGPnaND0YP0tyNOVy2vsBHe0uQEzAF39_KybOL4fUQ5EDglB1MSqmhh6PKkZtPtSh3_nCvAaYdw3W1Hgf7KbLYEG8enLbDp5u707YW4ccLuqY32M/s1600/Add+Administration+Console+User.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhssPzQ0ZC2pJgFYn_BFtcZo7luJ2tFGPnaND0YP0tyNOVy2vsBHe0uQEzAF39_KybOL4fUQ5EDglB1MSqmhh6PKkZtPtSh3_nCvAaYdw3W1Hgf7KbLYEG8enLbDp5u707YW4ccLuqY32M/s1600/Add+Administration+Console+User.png" /></a></div>
<br />
I opened the log, and found there's an error.<br />
<blockquote class="tr_bq">
<span style="font-size: x-small;"><b>[Info @01:36:05.790] -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.790] Running Readiness Checks ...</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.790] -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.791] </b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.791] -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.791] Activity.Verify</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.792] -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.797] Verify: AccountsChecks(VCONTAINER): Starting Verification</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.797] A generic container node that does not contribute to results</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.797] "Verify: AccountsChecks(VCONTAINER): Exiting Verification with state Ignore and result Ignore"</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.798] Verify: AccountsChecks\Verify Accounts Feature(VCHANGEFEATURE): Starting Verification</b></span><span style="font-size: x-small;"><b>[Info @01:36:05.798] Verifies a condition</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.798] "Verify: AccountsChecks\Verify Accounts Feature(VCHANGEFEATURE): Exiting Verification with state Completed and result Success"</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.798] Verify: AccountsChecks\Verify Accounts Account(VACCOUNTVALID): Starting Verification</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.798] Verifies the account is a valid account</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.799] "Verify: AccountsChecks\Verify Accounts Account(VACCOUNTVALID): Exiting Verification with state Completed and result Success"</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.799] Verify: AccountsChecks\SqlLogin(VSQLLOGIN): Starting Verification</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.799] Verifies the given account does not already have a SQL login that is denied access or with the wrong SID</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.801] Verifying SQL login of account XXX\gan does not exist on XXX\SqlExpress, or if it exists, it does not have a different SID and it is not denied access to the server.</b></span><span style="font-size: x-small;"><b><br />[Error @01:36:05.805] The login for the given account has the wrong SID.</b></span><span style="font-size: x-small;"><b><br />[Error @01:36:05.805] <span style="color: red;">!Verify Error!: TF255441: An orphaned SQL Server login is associated with the following account: XXX\gan. The login has an incorrect security identifier (SID). The server selected to host the databases for Team Foundation Server is: XXX SqlExpress. You must delete the login from the SQL Server instance on that server.</span></b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.805] "Verify: AccountsChecks\SqlLogin(VSQLLOGIN): Exiting Verification with state Completed and result Error"</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.805] Verify: AccountsChecks\DBExists(VDBEXISTS): Starting Verification</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.805] Sql Database Existance Verification</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.809] "Verify: AccountsChecks\DBExists(VDBEXISTS): Exiting Verification with state Completed and result Success"</b></span><span style="font-size: x-small;"><b><br />[Info @01:36:05.809] !Verify Result!: 4 Completed, 0 Skipped: 3 Success, 1 Errors, 0 Warning</b></span></blockquote>
Looks like TFS only cater an account when it does not exist, but it cannot re-create the account due to security issue.<br />
<br />
So, I have to go to MSSQL-Express and remove my windows account.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL1xOTeIl9dkK2wmxrlCJoJbW1OxGPdduar0YevBOZ0Yh4jjOqb8ZiNRHCKoEkDo14zwhHwiLlA7akDBwkO0vfGFDqNvq_W0Ta4fwgxmBP1kyu6dfanG9s41jN3XGY36tkgbCMHydAeCI/s1600/Object+Explorer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL1xOTeIl9dkK2wmxrlCJoJbW1OxGPdduar0YevBOZ0Yh4jjOqb8ZiNRHCKoEkDo14zwhHwiLlA7akDBwkO0vfGFDqNvq_W0Ta4fwgxmBP1kyu6dfanG9s41jN3XGY36tkgbCMHydAeCI/s1600/Object+Explorer.png" /></a></div>
<br />
You can check the DB used in 'Data Tier Summary' at "Team Foundation Server Administration Console" (more info at '<a href="http://msdn.microsoft.com/en-us/library/vstudio/ms400720.aspx">Team Foundation Server Databases</a>'):<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9b9mcMWavoSjYGAl9oNG_DfLM5XkQS5w1C1fom4bbN4jToNo750tO5HizYIZ5_lBcCeIcpzhoshUVigKCKSjxj5RxywZbv5mN-zNQD9N95G1caedkxlxoPponLcSusI72Zg0nqHmk6U8/s1600/Data+Tier+Summary.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9b9mcMWavoSjYGAl9oNG_DfLM5XkQS5w1C1fom4bbN4jToNo750tO5HizYIZ5_lBcCeIcpzhoshUVigKCKSjxj5RxywZbv5mN-zNQD9N95G1caedkxlxoPponLcSusI72Zg0nqHmk6U8/s1600/Data+Tier+Summary.png" /></a></div>
<br />
After adding my windows account again in the "Team Foundation Server Administration Console->Administration Console Users-Add", everything is ok!<br />
<blockquote class="tr_bq">
<b><span style="font-size: x-small;">[Info @01:51:33.399] -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+</span><span style="font-size: x-small;"><br />[Info @01:51:33.399] Adding account to collection databases ...</span><span style="font-size: x-small;"><br />[Info @01:51:33.399] -+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+</span><span style="font-size: x-small;"><br />[Info @01:51:33.400] Getting collections...</span><span style="font-size: x-small;">[Info @01:51:33.401] Changing collection: DefaultCollection</span><span style="font-size: x-small;"><br />[Info @01:51:33.403] ConnectionString: Data Source=XXX\SqlExpress;Initial Catalog=Tfs_DefaultCollection;Integrated Security=True</span><span style="font-size: x-small;"><br />[Info @01:51:33.405] ModifyExecRole: Add:XXX\gan</span><span style="font-size: x-small;"><br />[Info @01:51:34.498] <span style="color: red;">result: Success</span></span><span style="font-size: x-small;"><br />[Info @01:51:34.499] <span style="color: red;">Added XXX\gan to Tfs_DefaultCollection (XXX\SqlExpress)</span></span><span style="font-size: x-small;"><br />[Info @01:51:34.499] Changing collection: YYY</span><span style="font-size: x-small;"><br />[Info @01:51:34.502] ConnectionString: Data Source=XXX\SqlExpress;Initial Catalog=Tfs_YYY;Integrated Security=True</span><span style="font-size: x-small;"><br />[Info @01:51:34.503] ModifyExecRole: Add:XXX\gan</span><span style="font-size: x-small;"><br />[Info @01:51:35.381] <span style="color: red;">result: Success</span></span><span style="font-size: x-small;"><br />[Info @01:51:35.381] <span style="color: red;">Added XXX\gan to Tfs_YYY (XXX\SqlExpress)</span></span><span style="font-size: x-small;"><br />[Info @01:51:35.388] ADDCOLLACCOUNT Completed.</span><span style="font-size: x-small;"><br />[Info @01:51:35.389] Starting Node: ADDSYSTEMDBACCOUNT</span><span style="font-size: x-small;"><br />[Info @01:51:35.389] Add account to system dbs</span></b></blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglL1KEieDXujRkkjGpngEF3Z6RnA1K_FTr0KbHqYS2efkuxc2teftaNKCJjw-igE4EcKASn3owNsTJfH5AfkGEh_hbOFzRI23wQ2yav8tPiyTO2YRp05JFx4nlIirVoQpSGr6hDscD6pM/s1600/VS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglL1KEieDXujRkkjGpngEF3Z6RnA1K_FTr0KbHqYS2efkuxc2teftaNKCJjw-igE4EcKASn3owNsTJfH5AfkGEh_hbOFzRI23wQ2yav8tPiyTO2YRp05JFx4nlIirVoQpSGr6hDscD6pM/s1600/VS.png" /></a></div>
<br />
Done. (You might need to re-map your work-space after this)garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com1tag:blogger.com,1999:blog-3891346170516717444.post-89823991813555991882013-09-26T14:55:00.001+08:002013-09-26T14:57:50.352+08:00Create failed for User 'XXX' when restoring a databaseRecently I was doing the database (let's say: '<i>restoreTest</i>') migration in MSSQL 2008 from one instance to another.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmtz6z6_fBlTEJi83IIuGPgij_wgtSvSBwaZFaX1v4OhmuvIMD1_R4TgZEWCcozAm8vI0ni8DL6i89KiL95-BuILmNzUPqevMI9Kbejo4pFFueIzu17okrLvSELWl1tdkxIZ7SDOfMcws/s1600/Login+Properties.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="555" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmtz6z6_fBlTEJi83IIuGPgij_wgtSvSBwaZFaX1v4OhmuvIMD1_R4TgZEWCcozAm8vI0ni8DL6i89KiL95-BuILmNzUPqevMI9Kbejo4pFFueIzu17okrLvSELWl1tdkxIZ7SDOfMcws/s640/Login+Properties.png" width="640" /></a></div>
<br />
There's an existing login (let's say: '<i>restore</i>' in picture below) that I need to bring along with this '<i>restoreTest</i>' database migration.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK2AoS-wWNs-p4_JgJJqFn3yQIW_sLOZgUt7pmwnGXA1h7VgLZRzK4BBtRieSHYbCITrSQTbXrVd93uGgYXMrbccD210fC2-G6Q8zLpoNpKhOovHdhLf7mCi46RHioXD7CSLp52lbqvnM/s1600/Logins+in+old+server.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK2AoS-wWNs-p4_JgJJqFn3yQIW_sLOZgUt7pmwnGXA1h7VgLZRzK4BBtRieSHYbCITrSQTbXrVd93uGgYXMrbccD210fC2-G6Q8zLpoNpKhOovHdhLf7mCi46RHioXD7CSLp52lbqvnM/s1600/Logins+in+old+server.png" /></a></div>
<br />
1) When I went to create a new login and assign the access-right of the newly-created '<i>restore</i>' account to the new '<i>restoreTest</i>' database restored in the new instance,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0b9bzkfoAoQWNKZMY3bpgLW-9Tfs3nb4P9hx7ilY86jVm1_YdK7aVcQwvcTfCOd-0y_SmIjVXO4clAbCPpridanrecqHHvj-qU3x3g_56mr8f0OW-pAP62lJS6u8fTklMUu_1uYWYk58/s1600/New+Login.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="554" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0b9bzkfoAoQWNKZMY3bpgLW-9Tfs3nb4P9hx7ilY86jVm1_YdK7aVcQwvcTfCOd-0y_SmIjVXO4clAbCPpridanrecqHHvj-qU3x3g_56mr8f0OW-pAP62lJS6u8fTklMUu_1uYWYk58/s640/New+Login.png" width="640" /></a></div>
<br />
2) I encounter this error message:<br />
<br />
Create failed for User 'XXX'<br />
User, group, or role 'XXX' already exists in the current database. (Microsoft SQL Server, Error: 15023)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8InlShmeKAwupu5Utub5x2euOqZd3t5xuP1IfyDDdZfrn6ImNUQoLRMBbFyQoJuFEPLHmmQCMvemDOHWHL0uhy8uJ1T-MIKDnkA8dfIW9-nQq4vKrZz5_RPU8ar2lGBwmyBPq_PuKTTQ/s1600/Create+failed+for+User.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8InlShmeKAwupu5Utub5x2euOqZd3t5xuP1IfyDDdZfrn6ImNUQoLRMBbFyQoJuFEPLHmmQCMvemDOHWHL0uhy8uJ1T-MIKDnkA8dfIW9-nQq4vKrZz5_RPU8ar2lGBwmyBPq_PuKTTQ/s640/Create+failed+for+User.png" width="640" /></a></div>
<br />
3) The new '<i>restore</i>' user is created but it's not associated with '<i>restoreTest</i>' database.<br />
I was so curious what went wrong. After a check, I found the user '<i>restore</i>' was backed-up along with the database.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKyogSPW6-iylEri8bGDuNJ2x0oTRQNzPjvfaSzkIYqJLl_bMATsZDje4Uea8-EeDBGCe8hkUPFdOvTMyfewpaKIK0hQn-fLwC9GEnB4u8O8dOv5SW1TWuVA6KE52uapbTPtoDrmT-DUE/s1600/backup+with+user.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKyogSPW6-iylEri8bGDuNJ2x0oTRQNzPjvfaSzkIYqJLl_bMATsZDje4Uea8-EeDBGCe8hkUPFdOvTMyfewpaKIK0hQn-fLwC9GEnB4u8O8dOv5SW1TWuVA6KE52uapbTPtoDrmT-DUE/s1600/backup+with+user.png" /></a></div>
<br />
4) After I deleted the user '<i>restore</i>' that comes in the newly-restored '<i>restoreTest</i>' database & , and re-assign it, then everything is OK.garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com4tag:blogger.com,1999:blog-3891346170516717444.post-22965913693674205302013-08-26T16:24:00.002+08:002013-09-05T10:38:04.172+08:00Web-based Javascript Interactive map makes easy with SVGRecently I was thinking what else can i come up with, after seeing the successful story of the <a href="http://www.waze.com/">Waze</a>, by using the world map. With the advancement of the html5, it can be done easily with <a href="http://www.w3schools.com/html/html5_canvas.asp">canvas</a> and <a href="http://www.w3schools.com/html/html5_svg.asp">SVG</a>.<br />
<br />
Of course, there's a lot of ready-made powerful tile-based detailed map API, eg.<br />
1) <a href="https://developers.google.com/maps/documentation/javascript/">Google Maps JavaScript API v3</a>.<br />
2) <a href="http://jquerygeo.com/">jquerygeo</a><br />
3) <a href="http://leafletjs.com/">leafletjs</a><br />
<br />
However, the subtleness of them is beyond comparable with svg path-based map, with the aid of GPS and millions of dollars pumps by them.<br />
<br />
Few of the prominent sites in Javascript svg path-based interactive map are:<br />
1) <a href="http://jvectormap.com/">jvectormap</a><br />
2) <a href="http://www.ammap.com/">amMap</a><br />
<br />
So sad that my country of origin, Malaysia, is too small to be included by them. "Hey, why don't I create my own Interactive map", struck my mind.<br />
<br />
Let's get started.<br />
1) I need a map of my country. With the help of <a href="https://www.google.com.my/imghp?hl=en&tab=wi">Google Image Search</a>, there's plenty of them. Any image format will do, the important thing is the plain background. Beware of the infringement of the propriety though.<br />
<br />
2) Once you find the proper image, you can using all sorts of image converting software to turn it into a .svg file. One option is Adobe Illustrator, if you are a designer. If you are just some independent programmer, online tool like <a href="http://vectormagic.com/home">Vector Magic</a>, might be a good friend of you. Choose high-resolution when you do conversion.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUrOgcyXI0YLzjgnnM0_q2bm_fPt4h9klHHH5Waw4I6rLn_i5roiU9Cu-NCKkrbpVHWNwe_KguA1Wm4SstYWyIjC-B81pfKy6Jlyr4kz8Y7-c5kOF_w7pHwHVOwPL4wU_T6bls_TYKNEM/s1600/vectormagic.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="278" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUrOgcyXI0YLzjgnnM0_q2bm_fPt4h9klHHH5Waw4I6rLn_i5roiU9Cu-NCKkrbpVHWNwe_KguA1Wm4SstYWyIjC-B81pfKy6Jlyr4kz8Y7-c5kOF_w7pHwHVOwPL4wU_T6bls_TYKNEM/s640/vectormagic.png" width="640" /></a></div>
<br />
<br />
3) Verify the newly generated .svg file if all the details are there. If not, you can use <a href="http://svg-edit.googlecode.com/svn/branches/2.6/editor/svg-editor.html">SVG-edit</a> to add/remove the detail accordingly. Click on the particular svg-path and give a meaningful id to it. Click twice will allow you to twist the svg-path, that something similar to <a href="http://en.wikipedia.org/wiki/Spline_(mathematics)">spline</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTWqyOhtFU7NDi8PNGUcEgqBMOriWhUyDEdpx5Zq-_CE9_lZ6HokWGYCzBBRxuGy39XmczgiHD8NbvkPvxbhuFTZKivxGvkrkz1JXF5hOfevhqrRR4KTwXEXNnwKA8THBDf6x5GWmlYd8/s1600/SVG-edit.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTWqyOhtFU7NDi8PNGUcEgqBMOriWhUyDEdpx5Zq-_CE9_lZ6HokWGYCzBBRxuGy39XmczgiHD8NbvkPvxbhuFTZKivxGvkrkz1JXF5hOfevhqrRR4KTwXEXNnwKA8THBDf6x5GWmlYd8/s640/SVG-edit.png" width="640" /></a></div>
<br />
4) Embed the svg element in the html page. <a href="http://www.w3schools.com/svg/svg_inhtml.asp">This can be done easily</a>.<br />
<span style="color: red; font-size: x-small;"><b>*You might need to set/clip the width and height on the svg element, due to browser compatibility. See <a href="http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/">more here</a>.</b></span><br />
<br />
5) However, there's no element of interactive there. So we're gonna add it now. What we need are:<br />
<br />
<ul>
<li>display the name of the region when mouse hovers</li>
<li>able to zoom</li>
<li>able to pan</li>
</ul>
<br />
6) To display the name of the region when mouse hovers, we use <a href="http://jquery.com/">jquery</a> and can be achieved easily through following code:<br />
<br />
<pre class="brush: javascript">$(function() {
$(".icon svg path").bind("mouseover", function( evt ) {
var currentMap = evt.target.getAttributeNS(null,'id');
if(currentMap != "background"
&& currentMap != "KualaLumpur_border"
&& currentMap != "Putrajaya_border"){
//$(this).css('fill','blue');
//$("#" + currentMap).removeAttr("fill");
$("#" + currentMap).css('fill','blue');
//evt.target from viewbox; text.text1 from diff cooor; need to offset
// more complicated at: http://msdn.microsoft.com/en-us/library/ie/hh535760(v=vs.85).aspx
var targetedPath = evt.target.getBBox();
$(".icon svg text.text1").css('display','block')
.text(currentMap)
.attr( "x", targetedPath.x + targetedPath.width / 2)
.attr( "y", targetedPath.y + targetedPath.height / 2);
}
})
.bind("mouseleave", function( evt ) {
//IE9 & FF not supported
//var currentMap = evt.target.getAttributeNS(null,'id');
//console.log("mouseleave:" + currentMap);
})
.bind("mouseout", function( evt ) {
var currentMap = evt.target.getAttributeNS(null,'id');
if(currentMap != "background" &&
currentMap != "KualaLumpur_border" &&
currentMap != "Putrajaya_border"){
//$(this).css('fill','c9c9c9');//IE9 & FF not supported
//$("#" + currentMap).css('fill','c9c9c9');//IE9 & FF not supported
var theCurrentMap = document.getElementById(currentMap);
theCurrentMap.setAttribute('style', '');
$(".icon svg text").css('display','none');
}
});
});
</pre>
<br />
<b style="color: red; font-size: small;">*FireFox & IE9 does not fire 'mouseleave' event in the event bubling, so have to bind at </b><b style="color: red; font-size: small;">'mouseout' event</b><b style="color: red; font-size: small;">. See <a href="http://www.mkyong.com/jquery/different-between-mouseout-and-mouseleave-in-jquery/">more here</a>.</b><br />
<b style="color: red; font-size: small;"><br /></b>
7) What it does is loop through all the svg-paths, and bind the mouseover & mouseleave events. When mouse hovers, change the current element's css, then display the id of the region using a svg text on cursor's tip, with the help of the current box selection, <a href="http://msdn.microsoft.com/en-us/library/ie/ff972173(v=vs.85).aspx">getBBox()</a>, . What mouse leaves does is restoring whatever you've done on mouseover event. You might need to <a href="http://api.jquery.com/appendTo/">append</a> this svg text programmatically though.<br />
<pre class="brush:Â html"><text class="text1" fill="#000000" font-family="serif" font-size="24" id="svg_22" stroke-width="0" stroke="#000000" text-anchor="middle" x="101.60001" xml:space="preserve" y="85.20001"></text>
</pre>
<br />
8) To enable the zooming capability, we use the following <a href="http://msdn.microsoft.com/en-us/library/ie/gg589508(v=vs.85).aspx#Putting_It_All_Together">codes</a> when DOM body's loads:
<br />
<pre class="brush:Â javascript">// Must be greater than 1. Increase this value for faster zooming (i.e., less granularity).
var zoomRate = 1.1;
function zoom(zoomType)
{
var theSvgElement = document.getElementById('svgElement');
var viewBox = theSvgElement.getAttribute('viewBox'); // Grab the object representing the SVG element's viewBox attribute.
var viewBoxValues = viewBox.split(' '); // Create an array and insert each individual view box attribute value (assume they're seperated by a single whitespace character).
viewBoxValues[2] = parseFloat(viewBoxValues[2]); // Convert string "numeric" values to actual numeric values.
viewBoxValues[3] = parseFloat(viewBoxValues[3]);
if (zoomType == 'zoomIn')
{
viewBoxValues[2] /= zoomRate; // Decrease the width and height attributes of the viewBox attribute to zoom in.
viewBoxValues[3] /= zoomRate;
}
else if (zoomType == 'zoomOut')
{
viewBoxValues[2] *= zoomRate; // Increase the width and height attributes of the viewBox attribute to zoom out.
viewBoxValues[3] *= zoomRate;
}
else
alert("function zoom(zoomType) given invalid zoomType parameter.");
// Convert the viewBoxValues array into a string with a white space character between the given values.
theSvgElement.setAttribute('viewBox', viewBoxValues.join(' '));
}
function zoomViaMouseWheel(mouseWheelEvent)
{
//check for detail first so Opera uses that instead of wheelDelta
var delta=mouseWheelEvent.detail? mouseWheelEvent.detail*(-120) : mouseWheelEvent.wheelDelta
//if (mouseWheelEvent.wheelDelta > 0)
zoom('zoomIn');
else
zoom('zoomOut');
/* When the mouse is over the webpage, don't let the mouse wheel scroll the entire webpage: */
mouseWheelEvent.cancelBubble = true;
return false;
}
function initialize()
{
/* Add event listeners: */
// Don't let the mousewheel event bubble up to stop native browser window scrolling.
//window.addEventListener('mousewheel', zoomViaMouseWheel, false);
//FF doesn't recognize mousewheel as of FF3.x
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"
if (document.attachEvent) //if IE (and Opera depending on user setting)
document.attachEvent("on"+mousewheelevt, zoomViaMouseWheel)
else if (document.addEventListener) //WC3 browsers
document.addEventListener(mousewheelevt, zoomViaMouseWheel, false)
}
</pre>
<br />
9) What it does is hooking-up the mousewheel event, and change the svg viewbox properties.<br />
<b style="color: red; font-size: small;">*Due to FireFox & Safari handles mousewheel event differently, we have to cater as well. See <a href="http://www.javascriptkit.com/javatutors/onmousewheel.shtml">more here</a>.</b><br />
<b style="color: red; font-size: small;"><br /></b>
10) To enable panning, it needs <a href="http://mojoai.blogspot.com/2010/03/svg-javascript-drag-and-zoom.html">a little more treatment</a>.<br />
<br />
<pre class="brush:Â javascript">// Number of pixels to pan per key press.
var panRate = 10;
var isDragging = false;
var mouseCoords = { x: 0, y: 0 };
function hookEvent(element, eventName, callback)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;
if(eventName == 'mousewheel')
{
element.addEventListener('DOMMouseScroll', callback, false);
}
else
{
element.addEventListener(eventName, callback, false);
}
}
function onMouseDown(e)
{
isDragging = true;
}
function onMouseUp(e)
{
isDragging = false;
}
function onMouseOver(e)
{
mouseCoords = {x: e.clientX, y: e.clientY};
}
function onMouseMove(e)
{
if(isDragging == true)
{
var xd = (e.clientX - mouseCoords.x);
var yd = (e.clientY - mouseCoords.y);
pan(xd, yd)
}
mouseCoords = {x: e.clientX, y: e.clientY};
return cancelEvent(e);
}
function pan(x, y)
{
var theSvgElement = document.getElementById('svgElement');
var viewBox = theSvgElement.getAttribute('viewBox'); // Grab the object representing the SVG element's viewBox attribute.
var viewBoxValues = viewBox.split(' '); // Create an array and insert each individual view box attribute value (assume they're seperated by a single whitespace character).
viewBoxValues[0] = parseFloat(viewBoxValues[0]); // Convert string "numeric" values to actual numeric values.
viewBoxValues[1] = parseFloat(viewBoxValues[1]);
viewBoxValues[0] -= x;//panRate; // Increase the x-coordinate value of the viewBox attribute to pan right.
viewBoxValues[1] -= y;//panRate; // Increase the y-coordinate value of the viewBox attribute to pan down.
theSvgElement.setAttribute('viewBox', viewBoxValues.join(' ')); // Convert the viewBoxValues array into a string with a white space character between the given values.
}
function cancelEvent(e)
{
e = e ? e : window.event;
if(e.stopPropagation)
e.stopPropagation();
if(e.preventDefault)
e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}
function initialize()
{
hookEvent('svgElement', 'mousedown', onMouseDown);
hookEvent('svgElement', 'mouseup', onMouseUp);
hookEvent('svgElement', 'mousemove', onMouseMove);
}
</pre>
<br />
11) What it does is quite similar to mousewheel event. The different is now it uses global variable to check the mouse-down and the distance of mouse move, and eventually apply that to svg viewbox properties.<br />
<br />
12) That's it. Now a javascript interactive map is created. Full codes <a href="https://skydrive.live.com/?cid=92292cc7b2f5ea6d#cid=92292CC7B2F5EA6D&id=92292CC7B2F5EA6D%21200">here</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaOlJxW1hFGq8WxekYL6bk8naUr4yUS32kQTMFEa8zIPXcbZkiRHIn0PxEyelePP2KvR05PSeqzh7D1Zr6LrbQ0Rf-7dXknAtIQWn-3raHO8bR7sz73irrx7itdLJfNU20IeczTMZGTok/s1600/javascript+interative+map.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaOlJxW1hFGq8WxekYL6bk8naUr4yUS32kQTMFEa8zIPXcbZkiRHIn0PxEyelePP2KvR05PSeqzh7D1Zr6LrbQ0Rf-7dXknAtIQWn-3raHO8bR7sz73irrx7itdLJfNU20IeczTMZGTok/s1600/javascript+interative+map.png" /></a></div>
<br />garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-71071697985964129442013-07-11T14:16:00.004+08:002013-07-17T14:28:15.023+08:00Create, Load & Export Module in Node.jsNowadays, javascript development is getting broader in web development.<br />
Either on front-end (<a href="http://jquery.com/">JQuery</a>, <a href="http://knockoutjs.com/">KnockoutJS</a>, <a href="http://www.typescriptlang.org/">TypeScript</a>, etc) or back-end (<a href="http://nodejs.org/">Node.js</a>, ect), more libraries are created with more compact, more light-weight.<br />
<br />
Today, i'll show the basic setup of Node.js.<br />
From wikipedia, <a href="http://en.wikipedia.org/wiki/Nodejs">Node.js is a server-side software system designed for writing scalable Internet applications, notably web servers</a>. It's akin to IIS in Windows, or <a href="http://tomcat.apache.org/">Apache Tomcat</a> in world of Java.<br />
<br />
1) <a href="http://nodejs.org/download/">Download</a> and install from official website.<br />
<br />
2) Upon successful of installation, you should able to see several shortcut created in the "Start" menu.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7XYTRxd6BaqFlNFONJgka4HmfcpG5xVUbVKZb8G9v1ljMCzID4kxCkNghnnj39cs4Y3WuGFiLxkZ8bs28em_t89mY5V0jvzNKu6z6GuOflw4fpCLBjirHhnUTuYRhGiA3W_TMyutnEbA/s1600/shortcut.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7XYTRxd6BaqFlNFONJgka4HmfcpG5xVUbVKZb8G9v1ljMCzID4kxCkNghnnj39cs4Y3WuGFiLxkZ8bs28em_t89mY5V0jvzNKu6z6GuOflw4fpCLBjirHhnUTuYRhGiA3W_TMyutnEbA/s1600/shortcut.png" /></a></div>
<br />
3) Launch the "Node.js" . This is the place where you can issue all the Node.js related commands.<br />
<br />
4) To find out the current execution path, we can execute this "<a href="http://nodejs.org/api/path.html">Path</a>" command:<br />
<br />
<pre class="brush: javascript">process.env.PATH.split(path.delimiter)
</pre>
<br />
5) Two additional environment PATHs are created:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifbvodIHTsiHPM9YXus0UzSB20Zh45r5Q11-QN31wn2yCitvwR8qhG-ydrLdMWV5Pfg3h1wd3NaXhTuOtIaxERFSoTI4ExSZECIZI2LhmYeFAJe80mfUfys33muciiy9TIrCxEZFx8eHU/s1600/process.env.PATH.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="569" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifbvodIHTsiHPM9YXus0UzSB20Zh45r5Q11-QN31wn2yCitvwR8qhG-ydrLdMWV5Pfg3h1wd3NaXhTuOtIaxERFSoTI4ExSZECIZI2LhmYeFAJe80mfUfys33muciiy9TIrCxEZFx8eHU/s640/process.env.PATH.png" width="640" /></a></div>
<br />
6) For "Loading a File Module", create a "circle.js" (see code below) from <a href="http://nodejs.org/api/modules.html#modules_modules">official user manual</a>, and place in Node.js environment PATH:<br />
<br />
<pre class="brush: javascript">var PI = Math.PI;
exports.area = function (r) {
return PI * r * r;
};
exports.circumference = function (r) {
return 2 * PI * r;
};
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi53Tivo3w9lqTk7WhQDSLJC9o8S1LCyqFKDSYjNPeKzrAoMtpqoTVArEh6kNbpoXQu7jG-JpDAVEEYqnzz3rKWTZt6PP7oEliEaguSt1V41eIpNmGW9iu4NrrSgojTnPD683acOZV77_g/s1600/file+relative+location.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="403" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi53Tivo3w9lqTk7WhQDSLJC9o8S1LCyqFKDSYjNPeKzrAoMtpqoTVArEh6kNbpoXQu7jG-JpDAVEEYqnzz3rKWTZt6PP7oEliEaguSt1V41eIpNmGW9iu4NrrSgojTnPD683acOZV77_g/s640/file+relative+location.png" width="640" /></a></div>
<br />
7) Execute this in "Node.js":<br />
<br />
<pre class="brush: javascript">var circle = require('./circle.js');circle.area(4);
</pre>
<br />
8) and you should get your result:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6LYVIyoTbvrKCt3owR5GCUuRXtH8vccU0EeEH9nSVZXMnbQztsJTt1CRtThs14qarbxqzi86vHQ_ndfafeDvkycPDSW0xG6tc7s_4IOXIfQhZ1xQE2rLYInjydShfHepGUtrzOd06xk/s1600/Loading+a+File+Module.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ6LYVIyoTbvrKCt3owR5GCUuRXtH8vccU0EeEH9nSVZXMnbQztsJTt1CRtThs14qarbxqzi86vHQ_ndfafeDvkycPDSW0xG6tc7s_4IOXIfQhZ1xQE2rLYInjydShfHepGUtrzOd06xk/s400/Loading+a+File+Module.png" width="400" /></a></div>
<br />
9) For "Loading a Folder Module" or so called user-defined library, it needs few more steps. Create a folder called "a" in Node.js environment PATH.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjGDCtzr_nYqoKJj-6fLGAtn8vZrba435zHu8ZHhDSNRBxUvzZkwPD44UlclnLdSYzXtQEBks6PhMoUyPFfV9FM9LQAnBJ9PDu5SqTxJmQDeFs8QrLSU6uOf5zUPqbbE2HmZVrijwUhY/s1600/Folder+relative+location.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjGDCtzr_nYqoKJj-6fLGAtn8vZrba435zHu8ZHhDSNRBxUvzZkwPD44UlclnLdSYzXtQEBks6PhMoUyPFfV9FM9LQAnBJ9PDu5SqTxJmQDeFs8QrLSU6uOf5zUPqbbE2HmZVrijwUhY/s1600/Folder+relative+location.png" /></a></div>
<br />
10) Create a file called "package.json" (see code below):<br />
<br />
<pre class="brush: javascript">{
"name" : "some-library",
"main" : "./lib/b.js"
}
</pre>
<br />
11) Create a folder called "lib" in folder "a" and another file called "b.js" (this is the file mentioned above in "package.json"; see code below) in folder "lib":<br />
<br />
<pre class="brush: javascript">console.log('module b initializing...');
var PI = Math.PI;
exports.area = function (r) {
return PI * r * r;
};
exports.circumference = function (r) {
return 2 * PI * r;
};
console.log('b initialized.');
</pre>
<br />
12) Execute the following command:<br />
<br />
<pre class="brush: javascript">var circle = require('./a');circle.area(4);
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-XphCL_6piPoSPtPTPuKXOfGr_vQYP0xkvA_EXnUY1fn7lD1dhosuAWDw6ZcJFvW0R8EifT5V_t1deSL7egAXyLxYVIf34J7n4sM36aGd8wa0IwaUJhPwlmoxDHurhv_L1kq5PgsFPtY/s1600/Loading+a+Folder+Module.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-XphCL_6piPoSPtPTPuKXOfGr_vQYP0xkvA_EXnUY1fn7lD1dhosuAWDw6ZcJFvW0R8EifT5V_t1deSL7egAXyLxYVIf34J7n4sM36aGd8wa0IwaUJhPwlmoxDHurhv_L1kq5PgsFPtY/s1600/Loading+a+Folder+Module.png" /></a></div>
<br />
13) That's it!garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-38546532524162080612013-06-05T14:04:00.003+08:002013-06-07T10:22:54.647+08:00Dynamic columns in listviewCreating a GridView with dynamic columns generated is easy, it even comes without much effort by simply configuring the <a href="http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.gridview.autogeneratecolumns.aspx">AutoGenerateColumns Property</a>. Some even can try to use <a href="http://weblogs.asp.net/andrewrea/archive/2009/03/25/asp-net-dynamic-data-using-column-generators-based-on-meta-data.aspx">Meta-Data</a>.<br />
<br />
However, creating a ListView with dynamic columns needs a bit of trick. Here's the ways:<br />
<br />
1) First, we create a Employee-vs-Vendor table, using the <a href="http://msdn.microsoft.com/en-us/library/ms190766(v=sql.105).aspx">Common Table Expressions(CTE)</a> and <a href="http://msdn.microsoft.com/en-us/library/ms177410(v=sql.105).aspx">PIVOT</a>. Left-join it we get the result in tabular form.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKqaoQzjeXtu2FcGxxhGeKFb07cPixUt2V3qw3h0BNkc9hqYuTF0jrEUXzRNmF7o4lFfu3JBr4idG0R9Siq-WzLJQAORhcD0acPkjaEDOdJzqR_ws86Hqx6xar3EBsWXC7LSwqxay37tQ/s1600/Employee-vs-Vendor+table.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKqaoQzjeXtu2FcGxxhGeKFb07cPixUt2V3qw3h0BNkc9hqYuTF0jrEUXzRNmF7o4lFfu3JBr4idG0R9Siq-WzLJQAORhcD0acPkjaEDOdJzqR_ws86Hqx6xar3EBsWXC7LSwqxay37tQ/s1600/Employee-vs-Vendor+table.png" height="306" width="640" /></a></div>
<br />
2) On the listview layout template, we have to declare a placeholder:<br />
<br />
<pre class="brush: html"><layouttemplate>
<div class="listviewGrid">
<h2 id="lsvCaptionLayout" runat="server">
Employee vs Vendor</h2>
<asp:placeholder id="phDynamicHdr" runat="server">
</asp:placeholder><br />
<table cellpadding="0" cellspacing="0" class="CollapsableExpandable" id="tblViewHdr" style="word-break: break-all; word-wrap: break-word;">
<tbody>
<tr class="head">
</tr>
<tr id="itemPlaceholder" runat="server">
</tr>
</tbody></table>
</div>
</layouttemplate>
</pre>
<br />
the CSS style used is to break the words if you specify too many columns.
<br />
<br />
3) Then in the ItemTemplate, we no need to add extra dynamic columns we want, since it's going to be done programmatically.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUOLM2UaiiR-eNvltn5_hIWy027z_en9X6s33GppNV56WgKwvHid8sxhl5sAYZIAixxhL-qEdVyZTuDmiFOW_79LTFv__-OhSIN8gg5UpiQD9xEZqF9u88JDdcAvb1Z08TEuasOQNkEEY/s1600/ItemTemplate.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUOLM2UaiiR-eNvltn5_hIWy027z_en9X6s33GppNV56WgKwvHid8sxhl5sAYZIAixxhL-qEdVyZTuDmiFOW_79LTFv__-OhSIN8gg5UpiQD9xEZqF9u88JDdcAvb1Z08TEuasOQNkEEY/s1600/ItemTemplate.png" height="160" width="640" /></a></div>
<br />
4) Depends on the level of the query, you have to create a nested ItemTemplate accordingly. I believe this can be done thru' AJAX. However, I leave this to the future.<br />
<br />
5) Then when we start binds the query to the listview, we bind it level-by-level:<br />
<br />
<pre class="brush: csharp">DataTable dt = new DataTable();
dt = ((DataTable)ViewState["cachedTable"]).Clone();
if (((DataTable)ViewState["cachedTable"]).Rows.Count > 0)
{
DataRow[] drResults = ((DataTable)ViewState["cachedTable"]).Select("GENERATION = 0");
foreach (DataRow dr in drResults)
{
object[] row = dr.ItemArray;
dt.Rows.Add(row);
}
}
lsvHighLvlFormAccess.DataSource = dt;
lsvHighLvlFormAccess.DataBind();
</pre>
<br />
6) When highest level binding is done, we can populate the header caption. This is the part when you set the column-span & generate the column header dynamically.<br />
<br />
<pre class="brush: csharp">protected void lsvHighLvlFormAccess_DataBound(object sender, EventArgs e)
{
PlaceHolder phDynamicHdr = (PlaceHolder)lsvHighLvlFormAccess.FindControl("phDynamicHdr");
// check phDynamicHdr.Controls.Count; could be called twice when postback
if (phDynamicHdr != null /*&& phDynamicHdr.Controls.Count == 0*/)
{
Literal ltrl = new Literal();
DataTable dt = ((DataTable)ViewState["cachedTable"]);
if (dt != null && dt.Rows.Count > 0)
{
foreach (DataColumn dc in dt.Rows[0].Table.Columns)
{
if (!(dc.ColumnName.Equals("GENERATION") ||
dc.ColumnName.Equals("hierarchy") ||
dc.ColumnName.Equals("rowNo") ||
dc.ColumnName.Equals("EmployeeID")))
{
if (dc.ColumnName.Equals("LoginID"))
{
ltrl.Text += "" + dc.ColumnName + "
";
}
else
ltrl.Text += "" + dc.ColumnName + "
";
}
}
}
if (phDynamicHdr.Controls.Count > 0)
{
// if current dynamic columns is different with exisiting dynamic columns
if (!((Literal)phDynamicHdr.Controls[0]).Text.Equals(ltrl.Text))
{
// remove the whole previous dynamic columns
phDynamicHdr.Controls.Remove(phDynamicHdr.Controls[0]);
// replace with new dynamic columns
phDynamicHdr.Controls.Add(ltrl);
}
}
else
phDynamicHdr.Controls.Add(ltrl);
}
HtmlTableCell td = (HtmlTableCell)lsvHighLvlFormAccess.FindControl("imgCollapseExpand");
if (td != null)
{
DataTable dt = ((DataTable)ViewState["cachedTable"]);
if (dt != null && dt.Rows.Count > 0)
{
td.ColSpan = dt.Rows[0].Table.Columns.Count + I_COLSPAN - 1;//I_COLSPAN - 1 : to put the 'minus.png'
}
}
}
</pre>
<br />
7) On each high-level row is bound, we need to fire the event to populate its descendant. Here, checkboxes are used. You can replace with any other control too.<br />
<br />
<pre class="brush: csharp">protected void lsvHighLvlFormAccess_ItemDataBound(object sender, ListViewItemEventArgs e)
{
HtmlTableRow row = (HtmlTableRow)e.Item.FindControl("row");
// http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listviewdataitem.dataitem.aspx
// http://forums.asp.net/t/1334142.aspx/1
ListViewDataItem item = (ListViewDataItem)e.Item;
System.Data.DataRowView drv = (System.Data.DataRowView)item.DataItem;
dynamicPopulateRow(row, drv, 0);
// more contents here
}
</pre>
<br />
where dynamicPopulateRow() is:
<br />
<br />
<pre class="brush: csharp">private void dynamicPopulateRow(HtmlTableRow row, System.Data.DataRowView drv, int iGeneration)
{
if (row != null)
{
// http://www.pcreview.co.uk/forums/do-enumerate-all-columns-dataviewrow-t1244448.html
foreach (DataColumn dc in drv.Row.Table.Columns)
{
string sEmployeeID = drv["LoginID"].ToString();
if (dc.ColumnName.Equals("LoginID"))
{
// http://msdn.microsoft.com/en-US/library/e5daxzcy(v=vs.80).aspx
// Define a new HtmlTableCell control.
HtmlTableCell cell = new HtmlTableCell("td");
// Create the text for the cell.
cell.Controls.Add(new LiteralControl(Convert.ToString(drv[dc.ColumnName])));
cell.ColSpan = dc.ColumnName.Equals("LoginID") ? I_COLSPAN - iGeneration : 1;
// Add the cell to the HtmlTableRow Cells collection.
row.Cells.Add(cell);
}
else if (!(dc.ColumnName.Equals("GENERATION") ||
dc.ColumnName.Equals("hierarchy") ||
dc.ColumnName.Equals("rowNo") ||
dc.ColumnName.Equals("EmployeeID")))
{
// http://msdn.microsoft.com/en-US/library/e5daxzcy(v=vs.80).aspx
// Define a new HtmlTableCell control.
HtmlTableCell cell = new HtmlTableCell("td");
bool bIsNull = drv[dc.ColumnName] is System.DBNull;
Literal ltrl = new Literal();
ltrl.Text += "<input :="" be="" bisnull="" checkbox="" dc.columnname.replace="" dc.columnname="" didmodify="" disabled="" drv="" id="\" int="" later="" name="\" onclick="\" retrieved="" semployeeid="" this="" type="\" value=" + drv[dc.ColumnName].ToString()) +
" will="" /> 0 ? " checked>" : ">");
cell.Controls.Add(ltrl);
// Add the cell to the HtmlTableRow Cells collection.
row.Cells.Add(cell);
}
else
{
//other rows
}
}
}
}
</pre>
<br />
8) If you more nested level, just add these codes:<br />
<br />
<pre class="brush: csharp">var lst1stLevel = (ListView)e.Item.FindControl("lst1stLevel");
populateLV(lst1stLevel, 1, (string)drv["hierarchy"], Convert.ToInt32(drv["rowNo"]));
</pre>
<br />
where populateLV() is:
<br />
<br />
<pre class="brush: csharp">private void populateLV(ListView lv, int iNextGeneration, string sHierarchy, int iCurrRowNo)
{
if (lv != null)
{
DataTable dt = new DataTable();
dt = ((DataTable)ViewState["cachedTable"]).Clone();// clone schema only
List<int> levels = ((DataTable)ViewState["cachedTable"]).
Select("GENERATION = " + (iNextGeneration > 0 ? iNextGeneration - 1 : 0) +
" AND hierarchy LIKE '" + sHierarchy + "%'"). // no space
AsEnumerable().
Select(al => Convert.ToInt32(al.Field<object>("rowNo"))).Distinct().ToList();
// duplicate hierarchy, display at smallest rowNo will do
if (levels.Count > 0 && levels.Min() == iCurrRowNo)
{
DataRow[] drResults = ((DataTable)ViewState["cachedTable"]).
Select("GENERATION = " + iNextGeneration + " AND hierarchy LIKE '" + sHierarchy + " %'");
foreach (DataRow dr in drResults)
{
object[] obRow = dr.ItemArray;
dt.Rows.Add(obRow);
}
lv.DataSource = dt;
lv.DataBind();
}
}
}
</object></int></pre>
<br />
9) Repeat this for second-level, third-level, etc.<br />
<br />
<pre class="brush: csharp">protected void lst2ndLevel_ItemDataBound(object sender, ListViewItemEventArgs e)
{
HtmlTableRow row = (HtmlTableRow)e.Item.FindControl("row");
ListViewDataItem item = (ListViewDataItem)e.Item;
System.Data.DataRowView drv = (System.Data.DataRowView)item.DataItem;
int iCurrLvl = 2;
//populate dynamic cells
dynamicPopulateRow(row, drv, iCurrLvl);
//populate nested LV
var lst3rdLevel = (ListView)e.Item.FindControl("lst3rdLevel");
populateLV(lst3rdLevel, iCurrLvl + 1, (string)drv["hierarchy"], Convert.ToInt32(drv["rowNo"]));
}
</pre>
<br />
10) Done. This is what it looks like in Visual Studio Designer. Press F5 to go.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioE_t2dNH8NceY_C5qCevO-Hx6_8SzSr4N-9RIqQTE5iZcGhDXITLOMc0OdERV1lhNuS9jdhheDLcugBPncW3cY3LGeo5fZhjkUbUtXK1z59Z4Uhh8wguXOHxebsnpOtzTUxTiPYrHNGs/s1600/basic+look+on+designer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioE_t2dNH8NceY_C5qCevO-Hx6_8SzSr4N-9RIqQTE5iZcGhDXITLOMc0OdERV1lhNuS9jdhheDLcugBPncW3cY3LGeo5fZhjkUbUtXK1z59Z4Uhh8wguXOHxebsnpOtzTUxTiPYrHNGs/s1600/basic+look+on+designer.png" height="400" width="640" /></a></div>
<br />
<br />
11) if you choose 4 columns, you get this:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFhG8BkEP3lOLa11bkNtD0V4Xi-h0CB2Hjq-J5c6ILiwmOjIQrvoJ_TpnnxlG8wVHbwB39SFhwF2aRdHHeEU6OsM1JyzGuQVSvVpoJFvjM9xHU8PUWI6f9iJtJPx2HOkqhl4qFDkqVB3g/s1600/4+columns.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFhG8BkEP3lOLa11bkNtD0V4Xi-h0CB2Hjq-J5c6ILiwmOjIQrvoJ_TpnnxlG8wVHbwB39SFhwF2aRdHHeEU6OsM1JyzGuQVSvVpoJFvjM9xHU8PUWI6f9iJtJPx2HOkqhl4qFDkqVB3g/s640/4+columns.png" height="282" width="640" /></a></div>
<br />
12) If you choose 10 columns, you get this:<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_hWjo0CFZwOhLBq0UtB_-fmTRW0OGYe45jU7DiV0yyBG4MqsBpti3RQEm5eyVarnvo6re9QMPkBX7ACIyGuj2AuF5owCVmWtCmA0FTtvwzCUHEmototd2rgZZGKilHM0Llc_3Mab-OE/s1600/10+columns.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8_hWjo0CFZwOhLBq0UtB_-fmTRW0OGYe45jU7DiV0yyBG4MqsBpti3RQEm5eyVarnvo6re9QMPkBX7ACIyGuj2AuF5owCVmWtCmA0FTtvwzCUHEmototd2rgZZGKilHM0Llc_3Mab-OE/s640/10+columns.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
13) Lastly, a whopping 55 columns.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepNnl7ZlCEYrFRWZF__tkqzqhaqgOAfxmH7L2QJa_ZDj96h9cpjFdebddbiozi_f9WYzDjglfZZIxtuNysO1cCKMk0p3PEltBhgs6wS7U5muxN4nEb5f3JpFT9-ifxmLiHQv2c4D_moo/s1600/whopping+55+columns.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgepNnl7ZlCEYrFRWZF__tkqzqhaqgOAfxmH7L2QJa_ZDj96h9cpjFdebddbiozi_f9WYzDjglfZZIxtuNysO1cCKMk0p3PEltBhgs6wS7U5muxN4nEb5f3JpFT9-ifxmLiHQv2c4D_moo/s1600/whopping+55+columns.png" height="179" width="640" /></a></div>
<br />
<br />
You can get the source-code <a href="https://skydrive.live.com/?cid=92292cc7b2f5ea6d#cid=92292CC7B2F5EA6D&id=92292CC7B2F5EA6D%21196">here</a> (DynamicColumns_LV.zip).<br />
You can download the <a href="http://msftdbprodsamples.codeplex.com/releases">AdventureWorks</a> database through Microsoft Download Center.garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-85388460308937078112013-04-11T12:00:00.002+08:002013-04-11T12:02:08.857+08:00JavaScript search() != indexOf() MethodQuite frequently we need to find a specific word from a large chunk of string. With more focus on web development and the advancement of client-side scripting capability, more efforts have to focus on javascript nowadays.<br />
<br />
I came across with this and bump into these 2 methods, both methods look identical (<i>almost</i>) to me to achieve what I was looking for.<br />
<ul>
<li>search()</li>
<li>indexOf()</li>
</ul>
I thought they can achieve the same result, but eventually they aren't.<br />
<br />
First, let's use the search() to perform some testing.<br />
Test 1: Using the <a href="http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_search">w3schools's Tryit Editor</a> with default function to search "W3Schools":<br />
<br />
<pre class="brush: javascript">function myFunction()
{
var str="Visit W3Schools!";
var n=str.search("W3Schools");
document.getElementById("demo").innerHTML=n;
}
</pre>
<br />
You'll get result:<br />
6 (which is <span style="color: #38761d;">correct</span>)<br />
<br />
Test 2: then use another method indexOf() on the same function to search same string [MUST click "Submit Code" after change in "Tryit Editor"]:<br />
<br />
<pre class="brush: javascript">function myFunction()
{
var str="Visit W3Schools!";
var n=str.indexOf("W3Schools");
document.getElementById("demo").innerHTML=n;
}
</pre>
<br />
You'll get result:<br />
6 (which is <span style="color: #38761d;">correct too</span>)<br />
<br />
Nothing fancy, nothing wrong.<br />
OK, what about change the string to search from "W3Schools" to "W3<b><span style="color: red;">|</span></b>Schools" (adding a "|" character, since it's frequently used as a delimiter)<br />
<br />
Test 3: if using search() method [MUST click "Submit Code" after change in "Tryit Editor"]:<br />
<br />
<pre class="brush: javascript">function myFunction()
{
var str="Visit W3Schools!";
var n=str.search("W3|Schools");
document.getElementById("demo").innerHTML=n;
}
</pre>
<br />
You'll get result:<br />
6 (which is <span style="color: red;">wrong</span>)<br />
<br />
Test 4: if using indexOf() method [MUST click "Submit Code" after change in "Tryit Editor"]:<br />
<br />
<pre class="brush: javascript">function myFunction()
{
var str="Visit W3Schools!";
var n=str.indexOf("W3|Schools");
document.getElementById("demo").innerHTML=n;
}
</pre>
<br />
You'll get result:<br />
-1 (which is still <span style="color: #38761d;">correct</span>)<br />
<br />
From Test 3 & Test 4, you get different result if the string your search contains special character "|". Looking back, I was overlooked by its definition (see fonts in read).<br />
<br />
<a href="http://www.w3schools.com/jsref/jsref_search.asp">search()</a> Method:<br />
<span style="font-size: x-small;">The search() method searches a string for a specified value, or </span><b style="font-size: small;"><i><span style="color: red;">regular expression</span></i></b><span style="font-size: x-small;">, and returns the position of the match.</span><br />
<span style="font-size: x-small;">This method returns -1 if no match is found.</span><br />
<br />
<a href="http://www.w3schools.com/jsref/jsref_indexof.asp">indexOf()</a> Method:<br />
<span style="font-size: x-small;">The indexOf() method returns the position of the </span><b style="font-size: small;"><i><span style="color: red;">first occurrence</span></i></b><span style="font-size: x-small;"> of a specified value in a string.</span><br />
<span style="font-size: x-small;">This method returns -1 if the value to search for never occurs.</span><br />
<br />
Looks like special character "|" has caused some effect on the regular expression and need special treatment on it. Lesson learnt.garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-41063213694556608172013-03-08T11:42:00.002+08:002013-03-08T14:23:12.007+08:00"The process cannot access the file because it is being used by another process"There'll be time when you need to enabling SSL on IIS 7.0 Using Self-Signed Certificates.<br />
<a href="http://www.robbagby.com/iis/self-signed-certificates-on-iis-7-the-easy-way-and-the-most-effective-way/">RobBagby</a> & <a href="http://weblogs.asp.net/scottgu/archive/2007/04/06/tip-trick-enabling-ssl-on-iis7-using-self-signed-certificates.aspx">scottgu</a> has 2 great tutorials on that topic. Looks like IIS7 simplify a lots.<br />
I go to IIS and set the binding using the default port 443.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMCRgk9MUO3h4PKT1tuXbpDys9QUY1SG9Wq8_sI7PzZ23DqhLTmJCT0TpcTvyzwIkqt62HxEvgFi3RKht-ddZEInuqwNR_KcqUSjhhMS3TI-9tic2ch3euY-DYFpuC74hWDx9w2vuupc4/s1600/site+bindings.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMCRgk9MUO3h4PKT1tuXbpDys9QUY1SG9Wq8_sI7PzZ23DqhLTmJCT0TpcTvyzwIkqt62HxEvgFi3RKht-ddZEInuqwNR_KcqUSjhhMS3TI-9tic2ch3euY-DYFpuC74hWDx9w2vuupc4/s1600/site+bindings.png" /></a></div>
<br />
But life is not always a bed of roses.Then I hit this error message:<br />
"There was an error while performing this operation."<br />
"The process cannot access the file because it is being used by another process. (Exception from HRESULT: 0x80070020)"<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjXA3tOb9bs0WZBVshhUksSYAu-1VCMg0g7PizOuETBIYFaa96afKZZE9Q613tHckJ8dN6H7RHJYl3ayajN9_a967-NLTuHZzVtag29TZdlCLr6wY22OxAHKpUVXQ1H8sEGilquAp6A7M/s1600/error+while+performing+this+operation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjXA3tOb9bs0WZBVshhUksSYAu-1VCMg0g7PizOuETBIYFaa96afKZZE9Q613tHckJ8dN6H7RHJYl3ayajN9_a967-NLTuHZzVtag29TZdlCLr6wY22OxAHKpUVXQ1H8sEGilquAp6A7M/s1600/error+while+performing+this+operation.png" /></a></div>
<br />
I was wonder what caused it to happen After confirmed with network guy it's not their issue, i have to check what could be the possible reason for that.<br />
From <a href="http://support.microsoft.com/kb/890015">Microsoft Support</a>, and also someone from stack-overflow pointed out this could be port is being used by other application.<br />
<br />
Then I work it out from there:<br />
1) run the "<a href="http://www.microsoft.com/resources/documentation/windows/xp/all/proddocs/en-us/netstat.mspx?mfr=true">netstat</a>" command from command prompt, to display active TCP connections, ports on which the computer is listening<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7BeIR6D8duxU34pnGgZW1xh3FQj0unISIDZoCXyF6L5zm9bRzLMeysRA0OoAGUjcBQpzHGJ1E0O87nYucx9B6vA6qazKKd8623C4fx_59IX-42Zx8c213X09iOX7bkg05_z7u_u7vkDg/s1600/netstat.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7BeIR6D8duxU34pnGgZW1xh3FQj0unISIDZoCXyF6L5zm9bRzLMeysRA0OoAGUjcBQpzHGJ1E0O87nYucx9B6vA6qazKKd8623C4fx_59IX-42Zx8c213X09iOX7bkg05_z7u_u7vkDg/s1600/netstat.png" /></a></div>
<br />
2) then run the "Tasks Manager". The PID column is not displyed by default. I have to go to "View">"Select Column" and check it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJtCiz69gCowGsNar1-jbtGfnOSoY5bzMNptNvVYl5O6cDa6MUStZGvWuzL0oIBIetZ5LW1bCN_UZNz90xRINB4IE8IPV_8Jsj50kDTxh7Zr0gg0md-seyk0XQphT9_ZKJsLObvpfMHA/s1600/PID.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="387" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjJtCiz69gCowGsNar1-jbtGfnOSoY5bzMNptNvVYl5O6cDa6MUStZGvWuzL0oIBIetZ5LW1bCN_UZNz90xRINB4IE8IPV_8Jsj50kDTxh7Zr0gg0md-seyk0XQphT9_ZKJsLObvpfMHA/s640/PID.png" width="640" /></a></div>
<br />
3) Compare the PID.<br />
<br />
4) there's another process, called "<a href="http://www.processlibrary.com/directory/files/nhttp/450599/">nhttp.exe</a>" is using that port. It's from Lotus Domino. :(<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv_E03KvlxGTUQiThhL8ZDwI0ulsZdbXMD7mHhA5xw_ScrVRJc-LPrLtCf7_XKUNEvV-_Yk19AoptJgK4HBaA0u6p7ULDXWhojfw_qzJyqaut5c4eOnqbpZB8avhNKHl4mHjT8rO0BhTg/s1600/netStat.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv_E03KvlxGTUQiThhL8ZDwI0ulsZdbXMD7mHhA5xw_ScrVRJc-LPrLtCf7_XKUNEvV-_Yk19AoptJgK4HBaA0u6p7ULDXWhojfw_qzJyqaut5c4eOnqbpZB8avhNKHl4mHjT8rO0BhTg/s1600/netStat.png" /></a></div>
<br />
5) no choice but have to use another port 444. Back to the IIS site binding, and edit it.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEird90wtYkkRpHAWUp740AQ204HENxtALlmgcAbD_3XRZkgXk-QMUoWfOPHX0Uupj8SpENMzTRXW5pmNrA4dpzuEkDttp0EN6kd3GyMPFrqnkzPajyJLrz8t-bdw0bYB6TtyBVOIkHRq8Y/s1600/Edit+Site+Binding.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEird90wtYkkRpHAWUp740AQ204HENxtALlmgcAbD_3XRZkgXk-QMUoWfOPHX0Uupj8SpENMzTRXW5pmNrA4dpzuEkDttp0EN6kd3GyMPFrqnkzPajyJLrz8t-bdw0bYB6TtyBVOIkHRq8Y/s1600/Edit+Site+Binding.png" /></a></div>
<br />
6) of course, have to allow the firewall to let that port through by adding a new inbound rule.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOCsgqNBUWesnN3-RLoTSrpv8lHlf0fnJXDFFSUBDOk_ugcY8St2KmvXaHXOkdDWUUjHXSEVNhQak5ZwrU1MgVfWid2weVHqNJA7qs1EZyQSkV4aLgvvTsPR3azuUBQvwrLIw3InlDigc/s1600/New+Inbound+Rule.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOCsgqNBUWesnN3-RLoTSrpv8lHlf0fnJXDFFSUBDOk_ugcY8St2KmvXaHXOkdDWUUjHXSEVNhQak5ZwrU1MgVfWid2weVHqNJA7qs1EZyQSkV4aLgvvTsPR3azuUBQvwrLIw3InlDigc/s640/New+Inbound+Rule.png" width="640" /></a></div>
<br />
7) Finally, I can browse my site.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGubU4w6LC92pXDh6UVQeqGE2JeySnMqgFuCgDFytlTHOv8mv_ykCEFSPHloh6wvr6fvZh2xENvUqGcA-tK4B5a55boRaffQs6oZ5WxZpjD8Dy00zu3GZlNziDSXDekBhtT9ZTY8WpbbI/s1600/The+site's+security+cerrtificate+is+not+trusted.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="178" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGubU4w6LC92pXDh6UVQeqGE2JeySnMqgFuCgDFytlTHOv8mv_ykCEFSPHloh6wvr6fvZh2xENvUqGcA-tK4B5a55boRaffQs6oZ5WxZpjD8Dy00zu3GZlNziDSXDekBhtT9ZTY8WpbbI/s640/The+site's+security+cerrtificate+is+not+trusted.png" width="640" /></a></div>
<br />
<br />
<br />garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com3tag:blogger.com,1999:blog-3891346170516717444.post-45678670487074596342013-03-04T16:31:00.003+08:002013-03-08T11:51:35.194+08:00ListView Grouping On Demand using AJAX and stored-procedure<a href="http://mattberseth.com/">Matt Berseth</a> has a series of tutorials on building a <a href="http://mattberseth.com/blog/2008/01/building_a_grouping_grid_with.html">Grouping Grid with the ASP.NET 3.5 LinqDataSource and ListView Controls</a>. It's quite a good control that able to display the data in master-detail format.<br />
<br />
While using LinQ can help you to encapsulate the database layer, it might incur additional workload. And not every coder can write good LinQ query, thus it turns out to be an ugly resource-hunger monster. Personally, i found it's not easy to fine-tune when u need to reduce the page loading time after the data grows huge, if compare with ADO .NET using stored-procedure. At least, you can analyse the execution plan.<br />
<br />
You can reduce the page size through paging, but in some scenario, your client might prefer loading all the data in one time (a bit ridiculous though). Then AJAX comes into the picture.<br />
<br />
<br />
<a href="http://mosesofegypt.net/">Muhammad Mosa</a> has a series of tutorials on<a href="http://mosesofegypt.net/post/Building-a-grouping-Grid-with-GridView-and-ASPNET-AJAX-toolkit-CollapsiblePanel.aspx"> Building a grouping Grid with GridView and ASP.NET AJAX toolkit CollapsiblePanel</a><br />
<br />
<br />
By combining the two, we can create Grouping ListView using AJAX and stored procedure.<br />
1) we create the stored procedure to create the grouping data, with the help of <a href="http://technet.microsoft.com/en-us/library/bb510427(v=sql.105).aspx">GROUPING SETS</a>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<pre class="brush: sql">Select a.*, b.OrderDate, b.ShipName,
c.FirstName + ' ' + c.LastName as fullName
from
(
SELECT CASE WHEN (GROUPING(CustomerID) = 1) THEN NULL--'...'--'ALL CustomerID'
ELSE ISNULL(CustomerID, 'UNKNOWN')
END AS CustomerID,
CASE WHEN (GROUPING(EmployeeID) = 1) THEN NULL--'...'--'ALL EmployeeID'
ELSE ISNULL(EmployeeID, 'UNKNOWN')
END AS EmployeeID,
CASE WHEN (GROUPING(OrderID) = 1) THEN NULL--'ALL OrderID'
ELSE ISNULL(OrderID, 'UNKNOWN')
END AS OrderID,
COUNT(*) as [itemCount],
SUM(freight) AS totalFreight
FROM #temp l
GROUP BY GROUPING SETS
(
(CustomerID, EmployeeID, OrderID),
(CustomerID, EmployeeID),
(CustomerID),
()
)
) a
</pre>
<br />
2) Then we need a extended AJAX toolkit CollapsiblePanel from <a href="http://mosesofegypt.net/post/Building-a-grouping-Grid-with-GridView-and-ASPNET-AJAX-toolkit-CollapsiblePanel.aspx">Muhammad Mosa's article</a>.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTGmwhzhVS4d9BX6yzPdui3Q8sQzpmjleCv4JKFsFXYCCPqNjMVf9TWl6Eipy8sZmrvm3cj61sd6g0HBOCsQgyLR1F2eAtBqPlvQtTQKcoi9Kwn1xaOA467ngNYGW0QoqsaVAAguuB_H4/s1600/extended+class.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="156" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTGmwhzhVS4d9BX6yzPdui3Q8sQzpmjleCv4JKFsFXYCCPqNjMVf9TWl6Eipy8sZmrvm3cj61sd6g0HBOCsQgyLR1F2eAtBqPlvQtTQKcoi9Kwn1xaOA467ngNYGW0QoqsaVAAguuB_H4/s640/extended+class.png" width="640" /></a></div>
<br />
3) Embed the newly extended CollapsiblePanel in the ItemTemplate of the host listview.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmwkBHpfS_cJ-BnD14z6Go2RS-inPYO34SUV4gQ9buP9LfLJjW0P1Wm6mk0aKFAJte90FQjWWEJLSqVyHsBwtHB6qDRJV2W_h3XQD561SDoivBJqNl98GS9xPcb9-IqzLjMxUlK22ylls/s1600/ItemTemplate.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="472" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmwkBHpfS_cJ-BnD14z6Go2RS-inPYO34SUV4gQ9buP9LfLJjW0P1Wm6mk0aKFAJte90FQjWWEJLSqVyHsBwtHB6qDRJV2W_h3XQD561SDoivBJqNl98GS9xPcb9-IqzLjMxUlK22ylls/s640/ItemTemplate.png" width="640" /></a></div>
<br />
4) Next we need to invoke the nested listview through WebMethod.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<pre class="brush: csharp">[System.Web.Services.WebMethod()]
public static string GetEmployees(string sParams)
{
Page page = new Page();
// restart Casini build-in IIS if error
COM.UsrCtrl_nestedListView ctl = (COM.UsrCtrl_nestedListView)page.LoadControl(PAGE_EMPLOYEE);
page.Controls.Add(ctl);
ctl.Params = sParams;
System.IO.StringWriter writer = new System.IO.StringWriter();
HttpContext.Current.Server.Execute(page, writer, false);
string output = writer.ToString();
writer.Close();
return output;
}
</pre>
<br />
5) Eventually we have our final result.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uqGnZcgSHXYznmvegY6GfaiNgASklZzxmtNmsQ7UBljE1MsyceZZ1ae8c48j1hV-bzN5_Z_WYcn4Nqry4OE0de9F0NmQzh6u_2cQXQIcSPWy-rkcb3exwo25ZccMo1e2i7h51seTDrQ/s1600/Grouping+ListView+using+AJAX.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1uqGnZcgSHXYznmvegY6GfaiNgASklZzxmtNmsQ7UBljE1MsyceZZ1ae8c48j1hV-bzN5_Z_WYcn4Nqry4OE0de9F0NmQzh6u_2cQXQIcSPWy-rkcb3exwo25ZccMo1e2i7h51seTDrQ/s640/Grouping+ListView+using+AJAX.png" width="640" /></a></div>
<br />
<span style="color: red;">Few things to take note</span>:<br />
i) ToolkitScriptManager has to enable the <a href="http://msdn.microsoft.com/en-us/library/system.web.ui.scriptmanager.enablepagemethods.aspx">PageMethods</a><br />
<br />
<pre class="brush: csharp"><asp:toolkitscriptmanager enablepagemethods="true" id="ToolkitScriptManager1" runat="server">
</asp:toolkitscriptmanager></pre>
<br />
ii) Since host listView and nested listview are 2 separate html tables, we have to enforce the <a href="http://www.w3schools.com/cssref/pr_tab_table-layout.asp">CSS table-layout Property</a>.<br />
<br />
<pre class="brush: html"><style type="text/css">
table.targetTable {table-layout:fixed}
</style>
</pre>
<br />
You can get the <a href="https://skydrive.live.com/?cid=92292cc7b2f5ea6d#cid=92292CC7B2F5EA6D&id=92292CC7B2F5EA6D%21196">source-code here</a> (ListViewGrouping_OnDemand.zip).<br />
You can download the <a href="http://www.microsoft.com/en-us/download/details.aspx?id=23654">Northwind database through Microsoft Download Center</a>.<br />
If you want to customize the CSS of the listView, <a href="http://geekswithblogs.net/rashid/archive/2007/09/05/Asp.net-ListView---Too-much-CSS-Friendly.aspx">this</a> article is a great place to start with.garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-51791200418407895602013-03-04T13:59:00.000+08:002013-03-04T17:25:01.703+08:00multi-select dropdownlist in ASP.NET(this one is heavily followed the article in <a href="http://www.dotnetfunda.com/articles/article1591-multiselect-dropdownlist-in-aspnet-using-csharp-40-.aspx">dotnetfunda</a>; credits go to the developer)<br />
<br />
While doing the coding, at times you will need your user to select few options.<br />
Using check-box or radio button is a good option, but they consume quite a space.<br />
Reporting service comes with the multi-select dropdown-list control,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-OXyrNTjKRG3P42TQGd6BjZUzKe6XCg9mWIAxZb_jLDmlAEgc3bXUrUWBa20U-kNgEjp-nHpDLhrmzP8wLgSAl2CwpIgukEROvg8A1KMfJyiv7WUyGEzj78EE8FEuk9OSVK6eob-eDs/s1600/multi+select+in+reporting+service.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-OXyrNTjKRG3P42TQGd6BjZUzKe6XCg9mWIAxZb_jLDmlAEgc3bXUrUWBa20U-kNgEjp-nHpDLhrmzP8wLgSAl2CwpIgukEROvg8A1KMfJyiv7WUyGEzj78EE8FEuk9OSVK6eob-eDs/s320/multi+select+in+reporting+service.png" width="320" /></a></div>
<br />
<br />
but you could not find the similar one in standard ASP .NET controls.<br />
While searching for the multi-select dropdown list in ASP .NET, I bumped into <a href="http://www.dotnetfunda.com/articles/article1591-multiselect-dropdownlist-in-aspnet-using-csharp-40-.aspx">this article</a>. It's almost similar to what you might expected.<br />
<br />
By adding extra ASP checkbox (let's call it: ID="checkAll") on top of CheckBoxList:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<pre class="brush: html">
<asp:panel backcolor="#FFFFFF" borderstyle="Solid" borderwidth="2px" direction="LeftToRight" height="242px" id="Panel1" runat="server" scrollbars="Auto" style="display: none;" width="145px">
<asp:checkbox autopostback="True" id="checkAll" oncheckedchanged="checkAll_Checked" onclick="CheckAll();" runat="server">
<asp:checkboxlist autopostback="True" id="cblItems" onclick="ClearAll();" onselectedindexchanged="cbl_SelectedIndexChanged" runat="server">
</asp:checkboxlist>
</asp:checkbox></asp:panel>
</pre>
<br />
and some <a href="http://stackoverflow.com/questions/5821993/checkboxlist-items-using-javascript">javascript</a>:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<pre class="brush: javascript">
// http://stackoverflow.com/questions/5821993/checkboxlist-items-using-javascript
function CheckAll() {
var intIndex = 0;
var rowCount = document.getElementById('<%=cblItems.ClientID %>').getElementsByTagName("input").length;
for (intIndex = 0; intIndex < rowCount; intIndex++) {
if (document.getElementById('<%=checkAll.ClientID %>').checked == true) {
if (document.getElementById('<%=cblItems.ClientID %>' + "_" + intIndex)) {
if (document.getElementById('<%=cblItems.ClientID %>' + "_" + intIndex).disabled != true)
document.getElementById('<%=cblItems.ClientID %>' + "_" + intIndex).checked = true;
}
}
else {
if (document.getElementById('<%=cblItems.ClientID %>' + "_" + intIndex)) {
if (document.getElementById('<%=cblItems.ClientID %>' + "_" + intIndex).disabled != true)
document.getElementById('<%=cblItems.ClientID %>' + "_" + intIndex).checked = false;
}
}
}
}
function ClearAll() {
var intIndex = 0;
var flag = 0;
var rowCount = document.getElementById('<%=cblItems.ClientID %>').getElementsByTagName("input").length;
for (intIndex = 0; intIndex < rowCount; intIndex++) {
if (document.getElementById('<%=cblItems.ClientID %>' + "_" + intIndex)) {
if (document.getElementById('<%=cblItems.ClientID %>' + "_" + intIndex).checked == true) {
flag = 1;
}
else {
flag = 0;
break;
}
}
}
if (flag == 0)
document.getElementById('<%=checkAll.ClientID %>').checked = false;
else
document.getElementById('<%=checkAll.ClientID %>').checked = true;
}
</pre>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
A re-usable user-control is at your disposal:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVbFh1H78c-u7hYhn33tP5d3Ax5I-fUNPRDorhCfFGcwTMzwD7SQ6-90XcLYgsLPzgYi4Bq6UdnqCN6Hjd_DokjQk-x7UN21l8nKh3tDULJOqw5s7TPzbFsxoOP0ZLv4zXu0Nacb9ZIk/s1600/enhanced+multi-select+dropdownlist.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="238" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVbFh1H78c-u7hYhn33tP5d3Ax5I-fUNPRDorhCfFGcwTMzwD7SQ6-90XcLYgsLPzgYi4Bq6UdnqCN6Hjd_DokjQk-x7UN21l8nKh3tDULJOqw5s7TPzbFsxoOP0ZLv4zXu0Nacb9ZIk/s640/enhanced+multi-select+dropdownlist.png" width="640" /></a></div>
<br />
<br />
You can get the full <a href="https://skydrive.live.com/?cid=92292cc7b2f5ea6d#cid=92292CC7B2F5EA6D&id=92292CC7B2F5EA6D%21196">source-code</a>.<br />
<br />
And you have more options:<br />
1) <a href="https://code.google.com/p/dropdown-check-list/">dropdown-check-list</a><br />
2) <a href="http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/">jQuery UI MultiSelect Widget</a>garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com1tag:blogger.com,1999:blog-3891346170516717444.post-53776708459626231612012-11-13T11:03:00.001+08:002012-11-13T11:03:41.769+08:00MY Bursa Watch, release 1 is now in the Windows Store<br />
After 1 month of work, finally my Windows app is up in Store.<br />
It's a financial app, named <a href="http://apps.microsoft.com/webpdp/app/my-bursa-watch/d28a37db-7cb1-4c87-bec1-88f11ca5e314">MY Bursa Watch.</a><br />
<br />
If you are in Windows Store, you can find it in:<br />
1) Finance>New release<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzwrCzfxkURrn26jQsNdpYQC-PtS0oa8n7R4qgMVWdVgk-25mEp1qL_u2-f8_OaY3NZmuAoNrpqexyIc-H-gOujoRrY1rq3OHHGDUsQltqiTCIndtH70Y6JelVShqc-38Q0tvtdGQFG_Q/s1600/Window+Apps+Store.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzwrCzfxkURrn26jQsNdpYQC-PtS0oa8n7R4qgMVWdVgk-25mEp1qL_u2-f8_OaY3NZmuAoNrpqexyIc-H-gOujoRrY1rq3OHHGDUsQltqiTCIndtH70Y6JelVShqc-38Q0tvtdGQFG_Q/s1600/Window+Apps+Store.png" height="360" width="640" /></a></div>
<br />
2) Use this link to if you are using internet browser:<br />
<br />
<a href="http://apps.microsoft.com/webpdp/app/my-bursa-watch/d28a37db-7cb1-4c87-bec1-88f11ca5e314">http://apps.microsoft.com/webpdp/app/my-bursa-watch/d28a37db-7cb1-4c87-bec1-88f11ca5e314</a><br />
<br />
<br />
In this version, the following features are included:<br />
1) KLSE index (delay by 15 minutes)<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYcw3jhgwWDJrivlhgmklNcVvE6ykp403NKc6QMERuF3c3VgIVI6-5jk-0tpdWglTE8ITnS41OY85YAife1N4f2INDyXI9k5ReMYShaWFaUZ9a1oCypsSlARD2Qs5Q6Z1ItL1f28JObOc/s1600/scr_001.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYcw3jhgwWDJrivlhgmklNcVvE6ykp403NKc6QMERuF3c3VgIVI6-5jk-0tpdWglTE8ITnS41OY85YAife1N4f2INDyXI9k5ReMYShaWFaUZ9a1oCypsSlARD2Qs5Q6Z1ItL1f28JObOc/s1600/scr_001.png" height="360" width="640" /></a></div>
<br />
2) Top 15 active counters, gainers and losers<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7YvO1NbFxzxCXbRgKLJPgyOdXmKRqlhmHj0tJIC-UHcjRgMZmsfTAq4XvPsGFpvmixZx8KsvfwHle2safCoaT3r5afIJ1j_wDZtsLxXKzcNnGnofQW-obOtNk9tgfcPMDdFWreYD9lE/s1600/scr_002.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig7YvO1NbFxzxCXbRgKLJPgyOdXmKRqlhmHj0tJIC-UHcjRgMZmsfTAq4XvPsGFpvmixZx8KsvfwHle2safCoaT3r5afIJ1j_wDZtsLxXKzcNnGnofQW-obOtNk9tgfcPMDdFWreYD9lE/s1600/scr_002.png" height="360" width="640" /></a></div>
<br />
3) Refresh<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiosrCANVF1Cx6wOehuwu8yRUVMsYG4eXa4uYL2ib9yDL6vss1uug9xpyTAkUY7OeKWJNKcPgMCY9APiy0aXeUQ_4mxqzX1ZwaRDC3HH4sxTM9L0JKU95q5iz-8Kp70RHgiSSf7go6LhE/s1600/scr_003.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiosrCANVF1Cx6wOehuwu8yRUVMsYG4eXa4uYL2ib9yDL6vss1uug9xpyTAkUY7OeKWJNKcPgMCY9APiy0aXeUQ_4mxqzX1ZwaRDC3HH4sxTM9L0JKU95q5iz-8Kp70RHgiSSf7go6LhE/s1600/scr_003.png" height="360" width="640" /></a></div>
<br />
4) Detailed info on selected stock<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2EIJ2SoyFtJHcjQ71AJ213WFoXfw-hUjpfQvANBGEe4zCHexPAhpmGhdUGaO7R8Zxow-YdwXKdsDUxNMGiIfO2_bjSPsGzHZvoRi2RyCoHwQlO07pJnxt0gPO9tXkECw8aYBVGsnjhAY/s1600/scr_004.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2EIJ2SoyFtJHcjQ71AJ213WFoXfw-hUjpfQvANBGEe4zCHexPAhpmGhdUGaO7R8Zxow-YdwXKdsDUxNMGiIfO2_bjSPsGzHZvoRi2RyCoHwQlO07pJnxt0gPO9tXkECw8aYBVGsnjhAY/s1600/scr_004.png" height="360" width="640" /></a></div>
More in coming version:<br />
1) Portfolio/Watchlist<br />
2) News<br />
<br />
garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-34523144918078043302012-11-05T15:47:00.002+08:002012-11-05T15:49:18.155+08:00Privacy Statement (MY Bursa Watch)<br />
I - Respect of Customer's Right to Privacy<br />
<br />
I realizes that the trust of our customers is our most valuable asset. I recognize that customers expect a high level of privacy and security for their personal and financial affairs. I maintain rigorous standards and procedures in order to safeguard sensitive information entrusted to us and prevent misuse of this information.<br />
<br />
<br />
II - Information<br />
<br />
The app do NOT collect information for any business purposes.<br />
<br />garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-57059271535267928382012-11-04T04:45:00.000+08:002012-11-04T04:45:57.532+08:00WinRT: Deploy a win8 app locally (Sideloading)After 3 weeks of long development (using spare times from after-working-hours, and weekend), the Windows 8 app that I've developed is almost done with some basic features.<br />
<br />
Before <a href="http://msdn.microsoft.com/en-us/library/windows/apps/br230835.aspx">submitting the app</a>, the package has to be tested. To run it locally without the debugger's help, it's not so straightforward.<br />
Here're the steps needed:<br />
<br />
1) <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh975357.aspx#testing">Start package creation</a> using Visual Studio.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRtLZzvxF3t2rhdhX5JcU-0gKcksqTT6dJ6aY8YqnegKoCwnASF9LUPjWxFb_0KbA29Sm9bKduWn-vUSBWuplstrmLuowV8H1jy9ikVH0codPmozhnTiI8Pgl3BdeSnjxWmBwk4fKRto/s1600/001+Create+App+Packages.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="272" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoRtLZzvxF3t2rhdhX5JcU-0gKcksqTT6dJ6aY8YqnegKoCwnASF9LUPjWxFb_0KbA29Sm9bKduWn-vUSBWuplstrmLuowV8H1jy9ikVH0codPmozhnTiI8Pgl3BdeSnjxWmBwk4fKRto/s1600/001+Create+App+Packages.png" width="640" /></a></div>
<br />
2) Sign-in if needed, not needed since I only want to test locally.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnqkJy62u0OkLQihwb3OQF4dgC0JBeUgpqNdHDwEVMXJ3K7fVRbkaLMSVwvj7sOfwPrTuJAZXfuSFb1C4FXcqYsYiB5C0RY6DJPjbTM9qk09q1ALdc9CJ7snZzZaZ5lUe7kQcUl3It68/s1600/002+sign+in.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnqkJy62u0OkLQihwb3OQF4dgC0JBeUgpqNdHDwEVMXJ3K7fVRbkaLMSVwvj7sOfwPrTuJAZXfuSFb1C4FXcqYsYiB5C0RY6DJPjbTM9qk09q1ALdc9CJ7snZzZaZ5lUe7kQcUl3It68/s1600/002+sign+in.png" width="400" /></a></div>
<br />
3) Then configure the package.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0SutwtUfypEB2BNsjR4AIhN6VsB8xrpOszLv1R-r6Yhet2sm5WJTKAIV2SiPCLxIWPX93PVxmkcUwgz1axIzrQf3UZDXNS_kGvBdy_6wACg17LVzEPej8ZIxheEGXjHqmsO4JH2YEDGs/s1600/003+Configure+packages.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0SutwtUfypEB2BNsjR4AIhN6VsB8xrpOszLv1R-r6Yhet2sm5WJTKAIV2SiPCLxIWPX93PVxmkcUwgz1axIzrQf3UZDXNS_kGvBdy_6wACg17LVzEPej8ZIxheEGXjHqmsO4JH2YEDGs/s1600/003+Configure+packages.png" width="320" /></a></div>
<br />
4) Done, and these are all the files created. It comes with a cert.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiQQSCQOgMj0KqPTneFPVl3m2td8C0MCB3j0UyICd0Mjm0vqH8iJ8eEEJ8NAWjjceVqwhOBrtzhVYqKdwlkSTk8V0WlVnGTvQMX8m4mURH8VlAOgEW1gQdqCN3X1ILtsA8HCqD7a-7IY/s1600/005+available+files.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJiQQSCQOgMj0KqPTneFPVl3m2td8C0MCB3j0UyICd0Mjm0vqH8iJ8eEEJ8NAWjjceVqwhOBrtzhVYqKdwlkSTk8V0WlVnGTvQMX8m4mURH8VlAOgEW1gQdqCN3X1ILtsA8HCqD7a-7IY/s1600/005+available+files.png" width="640" /></a></div>
<br />
5) OK, you think you can start installing the cert, by right-click it and install.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLmq06tKQASxwCftuXi5TCHHXPk5Pqi_n7GeGTOdk1NdJUFG12vqwH_lcdWuJiFQwlIUH1kVQJ5-dzt5CSqVBxUbhaYCuXdkKqPIoYY1g57boWhMs3iVuPF-lm8RAMm8mhkacAZX6ysxU/s1600/006+Install+package.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLmq06tKQASxwCftuXi5TCHHXPk5Pqi_n7GeGTOdk1NdJUFG12vqwH_lcdWuJiFQwlIUH1kVQJ5-dzt5CSqVBxUbhaYCuXdkKqPIoYY1g57boWhMs3iVuPF-lm8RAMm8mhkacAZX6ysxU/s1600/006+Install+package.png" width="640" /></a></div>
<br />
6) "Certificate Import Wizard" prompted. Just install in local and next..., until suceess.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh6l5LSvzWX91H-V8rgt1224-Ij-Sn6rhONsBZuntI3meAXv1o8eK3vnZ5JaqJ1eLHF536d6hM4wB09D1CjpMV-05pwX_M_JSoezg2oC4LMBw9udV6fDXWd1wr0Fes2gFuzHoa-AXeYIU/s1600/007+Cert+Import+Wizard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh6l5LSvzWX91H-V8rgt1224-Ij-Sn6rhONsBZuntI3meAXv1o8eK3vnZ5JaqJ1eLHF536d6hM4wB09D1CjpMV-05pwX_M_JSoezg2oC4LMBw9udV6fDXWd1wr0Fes2gFuzHoa-AXeYIU/s1600/007+Cert+Import+Wizard.png" width="320" /></a></div>
<br />
7) Then start the PowerShell, run as admin with this command:<br />
<span style="font-size: x-small;">a) Windows+R</span><br />
<span style="font-size: x-small;">b) <span style="color: blue;">Start-Process powershell -Verb runAs</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLguVy2Vb2C755iIByi4aOl7HezS1iPiEKIlRR0qfwtL62J3ku69E940or5V9YXhKIB-Qy3uPaiTuOjVT2U2IkfKimtXdk2bMg5z8-AZxOQf5v_eVh-Q5WDG_WA8mUqYEHgEI_R__uh98/s1600/0071+PS+CommandPrompt.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLguVy2Vb2C755iIByi4aOl7HezS1iPiEKIlRR0qfwtL62J3ku69E940or5V9YXhKIB-Qy3uPaiTuOjVT2U2IkfKimtXdk2bMg5z8-AZxOQf5v_eVh-Q5WDG_WA8mUqYEHgEI_R__uh98/s1600/0071+PS+CommandPrompt.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYdJY4hqQZfm3vHiA07PHOu4zh6qpRx-rnJXogTR_P5e-QoQI0z5ZN2DHr2kYztwUwdrBNF4aTXdb2MTi4C1TqZpdgSqKLYIRZ9aZWUxBQQwtJIRmc0vUutxX5hMganP1nczUHLHkzt4M/s1600/0072+PS+command+as+admin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYdJY4hqQZfm3vHiA07PHOu4zh6qpRx-rnJXogTR_P5e-QoQI0z5ZN2DHr2kYztwUwdrBNF4aTXdb2MTi4C1TqZpdgSqKLYIRZ9aZWUxBQQwtJIRmc0vUutxX5hMganP1nczUHLHkzt4M/s1600/0072+PS+command+as+admin.png" width="400" /></a></div>
<br />
<br />
8) Change the directory if needed, then<br />
<span style="font-size: x-small;">a) change directory: <span style="color: blue;">cd <i>XXX</i></span></span><br />
<span style="font-size: x-small;">b) deploy package: <span style="color: blue;">add-appxpackage <i>YYY</i>.appx</span></span><br />
<span style="font-size: x-small;">where XXX (directory), YYY.appx (executable file) created in step (4).</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwG2zB-tB6fh41BW84vbbLxm71nCCvo41VokP-wcV_eMv4edY_vcEwoEn444On2W4kgdzpPohvhCtRYJv2h79pLo96jcZd66R6ndDg7gxQiU-lmpXD6hbDc3w36nPLsuCTIMREGfHPko/s1600/0073+Add+appxpackage+failed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="390" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwG2zB-tB6fh41BW84vbbLxm71nCCvo41VokP-wcV_eMv4edY_vcEwoEn444On2W4kgdzpPohvhCtRYJv2h79pLo96jcZd66R6ndDg7gxQiU-lmpXD6hbDc3w36nPLsuCTIMREGfHPko/s1600/0073+Add+appxpackage+failed.png" width="640" /></a></div>
<br />
<br />
But not working :(<br />
<br />
9) After goggling, we have <a href="http://msdn.microsoft.com/en-US/library/windows/apps/hh975356(v=vs.110).aspx">more job</a> to do.<br />
<br />
10) Now start the Microsoft Management Console, type:<br />
<span style="font-size: x-small;">a) Windows+R</span><br />
<div>
<span style="font-size: x-small;">b) mmc</span><br />
<ol>
</ol>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5uZV8mUkmRJVWp6akqTRdOkJAB9p1UuQIEgDrz_GHC5_JiCwoL2J4tSkjQ1ELcAYwyjmxolR_-stTZ_yPGQdbR16c-ZjE7Sv3s1bh6bF3iSRklGNwWB559yfnNUtlLP9hdWtbpYf9Rwc/s1600/008+run+mmc.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5uZV8mUkmRJVWp6akqTRdOkJAB9p1UuQIEgDrz_GHC5_JiCwoL2J4tSkjQ1ELcAYwyjmxolR_-stTZ_yPGQdbR16c-ZjE7Sv3s1bh6bF3iSRklGNwWB559yfnNUtlLP9hdWtbpYf9Rwc/s1600/008+run+mmc.png" width="320" /></a></div>
<br />
10) You might need to learn '<a href="http://social.technet.microsoft.com/wiki/contents/articles/2167.how-to-use-the-certificates-console.aspx">How to Use the Certificates Console</a>'<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFIAtR1WFXXJ-8wwpLLCPUkJD2HTi9keJY1noaLEeI0C58amFmWRFRkD4DE75Fcb6Y_XVPkYvtcH_RsyHGvGP490vvPdjpCSE4hmRkEWlY6dKECHPSuQLi_MfB_30toKXFrJ1gteAjBNc/s1600/010+Import+trusted+root+cert.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFIAtR1WFXXJ-8wwpLLCPUkJD2HTi9keJY1noaLEeI0C58amFmWRFRkD4DE75Fcb6Y_XVPkYvtcH_RsyHGvGP490vvPdjpCSE4hmRkEWlY6dKECHPSuQLi_MfB_30toKXFrJ1gteAjBNc/s1600/010+Import+trusted+root+cert.png" width="400" /></a></div>
<br />
11) Use the import function and you will be greeted by wizard again.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJTFsOLYjBO4V2bibieoQT6l_ja45fAx5hz79vNIxQGjw1U8B_LOWcwk48id0QbzFmnLvi4Zrt3o3U-JyGjQ35mhoPIUIX127CgvBfxKgbnR4j7b4rBSYs-3XzrkuOLqu6sjzVA8XHxno/s1600/011+Wizard+again.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJTFsOLYjBO4V2bibieoQT6l_ja45fAx5hz79vNIxQGjw1U8B_LOWcwk48id0QbzFmnLvi4Zrt3o3U-JyGjQ35mhoPIUIX127CgvBfxKgbnR4j7b4rBSYs-3XzrkuOLqu6sjzVA8XHxno/s1600/011+Wizard+again.png" width="320" /></a></div>
<br />
12) Browse to the cert (.cer) created by Visual Studio previously.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgf6jXxFWxX-LWRPfa3IfTMtgSb6Com5psYN0kGpXGhHLhkXB-4GfpDxCK-82pXBSp88eysDem1YgOcwlMBcxQ6jW9fcpm0R2pOv6lQY7gJoM_XyBaPYb7u2zoQ8nnGXsZGknryomDtco/s1600/012+browse+cert.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgf6jXxFWxX-LWRPfa3IfTMtgSb6Com5psYN0kGpXGhHLhkXB-4GfpDxCK-82pXBSp88eysDem1YgOcwlMBcxQ6jW9fcpm0R2pOv6lQY7gJoM_XyBaPYb7u2zoQ8nnGXsZGknryomDtco/s1600/012+browse+cert.png" width="320" /></a></div>
<br />
13) then click 'Next' all the way till success. You cert is in the root.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKSn6rBzoca6U9oCn7x90e75zEhOPJW6STEeUXMy6zP9-vncGwPDOM2uXESGKJrFecHxUtNU5wphMmn6wPz5vIgxH8ygBYDPk0qNd6uudmz-DNECYXZkXDk5t6K0eyvoJH_PcejQASwIM/s1600/013+cert+location.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKSn6rBzoca6U9oCn7x90e75zEhOPJW6STEeUXMy6zP9-vncGwPDOM2uXESGKJrFecHxUtNU5wphMmn6wPz5vIgxH8ygBYDPk0qNd6uudmz-DNECYXZkXDk5t6K0eyvoJH_PcejQASwIM/s1600/013+cert+location.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFc_BiKtQqDje0L9_MEpfkST3oOxSveCvhhRvrIAczzjLbmp4Zq4XSIuCdPkmEI3xfhre1uDBfQ8EuJ0wbME8h0wgWbBGUMYbrxKwkl6cGrnHKRDWSLG9EDycKIYfd917l_ns8gsamESo/s1600/015+success.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFc_BiKtQqDje0L9_MEpfkST3oOxSveCvhhRvrIAczzjLbmp4Zq4XSIuCdPkmEI3xfhre1uDBfQ8EuJ0wbME8h0wgWbBGUMYbrxKwkl6cGrnHKRDWSLG9EDycKIYfd917l_ns8gsamESo/s1600/015+success.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
14) Back to power-shell again. Deploy package with this command: add-appxpackage <i>YYY</i>.appx<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_y9BNKrjBvPVrkBk7m6_R7MVfrjjwcrrDzHWjgy03nBIq8XaHRLaxDCHAUFwDIV5g_b0cNSPx4h2ElM9Zzd3GlNw1VhcgbxGz3nCm688c4Q6MuV8ibkqIMplakqJc1c8zAtE9NNktalM/s1600/016+deployment+operation+progress.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_y9BNKrjBvPVrkBk7m6_R7MVfrjjwcrrDzHWjgy03nBIq8XaHRLaxDCHAUFwDIV5g_b0cNSPx4h2ElM9Zzd3GlNw1VhcgbxGz3nCm688c4Q6MuV8ibkqIMplakqJc1c8zAtE9NNktalM/s1600/016+deployment+operation+progress.png" width="640" /></a></div>
<br />
15) VoilĂ !<br />
<br />
16) Sometimes, your deployment might fail. From <a href="http://msdn.microsoft.com/en-us/library/windows/desktop/hh973484(v=vs.85).aspx">here</a>:<br />
ERROR_DELETING_EXISTING_APPLICATIONDATA_STORE_FAILED : 0x80073D05<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcOjw3TO154q1jGGi_Bys1hQ_IWDya7zTqwzpPuu76Im7e57eddxc5_4ZpGOKOAgopkr1Tw8NOB6ahyphenhyphenHwE4Qml48sTpbYXiyMfIDyntRxSeE5QttUzj3_u2tgHdB15bbAuEYgaN5kJsr0/s1600/017+Deployment+failed+with+HRESULT+0x080073CF6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="208" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcOjw3TO154q1jGGi_Bys1hQ_IWDya7zTqwzpPuu76Im7e57eddxc5_4ZpGOKOAgopkr1Tw8NOB6ahyphenhyphenHwE4Qml48sTpbYXiyMfIDyntRxSeE5QttUzj3_u2tgHdB15bbAuEYgaN5kJsr0/s1600/017+Deployment+failed+with+HRESULT+0x080073CF6.png" width="640" /></a></div>
<br />
17) One of the possibilities is simulator (or my app locked the resource??) Just turn-off the simulator (thru' "Task Manager") and re-deploy will do.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPgSyDpcQZhPVtxRfB9oKXfLT2D3nC_RIwW71wBfu-_GCEGlX04gRh63A7pkZ7XpvEihSiWnR_gMWjp1OrV788omW9GQU5YZMjOFdIISsVfuP_q7pRYIgx6j-SsG4P80T6uHDxncny7w/s1600/018+kill+simulator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFPgSyDpcQZhPVtxRfB9oKXfLT2D3nC_RIwW71wBfu-_GCEGlX04gRh63A7pkZ7XpvEihSiWnR_gMWjp1OrV788omW9GQU5YZMjOFdIISsVfuP_q7pRYIgx6j-SsG4P80T6uHDxncny7w/s1600/018+kill+simulator.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjWy_moHrmAVuPyTYVnqZzquvJ7cBjU0zFHJMOOiiWb3W-sdl-WDvA4MyDEb9RWrSzwCmgaZVEjZ_6oCR0eEG6dU6QvLpPzn05xxgAl61dY6Kd4B5Ii3xH5r9JZggSgMyf-Y7VPaBsCWo/s1600/019+deployed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjWy_moHrmAVuPyTYVnqZzquvJ7cBjU0zFHJMOOiiWb3W-sdl-WDvA4MyDEb9RWrSzwCmgaZVEjZ_6oCR0eEG6dU6QvLpPzn05xxgAl61dY6Kd4B5Ii3xH5r9JZggSgMyf-Y7VPaBsCWo/s1600/019+deployed.png" width="640" /></a></div>
<br />
<br /></div>
garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com1tag:blogger.com,1999:blog-3891346170516717444.post-68223075607878943462012-11-04T03:39:00.001+08:002012-11-04T03:39:47.316+08:00I'm back....After a long period of stop blogging, I'm back.<br />
<br />
With the success of Apple <a href="http://www.apple.com/osx/apps/app-store.html">AppStore</a> & <a href="https://play.google.com/store?hl=en">Goole Play</a>, Microsoft has launched it's version of app store.
As a developer, more skill-sets are required to survive (of course, if I can earn some side-income from advertising is even better) and thus dive into <a href="http://msdn.microsoft.com/en-us/windows/apps/br229512.aspx">Windows 8 app development</a>.<br />
<br />
To me, in order to attract more users to download, one have to consider 2 things:<br />
1) useful<br />
2) creativeness<br />
<br />
Since the later one is not easy, so I start the first with what happen around me. Wait for more...garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-25956290125471180862011-08-09T12:41:00.000+08:002011-08-09T12:41:07.232+08:00Creating Linked-server in MSSQLI come across a situation where I need to import the data from one instance to another, in MSSQL. So, I add the steps here to see it might help.<br />
<br />
1) At <span class="Apple-style-span" style="color: red;">source DB</span> where we want to retrieve the data, create a new login account, eg. "<span class="Apple-style-span" style="color: red;">test</span>" with password "123".<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtkNSPybfKWjrROAI6qfVFiBDGyYOALloLZTmirvmsi6aj4RsQXtZ7SZ2k4hyphenhyphenvc-rbAmINK5lzD9Hnkt8_a99SdvbTEUyxSz2NUwxa1PGT5UzDQm1BFV6ZJ0QUbpVssZ_fmRhZ1Cj3uDs/s1600/01_Src_NewLogin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="319" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtkNSPybfKWjrROAI6qfVFiBDGyYOALloLZTmirvmsi6aj4RsQXtZ7SZ2k4hyphenhyphenvc-rbAmINK5lzD9Hnkt8_a99SdvbTEUyxSz2NUwxa1PGT5UzDQm1BFV6ZJ0QUbpVssZ_fmRhZ1Cj3uDs/s320/01_Src_NewLogin.png" width="320" /></a></div><br />
2) Use the neccesary authetication, choose to untick "Enforce password policy" for our testing purpose.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcA8HvKbunX7QtWIUwepdI21qSWNJvIPAbyXcUmnl3FyjeZ2eecbXXw-T3krEw9Ef6rmDEsKpU7FnnSHLrZgL1Xis2UtNu3XDnufdIv_Gk1GsZrRV_NpaxDEItGgvBM6_CwHJ3PBkpG8/s1600/02_Src_NoEnforcePassword.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQcA8HvKbunX7QtWIUwepdI21qSWNJvIPAbyXcUmnl3FyjeZ2eecbXXw-T3krEw9Ef6rmDEsKpU7FnnSHLrZgL1Xis2UtNu3XDnufdIv_Gk1GsZrRV_NpaxDEItGgvBM6_CwHJ3PBkpG8/s320/02_Src_NoEnforcePassword.png" width="320" /></a></div><br />
3) If the db name in source DB is called "testing", maps the test account "<span class="Apple-style-span" style="color: red;">test</span>" to this db, with appropriate schema. In this case, it's "dbo". Add the role as "<span class="Apple-style-span" style="color: red;"><a href="http://msdn.microsoft.com/en-us/library/ms189121(v=sql.90).aspx">db_datareader</a></span>" as well.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4nYDRcHp-Ww4vdtlT-p2YosYLsfcoLham_fl4ET6wkG7HiBMucrWurzmPKpDDr0eUd1lU3O1Z49qN5pjkITpFYcaCd4gckDL6p43xKXe0sa0Q7jDqXOFVQgC8PDjiKlgxJX1kWv2q-w/s1600/03_Src_UserMapping.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir4nYDRcHp-Ww4vdtlT-p2YosYLsfcoLham_fl4ET6wkG7HiBMucrWurzmPKpDDr0eUd1lU3O1Z49qN5pjkITpFYcaCd4gckDL6p43xKXe0sa0Q7jDqXOFVQgC8PDjiKlgxJX1kWv2q-w/s320/03_Src_UserMapping.png" width="320" /></a></div><br />
4) At <span class="Apple-style-span" style="color: red;">destination DB</span> where we want to store the data, create a same new login account created in step (1), eg. "<span class="Apple-style-span" style="color: red;">test</span>" with password "123", using SA account.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUNCZ0b6b3MnJjLm-wShn2rEZSqj2BcT1G1YEuvsoH-a76_sRdjejsHe2HHvCkKdtF_btHLYFn7nVuvbOMkXDDVY51q8sJD1P74UDVB8cgwZHo8WEoSRMVGDJ9PWATeu3E6qYzFmyz0uU/s1600/05_Dest_NewLogin.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUNCZ0b6b3MnJjLm-wShn2rEZSqj2BcT1G1YEuvsoH-a76_sRdjejsHe2HHvCkKdtF_btHLYFn7nVuvbOMkXDDVY51q8sJD1P74UDVB8cgwZHo8WEoSRMVGDJ9PWATeu3E6qYzFmyz0uU/s320/05_Dest_NewLogin.png" width="320" /></a></div><br />
5) Use the neccesary authetication, choose to untick "Enforce password policy" for our testing purpose.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIz42qHRYbI-EjrI74hl_4EQvsDVqIvxwjM_be58Nna58WV0hZwsYyPYt4r0bCKbN80O2u168Y_FPR5DyYMCxxh4mm7BtOJwxWnNBDISCHLp5WGctPjPRk1bEkvJE0mgrv2EO6fBV4j9k/s1600/06_Dest_NoEnforcePassword.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIz42qHRYbI-EjrI74hl_4EQvsDVqIvxwjM_be58Nna58WV0hZwsYyPYt4r0bCKbN80O2u168Y_FPR5DyYMCxxh4mm7BtOJwxWnNBDISCHLp5WGctPjPRk1bEkvJE0mgrv2EO6fBV4j9k/s320/06_Dest_NoEnforcePassword.png" width="320" /></a></div><br />
6) If the db name in destination DB is called "testDB", maps the test account "<span class="Apple-style-span" style="color: red;">test</span>" to this db, with appropriate schema. In this case, it's "dbo".<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZHv6uMeztFkKjjYTMX1eC7YUZItt36jGPmibVGCb_D6jGuYZM5PD8TNV1rBUHUHTOCzrunjhBzXrcIWCUdXnuXpQ4bCkUBXz668EcTtMmQKBZnJBvhzEZczDFzr29IrMrDYKLqRONgkg/s1600/07_Dest_UserMapping.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="287" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZHv6uMeztFkKjjYTMX1eC7YUZItt36jGPmibVGCb_D6jGuYZM5PD8TNV1rBUHUHTOCzrunjhBzXrcIWCUdXnuXpQ4bCkUBXz668EcTtMmQKBZnJBvhzEZczDFzr29IrMrDYKLqRONgkg/s320/07_Dest_UserMapping.png" width="320" /></a></div><br />
7) <a href="http://msdn.microsoft.com/en-us/library/ms190479.aspx">Add a linked-server</a> in destination DB, you can either use SQL script or GUI.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoM_0c77UXsF1ub8Z8MCP4k3VXdooYS9slqYp0fKLA9ihcERQtuE6luqv9Tt4dVAtqOHzEcp5fr9RCao4hdH2bc_KBMCecoSsdKoXYZDaSUpuZW6f0ifgJWDZg6DaXTb1GGkM-E8oUjQ/s1600/08_sp_addlinkedserver.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwoM_0c77UXsF1ub8Z8MCP4k3VXdooYS9slqYp0fKLA9ihcERQtuE6luqv9Tt4dVAtqOHzEcp5fr9RCao4hdH2bc_KBMCecoSsdKoXYZDaSUpuZW6f0ifgJWDZg6DaXTb1GGkM-E8oUjQ/s320/08_sp_addlinkedserver.png" width="320" /></a></div><br />
8) You can verify the available linked-server in the destination DB, thru' Catalog Views: <a href="http://msdn.microsoft.com/en-us/library/ms178530.aspx">sys.servers</a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXxxm0TJtztIGD2HcnJ6UA-5xLOwVRE0N_zr1mGaC9-9OPfwXrV1o2ViRo3h0TmKTslFlT9W_MzhZ7sS6dM2IH9Fqa7iQpjUJJ1L4KPshy2f7Wz7bdUR10f4AJC3gOw9y1Q6abBOZp-Wg/s1600/09_sys.serves.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXxxm0TJtztIGD2HcnJ6UA-5xLOwVRE0N_zr1mGaC9-9OPfwXrV1o2ViRo3h0TmKTslFlT9W_MzhZ7sS6dM2IH9Fqa7iQpjUJJ1L4KPshy2f7Wz7bdUR10f4AJC3gOw9y1Q6abBOZp-Wg/s320/09_sys.serves.png" width="320" /></a></div><br />
9) Now, log-in as "<span class="Apple-style-span" style="color: red;">test</span>" user.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSA76NRjQxlWo_jayKV5K_BHCHJushGopZUyPbPTAboQfQkgCNIqpjdt-2DdNEU_7Kw2-wkKkrTxonQDTB3Y5xs4B7ft6JZnse-VlDsdQzcGlWTTvaknoN_GZYW5q_7YvjZbFauiBxSVs/s1600/10_ConnectToServer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSA76NRjQxlWo_jayKV5K_BHCHJushGopZUyPbPTAboQfQkgCNIqpjdt-2DdNEU_7Kw2-wkKkrTxonQDTB3Y5xs4B7ft6JZnse-VlDsdQzcGlWTTvaknoN_GZYW5q_7YvjZbFauiBxSVs/s320/10_ConnectToServer.png" width="320" /></a></div><br />
10) So, you should be able to query the source DB data by using a <a href="http://msdn.microsoft.com/en-us/library/ms187879.aspx">fully-qualified name</a>.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSpIz4LDlOBlUaEm_6LKK_W2sNoEwjVYVpKFedc91dJrXVOqqQFeXPKWsBd0jyf9qAnWWZdJTyTphyphenhyphendoFsWg9B-vTQZ1WLPUl-KL8wOucoAAL5qR99qZvdx4aBgN4A4hvZQTV6OQlbAE/s1600/11_QuerySuccess.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwSpIz4LDlOBlUaEm_6LKK_W2sNoEwjVYVpKFedc91dJrXVOqqQFeXPKWsBd0jyf9qAnWWZdJTyTphyphenhyphendoFsWg9B-vTQZ1WLPUl-KL8wOucoAAL5qR99qZvdx4aBgN4A4hvZQTV6OQlbAE/s320/11_QuerySuccess.png" width="320" /></a></div><br />
garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-54722338403150896172010-05-12T21:29:00.001+08:002010-05-12T21:30:53.786+08:00You can get my projects at Softpedia now, hehe<span class="Apple-style-span" style="font-family: Arial; font-size: small;"><span class="Apple-style-span" style="font-size: 13px;"><a href="http://www.softpedia.com/">Softpedia</a> Editorial Team informed me that they have included my projects in their sites. </span></span><br />
<div><span class="Apple-style-span" style="font-family: Arial; font-size: small;"><span class="Apple-style-span" style="font-size: 13px;">1) <a href="http://www.softpedia.com/get/Desktop-Enhancements/Clocks-Time-Management/Analog-Clock-GanGary.shtml">Analog Clock</a> - A small desktop gadget that will display the current time (<span class="Apple-style-span" style="color: #5e5e5e; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;">Downloads: 44<span class="Apple-style-span" style="color: black; font-family: Arial; font-size: 13px;">)</span></span></span></span></div><div><span class="Apple-style-span" style="font-family: Arial; font-size: small;"><span class="Apple-style-span" style="font-size: 13px;"><br />
</span></span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.softpedia.com/screenshots/Analog-Clock-GanGary_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.softpedia.com/screenshots/Analog-Clock-GanGary_1.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div>2) <a href="http://www.softpedia.com/get/Internet/Servers/Server-Tools/SQL-Management-Console.shtml">SQL Management Console 0.1.1.29977</a> -Query pane and result pane (<span class="Apple-style-span" style="color: #5e5e5e; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;">Downloads: 50<span class="Apple-style-span" style="color: black; font-family: 'Times New Roman'; font-size: medium;">)</span></span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.softpedia.com/screenshots/SQL-Management-Console_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="261" src="http://www.softpedia.com/screenshots/SQL-Management-Console_2.png" width="400" /></a></div><br />
Again, really thanks to them.</div>garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0tag:blogger.com,1999:blog-3891346170516717444.post-77659964453953491302010-02-24T23:48:00.014+08:002010-02-25T00:40:25.491+08:00Print Zebra barcode label thru' ASP .NETRecently, one of the projects I am maintaining required me to enhance the existing feature, which is printing the <a href="http://www.zebra.com/id/zebra/na/en/index.html">Zebra</a> barcode label through ASP .NET. The old staff who developed it left the company long time ago, and there's no other colleagues know how it was developed and worked.<div><br /></div><div>Printing it as WinForm application is not uncommon with the <span class="Apple-style-span" style=" ;font-family:Arial, Helvetica, sans-serif;"><span class="Apple-style-span" style="font-size:medium;"><a href="http://msdn.microsoft.com/en-us/library/system.io.ports.serialport.aspx">SerialPort Class</a></span></span>, as there's a lot of resources out there, but not so true for ASP .NET.<br /><br />So I needed to google around and posted question to the forums. With some lucks and <a href="http://www.developerfusion.com/forum/thread/29779/">googling skills</a>, i managed to let it works and add enhancement on that. But i found not full steps on web, so just to post this to help someone who might need it in the future.<br /><br />1.a) Set the "<b><span class="Apple-style-span" style="color:#FF0000;">Generic/Text Only</span></b>" as default printer driver. Yes, you see it correctly, it's not zebra printer driver that match your zebra printer, since it's printed through web.<div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTONUBjZBnR6B1NC98WRXN1inDKCCunYGlb2g0MA_QpMswz9mDQAd1u2X2LRSYYdimfVJ_bvb1iY2064glH7NELPD6uEv4n8IEEHYTYHQvEgnqUIysnmbHmFsM0AncSQsKcrIn5Do5084/s1600-h/setup_00.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 221px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTONUBjZBnR6B1NC98WRXN1inDKCCunYGlb2g0MA_QpMswz9mDQAd1u2X2LRSYYdimfVJ_bvb1iY2064glH7NELPD6uEv4n8IEEHYTYHQvEgnqUIysnmbHmFsM0AncSQsKcrIn5Do5084/s400/setup_00.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5441839755583735970" /></a><br />1.b.i) If you do not have it, you can go to any existing printer property page (right-click on any other printer driver) and add this driver.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGohTrSG6kCmQXN4XTOqHrAc0wvtvraqWZcMu8HE4_oIveijFHErJLyfNHtw1BD89EUtGVfcQGx_j-fbvP7yJ6cylizrg5lSwKOBk_gj7ttG3Fhuo8jjy12_SIYDZAEeeB8FWsdG_ix5E/s1600-h/setup+generic+text+only+driver.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 291px; height: 400px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGohTrSG6kCmQXN4XTOqHrAc0wvtvraqWZcMu8HE4_oIveijFHErJLyfNHtw1BD89EUtGVfcQGx_j-fbvP7yJ6cylizrg5lSwKOBk_gj7ttG3Fhuo8jjy12_SIYDZAEeeB8FWsdG_ix5E/s400/setup+generic+text+only+driver.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5441840090659793282" /></a><br />1.b.ii) Browse to driver list start with "G", then you will find it. Finish this installation process.<div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHvn2438WJg417RogyPSNNmYEebOwyA2awOUuPz2HCZvpP2qFFt4EDU10q84pLTCrzSNYXdMbW4GQjOnAOOpMkgECTTJiB9nZRYKb30TGJI-RGxZ9jRway-hi4fcw8hCp4oMMEXkcPkk/s1600-h/browse+generic+text+only+driver.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 312px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQHvn2438WJg417RogyPSNNmYEebOwyA2awOUuPz2HCZvpP2qFFt4EDU10q84pLTCrzSNYXdMbW4GQjOnAOOpMkgECTTJiB9nZRYKb30TGJI-RGxZ9jRway-hi4fcw8hCp4oMMEXkcPkk/s400/browse+generic+text+only+driver.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5441840353749790898" /></a><br />2) Once you have the driver, setup the ASP designer with <a href="http://www.zebra.com/id/zebra/na/en/index/products/special_features/proglang.html">Zebra programming language</a> (ZPL) like this (The buttons are for user to trigger the ZPL to send). </div><div><div style="text-align: center;"><span class="Apple-style-span" style="color:#0000EE;"><u><br /></u></span></div><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCRW4VMjte2afkb9wFJCrbzkTdF13Qc8dG8qIgEsKL82yxGeveTf2cZvKzZW2tjIX82Z_SNJdhyZqRD6ksgIZVxh_CzUD2kOeDqnLtB9LCgMyMmWcxARJqku8DXF4s2gbtE-n9Vhfij4E/s1600-h/ASPX+designer+for+zebra+ZPL.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 147px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCRW4VMjte2afkb9wFJCrbzkTdF13Qc8dG8qIgEsKL82yxGeveTf2cZvKzZW2tjIX82Z_SNJdhyZqRD6ksgIZVxh_CzUD2kOeDqnLtB9LCgMyMmWcxARJqku8DXF4s2gbtE-n9Vhfij4E/s400/ASPX+designer+for+zebra+ZPL.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5441847921046770706" /></a>3) By calling the undocumented print() function (not <a href="http://www.tizag.com/javascriptT/javascriptprint.php">window.print()</a>, and I think it works on IE only) in javascript, you can print the zebra bar-code label through ASP.NET.</div><div><br /></div> <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnHhK1urIehLTgqiql9LQzeCnb7PWalplAAOp_pO1RMqlEAkNDhTVtwsAztk_h1YG6iVU7bXlU4a36sGWMMiZbBJN9Ka5JyJFoF9e0CI9gDctrXF0Sj3QQYCu8WTahw-JAVqaAvmQ_zCs/s1600-h/javascript+print+function.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 153px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnHhK1urIehLTgqiql9LQzeCnb7PWalplAAOp_pO1RMqlEAkNDhTVtwsAztk_h1YG6iVU7bXlU4a36sGWMMiZbBJN9Ka5JyJFoF9e0CI9gDctrXF0Sj3QQYCu8WTahw-JAVqaAvmQ_zCs/s400/javascript+print+function.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5441843023567902978" /></a></div>4) Keep the web form as clean code as possible, you will send it as ZPL and ZPL only to printer.<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbTqJ76F3u3HMFQ44M4RqJLxjDKWYVMIK_tj1Cq4tFH0prQmDE1ardJJ23Gy2JQA_srUt2fpUiik3DpBx1YghLdD15cSH5eXVVKmLgQyOgvBKaGRXCHDkfxUNrR26SfQWlKqvW0bWMLeQ/s1600-h/ZPL+in+ASP.NET.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 236px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbTqJ76F3u3HMFQ44M4RqJLxjDKWYVMIK_tj1Cq4tFH0prQmDE1ardJJ23Gy2JQA_srUt2fpUiik3DpBx1YghLdD15cSH5eXVVKmLgQyOgvBKaGRXCHDkfxUNrR26SfQWlKqvW0bWMLeQ/s400/ZPL+in+ASP.NET.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5441848157393896306" /></a><div> 5) Print it! You should get it ;)</div><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinpiLd4af3divZpk7GoDwNYlHHyIOtscXNCor0M2zU5Pd_GSK3Ofc3HCGtUTjQgT9M2r-NwfgqtHt0DP77bmVtLa_CD2dIKu-gDuM762kfpPl1s9zxH2fXrzvknV8HGc8oLsIwKhlIwBE/s1600-h/print+it.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 365px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinpiLd4af3divZpk7GoDwNYlHHyIOtscXNCor0M2zU5Pd_GSK3Ofc3HCGtUTjQgT9M2r-NwfgqtHt0DP77bmVtLa_CD2dIKu-gDuM762kfpPl1s9zxH2fXrzvknV8HGc8oLsIwKhlIwBE/s400/print+it.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5441847266065580978" /></a></div>garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com23tag:blogger.com,1999:blog-3891346170516717444.post-45268143013649620852009-07-10T00:15:00.004+08:002009-07-10T00:30:28.185+08:00Google lauches Chrome OSFew days ago, Google <span id="SPELLING_ERROR_0" class="blsp-spelling-corrected">launches</span> Chrome OS at its <a href="http://googleblog.blogspot.com/2009/07/introducing-google-chrome-os.html">official blog</a>, and it quotes:<br /><br /><strong><em><span style="font-size:85%;">"Google Chrome OS is an open source, lightweight operating system that will initially be targeted at <span id="SPELLING_ERROR_1" class="blsp-spelling-error">netbooks</span>."</span></em></strong><br /><br />There's more from <a href="http://weblogs.java.net/blog/joconner/archive/2009/07/speculations_re.html">John <span id="SPELLING_ERROR_2" class="blsp-spelling-error">O'Conner's</span> Blog</a>:<br /><br /><em><strong><span style="font-size:85%;">"Google Chrome OS will be a slightly more beefy Android OS ..."</span></strong></em><br /><br />And from the <a href="http://chrome.blogspot.com/2009/07/google-chrome-os-faq.html">FAQ session</a> of the main site, there's a <a href="http://computersservicing.blogspot.com/2009/07/google-chrome-os-screenshots-leaked.html">screenshot of this OS</a> (this image does not belong to me):<br /><br /><img style="TEXT-ALIGN: center; MARGIN: 0px auto 10px; WIDTH: 400px; DISPLAY: block; HEIGHT: 300px; CURSOR: hand" id="BLOGGER_PHOTO_ID_5356495881178020242" border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlXiAOMUNR2u2hEQAx3TGEKosQ-XoFdG86xKcb0_7D3DD-csMPr8soZALNzY1IXSolhItEL7oP2GhjZdxSXIcDEXRpPBbxVGK1EGhXqCRenLPPZDSRuMtUAhlDETmr8ERDOYOEwrD6ijg/s400/google+chrome+os_leaked_screenshot%5B4%5D.png" />It's not weird Google target on <span id="SPELLING_ERROR_3" class="blsp-spelling-error">netbooks</span>, since <span id="SPELLING_ERROR_4" class="blsp-spelling-error">netbooks</span> has stronger sales recently.<br />Personally I think it's still too early to judge the impact of it towards Windows OS on desktop.garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com1tag:blogger.com,1999:blog-3891346170516717444.post-43491635762410079752009-02-07T12:33:00.014+08:002009-02-07T13:15:07.561+08:00MSSQL 2008 System View release!<p>Are you a DBA? Want to know how the overall architecture of MSSQL? Ever wonder how you can manage the databases easily? How you can create a version of <a href="http://start-coding.blogspot.com/2008/04/first-release-of-sql-management-console.html">simple MSSQL Management Console</a> better than mine? Yes, now you can see how it works through the <a href="http://en.wikipedia.org/wiki/Entity-relationship_model">entity-relationship model (ERM)</a> at <a href="http://www.microsoft.com/downloads/details.aspx?FamilyID=531c53e7-8a2a-4375-8f2f-5d799aa67b5c&displaylang=en">here</a>. </p><img id="BLOGGER_PHOTO_ID_5299913144820774514" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 400px; CURSOR: hand; HEIGHT: 170px; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ZCbQxLQ9ZhPTxH71B1qC1APUEM2ziNgo-_dR3vd24rpeRmyzsjUZ0HmYm8O0fTJaew-ovn_O8BEj2zghrwmxz510X0jLQEnuCWsh2O4kViiNaLKtUUD2hzZzTvkFFgk_U8aR3m3UV9E/s400/MSSQL+2008+SystemView.bmp" border="0" /> Start from <a href="http://msdn.microsoft.com/en-us/library/ms190324.aspx">sys.objects</a>, <a href="http://msdn.microsoft.com/en-us/library/ms176106.aspx">sys.columns</a>, ..., you can easily manipulate your T-SQL scripts within the following categories of component:<br /><ul><li>Objects, Types and Indexes</li><li>Trace and Eventing</li><li>Linked Servers</li><li>Common Language Runtime</li><li>Partitioning</li><li>Database Mirroring</li><li>EndPoints</li><li>Database and Storage</li><li>Execution Environment</li><li>Service Broker</li><li>Security</li><li>Transaction Information</li><li>Resource Governor</li><li>Server-Wide Information</li><li>Full Text Search</li><li>Extended Events</li></ul><p>p/s: During last year PDC 2008, .NET FX team has released a selection of new types and namespaces introduce in FX4 at <a href="http://blogs.msdn.com/brada/archive/2008/10/29/net-framework-4-poster.aspx">Brad Abrams's blog</a>. From there, you can download 2 versions:</p><ol><li><a href="http://tinyurl.com/PDC2008-NETFX4PDF">PDF version</a> </li><li><a href="http://tinyurl.com/DotNetFramework4PosterDeepZoom">DeepZoom version</a> </li></ol><p><img id="BLOGGER_PHOTO_ID_5299915330459632290" style="DISPLAY: block; MARGIN: 0px auto 10px; WIDTH: 400px; CURSOR: hand; HEIGHT: 267px; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPMBP-ZC48SK1tAlbsO9fF6LWvhx7ywVEfYtmTY1DqCEQpNZJjhhhbE6Kd3gMr0K7NV14CGPNecqWCGVnxjM-_MlvWZa5kQ1dOk1lEZ8Y1uAiXi8tLcKt0CF22nnWJqqqJnn0qHflgAys/s400/.NET+Framework+introduce+new+types+and+namespaces.bmp" border="0" /></p>garyhttp://www.blogger.com/profile/14341234358005844724noreply@blogger.com0