Spark TextArea remove border (borderVisible) in Flex 4.5 Hero

When dealing with the TextArea for Mobile development in Flex Hero 4.5 I cannot find a way to remove the border.
<s:TextArea id="lblPOC" left="10" right="10" top="10" bottom="10"
borderColor="#FFFFFF" borderVisible="false" color="#000000"
contentBackgroundColor="#FFFFFF" editable="false" skinClass="{null}"/>
setStyle is not working on spark components I have come to find out.
Even to get htmlTexh I had to:
 MobileTextField(lblPOC.textDisplay).htmlText =
Can anyone help me remove the boarder from a spark TextArea in Flex 4.5?
 Thank you,
 Eric

Looks like you were using the preview release of Flex 4.5. Setting borderVisible to false works for me in the 4.5 release build:
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:TextArea left="10" right="10" top="10" bottom="10" borderVisible="false" />
</s:View>

Similar Messages

TextArea, remove border

I would like to make my textarea´s border invisible.
Unfortunately, I suck on Flash :(). This should be rather easy
shouldn´t it?

Christian
I dont have this option. I use Flash Cs3, maybe it is
something in an older version?
How do I place a TextField? When I look in the components
window, I only find TextArea and TextInput. I could of course
create one using ActionScript, but how do I then make it appear on
the screen??
Edit I guess TextField is the simple tool in the toolbox. I
have started to try it out and I hope I will solve my problem. Many
thanks to you.

Where is the code for the contentBackgroundColor in the spark textArea

Where is the code for the contentBackgroundColor in the spark textArea, I can't seem to locate it anywhere but you can set the contentBackgroundColor in the <s:TextArea tag

Hi,
may be it's helpful for you.
http://blog.flexexamples.com/2010/05/18/changing-the-background-color-of-a-disabled-spark- textarea-control-in-flex-4/
Regards
-Bechar

Using Squiggly with Spark TextArea causes TLF formatting to disappear

