Custom Controls and States - apache-flex

I've got an <mx:Button> in my application, I have 10 items in an XML Node. What I'd like to do is when the button is clicked show the next 5 XML Nodes.
How do I achieve this?
My code is as follows at the mo :
<mx:Button x="1380.65" y="582.65" styleName="rightButton"/>
The style is just setting the up / over and down states of the button. But I want it to function and show the XML nodes in groups of 5.

How are you displaying the first five items?
If you're displaying things in a list or DataGrid, I believe you can set the verticalScrollPosition to scroll the list via a button click.
If you are displaying items using TextInputs, custom component, or other non-renderer-based classes, you just need to manually write some code to update the display elements based on the currently displayed index and what is next.
Can you offer a running sample? That may us direct you!

Related

Flex: accessing child through navigating the hiererachy

I have a generic function to build rows of controls (each row comprising of sliders, radio buttons, reset buttons, text display) etc, and some functionality to change underlying data based on these
As I didn't want to write specific code for each row, I had code written by which I can detect the row on which there has been a mouseevent, and though the row access each individual control
The hierarchy used is titleWindow (part of popup)->skinnable container->HGroup->control
When I trace for a radiobutton, I get the path as follows Electric_Modify.TitleWindowSkin2620._TitleWindowSkin_Group1.contents.contentGroup.0.RadioButton2645
The '0' before the radioButton stands for the first Hgroup id->named as 0
I tried accessing the radio button as follows- 5th element in the HGroup
((this.contentGroup.getChildAt(row)as Group).getChildAt(4) as RadioButton).enabled=false;
and get a message "Cannot access a property or method of a null object reference" on this line. How should I navigate the hierarchy to reach the element?
You should be using getElementAt(...) and not getChildAt(...).
The get element functions represent a "higher level" element hierarchy which is needed to make skinning easier.
((this.getElementAt(row) as IVisualElementContainer).getElementAt(4) as RadioButton).enabled = false;
It should look something like that, but the exact hierarchy depends on what's in your app.
#drkstr
Thanks for your input... I thought of an alternate approach that worked for me...I mapped out the parent of the HGroup via
parent1=hgrp.parent; and then referenced these buttons as follows
((parent1.getChildAt(row)as Group).getChildAt(4) as RadioButton)
This works like a dream...I presume your suggestion would let me jump across the intermediate layers
#J_A_X/ #Constantiner: Thanks for the suggestion. I have no idea why we didn't think through and go down the DataGroup path. Prima facie seems simpler... we got to creating the UI controls in MXML laying out controls serially,and when it came to making it generic, we literally replicated the MXML approach in AS. Started off easy, till it caused problems like above. We will fix this to a better approach, when we upgrade versions. It works for now

How do create this gmail app effect on Honeycomb

Attached is the screenshot of the UI that I would like to have in my app. When I click on the listitems on the fragment on the left side I see a arrow pointing(question mark in red) on the list item which was clicked, I would like to know how can we achieve this in UI layout. Any special settings to be set?
I was looking at the same feature.
To implement similar, I'd suggest showing an image on the selected item in the list, this would require code rather than Layout XML, It would be controlled by the list fragment when an item is selected. That way you get the visual effect that the two fragments are related via the arrow image.
Did you end up giving it a go for yourself?

Forcing custom item renders to refresh

I have an AdvancedDataGrid. One of the columns in the grid displayed with help of custom render. During the application run, I set another custom render to the same column. When I scroll data in the grid (change values for the custom renders) they display new view correctly.
I want that they dispaly new view automatically (when I set them): so I think I have to call them and tell tham to refresh rgeir views. Any idea how to do this?
Use invalidateList()

DRUPAL: customize dropdown Views filter

I'm using Views dropdown filter (with tags) and it works great. However I would like to customize it in this way:
1 - remove button "Apply" and automatically update Views (at the moment I'm updating it with Ajax)
2- allow my customer to change the order of the dropdown items (specifying top items)
3- select multiple items without having to press the SHIFT button on keyboard (do not unselect other items if new items are selected)
http://dl.dropbox.com/u/72686/viewsFilter1.png
Let's suppose the items in the image are tags... something like this:
http://dl.dropbox.com/u/72686/viewsFilter2.png
thanks
Use jQuery to .hide() the Apply button, and then set a handler on the filter fields so that whenever one of them is changed (i.e., by the user), the Apply button registers a click.
Hmm, can't help with this one. You might be stuck writing a custom module that hooks into the Views API.
Sounds like the Sexy Exposed module would solve this problem?
I'm using the following code to keep the items selected and it works.
$('#edit-tid option').click(function() {
$(this).toggleClass("selected");
$("option:not(.selected)").removeAttr("selected");
$("option.selected").attr("selected", "selected");
//submit request
$('#edit-submit-Portfolio').click();
});
When a request is submitted the page is refreshed. The selected items are still selected (class="selected") but the javascript code do not keep them selected.. I don't understand why, since they have the correct class attribute.
So.. it doesn't work after refresh, even if the html code is the same (the same class="selected" attribute is assigned to the same items).
thanks
I've solved point 1 and 2, installing better exposed filter module from drupal website.

Advanced DataGrid Flex 3 - ItemRenderer and Tree display

I am using Advanced DataGrid of Flex 3 with hierarchical data. The itemRenderer is a TextInput which accepts numbers. When I enter data into the given field and click the corresponding expand tree icon for the row, I want the amount entered in tree node should get cascaded to its child rows. But I found the nature of advanced DataGrid erroneous.
When I enter data and click on tree icon, the data is not populated in child windows unless i wont take the focus out from the editing control.
I tried using itemEditEnd, itemFocusOut etc but of no use. I have to explicitly click on any of the other columns and then expand tree.
Am I making any mistake anywhere?
I found solution to my problem, its bit ugly but it works. I had to register two events for textinput as follows
addEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, allocateAmount);
addEventListener(FocusEvent.KEY_FOCUS_CHANGE, allocateAmount);
and then by using IViewCursor I could able to update data.

Resources