Unable to load Silverlight in angular2 when embedded in a component - silverlight

Current behavior
When embedding and loading Silverlight.xap directly inside an HTML page, it works fine. But when we move same code inside a component, it won't load the Silverlight. DOM in both cases, i.e. embedding and loading through HTML and through component, doesn't show any difference.
Code of Silverlight-app.Component.HTML Page
When we load this page directly, i.e. localhost/OurApp/Silverlight-app.Component.HTML, silverlight content gets loaded and it works fine. But when we open index.html in browser (which is main component of our angular2 and Silverlight-app.Component.HTML page is child component of index.html), it don't load silverlight content.
<section>
<div>
<object id="silverlightControlHost" data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="100%" height="100%" style="min-height: 100%; height: 1000px">
<param name="source" value="clientbin/SilverlightApp.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="5.0.61118.0" />
<param name="autoUpgrade" value="true" />
<param name="Windowless" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration: none">
<img src="images/slmedallion.png" alt="Get Microsoft Silverlight" style="border-style: none" />
</a>
</object>
<iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px;
border: 0px"></iframe>
<iframe id="desktop" style="visibility: hidden; height: 0px; width: 0px; border: 0px"></iframe>
</div>
</section>
Expected/desired behavior
Embedding and loading Silverlight component should have same behavior irrespective of loading through HTML or through component.
What is the motivation / use case for changing the behavior?
We are migrating our Silverlight application to Angular2. As complete migration will take months, we are keeping some of the silverlight modules as well.
Images for better understanding of the issue

this example does exactly what you need :)
https://github.com/lohiarahul/Angular2-Silverlight-Starter

Related

Create Silverlight control with JavaScript, but maintain navigation

I have a number of Silverlight apps hosted in an ASP.Net Web Forms Application based on the Navigation Application template. My company has upgraded to IE11 and we are now experiencing the "White Screen of Death" on browser refreshes and after using the Back button. A lot of searching has me believing that the only way to solve the WSOD is to replace the object tag that I'm using with JavaScript to load it during the onload event of the html body. While it does appear to fix the WSOD, when I navigate to other pages, the url in the browser does not update, therefore the Back button navigates to the previous web page (not Silverlight page). It appears the the generated html tag differs a bit - possibly most significantly by the "application/x-silverlight" vs. "application/x-silverlight-2" - I did note that the Silverlight.js file does contain the "-2", so I'm not sure why the output does not use it.
Has anyone dealt with this before and come up with a workaround?
Original code:
<div id="silverlightControlHost" style="padding:0px;">
<object id="SilverlightClientControl" data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="<%=GetXapLocation()%>"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="4.0.60129.0" />
<param name="autoUpgrade" value="true" />
<param name="initparams" id="initParams" runat="server" value="<%=GetInitialParams()%>"/>
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60129.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>
</div>
Updated JavaScript version (function called in onload event of body tag):
function createSL() {
Silverlight.createObjectEx({
source: "<%=GetXapLocation()%>",
parentElement: document.getElementById("silverlightControlHost"),
id: "SilverlightClientControl",
properties: {
background: "white",
version: "4.0.60129.0",
height: "100%",
width: "100%"
},
events: {
onError: onSilverlightError
},
initParams: "<%=GetInitialParams()%>"
});
}
html generated by object tag:
<object width="100%" height="100%" id="SilverlightClientControl" data="data:application/x-oleobject;base64,***long string of characters***"
type="application/x-silverlight-2">
<param name="source" value="/ClientBin/TicketMaintenance.xap?9/24/2015 3:51:25 PM">
<param name="onError" value="onSilverlightError">
<param name="background" value="white">
<param name="minRuntimeVersion" value="4.0.60129.0">
<param name="autoUpgrade" value="true">
<param id="initParams" name="initparams" value="MATaxFreeStartDate=8/15/2015, MATaxFreeEndDate=8/16/2015">
<a style="text-decoration: none;" href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.60129.0">
<img style="" alt="Get Microsoft Silverlight" src="http://go.microsoft.com/fwlink/?LinkId=161376">
</a>
</object>
html generated by the JavaScript:
<object width="100%" height="100%" id="SilverlightClientControl" data="data:application/x-oleobject;base64,***long string of characters***"
type="application/x-silverlight">
<param name="background" value="white">
<param name="source" value="/ClientBin/TicketMaintenance.xap?9/24/2015 3:51:25 PM">
<param name="initParams" value="MATaxFreeStartDate=8/15/2015, MATaxFreeEndDate=8/16/2015">
<param name="onError" value="__slEvent0">
</object>

