Pull to refresh

QML — новый подход к построению GUI

Reading time 3 min
Views 11K
Традиционно все десктопные приложения пишутся на императивных языках программирования, этот подход прост и понятен, куда проще описать последовательность действий для решения той или иной задачи, нежели поставить задачу в понятной для машины форме, но когда речь заходит о проектировании внешнего вида и поведения, возникают сложности.
Веб дизайнеры же привыкли описывать, как должно выглядеть веб приложение, то есть ставить задачу, а не по пунктам описывать её решение, такой подход называется декларативным, он удобен, но к сожалению в традиционных приложениях до сих пор господствует именно императивный подход. Есть конечно дизайнеры форм, но они лишь позволяют в общих чертах обрисовать внешний вид приложения, но совершенно не способны описать его поведение. Для решения это проблемы в Qt Software был предложен новый проект Declarative User Interface и в рамках него новый язык разметки:

Встречаем QML


Это новый язык разметки, позволяющий описывать не только внешний вид, но и поведение ваших приложений. Он очень прост и обладает json образным синтаксисом, немного сближающим его html5, что думаю очень придется по душе веб-дизайнерам, да и программистам тоже. А в перспективе это наконец позволит полностью разделить внутреннюю логику работы приложения и его внешнее поведение, в результате чего будет наконец решена извечная проблема, когда программист занимается ещё и внешним видом приложения, потому, как дизайнерам слишком сложно было вникнуть в программирование.




Если вы хотите посмотреть на QML, то можете скачать специальную сборку QtCreator'а. В результате вы получите, помимо самого Созидателя, ещё и папку с примерами и скомпилированную программу-смотрелку.
Простейший Hello, World! Будет выглядеть так:


import Qt 4.6

Rectangle {
  width: 200
  height: 200
  color: "white"
  Text {
    text: "Hello World"
    anchors.centerIn: parent
  }
}

* This source code was highlighted with Source Code Highlighter.


Чуть посложнее пример, dial с видео:


import Qt 4.6
import "content"

Rectangle {
  color: "#545454"
  width: 300; height: 300

  // Dial with a slider to adjust it
  Dial { id: dial; anchors.centerIn: parent; value: slider.x *100 / (container.width - 34) }

  Rectangle {
    id: container
    anchors.bottom: parent.bottom; anchors.bottomMargin: 10
    anchors.left: parent.left; anchors.leftMargin: 20
    anchors.right: parent.right; anchors.rightMargin: 20; height: 16
    gradient: Gradient {
      GradientStop { position: 0.0; color: "gray" }
      GradientStop { position: 1.0; color: "white" }
    }
    radius: 8; opacity: 0.7; smooth: true
    Rectangle {
      id: slider
      x: 1; y: 1; width: 30; height: 14
      radius: 6; smooth: true
      gradient: Gradient {
        GradientStop { position: 0.0; color: "#424242" }
        GradientStop { position: 1.0; color: "black" }
      }
      MouseRegion {
        anchors.fill: parent
        drag.target: parent; drag.axis: "XAxis"; drag.minimumX: 2; drag.maximumX: container.width - 32
      }
    }
  }
}

* This source code was highlighted with Source Code Highlighter.


Впечатляет? Можно будет описывать таким образом различные состояния state машины, создавать сигналы/слоты, указывать с помощью какого эффекта должны переключаться различные состояния и ещё много чего.
Но пока это ещё только самые первые шаги, технология ещё не доросла до состояния готовности, пока это все даже не интегрировано в основную ветку разработки Qt, но самые смелые из вас уже сегодня могут погружаться в неё.
А чтобы потом в один прекрасный день не схватиться за голову с мыслью «господи, да мне же все теперь переписывать придется под этот QML», советую присматриваться уже сегодня к этой технологии и проектировать свои приложения так, чтобы она с легкостью встроилась в них. От себя советую побольше пользоваться dynamic property, так как их можно без лишних телодвижений сделать видимым из javascript и QML объектов.
Всю информацию о новой технологии можно найти здесь
Tags:
Hubs:
+29
Comments 64
Comments Comments 64

Articles