I'm writing a Flex application and I came across what I think is a weird problem.
I want to create a text box and a DateChooser as the datefield didn't do what I wanted and it's Halo so I can't skin it easily. I want the DateChooser to show when I click on the text input. Here is an except from my code:
<s:TextInput id="wholeDate" width="100"
mouseOver="stopChangeToNormal();"
paddingRight="10"
click="date1.visible = true"
focusOut="date1.visible = false"/>
<s:Button label="Go" width="70" />
</s:Panel>
<mx:DateChooser id="date1"
visible = "false"
change="useDate(event);"
mouseOver="changeToNormalState = false;"
y="{wholeDate.y + buttonsGroup.y + 20}"
x="{wholeDate.x + buttonsGroup.x - 175 }" />
The weird thing is that it works if I make it visible = "true" to start, but if I have it visible="false" it doesn't work! It shows, but the date I select doesn't show in the box as it does if I have it as visible="true", but I don't want it to be visible initially.
Any ideas?
I don't think its actually anything to do with the initial visibility of the DateChooser. Have you verified that your event handlers are indeed called, and in an order that makes sense? The problem appears to be that when you attempt to make a selection in the DateChooser, the TextInput gets a focusOut event, which hides the DateChooser, which apparently prevents it from receiving the selection event. I think you need to be more selective about when you actually hide the DateChooser. Perhaps you need to defer the hiding so it has a chance to respond to the selection first.
Related
I have been used a custom itemrenderer to build a program needed.
In the itemrenderer it looks like this.
i use to deal with the calse effects when user move mouse over a specific item renderer.
<s:postLayoutTransformOffsets>
<mx:TransformOffsets id="offsets" x.hovered="-10" y.hovered="-15" scaleX.hovered="1.2" scaleY.hovered="1.2" />
</s:postLayoutTransformOffsets>
<s:transitions>
<mx:Transition fromState="normal" toState="hovered" autoReverse="true">
<s:Animate target="{offsets}" duration="200">
<s:SimpleMotionPath property="scaleX" />
<s:SimpleMotionPath property="scaleY" />
<s:SimpleMotionPath property="x" />
<s:SimpleMotionPath property="y" />
</s:Animate>
</mx:Transition>
<mx:Transition fromState="hovered" toState="normal" autoReverse="true">
<s:Animate target="{offsets}" duration="200">
<s:SimpleMotionPath property="scaleX" />
<s:SimpleMotionPath property="scaleY" />
<s:SimpleMotionPath property="x" />
<s:SimpleMotionPath property="y" />
</s:Animate>
</mx:Transition>
</s:transitions>
After that is the script part deal with the event or logic with the renderers.
For each render there will have to buttons contained in the renderer and showed only when user move mouse on the renderer, each button can trigger a event to deal with.
the last part code is about the container in the renderer.
First is a which have a "rollOver" and "rollOut" event, when user rollOver a button and click it the event will executed. same to the rollOut.
Inside the Group there is a image bound with the pictures that will be show in the renderer.
A Hgroup contains the button that with the Event to execute when user click on it.
The problem i have been meet is:
1. the states is not controllable, when user move mouse over a render and do the click, other itemrenderer will do the scale as well. that the sates problem and i have override the getcurrentstates method to fix that,that works but
2. after fix the itemrenderer states problems i found the other itemrender which is not clicked by users also can execute the rollOver event, which is pretty wired.
I'm not sure if this problem is also about the states of itemrenderer or it is about something else i don't have a idea.
Hope someone can help me find some clues and solutions , or maybe just suggestions that could be helpful.
cheers.
This is because the item renderers are being reused for other items in the list, and when being reused, they maintain the previous state they were.
You should set the state of the items to the default one if they are being reused. Do that by overriding the "set data" function, however you will have to disable the transitions, otherwise they would be played too.
i am using following code to popup a login panel whenever i click on some specific button.
the problem is the login panel sticks it should be non visible again if i click somewhere else on screen. Anyone got ideas how to do that.
<s:Animate id="anim" targets="{[loginPanel]}" duration="1000">
<s:SimpleMotionPath property="alpha" valueFrom="0.0" valueTo="1.0" />
<s:SimpleMotionPath property="moveByY" valueBy="2"/>
</s:Animate>
<mx:Button includeIn="Login" x="811" y="10" height="53" width="142" id="btnLoginStatus" icon="#Embed(source='assets/LogIn.jpg')" click="{ if(loginPanel.visible==true) {loginPanel.visible=false; loginPanelClicked = false;} else loginPanel.visible=true; mainViewStack.selectedIndex =0; anim.play(); loginPanelClicked = true;}" />
its all fine now add click = "loginPanelClicked = true " in bordercontainer of your login panel.
Try writing a method in a script block and link that function to the click property instead of inlining it. Can't tell from the code you provided what the method is supposed to actually do. It looks like it will play the animation regardless if the login panel is visible or not, and it will cause the login panel to always show (alpha=1.0 hint, hint).
If you write it out in a method instead of inlining it I think you'll spot your error with the else statement.
I want to set value of a progress bar in an accordian but I am encountering 'setProgress is not a function' error. Any idea what's wrong with following code.
Observation:
If I move the progress bar out of the Accordian then the error goes away and the progress bar appears fine.
I want to set the progress bar eventually to {repMonitor.currentItem.threatLevel} but for now I am just testing with hypothetical threat value i.e 60
<mx:Accordion id="monAccordian" includeIn="Monitoring" x="10" y="10" width="554" height="242" change="monAccordianChange()" >
<mx:Repeater id="repMonitor" dataProvider="{monitoringArray}">
<mx:Canvas width="100%" height="100%" label="{repMonitor.currentItem.firstName+' '+ repMonitor.currentItem.lastName}" >
<mx:Image x="10" y="10" source="{repMonitor.currentItem.imageName}" width="175" height="118"/>
<s:Label x="200" y="14" text="Threat Level:"/>
<mx:ProgressBar x="200" y="30" mode="manual" label="" id="bar" width="200" creationComplete="bar.setProgress(60,100);" />
</mx:Canvas>
</mx:Repeater>
</mx:Accordion>
This stems from the fact that your ProgressBar is in a repeater. You cannot reference the repeated items by id because you would have a variable number of ProgressBars with id "bar".
There are also special considerations when using event listeners inside of Repeater objects:
Event handlers in Repeater components
When a Repeater component is busy
repeating, each repeated object that
it creates can bind at that moment to
the Repeater component's currentItem
property, which is changing as the
Repeater component repeats. You cannot
give each instance its own event
handler by writing something like
click="doSomething({r.currentItem})"
because binding expressions are not
allowed in event handlers, and all
instances of the repeated component
must share the same event handler.
Repeated components and repeated
Repeater components have a
getRepeaterItem() method that returns
the item in the dataProvider property
that was used to produce the object.
When the Repeater component finishes
repeating, you can use the
getRepeaterItem() method to determine
what the event handler should do based
on the currentItem property. To do so,
you pass the
event.currentTarget.getRepeaterItem()
method to the event handler. The
getRepeaterItem() method takes an
optional index that specifies which
Repeater components you want when
nested Repeater components are
present; the 0 index is the outermost
Repeater component. If you do not
specify the index argument, the
innermost Repeater component is
implied.
You can read more about this in the Repeater docs.
I want to print the content of the label property in the Alert window.
<mx:LinkButton label="{bookmarksRepeater.currentItem.name}" click="Alert.show(this.label.toString())" />
But the Alert window is completely empty. What am I doing wrong ?
I guess the keyword "this" is referencing the application instead of the LinkButton, right ?
How can I reference the LinkButton itself, without having to add an ID to all my linkButtons ?
thanks
It doesn't work quite like Javascript. You'll have to do this:
<mx:LinkButton label="{bookmarksRepeater.currentItem.name}" click="Alert.show(event.currentTarget.label.toString())" />
That should alert the value of the label.
I've got a progressBar component defined as the following on my webpage:
<rich:modalPanel id="pb1Panel">
<rich:progressBar id="pb1" oncomplete="javascript:#{myBean.handleProgressEvent()} closeProgressModalPanel()" value="#{pb1Listener.percentageComplete}" label="#{pb1Listener.percentageComplete} %" minValue="1" maxValue="100" limitToList="true" timeout="3200" interval="1400" enabled="false"/>
</rich:modalPanel>
and a button:
<a4j:commandButton id="actButton" value="action" action="#{myBean.performAction}" immediate="true" ajaxSingle="true" onclick="javascript:Richfaces.showModalPanel('pb1Panel');" reRender="pb1Panel">
<a4j:support event="onClick" value="#{rich:component('pb1')}.enable()" reRender="pb1" />
</a4j:commandButton>
which doesn't work. However if I take out the
....
enabled="false"/>
....
from the progress bar, and the element from the button, everything seems to work just fine.
Any suggestion why it's not working? I'm setting enabled="false" initially because I do not want the polling to start unless the button was clicked (to reduce unnecessary polling).
The system is building on richfaces/seam.
Thanks!
The enabled property should refer to a property of a managed bean, and your button should change it, then reRender the progress bar.
Simply copy-paste the example from here - it's doing exactly the same thing as you want.