DEMUX Framework 英文原文：Working with views in DEMUX Framework

在DEMUX框架中，视图是构建用户界面的基础。它们被用来显示信息，提供反馈并接受用户输入。这些视图以一种树形的组织起来，也就是说每一个视图都有一个确定的父视图，零个或者多个子视图。视图是通过实现DMXView接口来创建的。这些接口的部分代码显示如下：

public interface DMXView {
 
    void render();
 
    String getViewId();
 
    String getParentViewId();
 
    Object viewPlacementConstraint();
 
    void addChildView(DMXView child);
 
    Set<String> getViewDataIds();
 
    void updateFromModel(Map<String, Object> dataMap);
 
    Object getViewUI();
}

这些方法的描叙如下：

• render()-数据模型改变时重新绘制视图。视图的定义了绑定在它上的数据模型，这些数据的第一次改变都会触发被方法。
• getViewId()-返回用以区分每个视图的唯一的字符串标识。
• getParentViewId()-返回该视图的父视图ID，如果存在的话。
• viewPlacementConstraint()-返回约束条件，当前视图被加入到它的父视图中时要使用该约束条件。返回的约束条件由addChildView()来调用。
• addChildView()-在当前视图上增加一个子视图。在定义增加的子视图的位置时你应该使用前一个方法返回的约束条件对象。
• getViewDataIds()-返回当前视图使用的数据模型的IDs的集合。
• updateFromModel()-用数据模型的数据更新当前视图类的属性，这些数据模型里面的数据是通过map键值对来传递的。
• getViewUI()-返回当前视图的UI对象，可以是JavaFXNode, AndroidActivity等等。

其它翻译版本 (1) 加载中

创建父视图

在这个例子中，我们将使创建一包含两个子视图的父视图。你可以在samples/demux-subviewsdirectory of the DEMUX Framework binary distribution中找到完整的代码。部分代码如下：

public class MainView implements DMXView {
 
    private BorderPane borderPane;
 
    public MainView(){
        borderPane = new BorderPane();
        Text text = new Text("This is main view");
        borderPane.setCenter(text);
    }
 
    @Override
    public void render() {
 
    }
 
    @Override
    public String getViewId() {
        return MainView.class.getName();
    }
 
    @Override
    public String getParentViewId() {
        return JFXViewManager.JFX_ROOT_VIEW_ID;
    }
 
    @Override
    public Object viewPlacementConstraint() {
        return null;
    }
 
    @Override
    public void addChildView(DMXView child) {
        // find constrain defined for this view
        Object constraint = child.viewPlacementConstraint();
        if(constraint != null && constraint.toString().equals("south")){
            borderPane.setBottom((Node)child.getViewUI());
        } else if(constraint != null && constraint.toString().equals("east")){
            borderPane.setRight((Node)child.getViewUI());
        }
    }
 
    @Override
    public Set<String> getViewDataIds() {
        return Collections.EMPTY_SET;
    }
 
    @Override
    public void updateFromModel(Map<String, Object> dataMap) {
 
    }
 
    @Override
    public Object getViewUI() {
        return borderPane;
    }
 
}

我们采用了JavaFX 容器的Field border Panel 来布局当前视图。这里的绝大多数方法功能都很单一且容易理解，所以我们将集中精力在addChildViews方法上。我们想让子视图放在border panel的底部和右部。我们首先检查子视图的约束条件值，如果它是“south”，那么子视图就应该放在底部，如果是“east”，则应该在右部。这意味着子视图必须根据我们要它显示的位置来返回这两个值中的一个。

创建子视图

我们将创建两个子视图，一个放在父视图的底部，另一个放在右部。

public class BottomChildView implements DMXView {
 
    private Text text;
 
    public BottomChildView(){
        text = new Text("This is child view");
    }
    // .........
    // some methods omitted for brevity
 
    @Override
    public void render() {
 
    }
 
    @Override
    public String getViewId() {
        return BottomChildView.class.getName();
    }
 
    @Override
    public String getParentViewId() {
        return MainView.class.getName();
    }
 
    @Override
    public Object viewPlacementConstraint() {
        return "south";
    }
 
 
    @Override
    public Object getViewUI() {
        return text;
    }
 
 
}

以上代码将显示底部视图，我们设置它的约束条件对象值为“south” ，这意味着该视图将被放置在父视图的底部。我们也返回了要把它放置的父视图的ID和类名。

右边视图的代码如下：

public class RightChildView implements DMXView {
 
    private Text text;
 
    public BottomChildView(){
        text = new Text("This is right child view");
    }
    // .........
    // some methods omitted for brevity
 
    @Override
    public void render() {
 
    }
 
    @Override
    public String getViewId() {
        return RightChildView.class.getName();
    }
 
    @Override
    public String getParentViewId() {
        return MainView.class.getName();
    }
 
    @Override
    public Object viewPlacementConstraint() {
        return "east";
    }
 
 
    @Override
    public Object getViewUI() {
        return text;
    }
 
 }

构建，运行，你将看到如下结果：

当前教程结束，点这里继续其他教程。

其它翻译版本 (1) 加载中 本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务