DH2642 Interaction INTERACTION,* EVENTS* Cris%an(Bogdan( cris%@kth.se( ( DH2642 Interaction Programming “Kinds”(of(interac%on( • User(interacts(with(a(widget((component),(producing(an( event,(this(lecture( • Applica%on(signaling(an(event((%mer,(sensor(value(change,( new(data(from(the(net)(to(the(user((no%fica%ons,(men%oned( later)( • Mul%touch(and(Gestures((men%oned(in(this(lecture)(( • Drag(and(Drop((and(copy(paste)(within(an(applica%on(or( between(applica%ons((coming(lectures)( • Automa%c(appearance(changes(on(window(size/font/skin( change((previous(lecture,(events(this(lecture)( • Interac%on(Design(paLerns((men%oned(today(for(Android)( DH2642 Interaction Programming DH2642 Interaction Interac%on(process( • User(interacts((press(a(buLon(widget)( • The(computer(detects(a(change(in(its(input(ports(( (mouse(click)( • Events(are(generated((((MouseEvent(and(Ac%onEvent)( • You(as(a(programmer(decided(that(you(are(interested( in((subscribe(to)(such(events((presses(on(that(buLon)( • When(subscribing,(you(registered(some(piece(of(code( (event(handler)(to(run(when(such(events(come( • Your(handler(is(called(and(treats(the(event( DH2642 Interaction Programming A(buLon(event((Q(HTML( ( Layout(and(event(linking:( <button'onClick="onClickAction()">Press'me</button>' ' ( "Listener"' function'onClickAction()'{' ''alert("button'was'pressed");' }' ( Only(one(listener(per(event(type((like(in(Android)( DH2642 Interaction Programming DH2642 Interaction A(buLon(event(Q(Android( Layout:'' '<Button'id=“@+id/my_button”' '''''android:layout_height="wrap_content"' '''''android:layout_width="wrap_content"' '''''android:text="@string/pressMe”'/>' ( ALaching(listener:' 'Button'b'='(Button)'findViewById(R.id.my_button);' '…' 'b.setOnClickListener(new'ButtonPressDetector());' ( Listener(implementa%on: '' public'class'ButtonPressDetector33 ''implements'View.OnClickListener{' 'public'void'onClick(View'v){'…'}' }' DH2642 Interaction Programming ' A(buLon(event(Q(JavaFX( Layout((FXML(declara%ve,(works(with(Java(procedural(as(well):'' ''<Button'fx:id=“btn”'text="Say''Hello'World'"'/>3 ( ALaching(listener:( '@FXML' 'Button'btn;' '…' 'btn.setOnAction(new'ButtonPressDetector());' ( Listener(implementa%on: '' interface EventHandler <T extends Event> public'class'ButtonPressDetector33 { ''implements'EventHandler<ActionEvent>{' void handle (T event); 'public'void'handle(ActionEvent'e){'…'}' } }' Java(FX(uses(generics(instead(of(a(handler(type(for(each(event. '' ' ' DH2642 Interaction Programming DH2642 Interaction A(buLon(event(–(Java(Swing( Layout/ini%aliza%on:' JButton'b'='new'JButton("Press'me");'' …' b.addActionListener(new'ButtonPressDetector());' ' ' Listener:' public'class'ButtonPressDetector'' 'implements'ActionListener{' 'public'void'actionPerformed(ActionEvent'e){' ''System.out.println("button'was'pressed!'"'+'e);' '}' }' ' DH2642 Interaction Programming A(buLon(event((Q(HTML(–(beLer(way( ( Layout(and(event(linking:( <button'id="myButton">Press'me</button>' ' Event(handler((“listener”,(you(can(omit(event(if(you(don’t(want(to(use(it)( var'onClickAction'='function(event)'{' ''''alert("button'was'pressed'”+event);' }' ' $(”#myButton").click(onClickAction);' Any(number(of(listeners(can(be(added(this(way((like(in(Swing,(or(JavaFX( addEventHandler)( Or(even(an(anonymous(listener:( $(”#myButton").click(function(event){…});' ( DH2642 Interaction Programming DH2642 Interaction A(buLon(event(–(FXML(Javascript( 3<?language3javascript?>3 '…' '<Button'text="Say''Hello'World'”''' ' '' ' 'onAction="java.lang.System.out.println('You'clicked'me!');”3 3/>3 ( • onAc%on(can(include(any(Javascript(code,(just(like(in(HTML( • In(this(case,(we(do(a(Java(call(from(Javascript!( • This(Javascript(will(not(work(in(a(usual(browser(environment((e.g.(no( document(variable)(but(the(language(is(the(same.( • So(in(theory(you(can(build(JavaFX(desktop(or(mobile(UI(just(from(your( FXML(document,(just(like(you(can(do(in(HTML( DH2642 Interaction Programming Events(and(handler(subscrip%on( Listeners= event handlers More handlers for an event source and for an event type One handler can listen to many sources DH2642 Interaction Programming DH2642 Interaction ?( • Why(is(mul%plicity(needed?( – Why(do(we(need(mul%ple(event(handlers(for(a( single(widget( – Why(can(one(event(handler(be(subscribed(to( many(widgets( DH2642 Interaction Programming Answers( • Code(reuse( • Modularity:(a(widget(can(be(delivered( together(with(its(listener(to(deliver(a(certain( “feel”( – (but(other,(applica%onQspecific(listeners(are( needed(to(coordinate(it(with(the(other(widgets( • Wri%ng(complex(soaware(modules(that( supervise((collect(events(from)(widgets(of(a( whole(interface(and(provide(a(consistent( behavior((soQcalled(controllers)( DH2642 Interaction Programming DH2642 Interaction Event(source( • Since(a(subscriber(can(listen(to(many(event(sources,(finding( the(one(that(produced(the(event(may(be(needed( • Swing(event.getSource()(returns(the(Object(that(produced(the( event( – can(be(compared(using(==(to(known(widgets( – can(be(cast(to(the(known(origin(type(to(get(more(informa%on( ((JButton)event.getSource()).getText()( • Android:(the(source(View(is(passed(as(first(parameter(of(all( Listener(methods((( • HTML:($("myButton").click(function(event)'' '''' '{…'event.target…'});( ( DH2642 Interaction Programming Handlers(for(mul%ple(events( • Different(event(types( – In(Java/Android,(a(class(can(implement(many( listeners( (implements(Ac%onListener,(MouseListener(( – Since(JavaScript(is(weakly(typed,(this(is(no(issue( • One(event(type,(from(many(sources:( ButtonPressDetector'detector='' ' 'new'ButtonPressDetector();( ''b1.addActionListener(detector);' ''b2.addActionListener(detector);' ( DH2642 Interaction Programming DH2642 Interaction Events(at(different(levels( • a(buLon(press(can(originate(from(one(or(more(lowQlevel( events( – HTML(onClick,(or(onKeyDown(followed(by(onKeyUp(Q>( keyPress( – Android:(Mo%onEvent(Q>(View.OnClickListener( – Swing:(MouseEvent,(KeyEvent((( • MouseEvents:(mouse(pressed(+(mouse(released=(mouse(clicked( • key(typed((press(Tab(to(bring(the(buLon(in(focus),(key(typed((press( Space(or(Enter)( ( DH2642 Interaction Programming ?( What(are(possible(the(lowQlevel(events(that( generate(the(following(highQlevel(events:( – moving(the(text(cursor(of(a(textbox(( – moving(the(keyboard(focus(from(one(textbox(to(another( scrolling(a(textbox(( – closing(a(window( DH2642 Interaction Programming DH2642 Interaction Answers( – moving(the(text(cursor(of(a(textbox( • Mouse(click(in(the(textbox( • Arrow(keys(( • Ctrl+A,(Ctrl+E,(etc( – moving(the(keyboard(focus(from(one(textbox(to(another( • Click(in(the(textbox( • Tab,(or(shiaQTab(un%l(the(focus(gets(there( – scrolling(a(textbox( • Mouse(clicks(on(the(scrollbar( • Arrow(keys,(page(up,(page(down,(Ctrl+…( – closing(a(window( • Mouse(click(on(the(close(handle( • CtrlQW,(CommandQW(etc( DH2642 Interaction Programming Low*level* Key* onkeydown,3onkeyup,3onkeypress,3 3 .keydown();.keyup();3.keypress();33 javax.awt.event.KeyListener3 keyPressed(),3keyReleased(),3keyTyped()3 3 javafx.scene.input.KeyEvent3 android.view.View.OnKeyListener3 3 onKey()3 DH2642 Interaction Programming DH2642 Interaction ?( My(handler(method(is(called(so(I(know(that(a(key(is(pressed.( How(to(figure(out(which(key(was(pressed?( e.g.(Swing:' public'class'KeyDetector'implements'KeyListener{' 'public'void'keyPressed(KeyEvent'ke){' ' ''?????' '}' …' }' e.g.(JavaFX:( public'class'KeyDetector'implements'EventHandler<KeyEvent>{' 'public'void'handle(KeyEvent'ke){' ' ''?????' '}' }' ' DH2642 Interaction Programming Answer( This(is(the(role(of(the(event(object((ke)( All(eventQspecific(details(are(in(the(event(object( passed(to(the(event(handler( • HTML:(event.keyCode( • JavaFX:(ke.getCode()( • Swing:(ke.getKeyChar()( ( DH2642 Interaction Programming DH2642 Interaction The(event(object( • Gives(details(about(what(exactly(happened,(and(the( context,(for(example( – which(widget(generated(the(event( – %mestamp(of(the(event( – mouse(posi%on(during(mouse(clicks(or(mouse(drags( – mouse(buLon(status( – modifier(key((Alt,(Ctrl)(status(during(mouse(events(and(key( events( – and(many(more,(depending(on(the(event(type( DH2642 Interaction Programming Low*level* Mouse*/*Touch* onclick,3ondblclick,3onmousedown,3onmouseup,3 onmouseover,3onmouseout,3onmousemove3 3 .click(),3.dblclick(),3.mousedown(),33 .mouseup(),3.mouseover(),3.mouseout()3…3 javax.awt.event.MouseListener3 mouseClicked()3=3mousePressed()3+3mouseReleased()3 mouseEntered(),3mouseExited()33 3 javafx.scene.input.MouseEvent3 android.view.View.OnClickListener333333onClick()3 android.view.View.OnLongClickListener33onLongClick()3 android.view.View.OnTouchListener333333onTouch()3 ' DH2642 Interaction Programming DH2642 Interaction Low*level* (Mouse)*Mo=on* ondrag,3ondragend,3ondragenter,3 ondragleave,3ondragover,3ondragstart,3 ondrop3 javax.awt.event.MouseMotionListener3 mouseDragged(),3mouseMoved()3 3 javafx.scene.input.MouseDragEvent3 android.view.View.OnDragListener3 3 onDragEvent()3 DH2642 Interaction Programming ?( • My(mouse(mo%on(handler(will(be(called(for( every(liLle(mouse(move.(Won’t(the(%me( needed(for(my(mouse(mo%on(handler’s( execu%on(make(my(applica%on(unresponsive?( DH2642 Interaction Programming DH2642 Interaction Answer( • Yes(your(event(handler(code(can(block(the(event(dispatcher(if( it(e.g.(waits(forever(or(does(%meQconsuming(opera%ons( • That(will(affect(both(your(code(and(all(other(event(handlers( ran(on(the(respec%ve(plaiorm( • If(you(want(your(applica%on(to(feel(responsive,(op%mize(the( %me(needed(for(your(event(handling(code( • If(complex(opera%ons(are(needed,(start(them(in(another(