BB10 Cascades: Use of Button Components

In QML of BB10 Cascades, a Button component is provided, which can be used to provide users with an operation Button. For simple interface operations, you can directly write javascript code for buttons in QML and perform some operations through javascript. If complex background operations are involved, you can call the C ++/QT object method through javascript in the button event. This article first discusses how to add actions for buttons using simple javascript code. The button component is easy to use. We will use the "HelloWorld" sample in the previous blog post for demonstration. First, open mail in the QML editor. on the qml page, drag the button control from the lower left corner to the QML editor, and release the mouse where you want to insert the button. before inserting the button to the "hello world" label, so I drag the button component to the top of the "helllo world" label component. After dragging, Cascades IDE will automatically generate the QML code of the button. Select the generated QML code and modify the button attributes on the QML Properties page. You can enter the Text of the button in the Text column. I enter "Chang Value ". Click the lightning button next to On click to generate the onClicked method of the button. I want to click the button to modify the text of the "hello world" label, So I entered the code in the onClicked event: [javascript] myLabel. text = qsTr ("New String"); note that the component name myLabel is used, but the name is not specified for the "hello world" label currently, therefore, when you run the test program, the "myLabel" cannot be found ". We need to specify a name for the "helllo world" Label by selecting the corresponding Label component and setting the ID to the specified name on the QML Properties page, in this example, set the "Hello World" tag id to myLabel. For details about Button creation, refer to. In addition to modifying the text of the tag component, you can also modify other attributes of the component through javascript, for example, you can modify the layout attribute to change the position of a component. I added the second button in the preceding example. The button text is "Change Position" and the onClicked code is: [javascript] myLabel. horizontalAlignment = HorizontalAlignment. left; then, when you click "Change Position", the "hello world" label becomes Left aligned. You can test and run other QML attributes of the button. The following is the complete mail. qml code for reference: [javascript] // creates one page with a label Page {Container {layout: StackLayout {} Button {horizontalAlignment: HorizontalAlignment. center onClicked: {myLabel. text = qsTr ("New String");} text: "ChangValue"} Button {text: "Change Position" onClicked: {myLabel. horizontalAlignment = HorizontalAlignment. left;} horizontalAlignment: HorizontalAlignment. center} Label {id: myLabel text: qsTr ("Hello World") textStyle. base: SystemDefaults. textStyles. bigText verticalignment: verticalignment. center horizontalAlignment: HorizontalAlignment. center }}}