I am dynamically creating content in a qooxdoo desktop application based on ajax calls. Some of the content I am creating has a lot of widgets in it (on the order of 200+).
I did some profiling with google chrome and it looks like most of the processing time is taken up by the layout manager since I am calling add() on the container for every widget I create.
Is there a way to pause the layout manager while I add all the widgets and then have it run once at the very end?
Is there a better approach altogether for dynamically adding lots of widgets to containers?
Here is an example of what I am doing:
var container = new qx.ui.container.Composite(new qx.ui.layout.Flow());
var groupbox = new qx.ui.groupbox.GroupBox();
groupbox.setLayout(new qx.ui.layout.Grid(10, 10));
container.add(groupbox);
// loop through data received from AJAX call and add it to the group box
var row = 0;
data.each(function(pair) {
var label = new qx.ui.basic.Label(pair.key);
var field = new qx.ui.form.TextField(pair.value);
groupbox.add(label, {row: row, column: 0});
groupbox.add(field, {row: row, column: 1});
++row;
});
You can probably
first add all the widgets into a "unattached" container, i.e. a container which has not been added anywhere yet or its ascendants are not part of the layout
then add the "unattached" container to the layout, triggering the widget layouting
When you add a widget, it is added to a queue to be executed after you thread ends, if you add many widgets on the same thread, the layout reflow will be executed once.
So if there is no asynchrony between one .add() and the next one they are on the same thread and they do only one reflow.
The time you see on the profile is the normal time the layout manager takes to render, it has to access to the dom to know the size of some elements and this operation takes a lot, the last profile I did the more expensive operation was "el.innerWidth".
I think there is nothing to do there if you want to use Qooxdoo.
Related
I want to have an image, on top of which I can mark points (which I should be able to drag across the image).
The image is also going to be bigger than the canvas, so I want to be able to drag it as well, but while doing so keeping it in the background, and moving all the marks on it along with it.
I thought using a Group, disabling the controls of all objects and disabling selection for the Canvas would do the trick:
fabric.Object.prototype.hasControls = fabric.Object.prototype.hasBorders = false;
let fabricCanvasObj = new fabric.Canvas(canvas);
fabricCanvasObj.scene = new fabric.Group([new fabric.Image(img)]);
fabricCanvasObj.add(fabricCanvasObj.scene);
fabricCanvasObj.selection = false;
But now I want that on mouse:down a new point will be added, unless the mouse is over an already created point, so that when the user want to move that mark, no new mark is created in its place, and I want to move that individual point instead of the whole group.
But the event.target is the whole group, not the individual object in that group.
I've then followed the solution here: FabricJS Catch click on object inside group
Which suggested using
{subTargetCheck: true}
But this causes an exception to be thrown once I add an object to the group after it's been created.
How should I go about this?
I just started out with Phaser.
I have a simple sprite in the middle of the screen, and whenever I click the sprite, I emit a particle at the clicked x,y coordinates.
My problem is that the particles are generated behind the sprite. I have tried setting z on the sprite to 1 and the emitter to 1000 without luck.
What am I missing?
var emitter = game.add.emitter(game.world.centerX, game.world.centeryY);
emitter.makeParticles('phaser');
var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
sprite.scale.setTo(2, 2);
sprite.inputEnabled = true;
sprite.events.onInputDown.add(function(sender, pointer){
emitter.emitX = pointer.x;
emitter.emitY = pointer.y;
emitter.emitParticle();
}, this);
http://phaser.io/sandbox/cxBVeHrx
EDIT
My actual code is based on the Phaser-ES6-Boilerplate. Even though BdRs answer solves the issue in the sandbox code, I'm not able to utilize this in my real code.
I have uploaded both the code and a running example. Hopefully someone can tell me where I have screwed things up...
Separate Phaser items don't have a z-order, instead it just depends on the order you create and add them to game. Each new sprite or emitter or group etc. will be displayed on top of all previously added items.
So, simply changing your code to something like this should work.
// first the sprite
var sprite = game.add.sprite(game.world.centerX, game.world.centerY, 'phaser');
sprite.scale.setTo(2, 2);
// then the particles in front of sprite
var emitter = game.add.emitter(game.world.centerX, game.world.centeryY);
emitter.makeParticles('phaser');
// then maybe text in front of particles and sprite
var mytest = game.add.bitmapText(10, 20, 'myfont', 'Level 1', 16);
// etc.
Btw sprites do have a .z value but that only used when it's part of a Phaser.Group, it will then be used as the display z-order but only within that group of sprites.
By default, phaser will not sort objects that get added to any group, it will just render them in the order that they get added. In your case, you can just add the emitter to the group after you add the sprite (the group in this case is the 'game' object).
Of course, having to add objects in the drawing order is not ideal, and if you need to have them sorted dynamically, not possible.
Another way is you can sort objects within a group using the 'sort' function, in which you give it the name of a parameter to sort by, and you sort whenever you need to (in some cases, in the Update callback).
Sorting every frame can be a performance hit though, especially if you have a lot of objects. Another way you could go about this is by adding groups, sorting those groups in draw order (think of them like layers), and then adding objects to those groups in any order. Any group that needs sorting within itself you can sort as well. This way, you can choose to have (for example) a background layer not needing to be sorted but everything added to that layer will be behind every other layer.
Good answers from everybody, but you are missing that every GameObject has a depth property which serves exactly the z-index purpose. This way you do not need to rely on the order of objects creation.
There is also an official
example.
Hope this helps.
I'm developing a custom table component for very large and very custom content. Therefore I decided not to go with TableView, but start from scratch (i.e. Control). I adopted the idea of the VirtualFlow to create and manage only the visible part of the table and reuse cells that have become invisible. However I needed virtual rows and columns.
My CustomVirtualFlow implements layoutChildren(). From the component's size and scrollbar positions I know which cells are visible. If necessary, I add cells to the VirtualFlow. I then update the content and css pseudo class states (selected, focused, ...).
This works almost fine ... currently, my only problem is that the css styles are sometimes lagging: newly created cells are shown with e.g. wrong backgrounds for a moment and then get correcteted with the next pulse.
My explanation for this is that JavaFX performs layout in two passes:
first a css pass and secondly the layout pass that calls layoutChildren().
The css of newly added children (during layoutChildren) is therefore not processes correctly.
I tried to call applyCss() directly, which helps, but seems to do too much because it takes a lot of time.
My question is:
How is the correct way to add nodes during layout, i.e. if the size of the component makes it neccessary to use further nodes?
If it is not during layoutChildren(), where else should I do it?
I'm not necessarily looking for code help, but rather a high level answer so I can research the solution myself. Basically, I have an MDI app with multiple docs and their views, I'd like all the views to open up as tabs in the one child frame that I have. The thing is my child frame is statically configured with a splitter window with two views, a form and a list view, in the OnCreateClient method. I'd like to keep this as the default tab that appears when the app is launched.
I have a third view (editview) with it's own document template, which I'd like to be able to open as a separate tab. I will have other views that will behave this way. What's the best way to approach this?
Will I need to create separate child frames for each view? Will I lose the 'tab' feature if I create separate child frames?
Or will I have to modify the child frame's OnCreateClient method to test which document template is the current one and create the view for that doc template? I'd like to know how some of you seasoned programmers have had or would do it.
Thanks.
In case this helps others, from what I've gathered, it is perfectly acceptable to create a new child frame class derived from CChildFrame or just use that as your frame with your new view. The doc, frame, and view will be added to the doc template in the initInstance method. for example, let say you have a pair of trios (2 docs, 2 views, 2 frames):
pDocTemplate = new CMultiDocTemplate(IDR_testappTYPE,
RUNTIME_CLASS(CMydoc1),
RUNTIME_CLASS(CMyframe1),
RUNTIME_CLASS(CMyview1));
if (!pDocTemplate)
return FALSE;
AddDocTemplate(pDocTemplate);
pDocTemplate2 = new CMultiDocTemplate(IDR_testappTYPE,
RUNTIME_CLASS(CMydoc2),
RUNTIME_CLASS(CMyframe2),
RUNTIME_CLASS(CMyview2));
if (!pDocTemplate2)
return FALSE;
AddDocTemplate(pDocTemplate2);
If you add another trio with a different childframe because this new frame doesn't use splitters like the ones above, you would do it this way.
pDocTemplate3 = new CMultiDocTemplate(IDR_mditest3TYPE,
RUNTIME_CLASS(CMydoc), //same doc
RUNTIME_CLASS(CMyframeWithoutSplitters), //new frame
RUNTIME_CLASS(CMyview3)); //new view
if (!pDocTemplate3)
return FALSE;
AddDocTemplate(pDocTemplate3);
First I apologize for the length but I want to ensure I get enough information out. I have an interesting problem that really shouldn't be difficult. I know that if you want to have the NSOutlineView scroll to and want display a specific row you simply use this pattern:
NSInteger row = [self.myOutlineView rowForItem:myItem];
[self.myOutlineView scrollRowToVisible:row];
I am not using a NSTreeController in favor of using delegation.
I am using an adapter pattern class to act as my data. The adapter wraps a number of different types. It is a simple structure:
[adapter children] ----- *[adapter parent]
So the adapter takes care of dealing with child count, can add, can remove, can expand, etc. and also acts like a data transport object.
So with that all out of the way here is the crux of the problem. When I add a new item to the NSOutlineView I start by adding a new child adapter to the adapter that is selected in the outline view. Then I reload the item with the children using:
[self.myOutlineView reloadItem:selectedAdapter reloadChildren:YES];
I then display the view for this object and attempt to synchronize the NSOutlineView so the selected row relates to the newly displayed view. So in a simple way the steps are:
Initially load the NSOutlineView with data utilizing the NSOutlineDataSource protocol
User selects an item (adapter) that can add child items
User clicks "Add" button
A new empty represented object is created
The new represented object is wrapped in an adapter
The newly created adapter is added to the children of the selected adapter
A new view is created using the new represented object and displayed
The selected (parent) node and its children is reloaded in the NSOutlineView
The newly created row in the NSOutlineView is scrolled to view which synchronizes the view and the selection of the NSOutlineView
So here is the problem. The NSOutlineView will not find the newly added item if you use the rowForItem method. Yet after I reload I can expand the parent node and select the newly added item and everything works fine. In an attempt to fix the problem I have programmatically expanded the parent node (exposing the new item) then attempt to scroll to the new item and it still cannot find the row. The rowForItem returns -1.
Have I missed something when adding a new item that I am not updating something in the NSOutlineView? I've tried many different things without success and any help will be greatly appreciated.
Thanks in advance,
Rob
Solved my own problem...finally.
Since I was adding my first child to that node and it was changing from non-expandable to expandable it needed to be expanded first, then scroll to view, then select the item. No more problem.