I'm having issues with the property "editable" of textArea control.
I have a component: OrderView.mxml and it's associated data class OrderViewData.as.
Orderview.mxml is inside a viewStack to enable navigation from a component to another.
In this particular case, OrderView.mxml is called by another component: SearchResult.mxml. I can thus navigate from SearchResult.mxml to OrderView.mxml, and back to SearchResult.mxml...
OrderView.mxml has textArea and textInput control, that have to be editable or nonEditable depending on the property var isEditable:Boolean from OrderViewData.as.
When the application is launched, isEditable = true. So, all textInput and textArea controls are editable the first time the user gets to OrderView.mxml. When the user clicks on the button order from OrderView.mxml, isEditable = false. When the user goes back to SearchResult.mxml, isEditable = true (again) --> Until here, everything works fine.
The thing is: when the user goes back to OrderView.mxml for the second time (and beyond), even if the property isEditable = true, textArea controls are still non editable... But the textInput controls are editable!
Here is some code for your comprehension:
OrderView.mxml
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#F3EDEC">
<mx:TextArea
id="contentTA"
text="{OrderViewData.instance.contentTA}"
enabled="{OrderViewData.instance.isEnabled}"
width="100%" height="51"
maxChars="18" styleName="ORTextInput"
focusIn="if(OrderViewData.instance.isEditable) contentTA.setSelection(0, contentTA.length)"
editable="{OrderViewData.instance.isEditable}"/>
<mx:TextInput id="contentTI"
text="{OrderViewData.instance.contentTI}"
width="40" height="18" maxChars="4"
styleName="ORTextInput"
change="contentTI_change()"
focusIn="if(OrderViewData.instance.isEditable) contentTI.setSelection(0, contentTI.length)"
editable="{OrderViewData.instance.isEditable}"/>
</mx:Canvas>
Am I missing something?
Did you make your isEditable variable [Bindable]?
Well, looks like anybody has more ideas...
I came up with a not really clean solution. But it works...
I used a init function in the show event of the component, where I create the control and add it to the proper parent. Thus, the mxml code written before has been deleted =)
This init function looks like this:
private function init():void
{
// contentTA
if(contentTA != null && parentBox.contains(contentTA))
parentBox.removeChild(contentTA);
contentTA = new TextArea;
contentTA.text = OrderViewData.instance.contentTA;
contentTA.enabled = OrderViewData.instance.isEnabled;
contentTA.percentWidth = 100;
contentTA.height = 51;
contentTA.maxChars = 50;
contentTA.styleName = "ORTextInput";
contentTA.editable = OrderViewData.instance.isEditable;
contentTA.addEventListener(FocusEvent.FOCUS_IN, focusIn);
parentBox.addChild(contentTA);
// same thing for all the other textAreas of my component
...
}
Related
I have a spark TabBar and I want to hide and show some elements of it from an external user input (namely a checkbox check)
I am having trouble changing the tabs visibility. They are currently always shown.
Does anyone have any idea? I have seen a getTabAt on the mx TabBar but the look of the tab is important and the requirement is for it to look like a tab bar rather than a button bar.
My code for the tabs and for hiding and showing is below:
<fx:Script>
<![CDATA[
import mx.containers.VBox;
import mx.controls.Label;
private function onCreationComplete():void {
var vbox1:VBox = new VBox();
vbox1.label = "Tab 1";
var lbl1:Label = new Label()
lbl1.text = "Panel1";
vbox1.addChild(lbl1);
dp.addChild(vbox1);
var vbox2:VBox = new VBox();
vbox2.label = "Tab 2";
var lbl2:Label = new Label()
lbl2.text = "Panel 2";
vbox2.addChild(lbl2);
dp.addChild(vbox2);
}
private function showTab(event:MouseEvent):void {
makeVisible(true);
}
private function hideTab(event:MouseEvent):void {
makeVisible(false);
}
private function makeVisible(vis:Boolean):void {
VBox(dp.getChildAt(0)).visible = vis;
VBox(dp.getChildAt(0)).enabled = vis;
VBox(dp.getChildAt(0)).includeInLayout = vis;
}
]]>
</fx:Script>
<s:VGroup>
<s:TabBar id="tabNavigator" width="100%" height="100%" dataProvider="{dp}"/>
<mx:ViewStack width="100%" height="100%" id="dp" borderStyle="solid"/>
<s:Button click="showTab(event)" label="show Tab"/>
<s:Button click="hideTab(event)" label="hide Tab"/>
</s:VGroup>
Any advice greatly received
Thanks
Yea, it's really nasty to not be documented such a trivial task. I come upon this post but i'm on Flex builder 4.6 and targeting mobile application (flex mobile). There is Spark TabbedViewNavigatorApplication which has TabbedViewNavigator as its child. The adobe forums and help show only how to hide the entire tabBar, which is really obvious, but not how to hide distinct options inside the tabBar.
Some places i visited suggested to remove items from the TabbedViewNavigator when you want to hide them, and then put them back again with removeItemAt, addItemAt combination ... but you really don't want to do that.
The first reason is that with removing items from tabBar you are removing ViewNavigators which form the View stack of certain section.
With removing one of the navigators, you are messing with this stack, and if your application tends to be on the complex side, or tends to grow that way, you will find yourself in trouble writing code that manages all those removal and adding processes, keeping in mind that your indexes in the navigators Vector in TabbedViewNavigator don't get messed.
Furthermore, if you do some caching, or custom handle navigator properties, restoring them to the state where they been in the moment you removed them from the tab stack will give you a lot of headache.
Following the solution from the original post, and with little experimenting the solution is quite simple:
// let say that the instance of Tabbed view navigator look like this:
// appRef is reference to TabbedViewNavigatorApplication (if you are in the main mxml, just put "this" as reference)
....
var myTabbedViewNavigator : TabbedViewNavigator = appRef.tabbedNavigator;
var index : int = 0; // we take item at index 0 for example (1st option in tabBar)
var dg : DataGroup = myTabbedViewNavigator.tabBar.dataGroup;
dg.getElementAt(index).visible = false;
dg.getElementAt(index).includeInLayout = false;
....
To show the tab again put true, and that's it, your navigators will still be there inside your TabbedViewNavigator but their visual representation in the tabBar will be invisible.
This function will hide a tab at a particular index. If you do not have the includeInLayout then the tab disappears and leaves a hole.
private function setTabEnabled(index:int, enabled:Boolean):void {
var theTab:UIComponent = tabNavigator.dataGroup.getElementAt(index) as UIComponent;
if (theTab)
theTab.visible = enabled;
theTab.includeInLayout = enabled;
}
}
I'm trying to use one great example of using SpriteVisualElement for item renderers from here:
The issue i have is it's impossible to detect the mouse click event when click points to the area of the renderer which doesn't have any child components. For example: if I click on the textfield, then it works and i see the mouse even dispatched. If I click on an empty spot on the renderer then no mouse event is dispatched. I've tried mouseEnabled=true (which is true by default any way) with no luck. I see from the Flex doc:
the click event is inherited from InteractiveObject. So maybe this has something to do with the focus (see the tread at the and of the page). Looking for an explanation why InteractiveObject behaves that way. Thanks!
What is happening is that you do not have anything in the renderer to click on so click will fall through your renderer, by adding and image or graphic you are creating a clickable area.
The best thing to do is to tell the render that it does not have any mouseChildren which will then make it respond to any click on it.
change this method
public function TweetRenderer()
{
this.mouseChildren = false;
percentWidth = 100;
}
I think is getting a bit clear now. The mouseChildren is a property on DisplayObjectContainer. And as the following example shows DisplayObjectContainer doesn't dispatch any mouse click events, when click occur on the area which is not taken by any of it's children. This is unintuitive because DisplayObjectContainer has a click event inherited from InteractiveObject, so one (a newbe like me) would expect it to dispatch an event if i click on the container. Setting mouseChildren=false kind of flattens the DisplayObjectContainer, so the click event on any of the children will be dispatched having target as a container. But!!! This still assumes that you click on the child, not on the empty area. There is no way to dispatch it when click is done inside the area which is not taken by the child. This example shows this: If you click on either TextField or on fill, then even is dispatched with SpriteVisualElement as target. If you click elsewhere the event is not dispatched. I'm still unclear on why this is an intended behavior, taking into account the presence of click event on the DisplayObjectContainer. Maybe because containers don't meant to detect the mouse clicks at all, but rather their children are? This is a bit unintuitive to me.
<?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"
creationComplete="creationCompleteHandler(event)" >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent):void {
var tf:TextField = new TextField();
tf.text = "I'm inside SpriteVisualElement!";
tf.background = true;
tf.backgroundColor = 0xff0000;
tf.alpha = 0.75;
tf.selectable = false;
tf.width = 150;
tf.height = 25;
uic.addChild(tf);
uic.addEventListener(MouseEvent.CLICK, clickHandler);
uic.mouseChildren = false;
uic.mouseEnabled = true;
uic.graphics.lineStyle(1, 0xFF0000);
uic.graphics.moveTo(0,0);
uic.graphics.lineTo(uic.width,0);
uic.graphics.lineTo(uic.width,uic.height);
uic.graphics.lineTo(0,uic.height);
uic.graphics.lineTo(0,0);
uic.graphics.beginFill(0x00FF00,1);
uic.graphics.drawRect(12, 12, 178, 28);
uic.graphics.endFill();
}
protected function clickHandler(e:MouseEvent):void {
trace("click detected, target:",e.target);
}
]]>
</fx:Script>
<s:SpriteVisualElement id="uic" horizontalCenter="0" verticalCenter="0" width="200" height="50" />
</s:Application>
As I am somewhat new to Flex I may be missing something fundamental here. I have a Spark List container whose dataProvider is bound to a result set coming back from a RemoteObject call. Pretty standard stuff.
<s:List id="list" dataProvider="{model.stuff}" width="100%" height="100%"
selectedIndex="#{selectedSlider.value}"
itemRenderer="{stuffRenderer}">
</s:List>
The selectedIndex is associated with an HSlider, but that is not the problem. My issue is that I would like to automatically select a certain "preferred" element from the list (only initially...to guide the user).
I tried to do that in a creationComplete event but my data hadn't shown up yet...setting selectedIndex didn't work...it was too early.
What's the right way to do this?
private function findAllUsers_resultHandler(e:ResultEvent):void
{
list.dataProvider = new ArrayCollection(e.result as Array);
if(firstTry)
{
list.selectedIndex = 0;
firstTry = false;
}
}
spark.components.List has spark.components.SkinnableDataContainer in its class hierarchy which dispatches a dataProviderChanged event whenever the dataProvider changes. Unfortunatly there is no [Event] metadata in SkinnableDataContainer that allows using this event in MXML. So, you'll need to create your own custom component that extends List.
package
{
import spark.components.List;
[Event(name="dataProviderChanged", type="flash.events.Event")]
public class MyList extends List
{
public function MyList()
{
super();
}
}
}
By using your custom component you can add an event listener for dataProviderChanged and update your selectedIndex accordingly.
<ns1:MyList id="list" dataProvider="{model.stuff}" width="100%" height="100%"
dataProviderChanged="selectedIndex = selectedSlider.value"
selectedIndex="#{selectedSlider.value}"
itemRenderer="{stuffRenderer}">
</ns1:MyList>
BTW: This works with other List-based components (like DropDownList) too.
I believe it should work if you just set the initial value of the slider to the index you want to be selected at the beginning.
Something like this:
<s:List dataProvider="{yourData}" selectedIndex="{hSlider.value}" /> <s:HSlider id="hSlider" minimum="0" maximum="{yourData.length - 1}" stepSize="1" value="theIndexYouWantAsInitial" liveDragging="true" />
That should work.
HTH
FTQuest
In my Flex app I am using a repeater to show a report on my database data. On this report the user can "drill-down" on the data to show more detail. In order to make this easier on the eye I have a header label and then a datagrid within the repeater.
Whilst this works perfectly, because the dataprovider for the datagrid comes from an array in the repeaters dataprovider, it is causing the following warning:
Data binding will not be able to detect assignments to "report"
The warning is for this line:
<mx:DataGrid id="dgReport" dataProvider="{rptReport.currentItem.report}" rowCount="{rptReport.currentItem.report.length}">
Below is my code, if anyone has any suggestions for how I can get rid of the warning/do this properly they will be most welcome!
<mx:Script>
<![CDATA[
[Bindable] private var reportProvider;
private function report_Handler(event:ResultEvent):void {
// Temp variables
var currentHeader:String = "";
var previousHeader:String = "";
// Retrieve PHP array
var reportPHP:Array = ArrayUtil.toArray(event.result);
// Create Flex array
var reportFlex:Array = [];
var reportFlex_dataGrid:Array = [];
// Loop through PHP array
for(var i:int = 0; i < reportPHP.length; i++) {
// Retrieve current header
currentHeader = reportPHP[i].header;
// Clear array
if (currentHeader != previousHeader) {
reportFlex_dataGrid = [];
}
reportFlex_dataGrid.push({column1:reportPHP[i].column1, column2:reportPHP[i].column2, column3:reportPHP[i].column3});
}
// Add to repeater array
if (currentHeader != previousHeader) {
// Add to array
reportFlex.push({header:reportPHP[i].header, report:reportFlex_dataGrid});
}
// Store previous headers
previousHeader = reportPHP[i].header;
// Add to combobox data provider
reportProvider = new ArrayCollection(reportFlex);
}
]]>
</mx:Script>
<mx:Repeater id="rptReport" dataProvider="{reportProvider}">
<mx:VBox>
<mx:Spacer height="5"/>
<mx:Label id="lblHeader" text="{rptReport.currentItem.header}"/>
<mx:DataGrid id="dgReport" dataProvider="{rptReport.currentItem.report}" rowCount="{rptReport.currentItem.report.length}">
<mx:columns>
<mx:DataGridColumn headerText="Column1" dataField="column1"/>
<mx:DataGridColumn headerText="Column2" dataField="column2"/>
<mx:DataGridColumn headerText="Column3" dataField="column3"/>
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:Repeater>
Data binding will not be able to detect assignments to "report"
Your dataProvider is rptReport.currentItem.report. Of this, rptReport, being an mxml element, is Bindable. The currentItem property of the Repeater component is also declared to be Bindable. The report property of the current item is not bindable - current item itself is just an object. Through this warning Flex is saying that if you alter the report of an already assigned object to something else, it won't be automatically reflected in the data grid.
In most cases you can safely ignore this type of warnings.
When you say x="{a.b.c.d}" in mxml, the guarantee is that flex will detect changes made to any of the four items in the chain (a, b, c and d) and update the value of x. In other words, x will change when a or a.b or b.c or c.d is changed. For this to work, Flex expects that all those four are declared bindable. If it finds any of these items to be not bindable, it will throw a warning. A property is bindable if it was declared using mxml or if it was declared with the [Bindable] metadata tag in ActionScript.
In most cases, one would be interested only in the changes to a or a.b. In your example, changes happen only when HTTPService is resend, in which case the dataProvider itself will change.
Dude, a little off-topic, but having a grid in a repeater sounds really busy. If you want to have a drill-down, pop it up or put it in a pane that's only visible in that mode.
Visually, the repeater is a pattern which the user can internalize. A grid inside that pattern is a lot harder to deal with. Scrolling the grid vs. scrolling the repeater will likely be frustrating, let alone Tab navigation.
Logistically, you are creating a lot of in-memory UI. I would worry about performance.
Consider using a List with a custom Item renderer instead of a repeater. I still would not put a grid in there, but it's worth the effort.
Cheers
In Flex 3, I've created a ComboBox within an MXML component similar to the following:
<mx:ComboBox id="comboBox" dataProvider="{_choices}" />
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// etc...
public function get choices():ArrayCollection { return _choices; }
[Bindable]
private var _choices:ArrayCollection =
new ArrayCollection( [ { data: "ALL", label: "All" } ] );
// etc...
]]>
</mx:Script>
</mx:HBox>
In the parent MXML application, I'm modifying the contents of the choices property:
myComponentId.choices.removeAll();
myComponentId.choices.addItem({data: "NY", label: "New York"});
myComponentId.choices.addItem({data: "CA", label: "California"});
// etc...
The binding is working in that the ComboBox is automatically picking up the new contents added at runtime, however it is not adjusting its width. The initial width of the ComboBox is wide enough only to show the initial item "All" declared in the component. However, I want and would have expected the ComboBox to re-size automatically during binding to be able to show "California", but it isn't.
How can I get the ComboBox to update its width after I have added new wider labels to its dataProvider? Thank you!
You probably just need to call invalidateProperties(), invalidateDisplayList(), invalidateSize(), or some combination of the three (I'm something of a flex newbie myself), to force an update to the component's measurements after changing the data provider or its contents.
myComponentId.invalidateSize();
myComponentId.invalidateDisplayList();
myComponentId.invalidateProperties();
I would add a setter for choices and call validateNow() on the ComboBox at the end of the setter:
public function set choices(value:ArrayCollection):void
{
_choices = value;
comboBox.validateNow();
}
I encountered the same problem and neither of these worked for me. I managed to solve this by creating a new event handler
menuComboBox.addEventListener(ResizeEvent.RESIZE, updateListWidth);
The method called in this event simply resizes the dropdown.width property.
private function updateListWidth(event:ResizeEvent):void {
menuComboBox.dropdown.width = menuComboBox.width;
}