I am doing this simple project using Flex 4 SDK and I got stuck with this simple problem: I have turned sortable property for AdvancedDataGridColumn to false, but the column header is still rendered as:
As You can see, my label for this header is "06", but the column header is divided and it keeps the place for sort arrow.
How can I change this? I would like my column header to contain only my label.
I know that most probably I need to do some magic with AdvancedDataGridHeaderRenderer but I just started learning Flex and would like to receive some help.
You can add the following property to the AdvancedDataGrid itself:
<mx:AdvancedDataGrid sortExpertMode="true"/>
That will get rid of the annoying extra space for the arrows. An arrow will still show up when you click a column header for sorting, but it will be smaller and less obtrusive. It won't reserve space for itself in the header.
<mx:AdvancedDataGrid sortExpertMode="true">
<mx:columns>
<mx:AdvancedDataGridColumn sortable="false" />
Related
The Problem in Hand:
I want to make a form designer where user can drag and drop fields of different type and design the layout too, some what similar to wufoo form builder but here the layout is limited to single column whereas I want to make something where user can make the layout as they want.
I understand how to do in single column view, but could not understand how to achieve multiple column layout eg: row 1 there could be 3 elements, row 2 one element stretched to full length, row 3 there could be just 2 elements etc.
What I tried:
I have tried with jquery UI sortable to make a single column layout with using div where new elements can be dragged and repositioned.
Any suggestion on how to proceed further will be helpful
I have tried searching StackOverFlow and google but could not find any link on a similar topic. If anyone could point me to the same, it will be also helpful.
When you reorder elements on wufoo form builder, you can only drag'n'drop up or down. Remove that restriction and as soon as one element is dragged across a certain threshold, it "belongs" to the next column. If the "old" column was the first or last one and the line that the element was moved over was to the "outside" of the form, add a new column there, until the maximal number of columns is reached.
If the used drags the last element of a column into another column, remove the now empty column on element-drop.
You could also remove the dynamic adding/removing of columns and juist have a button ("remove column" & "add column") to do it by code.
An example for the dropping in another column can be found here: http://jqueryui.com/sortable/#connect-lists
Hope this helped!
Edit:
http://jqueryui.com/sortable/#portlets and http://jqueryui.com/sortable/#empty-lists also have elements that you could look into. Good luck! Sounds like a nice project. Can we see any progress or beta?
I have the following code (textinput).
<s:TextInput id="label"
text="just testing"
width="100%"
height="200"
contentBackgroundColor="#aaaaaa"
styleName="normalText">
</s:TextInput>
I am having a hard time finding how to align the text ("just testing") to the top.
I checked the Adobe documentation but it seems like there is no vertical alignment property available for this property.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/TextInput.html
I realize that there is a textarea component available but due to performance reasons, I need to use textinput.
topPadding seems to work for mx
<mx:TextInput
id="txt"
paddingTop="5"
text="I am Vertically aligned text"
textAlign="center"
width="250"
height="250">
</mx:TextInput>
Any tips would be greatly appreciated.
Thanks!
Quick version
If the font size never varies, it may suffice to just work with paddingBottom. Because by default the vertical alignment is set to middle, decreasing paddingTop alone will not suffice to move the text up sufficiently; it's set to 1px by default anyway. You'll have to increase paddingBottom too. I cannot give you exact numbers: it depends on the size of the font, so you'll have to play around with the values a bit.
<s:TextInput paddingBottom="6"/>
Reusable version
If you want your solution to be reusable with any kind of font, you'll have to create a custom skin for TextInput. Fortunately, that's not too hard:
Find the spark.skins.spark.TextInputSkin
Copy it and give it a new name, say my.skins.TopTextInputSkin
Find the RichEditableText tag with id textDisplay (it's at the bottom)
Set its verticalAlign property to top
Apply the new skin: <s:TextInput skinClass="my.skins.TopTextInputSkin"/>
I wanna create a table where I should hide some columns. Whenever I click on an arrow or some button The hidden columns should be display along with original columns in that table.
For example, I have 20 columns, I don't need show all the columns at the staring point of view. Suppose I want to display 5 columns in UI, renaming 15 should be hidden. Where can I put some arrow on right corner(in header line) of table to extend the table with remaining columns.
Is it possible with JSF with rich-faces or anything else.
Thank you in advance.
Take a look on this example on primefaces labs. It allows to dynamically add columns to a datatable. I am sure you can tweak it to get the behaviour you are looking for.
Use a <rich:dataTable. Set the rendered property of the columns which should be initially hidden by using a boolean property in your class.
<rich:dataTable value="" var="v" id="tbl">
<rich:column>Always visible column 1</rich:column>
<rich:column rendered="#{del.renderColumn}">Visible on demand</rich:column>
<rich:column>Always visible column 2</rich:column>
<rich:column>Always visible column 3</rich:column>
</rich:dataTable>
Use an <a4j:commandButton and set the property renderColumn as true at button action and reRender the table.
<a4j:commandButton value="Show" action="#{del.renderHiddenColumn()}" reRender="tbl"/>
In my .mxml file, I am populating two side by side Labels with text data from a database.
Like this:
<s:Label x="10" y="37.5" width="100%" text="{data.city}"/>
<s:Label x="86" y="36.75" width="100%" text="{data.state}"/>
Sometimes, I will get a particularly long piece of text data and this will cause the 2 labels to overlap each other and become totally unreadable.
I think this is happening because I have the x and y set. Is there a way to make this more dynamic?
Thanks!
I would recommend exploring different Flex layout containers.
HGroup
<s:HGroup>
<s:Label text="{data.city}"/>
<s:Label text="{data.state}"/>
</s:HGroup>
This provides the kind of layout it sounds like you're looking for from your example. However, you may also want to look at a few other containers Flex offers.
Form
Flex forms align data in ways that are often useful for creating, well, forms. You may want to consider this for your UI, especially if you're allowing a user to give input that persists back to your DB.
<s:Form>
<s:FormItem label="City:">
<s:Label text="{data.city}"/>
</s:FormItem>
<s:FormItem label="State:">
<s:Label text="{data.state}"/>
</s:FormItem>
</s:Form>
You could do a couple of things:
If you have a function that gets called to set the values of each label, reposition the labels based on the contents in that function.
If the values for the labels are bound to data so that you don't necessarily get notified when the data is refreshed, then it's time to override the updateDisplayList() method of UIComponent, and have it reposition your labels there.
There is a lot of efficiency that can be gained (which will improve your performance) by understanding and using the life-cycle of a UIComponent. There's lots of good info on the subject out there if you just google "Flex component lifecycle"
Good luck!
if you have to display your labels in a limited width, then you can use maxWidth property of labels, this will display your text in label, and if text is long then it will show some text and remaining in ... format.
<s:Label text="{data.city}" maxWidth="150"/>
Try set X of second label with the width of the first label + space + x first label.
So: first label width + space + x of first label
I am trying to set the softKeyboardType to email but when ever i use skinClass="spark.skins.mobile.TextAreaSkin" it doesn't change it but when i take off skinClass="spark.skins.mobile.TextAreaSkin" it does work. The problem is i need the skinClass="spark.skins.mobile.TextAreaSkin" class to allow my application so scroll with out it the text does not stay with in the bounds of the text input boxes. Has anyone seen this problem or another fix the the scrolling problem?
Code examples
<s:TextInput softKeyboardType="email" id="id1" width="100%" skinClass="spark.skins.mobile.TextInputSkin" />
<s:TextArea softKeyboardType="email" id="id2" height="400" width="100%" skinClass="spark.skins.mobile.TextAreaSkin" />
Thank for the help,
Justin
I've checked mobiletheme default.css in flex 4.6 sdk
adobe is using different skins for TextInput and TextArea components
TextArea
{
...
skinClass: ClassReference("spark.skins.mobile.StageTextAreaSkin");
}
TextInput
{
...
skinClass: ClassReference("spark.skins.mobile.StageTextInputSkin");
}
so I think you should use StageTextAreaSkin or StageTextInputSkin as a skinClass for corresponding components
softKeyboardType will work in this case but text position problem will stay, I think you will need to change/fix StageTextAreaSkin or StageTextInputSkin sources for your scrolling
Confronted with this issue, I came up with a workaround which worked in my case.
Use default skin, set your softKeyboardType.
While doing layout for your screen, create a section which contains the uppermost part of your screen and which you can easily collaps or toggle its includeInLayout property, so when you do that, it will make your TextInput or TextArea to appear over the keyboard, bypassing the scroller for that purpose.
Then, when your field receives focus, in focusIn handler, you collaps or toggle this section. This does two good things: first, it lifts your field over the keyboard, and second, it removes focus from your field (at least in my case it did, not sure 100%, if it doesn't, then shift focus manually). This is good because when you set focus on your field once again (yourfield.setFocus()), the cursor will appear where you want it, within the bounds of your field.
Once done typing, you restore top section to its original state from focusOut or softKeyboardDeactivate handlers.
Hope this helps...
seems like it's flex 4.6 bug
http://forums.adobe.com/message/4122095