kuix教程5：动态数据显示

教程5：动态数据显示

Requirement 需求

Please read the Tutorial 4 first. 请阅读教程4 首。

Display dynamic data 显示动态数据

In the last section of this HelloWorld Tutorial we will point out the capabilities of Kuix to dynamicaly display data. 在本教程的最后一节的HelloWorld我们将指出的Kuix的能力dynamicaly显示数据。 We are going to display two kind of information : a runtime value - a value read at runtime like the device platform name - and a runtime dynamic value - like a variable for instance. 我们将各种信息显示两个：一个运行时的价值 - 在诸如设备平台名称运行时读取一个值 - 以及一个运行时动态值 - 就像一个实例变量。

In a second time, we are going to use the variable to set the value of a radio group. 在第二次，我们将使用变量来设置一个广播集团的价值。

Download this tutorial step. 下载 本教程的步骤。

Create a custom Data Provider 创建一个自定义数据提供

The data provider is a special object that inherits from the org.kalmeo.kuix.core.model.DataProvider class and so, has the ability to provide the Kuix Core engine with dynamic values: it works like an "unidirectional bind" between a reference (ie. an alias) an the value. 该数据提供程序是一个特殊的对象类继承了org.kalmeo.kuix.core.model.DataProvider， 所以有能力提供Kuix核心价值观发动机动力：它参考作品像一个“单向绑定”之间（即化名）1的值。

In this example, we will create a data provider for 2 dynamic data. 在这个例子中，我们将创建一个动态数据2数据提供商。 One called platformName with the device platform name detected by Kuix, and another one with a variable called gender . 一个名为platformName 与设备平台Kuix的名字被发现，并且与另一性别 一变量调用。

To customize our Data Provider, we need to override at least the getValue() method. 要自定义我们的数据提供商，我们需要重写最少的getValue（） 方法。 In addition, we will create an accessor to set the gender value. 此外，我们将创建一个访问器来设置的性别 价值。 Hereafter is the code suggested for the implementation. 此后是代码的执行建议。

public class DynamicDataProvider extends DataProvider {



    // Declare static values to identify the provided data

    private static final String PLATFORM_NAME_PROPERTY = "platformName";

    private static final String GENDER_PROPERTY = "gender";



    // create a value variable

    private String gender = "unknown";



    // create an accessor to dispatch an event when value is set

    public void setGender(String gender) {

        this.gender = gender;

        dispatchUpdateEvent(GENDER_PROPERTY);

    }



    // override the parent method to handle user defined value 

    protected Object getUserDefinedValue(String property) {



        // handle custom properties requests

        if (PLATFORM_NAME_PROPERTY.equals(property)) {

            return Kuix.getCanvas().getPlatformName();

        }

        if (GENDER_PROPERTY.equals(property)) {

            return this.gender;

        }



        // default behavior if the property has not been found

        return null;

    }



}


 

Create a new frame and a new screen to handle user actions and display data. 创建一个新的框架和新的屏幕来处理用户的操作和显示数据。

Start creating a new frame called DynamicFrame for instance. 开始创建一个新帧名为DynamicFrame 的实例。 This frame implements the Frame interface. 这个框架实现了框架 的接口。

Implement the appropriate methods so that we can display the content of an XML file called dynamic-display.xml . 实施适当的方法，使我们可以显示XML内容的文件称为动态display.xml。

 

public class DynamicFrame implements Frame {



    // Associate a screen to the frame

    protected Screen screen;

    // Associate our data provider to the frame

    protected DynamicDataProvider dataProvider = new DynamicDataProvider();



    public boolean onMessage(Object identifier, Object[] arguments) {

        return true;

    }



    public void onAdded() {

        // Load the content from the XML file with Kuix.loadScreen static method

        screen = Kuix.loadScreen("dynamic-display.xml", dataProvider);



        // set the application current screen  

        screen.setCurrent();

    }



    public void onRemoved() {

        // destroy the screen

        screen.cleanUp();

        // unreference the screen object to free the memory

        screen = null;

    }



}







 

Set the content for the new screen in the XML file 设置为在XML文件的一个新的屏幕内容

Create the XML file that will be loaded with the previous Frame ( dynamic-display.xml ). 创建XML文件，将是）加载与前一帧（ 动态display.xml。

 

<screen>

    <_title>%DYNAMIC_DISPLAY%</_title>



    <container style="layout:inlinelayout(false,fill);align:center">

        <text style="padding: 0 0 15 0">%PLATFORM_NAME(@{platformName})%</text>

        <container style="layout:gridlayout(2,1)">

            <button onAction="btn_female" shortcuts="1">%FEMALE_BTN%</button>

            <button onAction="btn_male" shortcuts="2">%MALE_BTN%</button>

        </container>

        <text>%GENDER(@{gender})%</text>

    </container>



    <screenFirstMenu onAction="back">%BACK%</screenFirstMenu>

    <screenSecondMenu>

        %MORE%

        <menuPopup>

            <menuItem onAction="about">

                %ABOUT%

            </menuItem>

            <menuItem onAction="exitConfirm">

                %EXIT%

            </menuItem>

        </menuPopup>

    </screenSecondMenu>



