Add pan event test page

This commit is contained in:
SvetoslavTsenov
2016-05-20 15:22:45 +03:00
parent 63746df3dd
commit 6dc4d787a4
3 changed files with 31 additions and 0 deletions

View File

@ -86,6 +86,7 @@ examples.set("padding", "padding/padding");
examples.set("timePicker", "time-picker/time-picker");
examples.set("gestures", "pages/gestures");
examples.set("touch", "pages/touch-event");
examples.set("pan", "pages/pan-event");
examples.set("handlers", "pages/handlers");
examples.set("animeBG", "animations/background");

View File

@ -0,0 +1,23 @@
import { EventData } from "data/observable";
import { Page } from "ui/page";
import { PanGestureEventData } from "ui/gestures";
import { View } from "ui/core/view";
import { TextView } from "ui/text-view";
var view: View;
export function navigatingTo(args: EventData) {
var page = <Page>args.object;
view = page.getViewById("target");
}
export function onPan(data: PanGestureEventData) {
console.log(`data state:${data.state} [${data.deltaX}, ${data.deltaY}]`);
var msg = `data state:${data.state} [${data.deltaX}, ${data.deltaY}]`;
(<TextView>view.page.getViewById("output")).text += msg + "\n";
view.translateX = data.deltaX;
view.translateY = data.deltaY;
}
export function clear(args) {
args.object.page.getViewById("output").text = "";
}

View File

@ -0,0 +1,7 @@
<Page navigatingTo="navigatingTo">
<GridLayout rows="*, auto, *" >
<GridLayout backgroundColor="lightgreen" id="target" automationText="target" width="100" height="100" pan="onPan"/>
<Button row="1" text="clear" tap="clear"/>
<TextView row="2" text="here" id="output" automationText="output" style="font-size: 10, font-family: monospace;"/>
</GridLayout>
</Page>