I am building a Flex 4 application which uses a <s:Scroller> component to vertically scroll overflown content. Let me explain what happens before I ask my question:
The body of the page is loaded from a database
Once the information has loaded, the "body" of the application (in this case the list of items you see below) is constructed
Once the list is constructed, the entire encapsulating component is transitioned into view using TweenMax, like so:
myComponent.visible = true;
TweenMax.to(myComponent, 1, {
alpha : 1,
y -= 20 //Slides the component up 20px from its original location
});
Below is the result. Notice how the scrollbar is scrolled the whole way down, but you can see the tips of a few white letters that were cut off at the very bottom.
Using my custom menu, I can navigate away from the page, and come back to it, and Flex will correctly recalculate the range of the scroller so I can scroll down and see all of the desired content. This issue only happens if the initial URL that the user enters is a longer page like this one.
Any ideas on how I can force Flex to recalculate the range of the scroller?
Thank you for your time.
Ok, after many hours of researching, piecing together, and trial and error here is what I came up with.
What I was doing wrong:
When I first posted this question, the "component" that I had mentioned was already added as a child element of the <s:Scroller>, but collapsed and hidden away, like this:
<comp:MyComp alpha="0" height="0" visible="false"/>
When the data would be loaded and the component's visual appearance would be restored and transitioned into place, like this:
myComp.visible = true;
myComp.height = NaN;
myComp.invalidateSize();
myComp.height = myComp.measuredHeight;
TweenMax.to(myComp, 1, {
alpha : 1,
y -= 20 //Slides the component up 20px from its original location
});
This method of approach didn't force the <s:Scroller> to recalculate its proper size until later, sometimes not until myComp was transitioned away and another component was transitioned into place using the same method. Even then, the size of the scroller would fit the size of the previous component, not the one that is currently displaying.
Now, what I am doing correctly:
My research showed me that anytime the addElement() method is called, either directly within the <s:Scroller> itself or by any of its children, the scroller's measure() method is called, and properly re-sizes the scroller.
Instead of placing the components inside of the scroller and simply hiding them until I need them, I dynamically created them in ActionScript, set their properties, and added and removed them as needed using the addElement() and removeElement() methods respectively. Now, as old elements are transitioned away and new ones take their place, the scroller re-sizes itself correctly.
There was one final problem that I was faced with. If the very first page the user was viewing (i.e. there was no previous component that was transitioned away and destroyed) required a scroller, it wouldn't show up.
I corrected this final issue by adding an event listener that listened for when the new component had finished transitioning into place. Inside of the event handler, I explicitly set the height of the component using this code:
newComp.height = NaN;
newComp.invalidateSize();
newComp.height = newComp.measuredHeight;
Now that the component has an explicit height, the scroller now appears, even if it is the first page.
The scroller now works as expected in all cases, and does not cut off any content or disappear when it shouldn't.
I hope that it is helpful to someone.
Related
I have started to learn JavaScript and was going through the tutorial on https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/A_first_splash with the guess game and want to incorporate the guess game into a web page to see how I can ran the game in a div container. All works fine up to when the game is over or the game is won and the 'Start new game' button comes up and the document.body.appendchild(resetButton); is executed.
The button is placed at the end of my page after the Footer and not inside the div container. What am I doing wrong and what can I look at to change the code to let it come up at the bottom of the container under the 'Enter the guess' bar as in the example?
In the example everything is under the body tags, but I have created a under the page to run the game in.
I have also tried to run document.body.append(resetButton); and even changed the .body to document.div.appendchild(resetButton); code to see if I can place it at the correct spot. When I change the .body code it gives me an undefined error on append.
I think you can use insertAdjacentElement method, it allows you define the inserting position.
It accepts these values:
'beforebegin': Before the targetElement itself.
'afterbegin': Just inside the targetElement, before its first child.
'beforeend': Just inside the targetElement, after its last child.
'afterend': After the targetElement itself.
Example:
document.body.insertAdjacentElement('afterbegin', element);
I inherited Sprite and I want to put inside TableView but when I add inherited Sprite to scene table is not visible but all others sprites added to inherited sprite are visible ( I checked it creates cells, position and z index are set right, when I add TableView directly to Scene it is visible).
I'm able to add a TableView to a Sprite in Cocos2d-x v3.6, but it's a little hard to say exactly why yours isn't showing up. Here are some things to check:
Have you added the TableView as a child to the Sprite via addChild?
When you add the TableView to the Sprite, is your DataSource set properly? (This seems to be the case given your question).
Are there positioning issues when you add it to the Sprite due to the anchor position(s) of your Sprite and it's parent(s)? It could be the TableView with incorrect positioning, or it could be the TableViewCells themselves. Remember that when you add a child to some Node, its anchor point is Vec2(0.5, 0.5).
You're not forced to override cocos2d::Size cellSizeForTable(cocos2d::extension::TableView *table), and if you don't have cell heights, the cells might not show up.
Try "dumbing down" any logistics you have and follow the code in TableViewTestScene.cpp, which is part of the cpp-tests. (cocos-directory/tests/cpp-tests/Classes/ExtensionsTest/TableViewTest)
Last resort: Try doing something silly like giving your table and cells a large height and width of 500-1000 pixels each. Give them an absolute position somewhere in your Sprite. Give each of them a Label that says "Hello, World!" and see if they show up.
It might be helpful to see your applicable code, too.
A very late edit: I realized today that it seems as though Layer objects (and thus TableViews) always have an Anchor Point of Vec2::ANCHOR_BOTTOM_LEFT. Could this be your issue?
I am trying to create a time line using http://visjs.org/timeline_examples.html
I want the time line to have fixed height (which I can set using height attribute in options). But As I zoom in/out the timeline, It is displaying the points one below another. This feature is affecting the height of the graph.
Can anyone help me how to make the points overlap?! so that I can have the height of the groups constant?
Actual behavior
In the options for your timeline you can specify stack: false e.g.
var options = {
stack: false
};
var timeline = new vis.Timeline(container, dataset, options);
This will cause the time line items to overlap rather than stack up on top of each other. You can see this in action here:
http://visjs.org/examples/timeline/other/groupsPerformance.html
I have this code which I don't understand:
JFrame jframe = new JFrame("Risultati protocolli cercati");
jframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel body = new JPanel();
Container c = jframe.getContentPane();
body.setSize(100, 100);
body.setLayout(new GridLayout(1000, 1));
for (int i = 0; i < 1000; i++)
body.add(new JLabel("JLabel " + i));
JScrollPane jsp = new JScrollPane(body);
c.add(jsp);
jframe.setSize(100, 100);
//jframe.add(body);
jframe.setVisible(true);
If I leave the penultimate line commented then everything appears, both labels and scroll. Instead if I uncomment that line, I see nothing. Only the JFrame. Why does it happens? For the main window of my program I had to perform jframe.add(body)...
Instead if I uncomment that line, I see nothing. Why does it happens?
The below line
jframe.add(body);
internally calls
jframe.getContentPane().add(body);
JFrame by default uses BorderLayout and add(component) method directly add it in the center section, if you add again then last one is replaced with latest one.
You can use overloaded add() method of JFrame to add it in another section east, west, north and south as shown in below snapshot:
for e.g.:
frame.add(comp,BorderLayout.NORTH); // add in north section
frame.add(comp,BorderLayout.WEST); // add in west section
You can use other Layout Managers as well as per the design or your application:
It's worth reading How to Use BorderLayout
One more suggestion:
Use frame.pack() instead of frame.setSize() that fits the components as per component's preferred size.
Interesting problem caused by the layout managers.
A component can only have a single parent. First you add the "body" to the scrollpane but then the "body" gets removed from the scrollpane when you add it to the content pane of the frame (for the reasons mentioned by #braj). Not a big deal as it just means you won't see any scrollbars.
Since the component is directly added to the content pane you should still see the labels however they do not display and this is the confusing part. Change your code to use "100" for the GridLayout and the number of components you create in the loop. When the frame first displays the panel will be empty. Now, increase the height of the frame and you will see the components appear. What is happening is that you are trying to paint too many components in a small area and because of rounding issues the height of every component becomes 0, so there is nothing to paint. When you increase the height to at least 100 pixels every component can now be 1 pixel high so you get garbage.
The only solution is to keep the "body" panel in the scrollpane so that all components will be displayed at their preferred size. Then you can scroll through all the components as required.
A tip for when using a GridLayou. You can use:
body.setLayout(new GridLayout(0, 1));
Then means the grid will have unlimited rows and a single column.
I have created a custom TitleWindow whcih i use as a popup. The contents of the popup are created dynamically depending on a selection a user makes from a datagrid.
My problem is, my datagrid is in another custom component whcih is toward the bottom of my page so when a user clicks one of the items the popup is displayed however with half of it out of sight at the bottom of the page.
Is there a way to position a popup so that it displays at the top of the page?
I know at least two things you can use to position a popup, though there might be more.
When you place a popup you can choose in which parent component to place the popup:
PopUpManager.createPopUp(this.parent, TitleWindowComponent);
In the component itself:
PopUpManager.centerPopUp(this);
I wanted a help tooltip type popup (with help text) to appear next to the icon that opened it. In the end I used move(x,y) to move the window where I wanted it. To get the coordinates to place it, use globalToLocal:
var globalX:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).x;
var globalY:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).y;
toolTip.move(globalX + myIcon.width, globalY);
That puts the window just to the right of the icon, myIcon.