We are using a Spark TextArea component in our application to offer more enhanced text formatting options to our users. Yesterday we downloaded Squiggly since it's the only one available that seems to support the spark components. It is highlighting misspelled words correctly and does have a nice right-click context menu with suggestions, etc. However, when we select a word from the suggestion list and it replaces it in the text area, it seems to replace the entire contents of the textarea as plain text. Any formatting on the text such as bold, italics, font sizes, underlines, all immediately disappear once the misspelled word is replaced. We're using the SpellUI implementation. Below is some of the snippets of the code we're using to implement SpellUI:
protected function createTextArea():void {
_textArea = new TextArea();
_textArea.editable = true;
_textArea.enabled = true;
_textArea.textFlow = TextConverter.importToFlow(XML(dataModel.value)[0], TextConverter.TEXT_LAYOUT_FORMAT);
_textArea.textFlow.flowComposer.updateAllControllers();
_textArea.addEventListener(FlexEvent.CREATION_COMPLETE, setupSpellCheck, false, 0, true);
private function setupSpellCheck(event:Event=null):void {
logger.debug("setupSpellCheck", "Setting up spell check system...");
_textArea.removeEventListener(FlexEvent.CREATION_COMPLETE, setupSpellCheck);
resourceManager.localeChain = [localeStr];
enableSpellCheck();
enableSpellCheckContextMenu();
private function enableSpellCheck():void {
SpellUI.enableSpelling(_textArea, localeStr);
private function enableSpellCheckContextMenu():void {
var contextMenu:Object = {add:resourceManager.getString('SquigglyContextMenu', 'add'),
enable:resourceManager.getString('SquigglyContextMenu', 'enable'),
disable:resourceManager.getString('SquigglyContextMenu', 'disable')};
SpellUI.setSpellingMenuEntries(contextMenu);
As you can see, we're constructing a new TextArea control and setting it's textFlow by importing an existing textflow XML that we have saved in our database. Once the TextArea has dispatched the FlexEvent.CREATION_COMPLETE, we are setting up the spell check system and everything works ok until you actually correct a misspelled word by selecting it from the right-click suggestions list. The text initially imported may have any number of styles applied to it as I mentioned above. Once the spelling replacement occurs, all the formatting is wiped out for the entire text area.
Any thoughts?
-Jason Kringen

Just to give some more details, here's the TextFlow output from our TextArea before using the spell check word replacement:
<TextFlow columnCount="inherit" columnGap="inherit" columnWidth="inherit" lineBreak="inherit" paddingBottom="inherit" paddingLeft="inherit" paddingRight="inherit" paddingTop="inherit" verticalAlign="inherit" whiteSpaceCollapse="preserve" xmlns="http://ns.adobe.com/textLayout/2008"><p direction="ltr" justificationRule="auto" justificationStyle="auto" leadingModel="auto" paragraphEndIndent="0" paragraphSpaceAfter="0" paragraphSpaceBefore="0" paragraphStartIndent="0" textAlign="start" textAlignLast="start" textIndent="0" textJustify="interWord">Text goes in here. <span alignmentBaseline="useDominantBaseline" backgroundAlpha="1" backgroundColor="transparent" baselineShift="0" breakOpportunity="auto" cffHinting="horizontalStem" color="#000000" digitCase="default" digitWidth="default" dominantBaseline="auto" fontFamily="Arial" fontLookup="embeddedCFF" fontSize="28" fontStyle="normal" fontWeight="bold" kerning="auto" ligatureLevel="common" lineHeight="120%" lineThrough="false" locale="en" renderingMode="cff" textAlpha="1" textDecoration="none" textRotation="auto" trackingLeft="0" trackingRight="0" typographicCase="default">misspeled jhkjd het </TextFlow>
And here is the TextFlow output immediately after replacing a misspelled word:
<TextFlow columnCount="inherit" columnGap="inherit" columnWidth="inherit" lineBreak="inherit" paddingBottom="inherit" paddingLeft="inherit" paddingRight="inherit" paddingTop="inherit" verticalAlign="inherit" whiteSpaceCollapse="preserve" xmlns="http://ns.adobe.com/textLayout/2008">Text goes in here. misspeled jhkjd get </TextFlow>
So it's obviously stripping out all of the TLF formatting and simply leaving the blank and tags without any of the formatting details.

[svn:cairngorm3:] 17674: Maven: Remove deprecated PopUpFactory from Flex SDK 4 version.

Revision: 17674
Revision: 17674
Author:   [email protected]
Date:     2010-09-13 02:20:26 -0700 (Mon, 13 Sep 2010)
Log Message:
Maven: Remove deprecated PopUpFactory from Flex SDK 4 version. Use PopUpWrapper.reuse = false instead.
Modified Paths:
    cairngorm3/trunk/libraries/Popup/pom.xml

Hi, those technologies are so cool but I failed to run the sample:
- I am using Maven 3.0.2.
Runnung mvn build from the latest source code from trunk "....cairngorm3\samples\todo>mvn install". I got the error relating to "unable to transacoding"
D:\Java\workspaces\misc\cairngorm3\samples\todo\todo_flex\todo_flex_shell\src\ma
in\flex\com\adobe\txi\todo\shell\skins\ApplicationHeaderSkin.mxml: Error: unable
to resolve '/assets/todoLogo_big.png' for transcoding
D:\Java\workspaces\misc\cairngorm3\samples\todo\todo_flex\todo_flex_shell\src\ma
in\flex\com\adobe\txi\todo\shell\skins\ApplicationHeaderSkin.mxml: Error: Unable
to transcode /assets/todoLogo_big.png.
I shift the assets folder to src/main/flex. It got compiled then I can deploy succesfully into Tomcat 6. But I still get empty screen.
Do I have to do something else like "run db script", "create DB schema" ?
Note: my adt.jar is from flex_sdk_4.5.0.17855
Thanks

Remove border on page

remove border on page

Hi Suzi,
Is your document based on a Page Layout Template, or a Word Processing Template?
I am not sure what border is showing. Try Menu > View > Hide Layout.
Regards,
Ian.

Any way to listen for changes in Spark TextArea?

Hello,
What is the best way to listen for changes in a Spark TextArea? My scenario is simple: I need to know when some text is added or deleted (with from/to index).
Regards,
Dinko

s:TextArea does have a chang event - http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TextAr ea.html.

Flex 4.5 "hero" - stage event is not dispached in a view

Hello,
stage event is not dispached in a view (flex 4.5 hero)
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark" title="Test" initialize="comp(event)">
 <fx:Script>
 <![CDATA[
 public function comp(e:Event):void {
 this.stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, orientationChangeHandler);
 public function orientationChangeHandler(event:StageOrientationEvent):void {
 are.text="aa";
 ]]>
 </fx:Script>
 <s:TextArea width="400" id="are"/>
</s:View>
thanks

instead this.stage or stage -> systemManager.stage

Throwing null object reference , when focus into the spark textarea ,if it is in the popup

I added a textarea to vrgoup container and added that vgroup as popup to the application. while i am trying to focus into the textarea , it always throwing me null object reference. to see that you need to have debugger version of flash player installed. please help me if anybody knows the solution.
here is my code.
code
protected function btn_clickHandler(event:MouseEvent):void
var vgroup:VGroup = new VGroup();
var ta:TextArea = new TextArea();
vgroup.percentWidth = 100;
vgroup.addElement(ta);
PopUpManager.addPopUp(vgroup, this);
Following is the error thrown
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at spark.components::Scroller/focusInHandler()[E:\dev\hero_private\frameworks\projects\spark \src\spark\components\Scroller.as:1258]
at flash.display::Stage/set focus()
at flashx.textLayout.container::ContainerController/http://ns.adobe.com/textLayout/internal/2008::setFocus()[C:\Vellum\branches\v2\2.0\dev\out put\openSource\textLayout\src\flashx\textLayout\container\ContainerController.as:2265]
at flashx.textLayout.container::ContainerController/mouseDownHandler()[C:\Vellum\branches\v2 \2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\ContainerController. as:2067]
at flashx.textLayout.container::TextContainerManager/mouseDownHandler()[C:\Vellum\branches\v 2\2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\TextContainerManage r.as:1939]
at spark.components.supportClasses::RichEditableTextContainerManager/mouseDownHandler()[E:\d ev\hero_private\frameworks\projects\spark\src\spark\components\supportClasses\RichEditable TextContainerManager.as:665]
at flashx.textLayout.container::ContainerController/http://ns.adobe.com/textLayout/internal/2008::requiredMouseDownHandler()[C:\Vellum\branche s\v2\2.0\dev\output\openSource\textLayout\src\flashx\textLayout\container\ContainerControl ler.as:2088]
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()[E:\dev\hero_private\frameworks\projects\framework\sr c\mx\core\UIComponent.as:13128]
at mx.managers::SystemManager/mouseEventHandler()[E:\dev\hero_private\frameworks\projects\fr amework\src\mx\managers\SystemManager.as:2924]

The simplest example I could come up with consists of 3 files:
Main.mxml
<?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"
 applicationComplete="open()">
 <fx:Script>
 <![CDATA[
 import mx.managers.PopUpManager;
 public function open():void {
 var popUp:CustomComponent = PopUpManager.createPopUp(
 this, //parent
 CustomComponent, //class name
 true //modal
 ) as CustomComponent;
 PopUpManager.centerPopUp(popUp);
 ]]>
 </fx:Script>
</s:Application>
CustomComponent.as
package {
 import spark.components.supportClasses.SkinnableComponent;
 public class CustomComponent extends SkinnableComponent {
 public function CustomComponent() {
 super();
 setStyle('skinClass', CustomComponentSkin);
CustomComponentSkin.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
 xmlns:s="library://ns.adobe.com/flex/spark"
 xmlns:mx="library://ns.adobe.com/flex/mx">
 <fx:Metadata>
 [HostComponent("CustomComponent")]
 </fx:Metadata>
 <s:Panel>
 <s:TextArea/>
 </s:Panel>
</s:Skin>

How to set resize effect for border container using flex 4 or 4.5

Hi friends,
resize effect works fine for one control (image). if want to same for custom comp, then is not working.
below is the code is in custom comp,
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" width="200"
 xmlns:s="library://ns.adobe.com/flex/spark" horizontalAlign="left" verticalAlign="bottom"
 xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:parsley="http://www.spicefactory.org/parsley"
 xmlns:general="com.presentation.components.general.*">
 <fx:Declarations>
 <parsley:Configure/>
 </fx:Declarations>
 <s:BorderContainer id="bcMain" backgroundColor="#f4f4f4" borderColor="#CDC7C7" borderStyle="solid" borderVisible="true" width="100%">
 <s:layout>
 <s:VerticalLayout horizontalAlign="left" verticalAlign="middle" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5"/>
 </s:layout>
 <s:HGroup id="hg1" horizontalAlign="left" verticalAlign="middle" width="100%" gap="5"
 buttonMode="true" useHandCursor="true" >
 <s:Image id="img1" source="@Embed(source='assets/flex.png" width="15" height="17" cachePolicy="on" cacheAsBitmap="true"/>
 <s:Label text="label 1" textAlign="center"/>
 </s:HGroup>
 <mx:HRule width="100%"/>
 <s:HGroup horizontalAlign="left" verticalAlign="middle" width="100%" gap="10">
 <s:BorderContainer id="bc1" width="35" useHandCursor="true" buttonMode="true"
 backgroundColor="#f4f4f4" height="40">
 <s:layout>
 <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
 </s:layout>
 <s:Image id="img2" source="@Embed(source='assets/flex.png" cachePolicy="on" cacheAsBitmap="true"/>
 <s:Label text="label 2" textAlign="center"/>
 </s:BorderContainer>
 <s:BorderContainer id="bc2" width="35" useHandCursor="true" buttonMode="true"
 backgroundColor="#f4f4f4" height="40">
 <s:layout>
 <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
 </s:layout>
 <s:Image id="img3" source="@Embed(source='assets/flex.png" cachePolicy="on" cacheAsBitmap="true"/>
 <s:Label text="label 3" textAlign="center"/>
 </s:BorderContainer>
 <s:BorderContainer id="bc3" width="35" useHandCursor="true" buttonMode="true"
 backgroundColor="#f4f4f4" height="40">
 <s:layout>
 <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
 </s:layout>
 <s:Image id="img4" source="@Embed(source='assets/flex.png" cachePolicy="on" cacheAsBitmap="true"/>
 <s:Label text="label 4" textAlign="center"/>
 </s:BorderContainer>
 </s:HGroup>
 </s:BorderContainer>
</s:VGroup>
I followed how resize effects works for image control,
<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="200" duration="2000"/>
 <mx:Resize id="contract" target="{img}" widthTo="30" heightTo="60" duration="2000"/>
<s:Panel title="Resize Effect Example" width="100%" height="100%">
 <s:VGroup width="100%" height="200" horizontalAlign="left" verticalAlign="bottom">
 <mx:Image id="img" source="@Embed(source='assets/05_ipad.png')" width="10" height="10"/>
 <mx:Button label="Expand" click="expand.end(); expand.play();"/>
 <mx:Button label="Contract" click="contract.end(); contract.play();"/>
 </s:VGroup>
 </s:Panel>
Please help me.

BorderContainer wont resize if the fixed width is specified, if u want to give some minimum width you can use minWidth . Give Width = "100%", now it will get Resizing capabilities

Text Box Tool - remove border?

Working on an online-application. Have downloaded it to my hard drive and am filling in blanks using Adobe Acrobat 9 Pro. Typewriter typically but for a large area of lots of typing I want to use a text box. How do I remove the bold red border?

You can show the Properties Bar by pressing Ctrl+E. Then select the text box and you should see where you can change the border color and/or remove it by setting the border to nothing.

How to use embedded image in TextArea in Air (differs from Flex) ?

So I was trying the example from the LiveDocs:
Making hyperlinks out of embedded images
http://livedocs.adobe.com/flex/3/html/help.html?content=textcontrols_04.html
This doesn't seem to work in an Air application (the image doesn't show).
Even simply adding an image with a relative path doesn't work in Air (the image doesn't show either):
<mx:Image source="../assets/butterfly.gif" />
I'm sure I must be missing something really straightforward here, can anyone help ?
Also, more generally, where I can see the source code of TextArea and RichTextEditor, understanding their inner working would be a great help.
Thanks

Embedding images in htmlText in a TextFiled isn't supported in AIR.
See: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/TextField.ht ml#htmlText
The source for the Flex components is included in the Flex SDK.

HTML Textarea removing Carriage Returns

Hi,
Hoping someone can assist, I am retrieving some data from a table that currently consists of carriage returns but when I try and retrieve this information via Ajax and pass it back into the HTML page textarea field within ApEx, the value returned is one continuous string.
All my carriage returns are removed.
Can someone please assist, possibly using a javascript solution or some other type as to how I can preserve the carriage returns.
Thanks.
Tony.

Hi Tony,
I suspect the problem is simply due to the way HTML handles line breaks, which is to say, it generally ignores them. For example, this html:
To be or not to be, that is the question;
Whether 'tis nobler in the mind to suffer
The slings and arrows of outrageous fortune,
Or to take arms against a sea of troubles,
And by opposing, end them. To die, to sleep;
No more; would be displayed in a browser as:
To be or not to be, that is the question; Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take arms against a sea of troubles, And by opposing, end them. To die, to sleep; No more;
One way to get around this is to wrap the string in {font:Courier}<pre></pre>{font} tags; another would be to replace the carriage returns with {font:Courier} {font}
Hope this helps.
tx, --Jen

How to embed html (weblinks) in Spark TextArea?!

Hi everybody,
We want to put html-code (especially links) into our TextArea. We were looking for some examples, but in no example the links were working. So user couldn t click at the link to enter a new page. Anybody any suggestions or a good tutorial?
Even the example at the adobe page isn't working: (we tried firefox and safari on windows and os x)
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TextAr ea.html?allClasses=1
(at the bottom)
Thanks,
K

We fixed the problem in our case. Our mistake was, that we did set the attribute selectable to false instead of editable. Afterwards it worked perfect for us.
Spark Text Area:
<s:TextArea id="content" editable="false"/>
Import Text:
content.textFlow = TextFlowUtil.importFromString( yourHtmlText:String );
In mx.controls it works like that:
<mx1:TextArea id="myTextArea" />
Import Text:
myTextArea.htmlText = yourHtmlText:String;

Remove Border on Link

I made an image into a link. But the image now has a purple border around it. I used to be able to remove that in Properties-Border-0. How do I do it in CS6?

Simpler than copying and pasting one line of CSS into your HTML page? Actually, no.
Open HTML page in code view,
Scroll down to the <style> tags.
Paste code I gave you earlier between the <style> and </style> tags. Almost anywhere will do.
Save. Done.
Have a beer!
Nancy O.

Spark TextArea remove border (borderVisible) in Flex 4.5 Hero

Similar Messages

Maybe you are looking for