I'm using the last Flex 4 sdk Hero.
i setup a classic List component with InteractionMode="Touch". Thus, my vertical scroll bar is not visible until i drag the list ,which is normal.
My customer ask me to add some "page down" button on the list. I've done it as follow, which work perfectly :
private function handleDownButton(event:*):void {
var currentPosition:Number = wcList.scroller.viewport.verticalScrollPosition;
var nextPosition:Number = currentPosition+((wcList.dataGroup.layout) as VerticalLayout).getVerticalScrollPositionDelta(NavigationUnit.PAGE_DOWN);
var anim:Animate = new Animate(wcList.scroller.viewport);
anim.motionPaths = new <MotionPath>[
new MotionPath("verticalScrollPosition")];
anim.motionPaths[0].keyframes = new <Keyframe>[
new Keyframe(0), new Keyframe(500, nextPosition)];
anim.play();
if ((nextPosition+wcList.height)>=wcList.scroller.viewport.contentHeight) {
buttonDown.enabled=false;
}
buttonUp.enabled = true;
}
My big problem is that my customer also want the vertical scroll bar to be visible during the animation, but i can't find a solution for this (wcList.scroller.verticalScrollBar.visible = true don't work at all).
Any idea of how doing this?
Thanks.
A hack that might work for you...
http://flexponential.com/2011/06/21/using-drag-and-drop-with-a-spark-list-in-a-mobile-flex-application/
Related
i have a weird behavior of Google maps using dart !! here
as you see the link responsible for making th map appears is "Géolocalisation" until now i have no problem! but when i reclick, or when i visit another link then returning back to "Géo.." it gaves me this and i really don't know what to do! this is my first try at GMap so i need a littel bit of help please.
i must mention that the page doesn't refresh when i click at the link it's only delets the old content from the container div then add the new elements also i must mention that i'm using bootstrap3,this is the code for the page géo
import 'package:google_maps/google_maps.dart';
import '../view.dart';
import 'dart:html';
//view Map
class viewMap extends View{
panelCoreBuilder(){
//creating the container layout and it is a div row
DivElement layout = new DivElement()..className="row";
//adding a style element for the map element inside the container
layout.children.add(new StyleElement()..text="#mapblock{margin: 0;padding: 0; height: 500px; width: 100%;");
DivElement cellone = new DivElement()..className="col-md-3";
//naming the block that contains the map
DivElement celltow = new DivElement()..className="col-md-9"..id="mapblock";
//adding the cells to the layout
layout.children.addAll([cellone,celltow]);
//creating the map
visualRefresh = true;
final mapOptions = new MapOptions()
..zoom = 8
..center = new LatLng(34.034453, -5.885925)
..mapTypeId = MapTypeId.ROADMAP;
final map = new GMap(celltow, mapOptions);
//returning the layout to the MainContainer...
return layout;
}
}
so that's it i hope you can give me any solution ,hypotheses ,or even a hint
and if i fond the solution first i'll post it here!
This is likely that your <div> has an empty size (or not displayed) when the new GMap is called. The map is not aware of the <div> container resizing by default. You have to manually trigger a resize event when you display it on the screen with :
event.trigger(map, 'resize', []);
I have a JScrollPane that holds a JPanel. The layout on the JPanel is a GridBagLayout. On that JPanel, I add a number of custom components - each is a JPanel with 3 JLabels.
The first time in the program I lay all of this out, it works fine. When I invoke the code to add another custom component to the JPanel, the panel appears empty, but I can determine by examining the contents of the JPanel that my components are actually there. If I resize the JDialog in which this all sites, the JPanel will paint properly. It also works if I scroll the JScrollPane horizontally even a tiny bit.
I use the same method for the initial layout as I do when adding an item.
I've tried various combinations of repaint(), invalidate() and doLayout() but nothing seems to work all the time. I've run into this situation before and have never been able to fully solve it. Any suggestions?
Running under OpenJDK 7u25. Below is the code that lays out the scroll pane and panel.
private void displayRelatedBug(ArrayList<Bug> a_bugs) {
// sort the bugs by ID
ArrayList<Bug> l_sorted = new ArrayList<>(a_bugs);
Collections.sort(l_sorted);
pnlRelatedBugs.removeAll();
pnlRelatedBugs.setLayout(new GridBagLayout());
GridBagConstraints l_gbc = new GridBagConstraints();
l_gbc.gridx = 0;
l_gbc.gridy = 0;
l_gbc.gridwidth = 1;
l_gbc.gridheight = 1;
l_gbc.anchor = GridBagConstraints.NORTHWEST;
l_gbc.fill = GridBagConstraints.NONE;
l_gbc.insets = new Insets(3, 4, 0, 0);
for (Bug r : l_sorted) {
pnlRelatedBugs.add(new RelatedBugDisplay(r, this), l_gbc);
l_gbc.gridy++;
}
// add a filler at the bottom to push it up
l_gbc.weighty = 1.0;
pnlRelatedBugs.add(new MMPanel(), l_gbc);
// add a filler on the right to push them left
l_gbc.weighty = 0.0;
l_gbc.weightx = 1.0;
l_gbc.gridx++;
pnlRelatedBugs.add(new MMPanel(), l_gbc);
// try in vain to make it show up!!!
pnlRelatedBugs.invalidate();
pnlRelatedBugs.doLayout();
pnlRelatedBugs.repaint();
scrollerRelatedBugs.doLayout();
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
pnlRelatedBugs.repaint();
scrollerRelatedBugs.repaint();
// this seems to help if the scroll bar is showing
scrollerRelatedBugs.getHorizontalScrollBar().setValue(1);
scrollerRelatedBugs.getHorizontalScrollBar().setValue(0);
}
});
}
Whenever you add/remove components from a visible panel, the basic code is:
panel.remove(...);
panel.add(...);
panel.revalidate();
panel.repaint();
Without a proper SSCCE we can't really tell what your code is doing.
If you do add/remove/replace/others actions with components on showing container, you must to revalidate and repaint your container, to which you add components for proper displaying.
I made this class, which is an ItemRenderer class, used in a DataGroup ( mobile application ),
and I am not entirely sure if I did the right thing or not, my issues are :
Is there a better way to show the image, which is 80x80 and directly loaded from the server;
How to make the height of the row dynamic, I mean, depending on the height of the 3 StyleableTextFeild
Is this the right way to add the listener on the image, that will trigger a simple HTTPService,
Here is the functions from the class, Any help would be much appreciated !!
Image
Declared it as a simple image :
var logo:Image;
On override createChildren
logo = new Image();
addChild(logo);
And I added on set Data
logo.source = "http://192.168.0.15:3000/"+value.logo_thumb_url;
Size
override protected function measure():void {
measuredWidth = measuredMinWidth = stage.fullScreenWidth;
measuredHeight = measuredMinHeight = 100;
}
Listener
override public function set data(value:Object):void {
tel.text = String(value.Tel);
description.text = String(value.Descricao);
nome.text = String(value.Nome);
logo.addEventListener(MouseEvent.CLICK, function():void{
var service:HTTPService = new HTTPService();
service.url = value.targer;
service.method = "GET";
// setting headers and other variables ...
service.send();
});
}
You can use URLLoader or Loader for loading the image if you are planning to cache the image on the client side, if you cache the image, it wil help you not load the image again when the users scrolls through the list. (What you have done is Ok, but you will hit performance issues)
For variable row height, if Datagroup does not work, use List. find it here Flex 4: Setting Spark List height to its content height
There should be a buttonMode property for some items, make it buttonMode for the logo, for variable row height, find something related to wordWrap and variableRowHeight properties on the datagroup.
There are a few suggestions, what you have coded is good, but, instead of adding the listeners on set data, add it in creation complete, as it is more appropriate. Also, the event listeners has to be weak referenced, http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/events/EventDispatcher.html#addEventListener()
I am working on a Flex mobile Application and I am using s:List defined in actionscript component with MXML renderer.
In my sView:
var movieList:List = new List();
private function created(event:FlexEvent):void
{
movieList.itemRenderer = new ClassFactory(MovieRenderer);
movieList.dataProvider = new ArrayList();
movieList.useVirtualLayout = false;
movieList.pageScrollingEnabled = true; // if this is omitted scroll bar is invisible
this.addElement(movieList);
}
After HTTPService call is returned:
private function movieDataReady(event:events.ExternalDataEvent):void{
movieList.dataProvider.addItem(event.result);
}
Each event.result item is a custom Object.
The issue is that the scroller seems to be the full height of the list as opposed to the view/screen. This renders it useless as you cannot scroll. If you try it does scroll but goes back as soon as you release. Scroller seems to be about the height of the combined height of all list items.
I had it working before but I made some changes and can't figure out what I am missing this time.
Is there a way to make a display object always be at the top of the display list?
For example, I know you can set the childIndex, i.e:
setChildIndex(myDisplayObject, numChildren-1);
But is there a way that an object has sensed that something else has been added to the display list and restack themselves accordingly?
You can listen to the Event.ADDED event on the container. This event will bubble up, so you'll get called whenever a display object is added to the container or any of its children.
Here's an example of how you could do this. You'll see the black box always stays on top.
var container:DisplayObjectContainer = this; // this is a frame script but just change this line as necessary
container.addEventListener(Event.ADDED,handleAdded,true);
function handleAdded(e:Event):void {
// this if tries to cover some edge cases, unlikely to happen in your code, from your description
if(container == topElement.parent && container.numChildren > 0 && container.getChildIndex(topElement) != container.numChildren - 1) {
container.setChildIndex(topElement,numChildren - 1);
}
}
function getSprite(c:uint):Sprite {
var sp:Sprite = new Sprite();
sp.graphics.beginFill(c);
sp.graphics.drawRect(0,0,100,100);
sp.graphics.endFill();
return sp;
}
var topElement:Sprite = getSprite(0);
container.addChild(topElement);
var sp:Sprite = getSprite(0xff0000);
container.addChild(sp);
sp.addChild(getSprite(0xff00));
var sp2:Sprite = getSprite(0xff);
container.addChild(sp2);
However, I think it's much simpler and cleaner just to have 2 containers, say, top and bottom, kind of like layers. In top you'd add the element that always must be on top (or this could be your element as you probably don't need to have this extra container). In bottom you'd add and remove whatever you want. Then you can forget about manually restacking stuff (at least to keep the top element atop).
You can override the addChild() method in the parent object. In that method you can move your child to the top using
setChildIndex(myDisplayObject, numChildren-1);
In this way everytime an object is added to the parent, the parent moves your object to the top.