How do I add HTML inside my Flex app just like the one Tour De Flex uses.
Here's a screenshot: http://screencast.com/t/JH6X1qUBNLI
Use the HTML Component. It is AIR only, so you won't be able to do this in a web based app.
For a web based app, you'll want to use the iFrame trick.
The tag <mx:TextArea> can have a nested <mx:htmlText> tag that can contain HTML code.
For example:
<mx:TextArea id="htmlTextWillAppear"
width="100%" height="100%"
borderStyle="none"
editable="false"
condenseWhite="true">
<mx:htmlText>
<![CDATA[
<p>This is where the HTML will go icluding Links, images, unordered lists, et.</p>
]]>
</mx:htmlText>
</mx:TextArea>
The CDATA tag is needed so that the Flex compiler knows to interpret what follows literally and not as MXML tags.
I use this method to pupulate the text in my Flex website that provides tutorials for creating accessible Flex content.
Related
I'm playing around with a basic Dot-Net web assembly application. In the application I'm displaying two images using two different image tags image and img. The size of the image is bound to a private variable Size. I've noticed a problem where images do not render in a specific scenario using the image tag.
Replication:
dotnet new blazorwasm
I downloaded the SVG from: Bootstrap icons, then I placed the SVG file in "wwwroot/Media/".
In index.razor I've updated the code as follows:
#page "/"
<PageTitle>Index</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size">
<image src="Media/search.svg" alt="Bootstrap" width="#Size" height="#Size"/>
#code
{
private static string Size => "75";
}
The result of running the above code shows only one image displaying
Through process of elimination, the image defined using the image tag is the problem here. If you tweak the code to use hardcoded values i.e.
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"/>
then the code works again as expected.
I'm aware that <image> is deprecated, but I'd like to understand if the reason the binding breaks the image displaying is due to the deprecation or something else?
Update
The generated HTML using the template is
<!--!--><div class="top-row px-4" b-vv8m6rf2se="">About</div>
<article class="content px-4" b-vv8m6rf2se=""><!--!--><!--!--><!--!--><!--!-->
<!--!--><h1 tabindex="-1">Hello, world!</h1>
Welcome to your new app.
<img src="Media/search.svg" alt="Bootstrap" width="75" height="75">
<image src="Media/search.svg" alt="Bootstrap" width="75" height="75"></image></article>
An interesting find, although of course not of any practical value, just use <img>.
I could easily reproduce this with a jpg image so it's not about svg.
Now for a speculative answer:
Blazor treats <image> like any other tag and the generated HTML looks like expected. But according to this answer,
The HTML5 parsing spec requires that the tag is mapped to the img element at the tree construction stage
This makes me think that when the complete tag is rendered just once it works fine, handling is up to the browser.
But after Blazor has filled in the #Size it will try to update the HTML it generated earlier. If the Browser really changed <image> to <img> internally then the JS Bridge will have trouble finding the element again and the updates fail.
I have a s:checkbox inside a html div. When the code is run, the checkbox is outside (both) the div and the divs seem to be empty and nonexistant. Why is this occuring and how can I fix it? When I place random text inside either div, the div contains it. I set the background color to red so I can detect the div.
<div id="outer">
<div id="inner">
<s:checkbox name="chBx" id"chBx" fieldValue="false" value="true" label="Check
This" />
</div>
</div>
Like described in this answer (that you should consider upvoting too), Struts2 generates (or not) a certain kind of HTML when rendering Struts Tags, basing on the Theme you have chosen.
The default one is xhtml, that will generate a lot of stuff for you. It may be handy, but also annoying, according to how you work. Personally I prefer to generate the HTML by myself, and then I use the theme that won't generate almost any HTML: the simple Theme.
Note that when working on big projects or with multiple projects with the same, particular needs, you can also write your own custom theme (for example for generating security tokens automatically).
You can use a theme globally (in struts.xml)
<constant name="struts.ui.theme" value="simple" />
or locally to a single tag / form:
<s:checkbox name="chBx" id"chBx" fieldValue="false"
theme="simple"
value="true" label="Check This" />
In this case, you may need to write the <label> object by yourself.
This question already has an answer here:
Open a webpage in flex application
(1 answer)
Closed 8 years ago.
How to add html page into a flex web application. My requirement is when a button is clicked i want a particular html page to open as popup. Is that possible in Flex Web application,
FYI,
mx:HTML component is not supported in Flex Web Application,
StageWebView is also not supported in Flex Web Application.
I want dynamic Html content to display with in Flex(Web), Please guide me with possible solutions.
You can use RichText component
import flashx.textLayout.formats.WhiteSpaceCollapse;
import spark.utils.TextFlowUtil;
protected function importRichText():void
{
var richTextXML:XML =
<TextFlow xmlns="http://ns.adobe.com/textLayout/2008">
<p fontSize="10">A small normal paragraph</p>
<p fontSize="14" fontWeight="bold">
A medium bold paragraph
</p>
<p fontSize="18">A large
<span fontStyle="italic">mixed-text paragraph</span>
</p>
</TextFlow>
myRichText.textFlow = TextFlowUtil.importFromXML(
richTextXML, WhiteSpaceCollapse.PRESERVE);
}
protected function exportRichText():void
{
var xmlText:XML = TextFlowUtil.export(myRichText.textFlow);
myLabel.text = xmlText.toXMLString();
}
Also you can use mx:Text component
<mx:Text id="myText" width="100%">
<mx:htmlText>
<![CDATA[This is <font color="#FF0000">HTML text</font> in a <b>Halo Text component</b>. Using the <u>htmlText attribute</u> of the <font color="#008800">Text component</font> you can use basic HTML markup.]]>
</mx:htmlText>
</mx:Text>
or
myText.htmlText = "This is <font color='#FF0000'>HTML text</font> in a <b>Halo Text component</b>. Using the <u>htmlText attribute</u> of the <font color='#008800'>Text component</font> you can use basic HTML markup.";
If you are targeting AIR (Adobe Integrated Runtime) instead of Web application, then, you can do this by using,
HTMLLoader (Air 1.0 or above)
HtmlLoader will work only on desktop air application. While StageWebView will work on desktop as well as mobile (android, ios etc) platforms.
ff.findElementByxpath(//object[# id='slPlugin2']).click();
is not recognizing the element.
And also suggest me the way to upload media through webdriver
<table class="imgTable photoTable" cellspacing="0">
<div id="fileUploadControl404" class="fileUpload t-toolbar t-grid-toolbar t-grid-top">
<object id="slPlugin2" width="117" height="32" data="data:application/x-silverlight," type="application/x-silverlight">
<param value="/LMM/ClientBin/FileUpload.xap" name="source">
<param value="Url =https://lmmwipqa.blob.core.windows.net/uploads?se=2013-12-28T07%3A18%3A43Z&sr=c&sp=w&sig=fxuPdwl4huKRISO%2BCPdZIQxh0i5cdnGjWKO8okj2O34%3D, Parent =fileUploadControl404, Caption =Add Photo" name="initParams">
</object>
</div>
//object[# id='slPlugin2']
The above parameter should be within double quotes,i.e., a string should be passed as parameter to findElementByXPath().
The required statement can be rewritten as follows :
ff.findElementByXPath("//object[#id='slPlugin2']").click();
With respect to clicking on invisible elements, the following statement can be used :
(Note : This assumes the page has jQuery on it)
((JavascriptExecutor)driver).executeScript("$('selector_of_element').click();");
For file upload you can refer this.
I think, ff.findElementById("slPlugin2") would be more shorter way to find the element,
but, anyway unfortunatelly, WebDriver will be not be able to handle the elements
inside the Silverlight embeded app.
I'd recomend to get the parent div: ff.findElementById("fileUploadControl404")
Get its coordinates with .getLocation();
Use Java Robot
or Sikuli in order to manipulate the embeded control.
I am having 1 pure html page for ex. sample.html. I need to include this html into another pure html for ex.Orginal.html.How to do this? I am having a header image in my sample.html.It should come at the top of the Orginal.html page.
If you're using Apache web server, you could try using server side includes.
You can't do such things in pure HTML, unless you use frames or iframe element. But better merge them by hand...
Here is an example of how to do it in pure HTML with an iframe, which although strangely not mentioned in HTML 4 specification is supported by all major browsers (and is in the HTML 5 specification)
<body>
<h1>This is original page</h1>
<p>Some content on original page.</p>
<iframe src="sample.html" width="600" height="300"></iframe>
</body>
You can adjust the width and height and you can also remove the border if you want the page to be more seamless.
Be wary of JavaScript solutions to this problem, especially if you want to be viewed on mobile devices.
Additional note: Avoid frameset solutions also, as they aren't valid markup.
See Include One File In Another, which has a summary of the various techniques that are available (along with their pros and cons).
You could use JavaScript to load some HTML from one document into another. This task is fairly simple using the jQuery toolkit:
$("The ID of a container (a div element for instance) in which you want to load
the contents of a HTML file").load("path to html file you want to load");
<div id="inserthere" />
$(function ()
{
$("#inserthere").load("loadme.html"); // Load the contents of loadme.html
// and stuff it in the div with the
// ID of "inserthere"
});