I have a custom component which is an HBox & I'm trying to resize a child which happens to be an image. This is image is inside a VBox which is also a child of the HBox. I have a number of these images so In UpdateDisplayList I call:
myimageArray[0-5].setActualSize(50,50);
but the image is never resized it just stays a large default size. The images source is a url path and I'm wondering if that is what is causing the problem?
You should call setActualSize() for each array item manually:
for each (var uiComponent:UIComponent in myimageArray)
{
uiComponent.setActualSize(50,50);
}
Or, if you need to resize only first 6 elements:
for (var i:int = 0; i < Math.min(6, myimageArray.length); i++)
{
myimageArray[i].setActualSize(50,50);
}
Related
I have a class that extends FlowPanel. I add a DataGrid widget and a Grid widget like this:
dataGrid.setWidth("100%");
dataGrid.setHeight("100%");
grid.setWidth("100%");
grid.setHeight("100%");
this.add(dataGrid);
this.add(grid);
this.setWidth("100%");
this.setHeight("100%");
Only the DataGrid widget appears. I've tried both switching from FlowPanel to VerticalPanel and wrapping the Grid in a FlowPanel, with no joy. I tried putting the DataGrid and the Grid into a 2 row, 1 column Grid and that didn't display anything. This is GWT 2.6.0 on Safari.
I suspect that I have a misunderstanding of what setHeight() and setWidth() are doing in this case, but I'm not sure. Is there any way to see what GWT thinks it's doing in terms of layout?
Thanks.
You tell DataGrid to take all available space inside the FlowPanel. Then you tell Grid widget to do the same. The result is that your Grid has a height of zero, since there was no space left for it after the DataGrid took 100% of the FlowPanel height.
You either have to use "50%" for heights, or make your DataGrid fixed size ("100px") and then tell the Grid to take the rest. The easiest way to achieve that is to use a LayoutPanel, and then, for example:
layoutPanel.setWidgetTopHeight(dataGrid, 0, Unit.PX, 100, Unit.PX);
layoutPanel.setWidgetTopBottom(grid, 100, Unit.PX, 0, Unit.PX);
EDIT:
This is the code that I use to resize the DataGrid:
public void resize(final boolean addHeader, final boolean addFooter) {
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
#Override
public void execute() {
// 37 is the height of header and footer based on my CSS
int height = addHeader ? 37 : 0;
if (addFooter) {
height += 37;
}
for (int i = 0; i < getRowCount(); i++) {
height += getRowElement(i).getOffsetHeight();
}
setHeight(height + "px");
}
});
}
If you use this approach, simply add your DataGrid to the FlowPanel, and then add your Grid to the FlowPanel. Call resize() on the DataGrid, and do not set any height or width on your DataGrid or Grid.
For a finer control look at the flex-box layout model. It is supported in all modern browsers.
#Patrick, regarding your comment, I use DockLayoutPanel to take care of resizing for me:
DockLayoutPanel gridPanel = new DockLayoutPanel(Unit.PCT);
gridPanel.addNorth(dataGrid, 60); //datagrid will take 60% of the panel
gridPanel.add(grid); //grid will take the remaining space
I'm working on a Dart project where the user is able to add new custom elements at the click of a button. Each custom element is a div containing a table. The divs are resizeable by the user. My problem is that after a new element is added to the list of elements held by my dart file, the sizes of all the divs are automatically reset. Is there any way to add new elements to the template while keeping the attributes of the old ones the same?
Here is my CSS code that deals with the main divs in my custom element:
#superDivContainer {
border: 2px solid black;
resize: both;
display: inline-block;
}
#tableContainer {
height: 125px;
overflow: scroll;
}
Thanks in advance for the help!
When you change the backing list, the template reiterates, destroying all the old elements and recreating them from scratch, so all user resize information is lost.
When you add a new item to the list, you can store all the sizing information of the old elements and then after the item is added set the new elements size:
// Stores size information
List<List> sizes = [];
void add() {
// Store the old sizes
sizes.clear();
ElementList divs = queryAll(".superDivContainer");
for(int i = 0; i < divs.toList().length; i++) {
Element div = divs[i];
sizes.add([div.style.width, div.style.height]);
}
// Add the new item
yourList.add("new");
// Set the sizes of the new elements
Timer timer = new Timer(new Duration(milliseconds: 1), () {
divs = queryAll(".superDivContainer");
for(int i = 0; i < divs.toList().length && i < sizes.length; i++) {
Element div = divs[i];
div.style.width = sizes[i][0];
div.style.height = sizes[i][1];
}
});
}
Two notes:
I changed superDivContainer to be a class instead of an id since it seems that you are applying it to multiple elements; you will need to change your CSS reflect that
The 1 millisecond timer gets around the fact that there is a tiny delay until the new elements are added and accessible
I have a RichEditiableText component in a Flex 4.5 project and I want to print its contents. The problem I'm having is that component is holding a TextFlow and the copy is being clipped at the beginning/ending of pages. I can't seem to get it to respect the page breaks consistently.
I have this piece of code that adjusts the scroll position of the the RichEditableText component in a loop. Is there a better/smarter way to do this so that I ensure the text breaks to a new page appropriately?
if(richEditTextComponent.contentHeight <= printJob.pageHeight) {
printJob.addObject(richEditTextComponent, FlexPrintJobScaleType.NONE);
} else {
var max:Number = richEditTextComponent.contentHeight;
var i:Number = 0;
while(i<max) {
printJob.addObject(richEditTextComponent, FlexPrintJobScaleType.NONE);
richEditTextComponent.verticalScrollPosition += printJob.pageHeight;
i+=printJob.pageHeight;
}
}
Just for anyone else that has this problem...I ended up simply passing the copy to Javascript to handle printing. Turns out TLF is pretty cumbersome for type of thing.
I've got a spark List with an item renderer. When I click on an element, the renderer becomes larger and when I click again, it becomes small again.
The problem is that list doesn't resize with the content. I've tried to dispatch an event from the renderer passing its content size and resize list in this way:
private function refreshList(event:ResultEvent):void
{
var size:Number = (event.result as Number) + 6;
if (size >= mylist.width)
{
consultingNumber++;
mylist.width = size;
}
else
{
consultingNumber--;
if (consultingNumber == 0)
mylist.width = size;
}
mylist.invalidateDisplayList();
}
consultingNumber is the number of 'opened' renderer.
It works quite well, but when all renderer is 'closed' an horizontal scrollbar appear.
Tracing list's width it result correct but the scrollbar is there even if I set horizontalScrollPolicy to off.
Try calling myList.invalidateSize() instead of myList.invalidateDisplayList();
Here is some more information about the flex component lifecycle which should get you on the right track:
http://weblog.mrinalwadhwa.com/2009/06/21/flex-4-component-lifecycle/
http://www.slideshare.net/rjowen/adobe-flex-component-lifecycle-presentation
Cheers
I am trying to display a bytearray as a resized image. The Image is displaying correctly, but the sizing is off. Let me explain.
First I have the image data encoded so I need to decode the image data
// Instantiate decoder
var decoder:Base64Decoder = new Base64Decoder();
// Decode image data
decoded.decode(picture.data);
// Export data as a byteArray
var byteArray:ByteArray = decoder.toByteArray();
// Display image
var img:Image = new Image();
img.load(byteArray);
This works. The image is displayed correctly. However, if I hardcode the image (img) height the resized image is shown correctly, but within a box with the original image's dimensions.
For example, if the original image has a height of 300px and a width of 200px and the img.height property is set to 75; the resized image with height of 75 is shown correctly. But the resized image is shown in the upper left corner of the img container that is still set to a height of 300px and a width of 200px. Why does it do that? And what is the fix?
The best way to illustrate the problem is by placing the image inside a VBox and show the borders of the VBox. From the code block above, if I change the image height and set the image to maintain aspect ratio (which by default is set to true but I add it here for completeness). the problem becomes clear.
// Display image
var img:Image = new Image();
img.height = 75; // Hardcode image height (thumbnail)
img.maintainAspectRatio = true;
img.load(byteArray);
// Encapsulate the image inside a VBox to illustrate the problem
var vb:VBox = new VBox();
vb.setStyle('borderStyle', 'solid');
vb.setStyle('borderColor', 'red');
vb.setStyle('borderThickness', 2);
vb.addChild(img);
I have been working on this problem for days and cannot come up with a solution. Any ideas? What am I missing?
The workaround I used is as follows:
I created an event listener for the img display object. Then after the img has loaded, I manually set the height and width of the image. I know what I want the height (preHeight) to be so that is hardcoded. I then calculate the width and set that as the image width. For some reason I had to use the explicitHeight and explicitWidth properties to finally get the sizing right.
I hope this helps someone.
img.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
private function onCreationComplete(event:FlexEvent) : void
{
img.addEventListener(Event.COMPLETE, onImageLoadComplete);
}
private function onImageLoadComplete(event:Event) : void
{
var image:Image = event.currentTarget as Image;
var preHeight:Number = 0;
var h:uint = Bitmap(image.content).bitmapData.height;
var w:uint = Bitmap(image.content).bitmapData.width;
// Check height
preHeight = h > 170 ? 170 : h;
// Set the width
img.explicitWidth = (preHeight * w)/h;
img.explicitHeight = preHeight;
}