ソースを参照

添加格式化表格,读取数据。

caiwc 9 年 前
コミット
2be5e19ec7

+ 2 - 0
SUMMARY.md

@@ -126,6 +126,8 @@
    * [使用FileIO(Using FileIO)](extending_qml_with_c++/using_fileio.md)
    * [使用FileIO(Using FileIO)](extending_qml_with_c++/using_fileio.md)
        * [应用程序窗口(The Application Window)](extending_qml_with_c++/the_application_window.md)
        * [应用程序窗口(The Application Window)](extending_qml_with_c++/the_application_window.md)
        * [使用动作(Using Actions)](extending_qml_with_c++/using_actions.md)
        * [使用动作(Using Actions)](extending_qml_with_c++/using_actions.md)
+       * [格式化表格(Formatting the Table)](extending_qml_with_c++/formatting_the_table.md)
+       * [读取数据(Reading Data)](extending_qml_with_c++/reading_data.md)
 * [其它(Other)](other/README.md)
 * [其它(Other)](other/README.md)
    * [协作校正](other/collaboration_correction.md)
    * [协作校正](other/collaboration_correction.md)
 
 

+ 51 - 0
extending_qml_with_c++/formatting_the_table.md

@@ -0,0 +1,51 @@
+# 格式化表格(Formatting the Table)
+
+城市数据的内容应该被现实在一个表格中。我们使用TableView控制并定义4列:城市,国家,面积,人口。每一列都是典型的TableViewColumn。然后我们添加列的标识并移除要求自定义列代理的操作。
+
+```
+TableView {
+    id: view
+    anchors.fill: parent
+    TableViewColumn {
+        role: 'city'
+        title: "City"
+        width: 120
+    }
+    TableViewColumn {
+        role: 'country'
+        title: "Country"
+        width: 120
+    }
+    TableViewColumn {
+        role: 'area'
+        title: "Area"
+        width: 80
+    }
+    TableViewColumn {
+        role: 'population'
+        title: "Population"
+        width: 80
+    }
+}
+```
+
+现在应用程序能够显示一个包含文件菜单的菜单栏和一个包含4个表头的空表格。下一步是我们的```FileIO```扩展将有用的数据填充到表格中。
+
+![](http://qmlbook.github.io/_images/cityui_empty.png)
+
+文档cities.json是一组城市条目。这里是一个例子。
+
+```
+[
+    {
+        "area": "1928",
+        "city": "Shanghai",
+        "country": "China",
+        "flag": "22px-Flag_of_the_People's_Republic_of_China.svg.png",
+        "population": "13831900"
+    },
+    ...
+]
+```
+
+我们任务是允许用户选择文件,读取它,转换它,并将它设置到表格视图中。

+ 34 - 0
extending_qml_with_c++/reading_data.md

@@ -0,0 +1,34 @@
+# 读取数据(Reading Data)
+
+我们让打开动作打开一个文件对话框。当用户已选择一个文件后,在文件对话框上的onAccepted方法被调用。这里我们调用readDocument()函数。readDocument函数将来自文件对话框的地址设置到我们的FileIO对象,并调用read()方法。从FileIO中加载的文本使用JSON.parse()方法解析,并将结果对象作为数据模型直接设置到表格视图上。这样非常方便。
+
+```
+Action {
+    id: open
+    ...
+    onTriggered: {
+        openDialog.open()
+    }
+}
+
+...
+
+FileDialog {
+    id: openDialog
+    onAccepted: {
+        root.readDocument()
+    }
+}
+
+function readDocument() {
+    io.source = openDialog.fileUrl
+    io.read()
+    view.model = JSON.parse(io.text)
+}
+
+
+FileIO {
+    id: io
+}
+```
+

+ 43 - 0
extending_qml_with_c++/using_actions.md

@@ -1 +1,44 @@
 # 使用动作(Using Actions)
 # 使用动作(Using Actions)
+
+为了更好的使用/复用我们的命令,我们使用QML```Action```类型。这将允许我们在后面可以使用相同的动作,也可以用于潜在的工具栏。打开,保存和退出动作是标准动作。打开和保存动作不会包含任何逻辑,我们后面再来添加。菜单栏由一个文件菜单和这三个动作条目组成。此外我们已经准备了一个文件对话框,它可以让我们选择我们的城市文档。对话框在定义时是不可见的,需要使用```open()```方法来显示它。
+
+```
+...
+Action {
+    id: save
+    text: qsTr("&Save")
+    shortcut: StandardKey.Save
+    onTriggered: { }
+}
+
+Action {
+    id: open
+    text: qsTr("&Open")
+    shortcut: StandardKey.Open
+    onTriggered: {}
+}
+
+Action {
+    id: exit
+    text: qsTr("E&xit")
+    onTriggered: Qt.quit();
+}
+
+menuBar: MenuBar {
+    Menu {
+        title: qsTr("&File")
+        MenuItem { action: open }
+        MenuItem { action: save }
+        MenuSeparator { }
+        MenuItem { action: exit }
+    }
+}
+
+...
+
+FileDialog {
+    id: openDialog
+    onAccepted: { }
+}
+```
+