My LWUIT application has 3 Forms:
1) FormA
2) FormB
3) FormC
The current form being displayed on the screen is FormB.
Case 1:
If the user swipes his finger LEFT on his touch screen phone, I want LWUIT to capture that
event and display FormC
Case2:
If the user swipes his finger RIGHT on his touch screen phone, I want LWUIT to capture that
event and display FormA
How do I do this? I think it has to do something with drag event but not sure how to implement it.
Thanks.
just need to override pointerDragged method in form and get/cal its X,Y positions and display another form.
new Form()
{
protected void pointerDragged(int x, int y) {
if(x,y....)
{
form3.show();
}else
{
from1.show();
}
super.pointerDragged(x,y);
}
};
here x,y can be calculated based on screen resolutions and components u have added to it.
Use the Tabs component with 3 Containers, it supports Swipe. You can set the Tabs themselves to be hidden.
instead of taking 3 forms use 3 containers under 1 form and setScrollableX(true) and add all components in appropriate containers.
Related
I have a Cordova Mobile application which uses iScroll plugin. To my surprise scroll doesn't work when I run the app in VoiceOver mode (three finger swipe up/down gesture). It just reads page 1 of 1 even if the content is existing for more than 2 pages.
Are there any role attributes to make page to scroll ? Please help.
I found that iScroll is using transform CSS property for scrolling.
I was able to resolve this issue.
May be you can also try the same.
Add below style to your parent div
-webkit-overflow-scrolling : touch
There is a phone gap plugin to listen for VoiceOver on/off https://github.com/phonegap/phonegap-mobile-accessibility
// Define a persistent callback method to handle the event
function onScreenReaderStatusChanged(info) {
if (info && typeof info.isScreenReaderRunning !== "undefined") {
if (info.isScreenReaderRunning) {
console.log("Screen reader: ON");
// Do something to improve the behavior of the application while a screen reader is active.
} else {
console.log("Screen reader: OFF");
}
}
}
// Register the callback method to handle the event
window.addEventListener(MobileAccessibilityNotifications.SCREEN_READER_STATUS_CHANGED, onScreenReaderStatusChanged, false);
On voiceover ON event you can destroy iScroll(or make useTransform property to false).
On voiceover OFF you can re-initiate the iScroll.
Let me know if it works.
Once I get to the final slide I want to disable the bounce effect that happens when you try and swipe further. I have ion-option-buttons on the final page and swiping them causes the screen to wobble due to the slides.
I still want to be able to move back to the left / previous slide
If you aren't using the Swiper widget I would recommend it because it offers a lot more flexibility/options with your slide boxes. (Ionic documention on it here, as well).
All you need to do is watch the slide delegate, if you hit the last slide, lock sliding to next (stops the bouncy effect you mentioned). Then unlock sliding if you are not on the last slide.
$scope.$watch('data.sliderDelegate', function(newVal, oldVal) {
if (newVal != null) {
$scope.data.sliderDelegate.on('slideChangeEnd', function() {
$scope.data.currentPage = $scope.data.sliderDelegate.activeIndex;
if($scope.data.currentPage == $scope.data.lastSlide){
$scope.data.sliderDelegate.lockSwipeToNext();
}
else{
$scope.data.sliderDelegate.unlockSwipeToNext();
}
$scope.$apply();
});
}
});
Here is a codepen for the exmaple.
I know this is an old post, but I just managed this in Ionic 4.0, and though that someone might find some value in it.
You can use the command:
this.slides.lockSwipeToNext(true);
To prevent the user from swiping right. There is similarly another command to prevent it going left:
this.slides.lockSwipeToPrev(true);
I placed it in the " ionViewWillEnter()" function to initially disable the swiping, then created a function that I call whenever I want to manually move to the next slide like this:
ionViewWillEnter(){
this.slides.lockSwipeToNext(true);
}
nextSlide(){
this.slides.lockSwipeToNext(false);
this.slides.slideNext();
this.slides.lockSwipeToNext(true);
}
Hope this helps someone looking for a similar soution.
can anyone please explain to me why the html SELECT control (or any other control like BUTTON) placed inside the div (that is registered with dojox/gesture/swipe events) cannot be opened? I'd welcome any workarounds pls
require({
}, [ 'dojo/dom', 'dojox/gesture/swipe', 'dojo/on', 'dojo/_base/event' ], function(dom, swipe, on, event) {
var div = dom.byId('testSwipe');
var isSwipe = false;
on(div, swipe.end, function(e) {
console.log("### SWIPE");
});
});
http://jsfiddle.net/zLyck884/
based on the documentation here, particularly the image : http://dojotoolkit.org/reference-guide/1.10/dojox/gesture.html
the image depicts how the dojo standardizes the events (also for desktops) and how the swipe is just another layer of the touch events. so I reckoned if the mouse events are replaced by touchstart or something, then it most likely blocks the default mouse action...
once I've stopped propagating the event (on the SELECT) further, then it worked ok.
query("select", this.domNode).on(touch.press, function(e){e.stopPropagation()});
where this.domNode is the element on which the swipe is enabled
on(this.domNode, swipe, lang.hitch(this, "_onSwipe"));
Unfortunately the swipe (touch) event overriding the default behaviour is not very handy, I just left dojox/gesture/swipe or touch for now. Seems like I'll rather implement my own touch event handling.
I have a GWT widget that is a Window. The user can drag/drop the Window. I am using an old API called GWT-Ext. It has the ability to implement a listener to detect when the Window has been moved. I want to prevent the Window from being hidden under the browser bar by detecting the XY coordinates of the Window and putting the Window back to the original location if it goes "out of bounds". How can I determine the XY coordinate of the browser bar so I know if my Window is obscured by the browser bar or not?
The browser bar is always at 0. You have to account for the scroll position of the document though, so in effect it's at Document.get().getScrollTop().
I determined that the browser bar was located at 0. So I check if my Y position is less than 0 then call .setPagePosition.
this.addListener(new PanelListenerAdapter()
{
#Override
public void onMove(BoxComponent component, int x, int y)
{
// prevent user from accidentally dragging window under browser bar
if (y <= 0)
{
component.setPagePosition(DEFAULT_X_POS, DEFAULT_Y_POS);
}
}
});
I want to develop a site which is easy to use from a Playstation 3 PS3 game console web browser. I thought it would be good to make screen actions on button presses on the console.
I can find no information on how to do this after quite a bit of searching.
Any info or links highly appreciated!
Why not write a function that displays a message for every "keystroke" and you'll see what values they represent:
$(document).keypress(function(event) {
alert(event.which);
});
Then you can use the number you get from this test and create some logic based on that.
Like this perhaps:
if(event.which == 13) {
// display cool menu maybe?
}
From what I've tested so far, the left stick generates mouse events, left pad with arrows generates keyboard events corresponding to arrows, while the right stick generates a mouseevent but unfortunately it does not move the mouse, but rather scrolls the window.
I do not know how to detect in which direction the stick is pushed (unless the cursor actually moved or the background scrolled, in which cases it is quite trivial).
Check: http://vanisoft.pl/~lopuszanski/public/ps3/