</screen> 




 

This screen contains 2 dynamic text widgets: @{platformName} and @{value} . 这个屏幕包含2个动态文本组件：@（platformName） 和@（值）。 Note the special syntax used to translate only a substring of the text widget (refer to the i18n tutorial of this tutorial for more details). 请注意特殊的语法只用于转换的子字符串文本小部件（指i18n的教程 本教程为更多的细节）。

 <_ATTRIBUTENAME>value</_ATTRIBUTENAME>






 

Implement the user actions 实施用户操作

Open the frame created at step 1 to implement the onMessage() method. 打开） 方法在框架中创建步骤1中执行的onMessage（。 Thanks to the frame stack and the event dispatcher, "about", "exit" and "exitConfirm" actions will be handled by the HelloworldFrame . 由于堆栈帧和事件调度，“关于”，“退出”和“exitConfirm”行动将HelloworldFrame 处理的。 The following code implements the user actions referenced in the XML file. 下面的代码实现用户在XML文件中引用的行动。

 public boolean onMessage(Object identifier, Object[] arguments) {

    // handle the "back" button on the screen

    if ("back".equals(identifier)) {

        // remove the current frame from the framehandler stack

        Kuix.getFrameHandler().removeFrame(this);



        // and display the main screen

        Kuix.getFrameHandler().getTopFrame().onAdded();



        // do not propagate the message through the rest of the frame stack

        return false;

    } else if ("btn_female".equals(identifier)) {

        // use the data provider to set its value

        dataProvider.setGender("F");

    } else if ("btn_male".equals(identifier)) {

        // use the data provider to set its value

        dataProvider.setGender("M");

    } 



    // let the next frames in the stack, process the message

    return true;

}


 

The back button returns to the main screen whereas button 1 and 2 actions change the value of the data provider. 返回 按钮返回到主屏幕，2按钮1行动而改变服务提供商的价值的数据。

添加翻译标签的messages.properties

Here is the translation table for the new labels introduced in the dynamic-display.xml file that you need to add to the messages.properties file. 下面是翻译的messages.properties 动态 表为新的标签介绍display.xml 文件，您需要添加到文件中。

 DYNAMIC_DISPLAY=Dynamic Display

PLATFORM_NAME=Platform name: {0}

GENDER=Gender: {0}

FEMALE_BTN=Female

MALE_BTN=Male

BACK=Back


 

新增动作从helloword到动态显示

Add the folowing code into the onMessage method of the HelloWorldFrame class. 添加HelloWorldFrame类folowing方法代码到的 onMessage。

if ("showDynamic".equals(identifier)) {

    // push next frame

    Kuix.getFrameHandler().pushFrame(new DynamicFrame());

    return false;

}




 

Edit the HelloWorld.xml and add the folowing menuItem tag : 编辑HelloWorld.xml 并添加folowing菜单项的标签：

 <menuItem onAction="showDynamic"> %DYNAMIC_DISPLAY% </menuItem>






 

Using the data provider to update a radio group value 使用数据提供更新广播集团的价值

A data provider can have many use cases as the form fill, real-time screen update, etc. The syntax is always the same as in step 3. 一个数据提供者可以有作为的表格填写，实时屏幕更新等许多的语法用例总是在第3步相同。

With a radio group for instance, we can use the value of a DataProvider to change the current selection. 随着广播集团为例，我们可以使用一个DataProvider的值来改变当前的选择。 Look at the example below for more details: 看看下面的例子更多详情：

 

<radioGroup onChange="">

    <_value>@{gender}</_value>

    <radioButton value="F" enabled="false">female</radioButton>

    <radioButton value="M" enabled="false">male</radioButton>

</radioGroup>




 

In the previous example, the value attribute of the radioGroup is binded to the data provider. 在前面的例子中，该radioGroup 价值 属性是与束缚的数据提供商。

note: this example does not support data update if the user change the radio button selection. 注意：此示例不支持数据更新，如果用户改变单选按钮选择。 Therefore, we disabled the button so that the user cannot click directly on a button. 因此，我们残疾人的按钮，以便用户不能单击按钮直接在。 If a bi-directional binding is needed, you can use the onChange attribute on the radioGroup to update the Data provider accordingly. 如果一个双向结合是必要的，你可以使用数据提供相应的onchange属性的radioGroup更新。

Update your CSS file with the following code to skin your radio buttons and make them visible: 更新你的CSS文件用下面的代码到你的皮肤单选按钮，使之可见：

radiobutton {

    bg-image: url(rb_off.png);

    bg-align: left;

    bg-repeat: 1 1;

    padding: 0 0 0 20;

    border: 1 1 1 1;

}

radiobutton:hover {

    border-color: #f19300;

}

radiobutton:selected {

    bg-image: url(rb_on.png);

}




 

note: do not forget to replace the image files with the appropriate ones 注：不要忘了替换的图像文件与相应的

Screenshot 截图