Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

Silverlight 3.0 Available for Download Today

Microsoft officials wouldn’t say a month ago whether the actual Silverlight 3 bits would be available by the day of the official launch, which is July 10. But it turns out they are available a day earlier.

If you try to install this version but you have already Silverlight 2.0 for Developer installed on your machine, you will get error message: Unable to install Silverlight. Your Silverlight developer components are out of date.

image

If you are not a developer and want to avoid this error, please uninstall previous Silverlight version first by following the Silverlight Uninstall Instructions. If you are a developer, download and install Silverlight 3.0 for Developer here.

image

Installation will upgrade current version of Silverlight on your machine. You do not need to install Silverlight 3.0 if you have installed Silverlight 3.0 for developer.

image

Same as previous version, Silverlight shipped not followed with developer tools. Expression Blend 3 and Silverlight Tools for Visual studio still Beta or RC. Expression Blend 3 + SketchFlow RC available for download from http://www.microsoft.com/downloads/details.aspx?displaylang=en&FamilyID=92e1db7a-5d36-449b-8c6b-d25f078f3609. I'm still waiting for RTM version of developer tools.


Categories: Silverlight
Permalink | Comments (4) | Post RSSRSS comment feed

How To Create Silverlight Avatar for INDC blogs site

I have created Silverlight avatar for Community Server blog list page (http://geeks.netindonesia.net/blogs) a week ago as requested by Naren. I think its no difficult to replace HTML avatar with Silverlight avatar on the fly. Just query DOM using jQuery for existing avatar, grab photo Url information, hide it and replace with new Silverlight avatar. Here is step by step to create Silverlight avatar for CS theme on geeks site.

Create Silverlight project using Expression Blend.

I'm created two path to put avatar image and two StackPanel contain text-boxes for view counter text. Second path and StackPanel will mirrored-down to make shadow-mirror effect. These path will be binded by same image.

image

Here is the XAML for that design.

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="Avatar.Page"
    Width="133" Height="130">
    <Grid x:Name="LayoutRoot" Clip="M0,0 L133,0 L133,130 L0,130 z">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#FF8FC2E4"/>
                <GradientStop Color="#FFFFFFFF" Offset="1"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid>
            <Canvas Margin="48 1 1 10" >
                <Path Data="M0,0 L82,0 L82,102 L0,91 z" Stretch="Fill" Stroke="#CCFFFFFF" >
                    <Path.Fill>
                        <ImageBrush x:Name="Photo" />
                    </Path.Fill>
                </Path>
                <Path Canvas.Top="193.5" Data="M1.5,12 L81,0 L81.75,73.5 L0.25,82.5 z" Stretch="Fill" Stroke="#CCFFFFFF" RenderTransformOrigin="0,0" Height="102.188" Width="82.5" Canvas.Left="0.125" >
                    <Path.OpacityMask>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.4,0">
                            <GradientStop Color="#AAFFFFFF" Offset="1"/>
                            <GradientStop Color="#00FFFFFF" Offset="0"/>
                        </LinearGradientBrush>
                    </Path.OpacityMask>
                    <Path.Fill>
                        <ImageBrush x:Name="PhotoShadow" />
                    </Path.Fill>
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleY="-1"/>
                            <SkewTransform/>
                            <RotateTransform/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
            </Canvas>
            <Canvas Margin="2,0,0,0">
                <Path Height="18" Width="134" Canvas.Left="-3" Canvas.Top="86.25" Data="M128,103.25 L-3,86.25" Fill="#FFFFFFFF" Stretch="Fill" Stroke="#B2FFFFFF"/>
                <StackPanel Canvas.Top="48" RenderTransformOrigin="0.5,0.5">
                    <StackPanel.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform/>
                            <SkewTransform AngleY="6.972"/>
                            <RotateTransform/>
                            <TranslateTransform Y="4.006"/>
                        </TransformGroup>
                    </StackPanel.RenderTransform>
                    <TextBlock x:Name="ViewCount" Text="9999" TextWrapping="Wrap" FontFamily="Arial" FontSize="20" Foreground="#FF023D9E" HorizontalAlignment="Right"/>
                    <TextBlock Text="Views" TextWrapping="Wrap" FontFamily="Arial" FontSize="16" Foreground="#FF023D9E" HorizontalAlignment="Right"/>
                </StackPanel>
                <StackPanel Canvas.Top="84" RenderTransformOrigin="0.5,0.5">
                    <StackPanel.OpacityMask>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#00FFFFFF"/>
                            <GradientStop Color="#AAFFFFFF" Offset="1"/>
                        </LinearGradientBrush>
                    </StackPanel.OpacityMask>
                    <StackPanel.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleY="-1"/>
                            <SkewTransform AngleY="7.585"/>
                            <RotateTransform/>
                            <TranslateTransform Y="3.288"/>
                        </TransformGroup>
                    </StackPanel.RenderTransform>
                    <TextBlock x:Name="ViewCountShadow" Text="9999" TextWrapping="Wrap" FontFamily="Arial" FontSize="20" Foreground="#FF023D9E" HorizontalAlignment="Right"/>
                    <TextBlock Text="Views" TextWrapping="Wrap" FontFamily="Arial" FontSize="16" Foreground="#FF023D9E" HorizontalAlignment="Right"/>
                </StackPanel>
            </Canvas>
        </Grid>
    </Grid>
</UserControl>

Write code-behind to bind avatar image and view counter.

This code-behind used to bind avatar image and view counter. The image url and view counter passed by InitParams property from javascript. The App.xaml.cs code-behind used to get InitParams and Page.xaml.cs used to bind the image and text from parameter values.

App.xaml.cs

 1 using System.Windows;
 2 using System;
 3 using System.Windows.Browser;
 4 
 5 namespace Avatar
 6 {
 7     public partial class App : Application 
 8     {
 9         public App() 
10         {
11             this.Startup += this.OnStartup;
12             this.Exit += this.OnExit;
13             this.UnhandledException += this.Application_UnhandledException;
14 
15             InitializeComponent();
16         }
17 
18         private void OnStartup(object sender, StartupEventArgs e)
19         {
20             var page = new Page();
21             // Read application parameter
22             var imageSourceUrl = string.Empty;
23             int viewCountInteger = 0;
24             if (e.InitParams.Count > 0)
25             {
26                 var viewCount = string.Empty;
27                 if (e.InitParams.ContainsKey("ImageSourceUrl"))
28                     imageSourceUrl = HttpUtility.HtmlDecode(e.InitParams["ImageSourceUrl"]);
29                 if (e.InitParams.ContainsKey("ViewCount")) viewCount = e.InitParams["ViewCount"];
30                 // Load the main control here
31                 if (!string.IsNullOrEmpty(viewCount))
32                     int.TryParse(viewCount, out viewCountInteger);
33             }
34             
35             page.SetImageSource(imageSourceUrl);
36             page.SetViewCount(viewCountInteger);
37             this.RootVisual = page;
38         }
39 
40         private void OnExit(object sender, EventArgs e) 
41         {
42         }
43 
44         private void Application_UnhandledException(object sender, ApplicationUnhandledExceptionEventArgs e) 
45         {
46             // If the app is running outside of the debugger then report the exception using
47             // the browser's exception mechanism. On IE this will display it a yellow alert 
48             // icon in the status bar and Firefox will display a script error.
49             if (!System.Diagnostics.Debugger.IsAttached)
50             {
51                 // NOTE: This will allow the application to continue running after an exception has been thrown
52                 // but not handled. 
53                 // For production applications this error handling should be replaced with something that will 
54                 // report the error to the website and stop the application.
55                 e.Handled = true;
56                 Deployment.Current.Dispatcher.BeginInvoke(delegate { ReportErrorToDOM(e); });
57             }
58         }
59 
60         private void ReportErrorToDOM(ApplicationUnhandledExceptionEventArgs e)
61         {
62             try
63             {
64                 string errorMsg = e.ExceptionObject.Message + @"\n" + e.ExceptionObject.StackTrace;
65                 errorMsg = errorMsg.Replace("\"", "\\\"").Replace("\r\n", @"\n");
66 
67                 System.Windows.Browser.HtmlPage.Window.Eval("throw new Error(\"Unhandled Error in Silverlight 2 Application " + errorMsg + "\");");
68             }
69             catch (Exception)
70             {
71             }
72         }
73     }
74 }

 

Page.xaml.cs

 1 using System;
 2 using System.Windows;
 3 using System.Windows.Browser;
 4 using System.Windows.Controls;
 5 using System.Windows.Media.Imaging;
 6 
 7 namespace Avatar
 8 {
 9     public partial class Page : UserControl
10     {
11         public Page()
12         {
13             // Required to initialize variables
14             InitializeComponent();
15             
16         }
17         public void SetImageSource(string imageSourceUrl)
18         {
19             if (!string.IsNullOrEmpty(imageSourceUrl))
20             {
21                 var url = new Uri(imageSourceUrl, UriKind.RelativeOrAbsolute);
22                 if (!url.IsAbsoluteUri)
23                 {
24                     url = new Uri(HtmlPage.Document.DocumentUri, url);
25                 }
26                 var image = new BitmapImage(url);
27                 Photo.ImageFailed += Photo_ImageFailed;
28                 PhotoShadow.ImageFailed += Photo_ImageFailed;
29                 Photo.ImageSource = image;
30                 PhotoShadow.ImageSource = image;
31             }
32         }
33         public void SetViewCount(int viewCount)
34         {
35             ViewCount.Text = viewCount.ToString();
36             ViewCountShadow.Text = viewCount.ToString();
37         }
38         void Photo_ImageFailed(object sender, ExceptionRoutedEventArgs e)
39         {
40         }
41     }
42 }

 

Note: You must get absolute Url for downloading photo with query string, see line 21-25 above. Silverlight will ignored query string if you are not provide absolute url for image source.

 

Grab DOM using jQuery

jQyery is very powerful tool for DOM manipulation. You can query and modify DOM with single line of code. Before query the DOM, you should be knows the DOM structure of page. Target of DOM is the avatar image. Open IE development toolbar to get the DOM of avatar. Find ID or CSS classes that used by Avatar to be replaced by Silverlight avatar.

image

From this information you can analyze that every blog entry placed inside DIV element with content_main_con_be CSS class. This DIV element contain view count and avatar image DIV in first and second child element. Based on this information, you can query the DOM using jQuery as script in line number 11 and 12 below.

 1 /*
 2     Filename: avatar.js
 3     Project : INDC Geeks
 4     Ver.    : 1.0
 5     Date    : March, 4th 2009
 6     Author  : Ahmad Masykur - www.masykur.web.id
 7 */
 8 
 9 $(document).ready(function() {
10     if (Silverlight.isInstalled('2.0')) {
11         var viewCountElements = $("div.content_main_con_be div:nth-child(1) > span:even");
12         var pictureBoxes = $("div.content_main_con_be div:nth-child(2)")
13         pictureBoxes.each(function(i, element) {
14             $(element).width(132).height(130);
15             var imageSourceUrl = $('img', element).attr('src');
16             createSilverlight(element, imageSourceUrl, $(viewCountElements[i]).text());
17         });
18         $("div.content_main_con_be div:nth-child(1)").hide();
19     }
20 });
21 
22 function createSilverlight(host, imageSourceUrl, viewCount) {
23     Silverlight.createObject(
24         '/ClientBin/Avatar.xap?v=0.2',
25         host, host +"_Plugin",
26         {
27             width: "100%", height: "100%",
28             background: "#E8CFB0", 
29             version: "2.0.31005.0" 
30         },
31         { onLoad: null },
32         'ImageSourceUrl=' + imageSourceUrl + ', ViewCount=' + viewCount);
33 }
34 

Description of script above are.

  • The script above will be execute when DOM is ready (evaluated in line 9).
  • Line 10 will verify if Silverlight 2 is installed in the machine. If Silverlight 2 is installed, DOM will be replaced with Silverlight object.
  • Line 11 and 12 is getting view counter and picture box elements.
  • Line 13: Make a loop the selected DOM. 
  • Line 14: Set the width and height of element that will be used for Silverlight host
  • Line 15: Get image Url information from IMG element
  • Line 16: Create Silvelight object using javascript.
  • Line 22-33 is function to create Silverlight object.
  • Line 32: Set InitParams value to be passing to Silverlight application.

This script required Silverlight.js and jQuery 1.3.2. The last steps are upload xap file of Silverlight application and required scripts also included the script above, Silverlight.js and jquery-1.3.2.min.js into blog.master of theme.

<script src="/JavaScripts/Silverlight.js" type="text/javascript"></script> 
<script src="/JavaScripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/JavaScripts/avatar.js" type="text/javascript"></script>

Finally, the geeks portal have a new theme with Silverlight avatar. This avatar will available both installed Silverlight plung-ins or not. User will see HTML version of avatar if they don't have Silverlight plug-ins installed on the machine.

image

I would like to say thank you to Wely and Naren that support me to make it running well in geeks portal.


Categories: Silverlight
Permalink | Comments (3) | Post RSSRSS comment feed

Menangkap MouseWheel Event dengan Silverlight 2

Pada Silverlight 1.0 saya pernah menulis bagaimana mendeteksi event mousewheel (scroll) di Hacking Mouse Scroll Event pada Silverlight 1.0. Setelah keluarnya Silverlight 2, pemprograman tidak lagi menggunakan JavaScript sehingga cara tersebut sudah tidak lagi bisa digunakan. Untungnya Silverlight 2 memiliki mekanisme untuk menangkap event yang terjadi di HTML object yaitu System.Windows.Browser.HtmlPage.Window.AttachEvent. Dengan method tersebut, kita bisa tangkap event untuk mousewheel.

Event mousewheel masing-masing browser yang didukung oleh Silverlight memiliki perbedaan yaitu:

  • Mozilla dan Safari menggunakan event "DOMMouseScroll" pada element window
  • IE menggunakan event "onmousewheel" pada element document
  • Opera menggunakan event "onmousewheel" pada element window.

Perbedaan ini mengharuskan untuk menangkap ketiga event tersebut dan menghandle di satu buah event handler.

HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel); HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel); HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel);

