<s:Scroller width="100%" height="100%" id="chatScroller">
<s:RichEditableText
id="mainChat"
textFlow="{TextConverter.importToFlow(text, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
selectionHighlighting="always"
selectable="false"
focusedTextSelectionColor="#32EB28"
unfocusedTextSelectionColor="#32EB28"
editable="false"
lineHeight="25"
styleName="chatWin"
fontSize="10"
paddingTop="20"
paddingBottom="20"
height="100%"
width="461">
<s:TextFlow >
</s:TextFlow>
</s:RichEditableText>
</s:Scroller>
I'am updating the text variable, so for this I've added this event:
chatScroller.addEventListener(FlexEvent.UPDATE_COMPLETE, scrollBottom);
private function scrollBottom(e:FlexEvent):void {
chatScroller.verticalScrollBar.value = chatScroller.verticalScrollBar.maximum;
}
and it works, BUT the textarea firstly goes top, and then goes at the bottom, so this makes a shaking effect that happens fast, how could I avoid this and make the scroller, to scroll at bottom without going top before it goes bottom? please help can't find any solution
Add chatScroller.validateNow(); immediately after you change the text.
Related
I observed when we use VGroup in the HDividedBox dragging is not completely moving to the left side.The components in the VGroup are still appearing when we drag the hdivider completely.But when we use VBox in the HDividedBox dragging is working perfectly.
Here is sample code
<mx:HDividedBox id="hdivbox" width="100%" height="100%" liveDragging="true">
<s:VGroup width="50%" height="100%" >
<s:ComboBox/>
<s:ComboBox/>
</s:VGroup>
<s:VGroup width="50%" height="100%" >
<s:Panel width="100%" height="100%"/>
</s:VGroup>
</mx:HDividedBox>
Now when we drag divider completely to the left side first combobox is visible but when i replace the same code with VBox dragging is working fine. Can any one help me on how to fix this without using VBox
It took me some time to understand why this happens, but it was really interesting, so thank you for a question. If you just need to fix it use clipAndEnableScrolling="true"in first VGroup.
The problem is that in VBoxproperty clipContent defaults to true, but in VGroupalmost the same property clipAndEnableScrolling dafaults to false. This cause this different behavior.
i am a beginner in action script / flex framework and i am facing a problem :
i would like to have like a menu bar always anchor the bottom of the screen in normal and full screen mode ...
i try to set my component with bottom = "1" (so it should alway be at 1 pixel from the bottom of the stage ... But .. NO :)
here my flex xlm :
<mx:Canvas>
<mx:UIComponent id="isoHostContainer" x="0" y="0" />
<mx:HBox id="_menu_hbox" bottom="1" backgroundColor="0Xff0000" borderStyle="solid" borderVisible="true" >
<mx:Button label="Zoom +" click="button1_zoom_increase_clickHandler(event)" labelPlacement="bottom" />
<mx:Button label="Solid Red" click="{box1.fill = new SolidColorFill(0xFF2222, 1);}" labelPlacement="bottom"/>
<mx:Button label="Transparent" click="{box1.fill = new SolidColorFill(0xFF2222, 0.2);}" labelPlacement="bottom" />
<mx:Button label="Fullscreen toogle" click="button_fullscreen_clickHandler(event)"/>
<mx:Button label="Zoom -" click="button2_zoom_decrease_clickHandler(event)" labelPlacement="bottom"/>
</mx:HBox>
</mx:Canvas>
if you have the answer it will be great!
Thank you!
I think the problem is your menu is anchored 1-pixel from the bottom of your Canvas, which is retaining the same height..width after you go to full screen.
Try setting your Canvas height=100%.
<mx:Canvas height="100%">
<!-- more code below -->
This will force the layout engine to resize the canvas when when the application is redrawn full-screen, and in turn, your menu should remain 1-pixel from the bottom.
Caveat: If your Canvas is nested in another fixed-width container, its parent will also need to dynamically resize for this to work.
In Flex 3, I used to be able to take 2 panels, lay them out with 100% width settings in an HBox. If I changed the width property of the first panel to something smaller, let's say 20%, the second would automatically update and fill in the space that used to be taken up by the first as the first resized down.
I notice in spark, this doesn't happen. I have an app with a HorizontalLayout, and a resizable panel control on the left and a panel on the right that has width="100%." When I resize my left-side panel down, the right side panel doesn't do anything. So I end up with a clean resizable panel, a bunch of wasted space, and my right-side panel just sitting there.
What I expect is that since the right-side panel has a width="100%" then if the panel to its left is resized, then there would be a corresponding growth in the right-side panel to fill in.
I've tried to manually trigger validation on properties and size without effect. I'm wondering what changed in the HorizontalLayout that no longer allows this technique to work. I would also like to know what solutions are available?
Here's some chomp chomp:
<mx:Application>
<mx:Script>
<![CDATA[
protected function resizeClick(event:MouseEvent):void
{
pnl1.percentWidth = 10; // When this would execute, pnl2 would automatically
// fill in the space previously held by pnl1.
}
]]>
</mx:Script>
<mx:HBox width="100%" height="100%">
<mx:Panel id="pnl1" width="40%" height="100%"> // Uses 40%
<mx:Button id="resizeButton" click="resizeClick(event)"/>
</mx:Panel>
<mx:Panel id="pnl2" width="100%" height="100%"/> // Fills in the rest of the available space
</mx:HBox>
</mx:Application>
Flex 4.5 doesn't automatically update the size of pnl2 when the size of pnl1 changes. I would think that since a HorizontalLayout is being used, that both children would update when the width of one of them was changed. But that just doesn't seem to be the case. I know I can create two states to accomplish this, but I was thinking that I shouldn't have to for something so trivial.
This sample works fine and illustrates correct changes of sizes:
<?xml version="1.0" encoding="utf-8"?>
<s:Application minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<s:VGroup height="100%" width="100%">
<s:HSlider change="firstPanel.percentWidth = event.currentTarget.value" maximum="100" minimum="0"
value="{firstPanel.percentWidth}" />
<s:HGroup height="100%" width="100%">
<s:Panel height="100%" id="firstPanel" minWidth="0" width="40%" />
<s:Panel height="100%" width="100%" />
</s:HGroup>
</s:VGroup>
</s:Application>
So this is how I eventually solved this problem. I should have been a little more specific in my post to explain that Panel 1 is actually a "collapsible" panel that modifies its own size whenever its header button is clicked. The example above does work, but since there is no numeric control on the view to "tell" the panel.percentWidth property how much to change, I set my collapsible panel up to dispatch custom events that are handled by the wrapper. The custom events basically indicate what is happening to the collapsible panel. From there, I can handle the events separately and then control the size of Panel 2.
The solution is actually rather simple and I was hoping for something a little more "behind the scenes" but this worked fine.
<s:Application initialize="initApp(event)">
<fx:Script>
<![CDATA[
protected function initApp(event:FlexEvent):void
{
this.addEventListener("PanelCollapse", panelHandler);
this.addEventListener("PanelNormal", panelHandler);
}
protected function panelHandler(event:Event):void
{
switch(event.type)
{
case "PanelCollapse":
pnl2.percentWidth = 100;
break;
case "PanelNormal":
pnl2.percentWidth = 60;
break;
}
}
]]>
</fx:Script>
<comp:CollapsiblePanel id="pnl1" width="40%" height="100%">
</mx:Panel>
<s:Panel id="pnl2" width="100%" height="100%"/> // Fills in the rest of the available space
</s:Application>
I have a rich text component with large amount of text. How to add vertical scrollbar to it?
I tried:
<mx:Canvas width="100%" height="100%" verticalScrollBar="vsb">
<s:RichText id="text" width="100%" height="100%" maxDisplayedLines="-1"/>
</mx:Canvas>
<s:VScrollBar id="vsb" height="100%"/>
But it get error: Initializer for 'verticalScrollBar': values of type mx.controls.scrollClasses.ScrollBar cannot be represented in text.
Reading the docs on RichText, I see this:
For performance reasons, it does not
support scrolling, selection, editing,
clickable hyperlinks, or images loaded
from URLs. If you need those
capabilities, please see the
RichEditableText class.
So, going with a RichEditableText (and setting its editable property to false, this works for me with FlashBuilder 4.5. Note: I set the Scroller height to 200 and added lots of text to force a scrollbar to appear)
<mx:Canvas width="100%" height="100%">
<s:Scroller width="100%" height="200">
<s:RichEditableText percentWidth="100" percentHeight="100" editable="false">
<!-- add lots of text here to introduce a scrollbar -->
</s:RichEditableText>
</s:Scroller>
</mx:Canvas>
Here is my problem, fairly obvious: [img at bottom]
The problem, as you can see, is that the text (height and width) is nothing like the Height and Width of the compoent (Spark TextArea) that I have set via the Main.mxml file in Flex 4. This is pissing me off so much because nobody can tell me why this is happening, or how to fix it. Text is dynamically added to the TextArea as people send messages in the server, hence the valueCommit line.
I don't understand this, because I know it's not the fault of my fx:Script. I know this, because when I switch over to the Design tab of Adobe Flex Builder 4; the lines are just as messed up as in the screen shot.
I've been tearing my hair out (metaphorically) over this issue, please help me come to an answer.
<!-- State: interface -->
<s:TextArea id="incomingMessages" includeIn="interface"
heightInLines="{NaN}" widthInChars="{NaN}"
y="10" x="9" minWidth="426" minHeight="442"
text="Connected to Chat Paradise v5.00a, By CharlesBroughton."
valueCommit="incomingMessages_valueCommitHandler(event)"/>
<!-- Toolbar -->
<s:HGroup includeIn="interface" x="10" y="460" width="363" height="22">
<mx:ColorPicker id="tintColor" selectedColor="#FFFFFF" includeIn="interface"/>
<s:Label id="curname" height="22" width="100" text="<user>" fontSize="16" includeIn="interface"/>
<s:CheckBox label="AutoScroll" id="scrollToggle" selected="true"/>
<s:Button id="clearButton" width="60" height="22" label="Clear" click="incomingMessages.text = "";"/>
</s:HGroup>
<!-- end Toolbar -->
<s:Button id="sendMessage" width="60" height="22" label="SEND" includeIn="interface" x="375" y="460"/>
<s:TextArea id="outgoingMessages" x="10" y="480" maxChars="2048" editable="true" width="425" height="50" includeIn="interface" skinClass="graphite.skins.TextAreaSkin"/>
<s:List id="userlist" x="443" y="10" width="128" height="488" includeIn="interface" itemRenderer="userlistRenderer"/>
<s:ComboBox includeIn="interface" x="444" y="506" width="127" id="songs" selectedIndex="0"/>
<!-- end State: interface -->
Here is the FX:SCRIPT for incomingMessages_valueCommitHandler(event) if you care:
protected function incomingMessages_valueCommitHandler(event:FlexEvent):void
{
if (scrollToggle.selected)
incomingMessages.textDisplay.verticalScrollPosition = incomingMessages.textDisplay.maxHeight;
}
I'm not allowed to post images [less than 10 repute] so here is a link: Image Link
Edited to include the surrounding code as asked for. What you all don't seem to understand is that the text box is taking up the size I set it to, but the TEXT inside the text box is only taking up like 100px wide and high of the total text box area, please check the picture link.
Okay so, we found the problem, graphite.styles.TextAreaSkin ... WHAT WAS ADOBE SMOKING?
<s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false">
<s:RichEditableText id="textDisplay"
lineBreak="toFit"
textAlign="left"
selectable="true"
verticalAlign="top"
paddingBottom="4"
paddingTop="4"
paddingLeft="4"
paddingRight="4"
height="125"
width="125"
maxWidth="125"
maxHeight="125"/>
</s:Scroller>
What type of component is the parent to your TextArea? Without knowing any of the surrounding mxml, you may want to set width and height to 100%. If that doesn't work, post some more of your mxml and we'll try to figure it out. Hope that helps.
As you said, this is a problem with the graphite textarea skin. I created a new skinClass for my textarea(based on graphite text area skin). and replaced the scroller and richeditabletext with the Spark text area ones. And added textAlign = "left". And it started working fine. Let me know if this helped. Thanks.