I have a situation where I have several listbox controls on the same asp.net page. They are currently autosized to keep data from truncating. However, I would like to be able to determine the width of the largest listbox and then alter the size of the other listboxes to be the same.
The question is... How can I access the size of the listboxes? Or Can I?
Yes you can...
//This is a <div> that wraps around your listboxes
var wrapperDiv = document.getElementById('listboxWrapper');
//Get all <select> elements within the <div>
var sels = wrapperDiv.getElementsByTagName('SELECT');
//An array to store the width values
var widths = new Array();
//Load the array
for(var i = 0, l = sels.length; i < l; i++)
widths[i] = sels[i].offsetWidth;
//Get the max width
var maxW = Math.max(widths);
//Set the max width to all the list boxes
for(var sel in sels)
sels[sel].style.width = maxW;
for the best results, consider using a javascript framework, using jquery:
var width = 0;
//get the largest width
$("select").each(function() {
if ($(this).width() > width) {
width = $(this).width();
}
});
//make them all the same width
$("select").css("width", width);
Related
I'm drawing the controls dynamically at run time inside a grid. I want to clear all children under a specific control when the user taps on it. I have this but this only remove the RowDefinitions:
var currentRow = Grid.GetRow((BindableObject)sender);
for (int i = currentRow + 1; i < grdDynamic.RowDefinitions.Count; i++)
{
grdDynamic.RowDefinitions.RemoveAt(i);
}
but I need to clear all the grid children in those RowDefinitions.
This should remove the children in your grid with the tapped row as attribute.
var children = grdDynamic.Children.ToList();
foreach (var child in children.Where(child => Grid.GetRow(child) == row)) {
grdDynamic.Children.Remove(child);
}
It loops over all children in your grid and removes the child if its row equals the tapped row.
How would I go about finding the display size and position of the stage or navigator area in Adobe Flex mobile? I would like to be able to make something the exact width and height (without using 100% w&h). And position the top at the top of the stage. I'm sure this description isn't the easiest to understand, so hopefully this image will help:
protected function init(event:FlexEvent):void
{
if (NativeMaps.isSupported){
NativeMaps.service.addEventListener(Event.ACTIVATE, mapReady2);
//NativeMaps.service.addEventListener(NativeMapEvent.MAP_CREATED, mapReady);
try{
NativeMaps.service.mapOptions.compassEnabled=true;
NativeMaps.service.mapOptions.zoomControlsEnabled = true;
NativeMaps.service.mapOptions.zoomGesturesEnabled = true;
NativeMaps.service.mapOptions.rotateGesturesEnabled = true;
NativeMaps.service.mapOptions.myLocationButtonEnabled = true;
}catch(e:Error){
}
var tla:ViewNavigatorApplication=FlexGlobals.topLevelApplication as ViewNavigatorApplication;
var width:Number = tla.width;
var height:Number = tla.height-tla.actionBar.height;
var x:Number = 0;
var y:Number = tla.actionBar.height;
NativeMaps.service.createMap(width,height,x,y);
}
}
I think this is what you need:
var tla :ViewNavigatorApplication = FlexGlobals.topLevelApplication as ViewNavigatorApplication;
var width :Number = tla.width;
var height :Number = tla.height=tla.actionBar.height;
var x :Number = 0;
var y :Number = tla.actionBar.height;
Then size your component using the width and height and position it using the x and y values. I wrote this in the browser, so expect typos in code. There may be some padding issues that make the sizes / positioning slightly off but you'll have to try it and see what you get.
I use the following code to set position of a DisplayObject to center.
obj.x = (screen_width - obj.width) / 2;
or
obj.x = (parentObj.width - obj.width) / 2;
And I use the following code to show 2 objects vertically.
obj2.x = obj1.width + interval
And I use the following code to show 2 objects vertically and set the position of them to center.
var obj3:Sprite = new Sprite;
obj3.addChild(obj1);
obj3.addChild(obj2);
obj2.x = obj1.width + interval;
obj3.x (screen_width - obj3.width) / 2;
Are the above codes a good way to manage positions of DisplayObjects?
Are there better and simple ways to do that?
Well you can also add them into a HGroup or a VGroup, (or HBox and VBox if you are using Flex 3). But when I want to implement a vertical layout without using these kind of elaborate objects, I usually create a "update()" method (note that the following code may contain syntax errors : it is just provided as an algorithm example):
private function update():void
{
// The vertical gap between elements
var gap:int = 4;
// The cumuled height
var cumuledHeight:Number = 0;
// The number of elements
var n:int = numElements;
// The element at each loop
var o:IVisualElement;
for (var i:int = 0; i<n; i++) {
// Gets the element
o = getElementAt(i);
// Sets its vertical position
o.y = cumuledHeight + gap*i;
// Updates the cumuled height
cumuledHeight += o.height;
}
}
Yes, there is a simpler way by using Flex to center it with horizontalCenter=0 and verticalCenter=0.
I want to dynamically add component in Container like Canvas(TileList constraints each child has the same size, GridList is poor in performance), for example
<mx:Canvas id="myHolder" width="600" height="550">
</mx:Canvas>
<mx:Button label="Add Button" click="addButton()"/>
when I click the button, I hope add a component(whatever the component is, and maybe each component has different size), and if the total width of all added child is greater than myHolder, I hope the new child can begin in new line, and stretch the height of myHolder at the same time.(layout with custom code is better)
On Canvas you have complete freedom to lay components anywhere using their x and y properties, so there's a lot of ways to skin this cat. Since you need rows, one of the methods may be (not tested):
//inside of your Canvas-based component
private function updateChildrenPositions():void
{
var rowY:Number = 0;
var rowWidth:Number = 0;
var rowHeight:Number = 0;
for (var i:int = 0, total:int = numChildren; i < total; i++)
{
var child:DisplayObject = getChildAt(i);
if (rowWidth + child.width > width)
{
//child will cause overflow, start next row
rowY += rowHeight;
rowWidth = 0;
rowHeight = 0;
}
rowWidth += child.width;
child.x = rowWidth;
child.y = rowY;
if (child.height > rowHeight) rowHeight = child.height; //accumulating max height
}
height = rowY + rowHeight;
}
This assumes Canvas has fixed width and set height depending on layout. You can add paddings and gaps later, it's a good exercise :)
To get the functionality you want, I wouldn't use an HBox. As alxx suggested, a TileList would be a better fit in this situation.
Here are some examples using a TileList to get you started:
http://blog.flexexamples.com/category/halo/tilelist/
http://learn.adobe.com/wiki/display/Flex/TileList
This is my attempt to write my own layout class for a panel of buttons (which may have between 2 and 20 buttons). Basically they should all be of a uniform size, with a constant spacing (5px) and resize appropriately.
However it doesn't always work.
Sometimes it works absolutely fine, but others it gives space for an extra column, or becomes unable to add additional columns on resizing (removing columns is fine), or something wont work. And it takes ages and seems horribly expensive in terms of computations. Reducing width seems significantly more painful in this respect for some reason.
Anyway, here it is:
package layouts
{
import mx.core.ILayoutElement;
import spark.components.supportClasses.GroupBase;
import spark.layouts.supportClasses.LayoutBase;
public class QButtonsLayout extends LayoutBase
{
public function QButtonsLayout()
{
super();
}
override public function measure():void
{
super.measure();
target.measuredHeight = 130;
}
override public function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w,h);
var tCount:int = target.numElements; // Number of elements
var tW:Number = target.width; // Width of target (button area) - somewhere between 550 and 1000px
var maxW:Number = 1; // Largest natural width of any given element
var maxH:Number = 1; // Largest natural height of any given element
var eSetW:Number = 1; // Set (to be) width of each element upon the target
var eSetH:Number = 1; // Set (to be) height of each element upon the target
var tCols:Number = 1; // Number of columns upon the target
var tRows:Number = 1; // Number of rows upon the target
for (var i:int = 0; i<tCount; i++) // Find maxW
{
var layoutElement:ILayoutElement = useVirtualLayout ? target.getVirtualElementAt(i):target.getElementAt(i);
var thisW:Number = layoutElement.getPreferredBoundsWidth();
var thisH:Number = layoutElement.getPreferredBoundsHeight();
if(thisW > maxW)
{
maxW = thisW;
};
if(thisH > maxH)
{
maxH = thisH;
};
}
tCols = Math.floor((tW-5)/(maxW+5)); //Find maximum number of columns one can fit onto the target
if(tCols>tCount) //Fix to deal with cases with low tCounts
{
tCols = tCount;
};
tRows = Math.ceil(tCount/tCols); //Find corresponding number of rows
eSetW = ((tW-5)/tCols)-5; //Set widths of elements based upon number of columns, 5s to add some space between elements
eSetH = maxH; //Takes height as the largest height
for (var j:int = 0; j<tCount; j++)
{
var layoutElement2:ILayoutElement = useVirtualLayout ? target.getVirtualElementAt(j):target.getElementAt(j);
var eRow:int = Math.floor(j/tRows); //Row of given element, taking the 1st to be zero
var eCol:int = j - eRow*tRows; // Column of given element, again taking the 1st column as zero
var _x:Number = 5 + eRow*(eSetW+5);
var _y:Number = 5 + eCol*(eSetH+5);
layoutElement2.setLayoutBoundsPosition(_x,_y);
layoutElement2.setLayoutBoundsSize(eSetW,eSetH);
}
}
}
}
Any thoughts would be much appreciated.
Criticism more than welcome.
Turns out that it's not. The layout class itself is fine, as far as calculating element positions and size is concerned.
It is actually a problem in the way in which the buttons used calculated their prefered widths. Whilst I'm not versed in the actual manner in which this happens, it was solved by removing %width values for any height and width values for graphic elements within the button skins. (Eg changing width="100%" to left="0" right="0").
I hope this might help someone, somewhere, sometime.