Setelah event diregister ke handler yang sama, ada lagi perbedaan masing-masing browser pada waktu menangkap nilai property mouse wheel.

  • Pada IE dan Opera, nilai diambil dari property "wheelDelta".
  • Pada Mozilla dan Safari, nilai diambil dari property "detail".

Selain property-nya berbeda nilai yang dihasilkan juga berbeda.

  • Pada IE dan Opera, setiap scroll akan menghasilkan nilai kelipatan +120 atau -120. Pada Opera terjadi perbedaan dengan IE mengenai tanda plus/minus. Opera menghasilkan nilai kebalikan dari IE. Oleh karena itu, untuk menyamakan nilai keluaran, pada Opera tandanya harus dibalik.
  • Pada Mozilla dan Safari, setiap scroll akan menghasilkan nilai kelipatan +3 atau -3

Perbedaan nilai antara masing-masing browser perlu disamakan. Untuk menyamakan, digunakan +1 atau -1 sehingga penanganan di aplikasi menjadi lebih mudah.

private void OnMouseWheel(object sender, HtmlEventArgs args) { double delta = 0; ScriptObject e = args.EventObject; if (e.GetProperty("detail") != null) { // Mozilla and Safari delta = ((double)e.GetProperty("detail")); } else if (e.GetProperty("wheelDelta") != null) { // IE and Opera delta = ((double)e.GetProperty("wheelDelta")); // In Opera 9, delta differs in sign as compared to IE. if (HtmlPage.BrowserInformation.UserAgent.IndexOf("opera") > -1) delta *= -1; } delta = Math.Sign(delta); if (MouseWheelScroll != null) MouseWheelScroll(new MouseWheelEventArgs(delta)); }

Nilai delta dalam method di atas yang kemudian diambil dalam aplikasi. Supaya method-method ini dapat dipakai di beberapa tempat (reusable). Perlu dibungkus dalam class dan nilai delta dilempar dalam event. Kode selengkapnya dapat dilihat di bawah.

using System; using System.Windows.Browser; /// <summary> /// Delegate for the MouseWheelScroll event. /// </summary> /// <param name="args">Event data for the MouseWheelScroll event.</param> public delegate void MouseWheelHandler(MouseWheelEventArgs args); /// <summary> /// Event data for the MouseWheelScroll event. /// </summary> public class MouseWheelEventArgs : EventArgs { private readonly double m_delta; public double Delta { get { return m_delta; } } public MouseWheelEventArgs(double delta) { m_delta = delta; } } /// <summary> /// Provides access to the browser-generated mouse wheel scrolling events. /// </summary> public class MouseWheelListener : IDisposable { public event MouseWheelHandler MouseWheelScroll; public MouseWheelListener() { HtmlPage.Window.AttachEvent("DOMMouseScroll", OnMouseWheel); HtmlPage.Window.AttachEvent("onmousewheel", OnMouseWheel); HtmlPage.Document.AttachEvent("onmousewheel", OnMouseWheel); } private void OnMouseWheel(object sender, HtmlEventArgs args) { double delta = 0; ScriptObject e = args.EventObject; if (e.GetProperty("detail") != null) { // Mozilla and Safari delta = ((double)e.GetProperty("detail")); } else if (e.GetProperty("wheelDelta") != null) { // IE and Opera delta = ((double)e.GetProperty("wheelDelta")); // In Opera 9, delta differs in sign as compared to IE. if (HtmlPage.BrowserInformation.UserAgent.IndexOf("opera") > -1) delta *= -1; } delta = Math.Sign(delta); if (MouseWheelScroll != null) MouseWheelScroll(new MouseWheelEventArgs(delta)); } /// <summary> /// Detaches from the browser-generated scroll events. /// </summary> public void Dispose() { HtmlPage.Window.DetachEvent("DOMMouseScroll", OnMouseWheel); HtmlPage.Window.DetachEvent("onmousewheel", OnMouseWheel); HtmlPage.Document.DetachEvent("onmousewheel", OnMouseWheel); } }

Semoga bermanfaat.


Categories: Silverlight
Permalink | Comments (13) | Post RSSRSS comment feed

Install Silverlight 2 Tool for Visual Studio 2008 SP1 (RC1)

Silvelight 2 Tools for Visual Studio 2008 SP1 (RC1) yang besarnya 72.1MB ternyata belum lengkap. Waktu installasi masih membutuhkan download lagi.

image

Kenapa Microsoft membuat installer segede gajah tapi masih juga membutuhkan tambahan download? Entah berapa gede lagi yang harus didownload untuk menginstall mahluk ini. Setelah selesai download terlihat counter bandwidth saya sebesar 7.2MB. Nilai itu tidak jauh meleset dari ukuran byte yang di download karena sebelum install counter hampir tidak bertambah dan waktu install counter terus naik dan saya tidak melakukan aktifitas lain yang menggunakan Internet.

image

Bagi yang tidak terhubung ke Internet, instalasi tidak bisa dilakukan. Di akhir instalasi akan ada pesen error. Ketika di buka log file-nya, disebutkan bahwa tidak dapat melakukan koneksi ke Internet.

WinHttpDetectAutoProxyConfigUrl failed with error: 12180
[10/15/2008, 6:13:16] (IronSpigot::WinHttpDownloader::GetProxySetting) Auto detection of proxy failed, try to retrieve proxy information via IE.
[10/15/2008, 6:13:16] (IronSpigot::WinHttpDownloader::GetProxySettingViaIE) Retrieving proxy information using WinHttpGetIEProxyConfigForCurrentUser
[10/15/2008, 6:13:16] (IronSpigot::WinHttpDownloader::GetProxySettingViaIE) Unable to retrieve Proxy information although WinHttpGetIEProxyConfigForCurrentUser called succeeded
[10/15/2008, 6:13:16] (IronSpigot::WinHttpDownloader::CreateSession) WINHTTP_ACCESS_TYPE_DEFAULT_PROXY
[10/15/2008, 6:13:16] (IronSpigot::WinHttpDownloader::StartDownload) Session Created
[10/15/2008, 6:13:16] (IronSpigot::WinHttpDownloader::StartDownload) Connection Created
[10/15/2008, 6:13:16] (IronSpigot::WinHttpDownloader::StartDownload) Request Created
[10/15/2008, 6:13:54] (IronSpigot::WinHttpDownloader::AsyncCallbackInternal) WINHTTP_CALLBACK_STATUS_REQUEST_ERROR error: error=12002, result= 2. Percentage downloaded=0
[10/15/2008, 6:13:55] (IronSpigot::RetryingDownloaderT<class IronSpigot::WinHttpDownloader,class IronSpigot::BitsDownloader,class IronSpigot::UrlMonDownloader,class IronSpigot::FileAuthenticity>::PerformAction) Download failed at attempt 2 of 4 for http://go.microsoft.com/fwlink/?LinkId=127693 using http:
[10/15/2008, 6:13:55] (IronSpigot::RetryingDownloaderT<class IronSpigot::WinHttpDownloader,class IronSpigot::BitsDownloader,class IronSpigot::UrlMonDownloader,class IronSpigot::FileAuthenticity>::UseHttp) Determine the protocol to use
[10/15/2008, 6:13:55] (IronSpigot::RetryingDownloaderT<class IronSpigot::WinHttpDownloader,class IronSpigot::BitsDownloader,class IronSpigot::UrlMonDownloader,class IronSpigot::FileAuthenticity>::PerformAction) Use BITS
[10/15/2008, 6:13:55] (IronSpigot::RetryingDownloaderT<class IronSpigot::WinHttpDownloader,class IronSpigot::BitsDownloader,class IronSpigot::UrlMonDownloader,class IronSpigot::FileAuthenticity>::PerformAction) Download attempt 3 of 4 for http://go.microsoft.com/fwlink/?LinkId=127693 using BITS
[10/15/2008, 6:21:8] (IronSpigot::BitsDownloader::JobError) Error from JobError Callback : hr= 0x80072ee2 Context=5 Description=The operation timed out . Percentage downloaded = 0
[10/15/2008, 6:21:8] (IronSpigot::RetryingDownloaderT<class IronSpigot::WinHttpDownloader,class IronSpigot::BitsDownloader,class IronSpigot::UrlMonDownloader,class IronSpigot::FileAuthenticity>::PerformAction) Download failed at attempt 3 of 4 for http://go.microsoft.com/fwlink/?LinkId=127693 using BITS
[10/15/2008, 6:21:8] (IronSpigot::RetryingDownloaderT<class IronSpigot::WinHttpDownloader,class IronSpigot::BitsDownloader,class IronSpigot::UrlMonDownloader,class IronSpigot::FileAuthenticity>::UseHttp) Determine the protocol to use
[10/15/2008, 6:21:8] (IronSpigot::RetryingDownloaderT<class IronSpigot::WinHttpDownloader,class IronSpigot::BitsDownloader,class IronSpigot::UrlMonDownloader,class IronSpigot::FileAuthenticity>::PerformAction) Use WinHttp
[10/15/2008, 6:21:8] (IronSpigot::RetryingDownloaderT<class IronSpigot::WinHttpDownloader,class IronSpigot::BitsDownloader,class IronSpigot::UrlMonDownloader,class IronSpigot::FileAuthenticity>::PerformAction) Download attempt 4 of 4 for http://go.microsoft.com/fwlink/?LinkId=127693 using http:
[10/15/2008, 6:21:14] (IronSpigot::WinHttpDownloader::GetProxySettingViaAutoDetect) Auto detecting proxy information
[10/15/2008, 6:21:28] (IronSpigot::WinHttpDownloader::GetProxySettingViaAutoDetect) WinHttpDetectAutoProxyConfigUrl failed with error: 12180
[10/15/2008, 6:21:28] (IronSpigot::WinHttpDownloader::GetProxySetting) Auto detection of proxy failed, try to retrieve proxy information via IE.
[10/15/2008, 6:21:28] (IronSpigot::WinHttpDownloader::GetProxySettingViaIE) Retrieving proxy information using WinHttpGetIEProxyConfigForCurrentUser
[10/15/2008, 6:21:28] (IronSpigot::WinHttpDownloader::GetProxySettingViaIE) Unable to retrieve Proxy information although WinHttpGetIEProxyConfigForCurrentUser called succeeded
[10/15/2008, 6:21:28] (IronSpigot::WinHttpDownloader::CreateSession) WINHTTP_ACCESS_TYPE_DEFAULT_PROXY
[10/15/2008, 6:21:28] (IronSpigot::WinHttpDownloader::StartDownload) Session Created
[10/15/2008, 6:21:28] (IronSpigot::WinHttpDownloader::StartDownload) Connection Created
[10/15/2008, 6:21:28] (IronSpigot::WinHttpDownloader::StartDownload) Request Created
[10/15/2008, 6:22:4] (IronSpigot::WinHttpDownloader::AsyncCallbackInternal) WINHTTP_CALLBACK_STATUS_REQUEST_ERROR error: error=12002, result= 2. Percentage downloaded=0
[10/15/2008, 6:22:4] (IronSpigot::RetryingDownloaderT<class IronSpigot::WinHttpDownloader,class IronSpigot::BitsDownloader,class IronSpigot::UrlMonDownloader,class IronSpigot::FileAuthenticity>::PerformAction) Download failed at attempt 4 of 4 for http://go.microsoft.com/fwlink/?LinkId=127693 using http:
[10/15/2008, 6:22:4] (IronSpigot::LogUtils::LogFinalResult) Final Result: Installation failed with error code: (0x80072EE2).

Setelah dianalisis, ternyata yang didownload adalah Silverlight 2 runtime. Saya coba di komputer lain dengan menginstall Silverlight 2 runtime terlebih dahulu sebelum menginstall Silverlight Tools, proses download dilewati.

Conclusion

Sebelum melakukan Install Silverlight 2 Tools for Visual Studio 2008 SP1 (RC1) pastikan.

  • Visual Studio 2008 SP1 sudah terinstall
  • Uninstall Silverlight 2 alpha / beta / RC0.
  • Silverlight 2 runtime sudah terinstall
  • Uninstall semua versi preview dan trial dari Expression Blend.

Semoga bermanfaat.


Categories: Silverlight
Permalink | Comments (15) | Post RSSRSS comment feed

Silverlight 2 Released

Beberapa jam yang lalu saya sudah menulis "Silverlight 2 Releases Today" tentang keluarnya Silverlight 2 pada hari ini. Malam ini Silverlight 2 sudah bisa diunduh di sini sebagai bagian dari Visual Studio 2008 dan Expression Blend 2 tool. Tulisan ini memang agak terlambat karena tadi beberapa saat sebelum meninggalkan kantor Microsoft Indonesia di BEJ Lantai 18 saya cek Silverlight 2 belum bisa diunduh. Pulang bersama Wely, di dalam busway Wely baru ngasih tahu kalo beberapa menit sebelum meninggalkan kantor, Scott Gu mengumumkan bahwa Silverlight 2 sudah rilis. Tak apa lah, informasi tetap perlu disebarluaskan.

Kini saatnya untuk download kembali Silverlight 2 setelah minggu lalu download Silverlight 2 RC0. Besok pagi siap untuk buat aplikasi dengan Silverlight 2.


Categories: Silverlight
Permalink | Comments (3) | Post RSSRSS comment feed

Silverlight 2 RTW (2.0.31005.0) Already Available

Silverlight 2.0 RTW (Release To Web) detik ini sudah siap diunduh dari http://www.microsoft.com/silverlight/resources/install.aspx.

 

image

Bagi yang sudah tidak sabar mencoba Silverlight 2, langsung saja menuju ke TKP.


Categories: Silverlight
Permalink | Comments (7) | Post RSSRSS comment feed

Silverlight 2 Releases Today

Berdasarkan blog Jesse Liberty di Silverlight 2 Releases Tomorrow menyebutkan bahwa besok (dari kemaren waktu Redmond, atau hari ini WIB) Silverlight 2 akan release. Berita resmi dari Microsoft (http://www.microsoft.com/presspass/press/2008/oct08/10-13Silverlight2PR.mspx) juga menuliskan bahwa Silverlight 2 akan segera dapat dinikmati. Setelah beberapa hari yang lalu install Silverlight 2 RC0, kini saatnya menunggu waktu peluncuran Silverlight 2 dan convert semua applikasi Silverlight lama ke Silverlight yang baru. Silverlight 2 dapat diunduh dari http://www.microsoft.com/silverlight

Dalam peluncuran Silverlight 2, Microsoft juga akan mengeluarkan programming template yang disebut sebagai Silverlight Control Pack di bawah lisensi Microsoft Permissive Licence. Dengan ini, programmer dapat menulis applikasi Silverlight dengan Visual Web Developer 2008 Express Edition.

Saatnya bermain dengan Silverlight 2.


Categories: Silverlight
Permalink | Comments (2) | Post RSSRSS comment feed

Membuat LivePath Effect dengan Inkscape

LivePath effect merupakan sebuah effect dari paduan banyak path sehingga menghasilkan garis-garis halus yang berjajar. Salah satu contoh LivePath effect seperti pada gambar berikut

image

Kita dapat membuat effect tersebut dengan berbagai macam tools pembuat graphic vector seperti Corel Draw. Dalam hal ini saya akan gunakan tools gratis yaitu InkScape (www.inkscape.org). InkScape sebenarnya adalah sebuah tool untuk menggambar graphic vektor SVG. Selain SVG dokumen yang dibuat dengan tool ini juga dapat disimpan dalam format XAML (Silverlight), PostScript, Enhanced Metafile (EMF), OpenDocument Drawing (ODG), dll.

Untuk membuat gambar seperti di atas, langkah pertama adalah membuat background. Background terdiri dari dua persegi empat dengan degradasi kuning keemasan. Kita buat kotak pertama dengan ukuran 620px x 70px. Isi kotak warna gradient dari atas ke bawah dengan gradient stop #fbf49eff (atas) dan #e0a71dff (bawah).

image

Kotak kedua dibuat dengan ukuran 620px x 15px yang diletakkan persis di bawah kotak pertama. Gradient untuk kotak kedua terdiri dari tiga gradient stop dari atas ke bawah #edcd5dff (posisi 0% / atas), #eddd5dff (posisi 20% / tengah) dan #fbf49eff (posisi 100% / bawah). Untuk membuat pemisah tipis antara kedua kotak, dibuat stroke thickness sebesar 0.5px dengan warna putih. Hasil dari kedua kotak tersebut seperti terlihat pada gambar berikut.

image

Langkah berikutnya adalah membuat livepath effect itu sendiri. Untuk pemisahkan antara background dengan livepath effect dibuat layer baru di atas background dengan nama LifePath. Selanjutnya buat dua garis sinus menggunakan freehand line tool dengan warna merah dan putih yang saling memotong satu sama lain. Buat tebal stroke untuk dua garis ini sebesar 0.5px dan opacity 0.5.

image 

Langkah terakhir membuat effect livepath dengan menggunakan efek interpolasi path. Pilih (select) kedua path, pada menu Effect, Generate from Path, pilih Interpolate.

image

Pada jendela Interpolate, isi Exponent = 0.0, Interpolation steps = 128, Interpolation method = 2, Duplicate endpaths = unchecked, Interpolate style = checked. Setelah semua nilai diisi, tekan tombol Apply.

image

Hasil akhir dari langkah-langkah di atas adalah seperti terlihat pada gambar berikut.

image

Anda bisa menggunakan metode ini untuk membuat header sebuah halaman web atau untuk pemanis di dalam halaman.

Source file Inkscape SVG dari tutorial ini dapat didownload di merdeka.zip (28.49 kb).

Semoga bermanfaat.


Permalink | Comments (5) | Post RSSRSS comment feed

Mengkombinasikan Silverlight dengan HTML

Silverlight memang sangat tangguh untuk menampilkan antar muka pengguna (user interface) yang interaktif dan menarik. Pada silverlight 1.0 fasilitas yang tersedia masih sangat terbatas, hanya dapat digunakan untuk menggambar vektor, animasi dan multimedia. Pada Silverlight 1.0 belum dikenal istilah kontrol termasuk kontrol sederhana seperti input textbox, combobox, dll. Pada Silverlight 2.0 baru akan ada kontrol baik yang out of the box telah tersedia maupun kontrol yang dibuat sendiri.

Permasalahan saat ini adalah kontrol HTML (contoh: Ajax Control Toolkit, Rich Text Editor, dll) jumlahnya sangat banyak dan tidak mungkin semua diubah menjadi kontrol Silverlight. Satu lagi permasalahan adalah jika menggunakan kontrol Silverlight 2.0, kesulitannya adalah mengkomunikasikan antara code-behind C# dengan Javascript.

Untuk memenuhi keterbatasan ini, dapat digunakan kombinasi antara Silverlight dan kontrol HTML yang sudah ada. Dengan mengkombinasikan keduanya, tidak perlu lagi mengubah semua kontrol yang sudah stabil di HTML menjadi objek Silverlight.

Penggabungan antara HTML dan Silverlight diperlukan pengaturan atribut isWindowless: 'true' pada waktu create object Silverlight. Jika isWindowless: 'false' maka kontrol HTML akan selalu berada di bawah Silverlight.

createSilverlight = function()
{
    var scene = new LayeredPage();
    Silverlight.createObjectEx({
        source: 'scene.xaml',
        parentElement: document.getElementById('SilverlightPlugInHost'),
        id: 'SilverlightPlugIn',
        properties: {
            width: '800',
            height: '600',
            background: 'transparent',
            isWindowless: 'true',
            version: '1.0',
            framerate: "25"
        },
        events: {
            onError: null,
            onLoad: Silverlight.createDelegate(scene, scene.handleLoad),
        },       
        context: null
    });

}

Dengan mengeset isWindowsless menjadi 'true' ada sesuatu yang harus dibayar yaitu tiap ada perubahan, semua element XAML akan dirender ulang. Jika isWindowless diset 'false', hanya elemen yang berubah saja yang akan dirender. Jika elemen tidak terlalu banyak animasi, hal tersebut bukan masalah. Jika banyak animasi, performance dapat ditingkatkan dengan menurunkan framerate dari default-nya 60pfs menjadi 25-30fps.


Categories: Silverlight
Permalink | Comments (1) | Post RSSRSS comment feed

Hacking Mouse Scroll Event pada Silverlight 1.0

Silverlight 1.0 hanya memiliki mouse yang terbatas yaitu MouseMove, MouseEnter, MouseLeave, MouseLeftButtonDown dan MouseLeftButtonUp. Dari kelima event yang dimiliki oleh Silverlight 1.0 tersebut tidak bisa untuk menangkap event yang terjadi pada waktu scroll mouse berputar. Mouse scroll dapat diakali (hack) dengan memanfaatkan elemen HTML <select> dengan event onchange. Saat fokus pada element <select> dan scroll mouse diputar, index pada element tersebut akan berubah. Perilaku ini dapat dimanfaatkan untuk menangkap event scroll pada mouse.

Berukut langkah-langkah untuk melakukan hack terhadap event mouse scroll.

Buat halaman HTML yang dijadikan sebagai host Silverlight dengan nama file zoom.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Zoom by Scroll Demo</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="zoom.html.js"></script>
<script type="text/javascript" src="zoom.xaml.js"></script>
</head>
<body>
<div id="SilverlightPlugInHost" style="border: solid 1px #7f7f7f; display: inline;">
</div>
<script type="text/javascript">
createSilverlight();
</script>
</
body>
</html>

Buat file XAML untuk menampilkan sebuah foto dengan nama file zoom.xaml.

<Canvas xmlns=http://schemas.microsoft.com/client/2007 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Image x:Name="Photo" Source="images/Foto002.jpg"> <Image.RenderTransform> <ScaleTransform x:Name="ZoomTransform" ScaleX="0.8" ScaleY="0.8" /> </Image.RenderTransform> </Image> </Canvas>

Buat code-behind JavaScript untuk membuat object Silverlight dengan nama file zoom.html.js.

function createSilverlight()
{
    var zoom = new Masykur.Demo.Zoom();
    Silverlight.createObjectEx({
        source: 'zoom.xaml',
        parentElement: document.getElementById('SilverlightPlugInHost'),
        id: 'SilverlightPlugIn',
        properties: {
            width: '800',
            height: '600',
            background:'#ffffff',
            isWindowless: 'false',
            version: '1.0'
        },
        events: {
            onError: null,
            onLoad: Silverlight.createDelegate(zoom, zoom.handleLoad)
        },        
        context: null 
    });
}

if (!window.Silverlight) 
    window.Silverlight = {};

Silverlight.createDelegate = function(instance, method) {
    return function() {
        return method.apply(instance, arguments);
    }
}

Nah terakhir adalah code-behind XAML untuk menangani event object Silverlight dengan nama file zoom.xaml.js. Code ini yang akan digunakan untuk melakukan hack terhadap event mouse scroll.

if (!window.Masykur) {
    window.Masykur = {};
}
Masykur.registerNamespace = function (ns)
{
    var nsParts = ns.split(".");
    var root = window;

    for(var i=0; i<nsParts.length; i++) {
        if(typeof root[nsParts[ i ]] == "undefined") {
            root[nsParts[ i ]] = new Object();
        }
        root = root[nsParts[ i ]];
    }
}

Masykur.registerNamespace("Masykur.Demo");

Masykur.Demo.Zoom = function() 
{
}

Masykur.Demo.Zoom.prototype =
{
    handleLoad: function(plugIn, userContext, rootElement) 
    {
        this.plugIn = plugIn;
        this.userContext = userContext;
        this.rootElement = rootElement;
        this.photo = rootElement.findName('Photo');
        this.zoomTransform = rootElement.findName('ZoomTransform');
        this.photo.addEventListener("MouseMove", 
Silverlight.createDelegate(this, this.handleMouseMove)); this.createZoomScroll(); }, handleMouseMove : function(sender, eventArgs) { this.selZoom.focus(); }, zoom : function(scale) { this.zoomTransform.scaleX = scale; this.zoomTransform.scaleY = scale; }, createZoomScroll : function() { this.selZoom = document.createElement("select"); for (var i = 0; i < 19; i++) { var opt = document.createElement("option"); this.selZoom.appendChild(opt); } this.selZoom.selectedIndex = 16; var obj = this; this.selZoom.onchange = function() { var _zoom = 0.1 + (this.selectedIndex / 20); obj.zoom(_zoom); }; var bd = document.getElementsByTagName('body'); bd[0].appendChild(this.selZoom); // hide scroll element this.selZoom.style.position = 'absolute'; this.selZoom.style.top = -100; } }

Inti dari hacking ini adalah memanfaatkan elemen HTML <select>. Pada waktu Silverlight di-load, akan menginisialisasi semua elemen yang ada dan diakhir inisialisasi dibuat sebuah elemen <select>. Pembuatan elemen <select> dilakukan pada fungsi createZoomScroll(). Buat elemen <select> secara runtime menggunakan method document.createElement("select") dan tambahkan option sebanyak yang diperlukan. Setelah elemen <select> dibuat, tempatkan pada halaman dan sembunyikan dengan meletakkan posisinya pada lokasi negatif. Untuk membuat agar elemen <select> selalu di-focus, pada event MouseMove, dipanggil fungsi focus(). Selanjutnya buat event handler untuk event onchange pada element <select> dan panggil fungsi zoom() untuk melakukan zooming.

Demikian tips hacking Silverlight ini, semoga bermanfaat.


Categories: Silverlight
Permalink | Comments (0) | Post RSSRSS comment feed