Chinaunix首页 | 论坛 | 博客
  • 博客访问: 386446
  • 博文数量: 214
  • 博客积分: 770
  • 博客等级: 军士长
  • 技术积分: 1969
  • 用 户 组: 普通用户
  • 注册时间: 2012-04-08 01:22
文章分类

全部博文(214)

文章存档

2013年(110)

2012年(104)

我的朋友

分类:

2013-01-04 17:48:40

一、安装QT5

  1. $ sudo add-apt-repository ppa:canonical-qt5-edgers/qt5-beta1 && sudo apt-get update && sudo apt-get install qt5-meta-full && echo 'export PATH=/opt/qt5/bin:$PATH' >> ~/.bashrc
配置环境变量

  1. $ sudo gedit /etc/environment
更改为以下内容(即添加/opt/qt5/bin路径)
PATH="/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/opt/qt5/bin"


二、安装Ubuntu QML toolkit

  1. $ sudo add-apt-repository ppa:ui-toolkit/ppa && sudo apt-get update && sudo apt-get install qt-components-ubuntu qt-components-ubuntu-demos qt-components-ubuntu-examples qt-components-ubuntu-doc notepad-qml


三、第一个Ubuntu Phone app


以下app源码整理自http://developer.ubuntu.com/resources/app-developer-cookbook/mobile/currency-converter-phone-app/

  1. import QtQuick 2.0
  2. import QtQuick.XmlListModel 2.0
  3. import Ubuntu.Components 0.1
  4. import Ubuntu.Components.ListItems 0.1
  5. import Ubuntu.Components.Popups 0.1
  6.  
  7. Rectangle {
  8.     id: root
  9.     width: units.gu(60)
  10.     height: units.gu(80)
  11.     color: "lightgray"
  12.  
  13.     property real margins: units.gu(2)
  14.     property real buttonWidth: units.gu(9)
  15.  
  16.     Label {
  17.        id: title
  18.        ItemStyle.class: "title"
  19.        text: i18n.tr("Currency Converter")
  20.        height: contentHeight + root.margins
  21.        anchors {
  22.            left: parent.left
  23.            right: parent.right
  24.            top: parent.top
  25.        }
  26.     }

  27.     ListModel {
  28.         id: currencies
  29.         ListElement {
  30.          currency: "EUR"
  31.          rate: 1.0
  32.         }
  33.     
  34.         function getCurrency(idx) {
  35.          return (idx >= 0 && idx < count) ? get(idx).currency: ""
  36.         }
  37.     
  38.         function getRate(idx) {
  39.          return (idx >= 0 && idx < count) ? get(idx).rate: 0.0
  40.         }
  41.     }

  42.     XmlListModel {
  43.         id: ratesFetcher
  44.         source: ""
  45.         namespaceDeclarations: "declare namespace gesmes='';"
  46.          +"declare default element namespace '';"
  47.         query: "/gesmes:Envelope/Cube/Cube/Cube"
  48.     
  49.         onStatusChanged: {
  50.          if (status === XmlListModel.Ready) {
  51.          for (var i = 0; i < count; i++)
  52.          currencies.append({"currency": get(i).currency, "rate": parseFloat(get(i).rate)})
  53.          }
  54.         }
  55.     
  56.         XmlRole { name: "currency"; query: "@currency/string()" }
  57.         XmlRole { name: "rate"; query: "@rate/string()" }
  58.     }

  59.     ActivityIndicator {
  60.         anchors.right: parent.right
  61.         running: ratesFetcher.status === XmlListModel.Loading
  62.     }

  63.     function convert(from, fromRateIndex, toRateIndex) {
  64.         var fromRate = currencies.getRate(fromRateIndex);
  65.         if (from.length <= 0 || fromRate <= 0.0)
  66.          return "";
  67.         return currencies.getRate(toRateIndex) * (parseFloat(from) / fromRate);
  68.     }

  69.     Component {
  70.         id: currencySelector
  71.         Popover {
  72.          Column {
  73.          anchors {
  74.          top: parent.top
  75.          left: parent.left
  76.          right: parent.right
  77.          }
  78.          height: pageLayout.height
  79.          Header {
  80.          id: header
  81.          text: i18n.tr("Select currency")
  82.          }
  83.          ListView {
  84.          clip: true
  85.          width: parent.width
  86.          height: parent.height - header.height
  87.          model: currencies
  88.          delegate: Standard {
  89.          text: currency
  90.          onClicked: {
  91.          caller.currencyIndex = index
  92.          caller.input.update()
  93.          hide()
  94.          }
  95.          }
  96.          }
  97.          }
  98.         }
  99.     }

  100.     Column {
  101.         id: pageLayout
  102.     
  103.         anchors {
  104.          fill: parent
  105.          margins: root.margins
  106.          topMargin: title.height
  107.         }
  108.         spacing: units.gu(1)
  109.     
  110.         Row {
  111.          spacing: units.gu(1)
  112.     
  113.          Button {
  114.          id: selectorFrom
  115.          property int currencyIndex: 0
  116.          property TextField input: inputFrom
  117.          text: currencies.getCurrency(currencyIndex)
  118.          onClicked: PopupUtils.open(currencySelector, selectorFrom)
  119.          }
  120.     
  121.          TextField {
  122.          id: inputFrom
  123.          errorHighlight: false
  124.          validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
  125.          width: pageLayout.width - 2 * root.margins - root.buttonWidth
  126.          height: units.gu(4)
  127.          font.pixelSize: FontUtils.sizeToPixels("medium")
  128.          text: '0.0'
  129.          onTextChanged: {
  130.          if (activeFocus) {
  131.          inputTo.text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
  132.          }
  133.          }
  134.          function update() {
  135.          text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
  136.          }
  137.          }
  138.         }
  139.     
  140.         Row {
  141.          spacing: units.gu(1)
  142.          Button {
  143.          id: selectorTo
  144.          property int currencyIndex: 1
  145.          property TextField input: inputTo
  146.          text: currencies.getCurrency(currencyIndex)
  147.          onClicked: PopupUtils.open(currencySelector, selectorTo)
  148.          }
  149.     
  150.          TextField {
  151.          id: inputTo
  152.          errorHighlight: false
  153.          validator: DoubleValidator {notation: DoubleValidator.StandardNotation}
  154.          width: pageLayout.width - 2 * root.margins - root.buttonWidth
  155.          height: units.gu(4)
  156.          font.pixelSize: FontUtils.sizeToPixels("medium")
  157.          text: '0.0'
  158.          onTextChanged: {
  159.          if (activeFocus) {
  160.          inputFrom.text = convert(inputTo.text, selectorTo.currencyIndex, selectorFrom.currencyIndex)
  161.          }
  162.          }
  163.          function update() {
  164.          text = convert(inputFrom.text, selectorFrom.currencyIndex, selectorTo.currencyIndex)
  165.          }
  166.          }
  167.         }
  168.     
  169.         Button {
  170.          text: i18n.tr("Clear")
  171.          width: units.gu(12)
  172.          onClicked: {
  173.          inputTo.text = '0.0';
  174.          inputFrom.text = '0.0';
  175.          }
  176.         }
  177.     }
  178. }


四、运行测试

  1. $ qmlscene CurrencyConverter.qml

阅读(854) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~