Silverlight object overflow in IE11

The below code we are using for silver light image display in a div. It's working fine in IE8. But we have an issue with IE11. The image overlapping from the parent div it's not coming inside the div. Can any one fix this issue?
<div id="imgDiv" class="divBrd" style="width: 600px; height: 247px; overflow: auto;">
<div id="tr2">
<div id="divImage" onclick="clipimage(this);" style="overflow: hidden; width: 790px; height: 250px;">
<object type="application/x-silverlight" data="data:application/x-silverlight," id="divImageID" width="780" height="250px">
<param name="background" value="#ffffff">
<param name="Stretch" value="Fill">
<param name="source" value="../ClientBin/ImageHand.xap?v=7af70000-adb3-4167-b945-bf67a28a2186">
<param name="initParams" value="PageId=1,SeqNo=3,SubSeqNo=0,Width=780,Height=250,Container=divImage">
<param name="windowless" value="true">
<param name="maxFramerate" value="24">
</object>
</div>
</div>
</div>
Thanks,
Pandiyan

How do I embed a Silverlight control into a Facelets page?

I am trying to embed a Silverlight control into a JSF 2.0 page, which is using Facelets, however, I am receiving a very ambiguous error message when the page renders.
Can anyone suggest how I can do this? I have my clientaccesspolicy.xml, and silverlight.js in place.
When I remove the <object> tag, the JSF page displays correctly
If I place the <object> tag into a vanilla HTML page, the silverlight control renders correctly in my Tomcat 7.0.25.
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:cayman="http://www.fnet.com/cayman/jsf"
template="/WEB-INF/jsf/template.xhtml">
<ui:define name="title">Home Page</ui:define>
<ui:define name="content">
<h:form>
<ui:include src="header.xhtml">
<ui:param name="loginBean" value="#{UserLoginComponent}" />
</ui:include>
<div>
<p:growl />
</div>
<center>
<p:panel header="Home Page">
<f:verbatim escape="#{true}">
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="Dashboard.xap" />
<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>
</f:verbatim>
<iframe id="_sl_historyFrame"
style="visibility: hidden; height: 0px; width: 0px; border: 0px"></iframe>
<h:inputHidden id="userid" value="ADMINISTRATOR" />
<h:inputHidden id="password" value="admin" />
<h:inputHidden id="adminserviceuurl"
value="http://129.196.218.35:8080/cayman/services" />
</p:panel>
</center>
</h:form>
</ui:define>
Remove <f:verbatim>. It's a leftover from the old ages of JSF 1.x on JSP and deprecated in JSF 2.x.
As to the ambiguous error message which you forgot to include in your question, make sure that you're properly escaping XML special characters like &. Facelets is a XML based view technology and will be parsed by a XML parser before generating the HTML. The XML parser will choke when it encounters & which is supposed to represent the start of an entity, but there is no ; to denote the end of an entity or when the entity by itself does not represent anything at all.
So, replace
href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0"
by
href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0"

Firefox doesn't show silverlight controls

