Hi I have an issue with GWT client side where events not being received by widgets when their parent, somewhere along the tree, is using GWT LayoutPanel or any of the Layout containers.
Here is a demonstration with simplified code.
This code works:
LayoutPanel layoutPanel = new LayoutPanel();
layoutPanel.add(new SimplePanel());
layoutPanel.add(new Button("Button1"));
RootLayoutPanel.get().add(layoutPanel);
The button is highlighted on hover, and attached ClickHandler receives events.
However the code below does not. Only change was reverse the add() to layoutPanel order:
LayoutPanel layoutPanel = new LayoutPanel();
layoutPanel.add(new Button("Button1"));
layoutPanel.add(new SimplePanel());
RootLayoutPanel.get().add(layoutPanel);
The button is drawn, but no events are dispatched, not even the ':hover' events are getting through. Inspection of the generated HTML shows the 'button' tag is being generated.
I am using GWT 2.8.2, Google Appengine 1.9.66 and Java 8 (appengine-web.xml configured for version 2 and Java8 JRE).
I have a much more complicated GUI that is having the same issue, I just boiled it down to the above example to demonstrate the problem.
Because you don't specify any layout option to the added widgets, you're actually overlaying them on top of one another, so in the second case the button is behind the simple panel, which is transparent so I doesn't visually hide the button.
Related
I am using the material ui Slider Library and adding Thumbcomponent prop doesn't allow you to drag the slider around from the thumb on mobile, however, the slider does allow you to start dragging after tapping on a mark and resuming sliding that way. It seems that the thumb becomes static after tapping it.
I am trying to draw lines between the thumbs of three sliders by adding a ref to each thumb and running getBoundingClientRect() on each ref in the componentdidUpdate of the parent holding the sliders. I have add some additional hacky code to account for the fact that the sliders are located on a drawer. I do intend for the thumb to be an image as well.
Can find the demo on https://codesandbox.io/s/trial-map-svg-lines-8xluo
I tried removing the ref from the span (in Thumbcomponent, line 54) so that the custom location code goes away but the issue still prevails leading me to believe, its not the ref that is causing the issue and nor is it the custom code.
On desktop, this behavior doesn't occur but I've tried running this on android, IOS and the chrome dev tools mobile simulation where it does.
Kind of working with removing pointer events for the custom thumb:
pointer-events: none;
The problem seems to be that the touch events are not propagated from the thumb to the actual slider.
I'm currently developing a mobile web application with AngularJS, ngAnimate, Angular-Material and UI-Router. I'm following Google Material Design specifications for the UI/UX part.
I'd like to animate a state change 'the Angular way' and especially this 'Parent to child' animation
I've no idea on how to achieve this 'lift & expand' animation.
Thanks for your help !
You have to do it yourself, I guess.
Angular-material is not a magic wand that replicates the animation guidelines of Material Design. Material Design guidelines are simply guidelines, and are loose enough to be hacked — or strictly followed, in the case of Google's Android apps (in-house or not).
My feeling is the angular material team is already pushing like maniacs to bring this awesome tool to 1.0, and will take advantage of the new routing system in Angular 2 to provide some animations like the one you wish to attain out of the box.
But it's the bleeding edge of the bleeding edge, at least for the time being.
Good news seem to be that routes will have their own viewports and sibling viewports.
AngularJS somewhat starts to embrace Polymer's web components concept.
Scroll to "Show me the magic!" on this page, and check these demos. Polymer's ecosystem provides a lot of already-made components to build your app with. It's quite large, and makes you wonder why Polymer doesn't get the same momentum as AngularJS. But I digress...
Option 1
create a custom-made function that gets triggered on a list element being clicked/tapped, to place in your controller (or directive).
Once the user clicks/taps the list element, it triggers the function (console test).
The function should :
retrieve the id of the clicked/tapped item (pass it to the function)
animate : here you have several choices, but here's one : use a ui-router absolute named view (#view_name), and wrap it in a div container with overflow:hidden, that has inital dimensions corresponding to the dimensions of a list item.
Detect the x-y position of the list element that has been clicked (an example, assuming you use AngularJS with jQuery), and you pass it to the "item detail" route (see above), so the rectangle grows with origins corresponding exactly to where the UI is a the moment of the click/tap. The animation shown in the video seems pretty complex: the "item detail page" grows slower on the bottom and faster on the top, when the bottom item is clicked.
Why an absolute named view? Because it will allow, with z-indexing, for the list to stay underneath the "item detail" view, so when the user closes/leaves it, you can roll back your animation, and the rectangle will shrink back to exactly the dimensions and position of the list item. Finally, you transition the opacity:0 and leave the route.
Option 2
Here's a rough mockup of a technique stretching/scrolling an ion-item. It would require to detect the y position of the item, and use ionicScrollDelegate to scroll to it. Also, you would freeze the main scroll so the user get "stucked", until he closes the "detail view", which then releases the scroll.
$scope.toggleStretchedMode = function(itemID) {
$scope.stretched = $scope.stretched === false ? true: false;
if(!$scope.stretched){
$('ion-item').removeClass('stretched');
$ionicScrollDelegate.freezeAllScrolls(false);
}
else
{
$location.hash(itemID);
$ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
$ionicScrollDelegate.freezeAllScrolls(true);
$('#'+itemID).addClass('stretched');
};
}
A very basic JSFiddle, which needs to be refined (clicked item should scroll to the middle of the screen, then expand).
Note that the JSFiddle only blocks the mousewheel scroll. If seems to block the first swipe, but then the ng-click releases it, so as it is it's far from perfect. You should not only block the list scrolling, but the up and down swipe events.
Also it initalizes badly, only works the second time. But the concept could be something like this.
Are there some generic techniques for stopping the display flickering? I'm guessing that I have two layout animations that are fighting over the controls or something - this seems to happen in a few places in my app (hence the general question).
I'll try and be more specific too:
I have a Box Layout Y Container which contains a list of MultiButtons. The MultiButtons are my own class which inherits MultiButton. It (all the buttons) flicks when I come back to the Form from another form. In the beforeForm function I do this:
for (my loop)
{
MultiButton mb = new MultiButton();
...init code for mb, like setTextLine1();
container.addComponent(mb);
lastMb = mb;
}
container.revalidate();
container.scrollComponentToVisible(lastMb);
The beforeForm method is invoked before the form is shown so there is no need to revalidate at that stage (show implicitly does that).
What's scrollToComponent? If you remove it does it flicker?
To scroll to a component without an animation do:
container.setSmoothScrolling(false);
container.scrollComponentToVisible(cmp);
container.setSmoothScrolling(true);
Can any one please tell me how i can add slider and moving form in codename one (with sample lines of code) and also want to know are these features supported by all types of devices?
Regards,
Megha
I think you mean how to animate forms changes
Form.setTransitionInAnimator(CommonTransitions.somthing)
Form.setTransitionOutAnimator(CommonTransitions.somthing)
Next, you should handle some "finger slide" event.
To add a slider you can use the following code
Slider jSlider = new Slider();
jSlider.setMaxValue(255);
jSlider.setMinValue(0);
jSlider.setProgress(50); // Set the starting value
jSlider.setEditable(true); // To it works as a slider instead of a progress bar
Now you have created a slider which you can add to your component like you would in Swing. You can type 'jSlider.' in eclipse to find out which other methods you can use, or you can go to the API: http://codenameone.googlecode.com/svn/trunk/CodenameOne/javadoc/com/codename1/ui/Slider.html
I think min/maxValue are selfexplenatory though :)
If you want to open a new form, simply create a new class extending form or do it in code like
Form form = new Form();
form.animate(); // To make it "slide in"
form.show();
Also noteworthy, the slider doesn't work with the lumia skin per default, though you can make it work. I actually asked this question on here as well:
Slider doesn't draw (CodeName One) with Windows phone skin
I have a border Layout with let's say two regions; center and west. The westregion is added with the splitter param and is collapsible. Now I have a toolbar from which I want to hide/show the west region. I've solved this by calling the toggleTargetCmp() method of the splitter. Well I know, this is a private method and should not be used, but I found no other way to archive this. So far so good. All this works.
But now I want to hide the splitter & placeholder (I fetch the placeholder ownet by using the getCollapseTarget() method of the splitter) if the button in the toolbar gets clicked. I tried it with setVisible(false) which works for the splitter but it didn't work well for the placeholder... after a deeper look onto the placeholder instance I can tell that it is set to hidden: true but it uses the hideMode: 'offsets' by default plus hiddenAnchestor: false which is not documented in the API.
Based on the API docu for hideMode I tried to set it to 'display'
before calling setVisible(false) without any luck, the placeholder still stays visible.
So how can I hide the placholder, too. Or is there even a better way to archive this?
Have you tried hide method? It works exactly as you describe - hides region and splitter.
In my project I do it like this:
panel.hide();
where panel is one of borderPanel items.