I have flex mobile project, and i need to show HTML text in some view of project.
Any solution other than the following will be appreciated. Because following techniques fails if HTML is not well formatted.
1: TextArea.textFlow = TextFlowUtil.importFromString("html text goes here");
2: TextArea.textFlow = TextConverter.importToFlow("html text goes here", TextConverter.TEXT_FIELD_HTML_FORMAT);
Thanks, Asif.
<?xml version="1.0" encoding="utf-8"?>
<!-- mobile_text/HTMLTextView.mxml -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="HTMLText View"
creationComplete="initView()">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.components.supportClasses.StyleableTextField;
private function initView():void {
StyleableTextField(ta1.textDisplay).htmlText = "TextArea <b>bold</b><i>italic</i>.";
}
]]>
</fx:Script>
<s:TextArea id="ta1" width="100%"/>
</s:View>
It is generally considered bad practice to use the TLF Framework in mobile for performance reasons; and I am pretty sure that the TextConverter classes you are referencing are part of TLF.
That said, you do have a few options. Start by reading this documentation on Using HTML Text in Mobile Applications. Here are a relevant passage:
To use the htmlText property in mobile
text controls, access the property on
the StyleableTextField subcontrol.
I'm pretty sure that Both TextInput and TextArea use the StyleableTextField under the hood in their mobile skins.
You better can use a StageWebView object. StageWebView is a wrapper for the native WebView object. It uses the build-in browser to show HTML. You can also load strings like the folowing example shows:
import flash.media.StageWebView;
var webView = new StageWebView();
webView.stage = this.stage;
webView.viewPort = new Rectangle( 0, 0, this.stage.stageWidth, 100 );
webView.loadString( 'Your HTML Here' );
That's it, cheers.
Related
We are developing a small desktop application by using Adobe Flex. In this application, we will have a screen with input box in which user will enter URL of any website and then enter.
After providing URL, the desktop application will open that webpage into the same screen just below the URL input box. Also we want to give an option to capture screenshot of that opened webpage manually(i.e on button click).
When the webpage is open in desktop app, then our screen should be work like browser i.e we can go to any internal page by clicking webpage instead of providing another URL into input box.
We have searched lot of things regarding the same, but nothing got. Can anyone explain us, how can we implement this type of functionality into our desktop application? or Is it possible to make this application using Adobe Flex?
Your solution will be appreciated. Thanks in advance.
You can do that using the HTML control.
Take this example :
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="920" height="580">
<fx:Script>
<![CDATA[
protected function btn_history_back_clickHandler(event:MouseEvent):void
{
// history back
html_browser.historyBack();
}
protected function btn_history_forward_clickHandler(event:MouseEvent):void
{
// history forward
html_browser.historyForward()
}
protected function btn_go_clickHandler(event:MouseEvent):void
{
var url:String = txt_url.text;
if(url != '')
{
if(url.substr(0, 4) == 'http')
{
// open the typed url
html_browser.location = url;
}
}
}
protected function html_browser_locationChangeHandler(event:Event):void
{
// update our url text input
txt_url.text = html_browser.location;
}
]]>
</fx:Script>
<mx:HTML id="html_browser" x="6" y="39" width="905" height="511"
locationChange="html_browser_locationChangeHandler(event)"/>
<s:Button id="btn_forward" x="38" y="10" width="28" label=">" click="btn_history_forward_clickHandler(event)"/>
<s:Button id="btn_go" x="858" y="10" width="50" label="GO" click="btn_go_clickHandler(event)"
enabled="true"/>
<s:TextInput id="txt_url" x="74" y="10" width="775"/>
<s:Button id="btn_back" x="10" y="10" width="28" label="<" click="btn_history_back_clickHandler(event)"/>
</s:WindowedApplication>
Which will give you something like this ( it's the same window just I pressed the back button to show the different pages ) :
Of course this is just a very simple example to show you how to start, you can improve and adapt it to your specific needs.
Hope that can help.
How do I add effects (shadow, glow) to all letters in the component TextArea (Spark 4)?
I see it is an old question, but since i fell in the same problem today i'm posting my solution.
You can access to the RichEditableText component of the TextArea using textDisplay as stated here:
The RichEditableText can be accessed as textDisplay and the Scroller
as scroller
RichEditableText is extended from UIComponent, so filters, which can be applied to UIComponents ("You can apply filters to any visual component that is derived from UIComponent"), can be applied to it.
In order to apply, for example, a DropShadowFilter to all letters in the component myTextArea:TextArea i have used the following lines of code:
var richTextComponent:UIComponent = myTextArea.textDisplay as UIComponent;
var shadow:spark.filters.DropShadowFilter = new spark.filters.DropShadowFilter;
richTextComponent.filters = [shadow];
Hope this helps someone :-)
I don't think you can do it using Flex (or at least I never have). You would need to do it using AS3
<s:Label id="label1" text="Shadow Me" />
<fx:Script>
<![CDATA[
import flash.filters.*;
private function creationComplete():void{
var dropshadow:DropShadowFilter = new DropShadowFilter( 3,90,0x000000,.5,4,4,3,3 );
this.label1.filters = [ dropshadow ];
}
]]>
</fx:Script>
contentBackgroundAlpha="0" borderVisible="false"
By using Filter class we can apply shadow glow effect for a s:TextArea component. The sample code is:
<s:TextArea contentBackgroundAlpha="0" borderAlpha="0">
<s:filters>
<s:DropShadowFilter distance="5" angle="45" color="#666666"/>
</s:filters>
<s:content>
Testing text area content
</s:content>
</s:TextArea>
Refer the link http://www.roseindia.net/tutorial/flex/flex4/components/filters.html for applying more filters (DropShadowFilter, GlowFilter, BlurFilter and BevelFilter).
Just add a skin to your TextArea component then add a shadow to the RichEditableText inside the skin.
<fx:Declarations>
<s:DropShadowFilter id="shadow2"/>
</fx:Declarations>
<s:RichEditableText id="textDisplay" heightInLines="10" widthInChars="15" filters="{[shadow2]}"/>
It worked for me, you have just to adjust the shadow to have a nice look.
I have the following code to create a ViewStack which is used as a dataprovider for a TabBar:
<s:TabBar id="objectTab" dataProvider="{vs_objects}"/>
<mx:ViewStack id="vs_objects" width="100%" />
I want to constrain the number of children the ViewStack to avvoid the tabs going out of the screen when the user opens many tabs without closing any. I attempt to do this by removing the oldest element in the ViewStack when the user opens a new tab and the size of the ViewStack is above 9.
private function openTab(object:Object): void {
//Create a new NavigatorContent(form) and add it to the ViewStack
........
vs_objects.addChild(form);
if(vs_objects.numChildren > 9) {
vs_objects.removeChildAt(0);
}
//vs_objects.selectedChild = form;
vs_objects.selectedIndex = (vs_Tiltaksbanken.numChildren -1);
}
The image below illustrates my problem, where the dark grey color illustrates the selected Tab. There should only be one selected tab, which works perfectly fine with both the child selection approaches above, when i don't remove a child before selecting a new. When i remove a child and then open a new Tab, the new Tab does not get selected properly, it only gets "painted" in the selected color. In This case Tab 40 is still shown when i open Tab 41 (exceeding 9 tabs). The result of this issue is that Tab 41 is not rendered completely.
Does anyone know how i can fix this problem, or have a different approach for constraining the number of Tab's/ViewStack-children?
UPDATE:
The problem was my AS3 code inside the childrens NavigatorContent's that caused the application to behave this way. The solution was using the callLater method:
The solution to my problem was using the callLater method as shown below with Adnan Doric's code example:
protected function openTab():void
{
var form:Container = new Container();
form.name = "Tab " + counter++;
vs_objects.addChild(form);
vs_objects.selectedChild = form;
callLater(removeTab);
}
private function removeTab(): void {
if (vs_objects.numElements > 10)
vs_objects.removeElementAt(0);
}
Try this, even though I'm not sure it is the correct solution, maybe it's better to implement some kind of scrolling.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Script>
<![CDATA[
import mx.core.Container;
private var counter:int = 1;
protected function openTab():void
{
var form:Container = new Container();
form.name = "Tab " + counter++;
vs_objects.addChild(form);
if (vs_objects.numElements > 10)
vs_objects.removeElementAt(0);
vs_objects.selectedChild = form;
}
]]>
</fx:Script>
<s:TabBar id="objectTab" top="32" labelField="name" dataProvider="{vs_objects}"/>
<mx:ViewStack id="vs_objects" width="100%" />
<s:Button label="addTab" click="openTab()" />
</s:Application>
Hope that helps :)
I want to put an element into another component (in this case a print template), print it, and then return it to its place. The problem is that when I return it, it has the properties of the print template! Here is a simplified example. When you click print, the label is removed and then returned but when returned it is affected by the padding of the print template! Why? How can I somehow refresh it to its proper properties? I tried all the invalidate... methods and parentChanged() but nothing worked.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="200">
<fx:Script>
<![CDATA[
import spark.components.VGroup;
protected function button1_clickHandler(event:MouseEvent):void {
var printTemplate:VGroup = new VGroup();
printTemplate.paddingTop = 50;
printTemplate.paddingLeft = 30;
printTemplate.addElement(label);
addElement(printTemplate);
validateNow();
// print
removeElement(printTemplate);
addElement(label);
}
]]>
</fx:Script>
<s:Button label="Print" right="0" click="button1_clickHandler(event)"/>
<s:Label id="label" text="This is the label text, it should appear at the top-left."/>
</s:Application>
I would recommend you to have a separate print view-component which has a separate label which you only need to pass the right data.
OK I hacked up a solution. Put this in before adding the label back to its proper place:
var vg:VGroup = new VGroup();
vg.addElement(label);
addElement(vg);
validateNow();
removeElement(vg);
Then it gets the padding from "vg", which has no padding set. Yay. Another little hack to circumnavigate a Flex bug.
I've developed Adobe AIR application, which opens cpanel of websites in HTML control. I realized that HTML control open links which opens in same window, however it don't opens the links that opens in new window i.e links which has attribute (target="_blank) like this:
<a href"" target="_blank"> Opens in new window </a>
I've searched the web, although I've got one solution here AIR HTML with “_blank” Links but it opens that links in browsers and its too much old (September 2008). So, anyone know another simple way to open link?
I rewrited example you found to change anchor target, now links are opened in same window. But this method has limitations - only static links are fixed, any JS methods trying to open link in new window will fail.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
initialize="init()">
<mx:Script>
<![CDATA[
private function init():void
{
html.htmlText =
"<html><body>" +
"<a href='http://adobe.com' target='_blank'>Adobe (blank)</a><br/>" +
"<a href='http://ixbt.com' target='_self'>iXBT (self)</a>" +
"</body></html>";
html.addEventListener(Event.COMPLETE, onHTMLComplete);
}
private function onHTMLComplete(event:Event):void
{
var document:Object = html.domWindow.document;
for each (var anchor:Object in document.getElementsByTagName("a"))
{
if (anchor.hasOwnProperty("target"))
{
if (anchor.target == "_blank")
{
anchor.target = "_self";
}
}
}
}
]]>
</mx:Script>
<mx:HTML id="html" width="100%" height="100%"/>
</mx:WindowedApplication>