I have a silverlight application in which I am using the windowless property to show text .
Silverlight Plugin Size is 1000*2000, I Have a button (siverlight control) on the Top.
I am showing some html text using DIV real time. Its working fine.
My Silverlight Plugin & DIV both style property is= "position:absolute'.
This application is working fine in IE, but When I run this application in Firefox Button doesn't dsiplayed.
Please let me know whats a issue with Firefox ?
Thanks in advance,
Laxmilal
In your html, specify following code in CSS
html {
height: 100%;
}
body {
height: 100%;
padding: 0;
margin: 0;
min-width: 800px;
min-height: 600px;
}
#silverlightControlHost {
height: 100%;}
Then in the body
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="SOURCE OF YOUR XAP"/>
<param name="autoUpgrade" value="true" />
<!--Your other para-->
</object>

How do I access a Silverlight XAP file across a domain?

I'm trying to add my Silverlight application that lives on one subdomain to a web page in another subdomain. For some reason this just plain isn't working ... my Silverlight application is loaded as such in a page on http://subA.domain.com/somepage.html:
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2"
width="800px" height="600px">
<param name="source" value="http://subB.domain.com/SilverlightApp.xap" />
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<param name="enableHtmlAccess" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight"
style="border-style: none" />
</a>
</object>
<iframe style='visibility: hidden; height: 0; width: 0; border: 0px'></iframe>
</div>
If I move SilverlightApp.xap to subA.domain.com, it loads perfectly. What steps are needed to access a XAP file across domains?? I've been scraping the net trying to figure this out and seem to be getting nowhere.
Thanks!!
To assist others who have this same issue, and don't want to use IFrames, please see this link, as it has solved my problem. Even though the author is referring to Silverlight 2, it has solved my problem in Silverlight 3. In case the link goes down, there are 2 things I needed to do:
-- In the Silverlight app, edit the AppManifest.xml to add the following:
<Deployment xmlns="http://schemas.microsoft.com/client/2007/deployment"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
ExternalCallersFromCrossDomain="ScriptableOnly">
-- If you are using HtmlPage in your Silverlight app (such as when reading the QueryString passed to the hosting page), you must also add:
<param name="enableHtmlAccess" value="true" />
to the silverlight object in the hosting page.
Please note there are security implications to the above, and I can't help but to think this is why Microsoft does not go out of their way to disseminate this information. However in my case I don't have scriptable silverlight elements, and since I wrote the silverlight app, I don't have a problem with the hosting page allowing the silverlight app access to it.
While researching this, I noticed that this issue and corresponding solutions gets confused with a separate problem, the problem of a silverlight xap accessing a wcf service across domain boundaries. That issue does require a clientaccesspolicy.xml file located on the root of the website hosting the wcf service.
So it is possible to have the 1st site accessing a xap file on a 2nd site, which accesses a data service on a 3rd site, for maximum flexibility and re-use.
When Silverlight requests a .XAP file cross-domain, the content type must be: application/x-silverlight-app. Also, you need a cross-domain policy file on the other domain. gl
You could create a simple html file next to the .xap that contains the silverlight object and access this from an iframe. This is how http://silverlight.live.com/ fixed this issue for example.
On you main page on subA.domain.com add an iframe that show a html page on the other domain:
<iframe src="http://subB.domain.com/SilverlightApp.html"
scrolling="no"
frameborder="0"
style="width:800px;height:600px">
</iframe>
and SilverlightApp.html on subBdomain.com could look something like:
<html>
<body>
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2,"
type="application/x-silverlight-2"
width="800px" height="600px">
<param name="source" value="http://subB.domain.com/SilverlightApp.xap" />
<param name="onerror" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="2.0.31005.0" />
<param name="autoUpgrade" value="true" />
<param name="enableHtmlAccess" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=124807"
style="text-decoration: none;">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181"
alt="Get Microsoft Silverlight"
style="border-style: none" />
</a>
</object>
<iframe style='visibility: hidden; height: 0; width: 0; border: 0px'>
</iframe>
</div>
</body>
</html>

Resources