convert standard web application to silverlight application

6 posts, 0 answers
  1. Harry
    Harry avatar
    11 posts
    Member since:
    Feb 2011

    Posted 01 Mar 2011 Link to this post

    hi all

    the company I work for has a very large web application and we want to add a telerik gauge control to our page.  The application is not a siliverlight application and would take a massive amount of man hours to convert the hole application to a starlight application.

    I have the gauge working in the application but we cannot reference any other part of the application to use the gauge control the way we need to

    Any Idias??? 

  2. Andrey
    Admin
    Andrey avatar
    1681 posts

    Posted 04 Mar 2011 Link to this post

    Hi Harry,

    Silverlight allows interaction between HTML and managed code.
    http://msdn.microsoft.com/en-us/library/cc645076(v=VS.95).aspx
    You can use scriptable members (properties and methods) in your Silverlight control which will be accessible from JavaScript for communication between the SL Gauge control and the controls on the hosting web page.
    The sample code is below.
    Copy Code
    <UserControl x:Class="RadControlsSilverlightApp1.MainPage"
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
        <Grid x:Name="LayoutRoot">
            <telerik:RadGauge Height="200" x:Name="radGauge1" Width="200">
                <telerik:RadialGauge>
                    <telerik:RadialScale>
                        <telerik:IndicatorList>
                            <telerik:Needle Name="Needle1" Value="50" />
                        </telerik:IndicatorList>
                    </telerik:RadialScale>
                </telerik:RadialGauge>
            </telerik:RadGauge>
        </Grid>
    </UserControl>

    Copy Code
    using System.Windows.Browser;
    using System.Windows.Controls;
      
    namespace RadControlsSilverlightApp1
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                HtmlPage.RegisterScriptableObject("slGaugeObject", this);
            }
      
            [ScriptableMember]
            public double Needle
            {
                get { return Needle1.Value; }
                set
                {
                    Needle1.Value = value;
                }
            }
        }
    }

    Copy Code
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
      
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      
    <script type="text/javascript">
      
        var silverlightControl;
      
        function pluginLoaded(sender, args) {
            // get reference to the silverlight control on the page
            silverlightControl = sender.getHost();
        }
      
        function setGauge() {
            silverlightControl.content.slGaugeObject.Needle = 25;
        }
      
    </script>
      
    <head runat="server">
        <title>RadControlsSilverlightApp1</title>
        <style type="text/css">
        html, body {
            height: 100%;
            overflow: auto;
        }
        body {
            padding: 0;
            margin: 0;
        }
        #silverlightControlHost {
            height: 100%;
            text-align:center;
        }
        </style>
        <script type="text/javascript" src="Silverlight.js"></script>
        <script type="text/javascript">
            function onSilverlightError(sender, args) {
                var appSource = "";
                if (sender != null && sender != 0) {
                  appSource = sender.getHost().Source;
                }
                  
                var errorType = args.ErrorType;
                var iErrorCode = args.ErrorCode;
      
                if (errorType == "ImageError" || errorType == "MediaError") {
                  return;
                }
      
                var errMsg = "Unhandled Error in Silverlight Application " +  appSource + "\n" ;
      
                errMsg += "Code: "+ iErrorCode + "    \n";
                errMsg += "Category: " + errorType + "       \n";
                errMsg += "Message: " + args.ErrorMessage + "     \n";
      
                if (errorType == "ParserError") {
                    errMsg += "File: " + args.xamlFile + "     \n";
                    errMsg += "Line: " + args.lineNumber + "     \n";
                    errMsg += "Position: " + args.charPosition + "     \n";
                }
                else if (errorType == "RuntimeError") {           
                    if (args.lineNumber != 0) {
                        errMsg += "Line: " + args.lineNumber + "     \n";
                        errMsg += "Position: " +  args.charPosition + "     \n";
                    }
                    errMsg += "MethodName: " + args.methodName + "     \n";
                }
      
                throw new Error(errMsg);
            }
        </script>
    </head>
    <body>
        <div id="silverlightControlHost">
            <Button onclick="setGauge();">Set 25 to Gauge value</Button>
            <br />
            <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
              <param name="source" value="ClientBin/RadControlsSilverlightApp1.xap"/>
              <param name="onError" value="onSilverlightError" />
              <param name="background" value="white" />
              <param name="minRuntimeVersion" value="4.0.50826.0" />
              <param name="autoUpgrade" value="true" />
              <param name="onload" value="pluginLoaded" />
              <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
                  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
              </a>
            </object>
        </div>
    </body>
    </html>

    Greetings,
    Andrey Murzov
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. DevCraft banner
  4. Harry
    Harry avatar
    11 posts
    Member since:
    Feb 2011

    Posted 04 Mar 2011 Link to this post

    thank you for the post
    Is this for a silverlight created site page?
    I noticed the reference that looked like a silverlight created site and can this be used for a pre-existing asp.net web application?
  5. Harry
    Harry avatar
    11 posts
    Member since:
    Feb 2011

    Posted 04 Mar 2011 Link to this post

    Hi all
    and thank you for all the help I still cannot get this code to work could someone look at it to see what  they think??

    xaml.cs
    namespace workingto2
    {
        public partial class MainPage : UserControl
        {
            public MainPage()
            {
                InitializeComponent();
                HtmlPage.RegisterScriptableObject("slGaugeObject", this);
            }
            [ScriptableMemberAttribute]
            public double indiactor1
            {
                get{ return indicator.Value;}
                set
                {
                    indicator.Value = value;
                }
            }
     
            private void UserControl_Loaded(object sender, RoutedEventArgs e)
            {
                //double value =29;
                //this.indicator.Value = value;
                 
            }
     
     
    xaml
     
    <UserControl
        xmlns:control="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Gauge"
        x:Class="workingto2.MainPage"
        mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" Loaded="UserControl_Loaded">
        <UserControl.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="/Telerik.Windows.Controls.Gauge;component/Themes/Generic.xaml" />
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot">
            <telerik:RadGauge Width="340" Height="200">
                <telerik:RadialGauge Style="{StaticResource RadialGaugeHalfCircleNStyle}">
                    <telerik:RadialScale Style="{StaticResource RadialScaleHalfCircleNStyle}">
                        <telerik:IndicatorList>
                            <telerik:Needle x:Name="indicator"/>
                        </telerik:IndicatorList>
                    </telerik:RadialScale>
                </telerik:RadialGauge>
            </telerik:RadGauge>
             
        </Grid>
    </UserControl>
     
    aspx
     
    <script type="text/javascript">
       
        var silverlightControl;
       
        function pluginLoaded(sender, args) {
            // get reference to the silverlight control on the page
            silverlightControl = sender.getHost();
        }
       
        function setGauge() {
            silverlightControl.content.slGaugeObject.indiactor1 = 25;
        }
       
        </script>
     
     <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="340" height="200">
              <param name="source" value="ClientBin/workingto2.xap"/>
              <param name="onError" value="onSilverlightError" />
              <param name="background" value="white" />
              <param name="minRuntimeVersion" value="4.0.50826.0" />
              <param name="autoUpgrade" value="true" />
              <param name="onload" value="pluginLoaded" />
              <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
                  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
              </a>
            
            </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe>
  6. Harry
    Harry avatar
    11 posts
    Member since:
    Feb 2011

    Posted 07 Mar 2011 Link to this post

    Hi all
    Well I found my own Oops I forgot to add the button to move the needle
  7. Harry
    Harry avatar
    11 posts
    Member since:
    Feb 2011

    Posted 07 Mar 2011 Link to this post

    Hi All
    just a final note on my quest to tie a needle to a text box control

    <script type="text/javascript">

            var silverlightControl;

            function pluginLoaded(sender, args) {
                // get reference to the silverlight control on the page
                silverlightControl = sender.getHost();
            }
            
            function setGauge() {
                
                var Myvalue = document.getElementById("<%=GaugeRATxt.ClientID %>");
                
                silverlightControl.content.slGaugeObject.indiactor1 = Myvalue.value;  
            }
     
        </script>

    where the GaugeRATxt is a RadNumericTextBox.  Although I used a ontextchanged event to trigger the setGauge(()
Back to Top
DevCraft banner