当前位置:首页 > 开发教程 > html5教程 >

html5移动开发中的如何对事件进行监听和处理

时间:2016-02-26 22:19 来源:互联网 作者:源码搜藏 收藏

图形用户界面(GUI),即可以使用一种叫做事件驱动编程模型用户交互。 所有这一切意味着,当用户确实在用户界面的东西,如单击按钮或从列表中选择一个项目,应用程序触发幕后的事件提醒可能需要做一些应对措施的行动过程。该Vaadin移动应用程序框架需要双管

图形用户界面(GUI),即可以使用一种叫做“事件驱动编程模型”用户交互。所有这一切意味着,当用户确实在用户界面的东西,如单击按钮或从列表中选择一个项目,应用程序触发幕后的事件提醒可能需要做一些应对措施的行动过程。该Vaadin移动应用程序框架需要双管齐下事件:首先,它实现了一种叫做观察者模式。它还增加了一个抽象层,HTML / JavaScript事件。我们了解到在生成Vaadin控制使用Vaadin移动应用框架构建用户界面和探索Vaadin附加组件教程。在今天的文章中,我们将详细了解Observer模式,重视事件处理我们的控制。

观察者模式:事件和监听器

观察者模式是一种行为设计模式由此GUI元素,称为主题,每当它的状态发生变化时通知订阅的听众。听众能够注册并随时取消注册自己。任何时候,一个订阅的事件触发,特殊事件处理方法执行。通常这种方法收到的有关事件源,甚至是参照元素本身的信息。

相对于Vaadin,需要注意的是Vaadin处理的客户端浏览器事件的发送和烧制在服务器侧其自己的事件是重要的。因此,我们只需要订阅我们感兴趣并实施相关的事件处理程序的事件。下面是一个例子:

final Button button = new Button("Click me!");

button.addClickListener(new Button.ClickListener() {
    public void buttonClick(ClickEvent event) {
        event.getButton().setCaption("You clicked me!");
    }
});

在上面的代码中,addClickListener()方法是订阅事件。请注意,每个控件类型提供订阅方式为他们的各种事件类型。除了ClickListener,人们还可以订阅重点和/或模糊事件为好。

该addClickListener()方法的一个参数是一个Button.ClickListener接口。通常你不能把新的关键字接口的前面,因为它不是实例化。然而,例外的是,当你创建一个匿名类,这就是我们在这里做。其实,这是因为你永远不需要调用它们直接曾宣称分配我们的事件处理程序的事实上的方式。所述buttonClick()方法是由Button.ClickListener接口所需的一种方法,是我们的事件处理程序。它接收包含了许多有关该事件被发射的信息,包括该触发按钮ClickEvent对象。便利getButton()方法返回。从那里,你可以完全访问按钮的属性,事件和方法。

探索ValueChangeListener事件

由于AbstractField类的一部分,所有字段继承addValueChangeListener()方法,让其他字段可以随时通知他们的价值的变化。它取代了过时addListener()方法在7版本。如果你还没有使用addValueChangeListener()之前,可能会非常棘手得到正确的 - 特别是如果你按照实施一个匿名类ValueChangeListener参数的约定。这就是你使用new关键字在接口的前面,创造实施者类,然后有:

new AnInterface() {
    @Override
    public void implementedMethod1() {
        //do something…
    }
    @Override
    public String implementedMethod2(AClass aClassArg) {
        return "a string";
    }
}

我们的下一个示例将ValueChangeListener到lstOtherMusclesWorked目录选择。看看第三行它说:“新Property.ValueChangeListener(){”; 即实现者类的一字形实例。在接下来的线,@Override注释标定实施valueChange()方法。它接受可以中继有关该事件给你的信息ValueChangeEvent。有些事件 - 如上述ClickEvent - 提供了触发事件的元素。然而,ValueChangeEvent返回受影响的属性。该物业反过来又为检索最新的属性值的getValue()方法。这就是事情变得有点棘手。一个属性可以是任何东西,所以getValue()返回的对象类型。由于对象已经很少有用的方法,你必须返回值铸造成更实用的东西。那是什么取决于元素,它包含的内容上。在多选择目录选择的情况下,这是一个java.utils.Collections Set接口。这本身就可以代表了许多类,但一个好的办法是收集<String>终止。你必须标注添加@SuppressWarnings(“未登记”)将valueChange()方法来摆脱在Eclipse的警告,但除此之外,在我以前的工作,“这一名顾问的话臭名昭著应该只是工作!“。
 

final ListSelect lstOtherMusclesWorked = new ListSelect("Other Muscles Worked", musclesWorkedContainer);
final Label lblSelectedOtherMusclesWorked = new Label();
lstOtherMusclesWorked.addValueChangeListener(
      new Property.ValueChangeListener() {
          @SuppressWarnings("unchecked")
          @Override
          public void valueChange(ValueChangeEvent event) {
              Collection<String> values = (Collection<String>) event.getProperty().getValue();
              lblSelectedOtherMusclesWorked.setCaption(values.size() == 0  "No items selected" : "You selected: " + values);
          }
     });

// Multiple selection mode
lstOtherMusclesWorked.setMultiSelect(true);
lstOtherMusclesWorked.setImmediate(true);

layout.addComponent(lstOtherMusclesWorked);
layout.addComponent(lblSelectedOtherMusclesWorked);

选定的项目列在一个名为lblSelectedOtherMusclesWorked标签:

html5移动开发中的如何对事件进行监听和处理

结论

任何人只要在Java事件模型一个坚实的背景应该能够Vaadin管理。我个人希望看到更少的铸造,但这是相当小土豆。像UploadField一些复杂的控制可以实现各种接口对各种事件作出回应。我们将深入研究一些人在未来的分期付款。


html5教程阅读排行

最新文章