09. Qt Quick

Qt Quick
Eren BAŞTÜRK
basturkeren@gmail.com
www.erenbasturk.com
Giriş
Qt Quick Mimarisi
Qt Quick Syntax
Temel Kavramlar
Qt Quick Temel Amaçlar
Qt Quick
QML sözdizimi(syntax) ve kavramlarını anlama
Öge ve id kavramı
Özellikler ve binding mekanizması
Temel Kullanıcı Arayüzü Oluşturma Becerileri
Ortak unsurları tanıma
Anchors yapısının anlaşılması ve kullanımı
Tasarım oluşturma becerisinin kazanılması
Qt Quick Nedir?
Qt Quick
Deklaratif biçimlendirme dili : QML
Qt ile çalışma esnasında entegrasyon
Qt Creator IDE desteği
Grafiksel Tasarım Amacı
C++ API'leri ile Qt yardımıyla entegrasyon
Qt Quick Felsefesi
Qt Quick
Gelişmiş kullanıcı arayüzü
Tasarım odaklı
Hızlı prototipleme ve üretim
Sistemlere kolay entegrasyon
Tasarım Kriterleri: Gelişmiş Kullanıcı Arayüzü
Qt Quick
Uygulamalarla etkileşim için daha fazla doğal yol
Elemanlar ile ne yapılacağının kolay tahmini
Gerçek dünta nesneleri gibi düzgün hareket
Tasarım Kriterleri: Tasarım Odaklı
Qt Quick
Qt :
Geliştiriciler için tasarım araçları
Zengin, platform-tabanlı parçacıklar
Qt Quick:
Tasarımcı tarafından erişilebilir geliştirme ve süreç tasarımları
Hafif,kişiselleştirilebilir öğeler
Tasarım Kriterleri: Hızlı Prototipleme ve Üretim
Qt Quick
Derleme adımı yok
JavaScript script dili olarak kullanılır
https://developer.mozilla.org/en/JavaScript
Anlaşılmasında yardımı olabilecekler...
Html, CSS
Gerekli değil fakat bilinmesi fayda sağlar
Az veya hiç programlama deneyimi
Tasarım Kriterleri: Hızlı Prototipleme ve Üretim
Qt Quick
Bağımsız paketler
İsteğe bağlı kurulum
Kolay ulaşılabilir bir ağ
Ağ üzerinden dağıtım
Zengin istemciler İçin çevrimiçi hizmetler
QML Nedir?
QML
Kullanıcı arabirimi için açıklayıcı bir dil
Kullanıcı arayüzü tanımı
Elemanların yapısı
Elemanların özellileri
UI özelliklerine sahip eleman ağacı
Eleman Ağacı
QML
QML İlk Uygulama
QML
import QtQuick 1.0
Rectangle {
width: 400; height: 400
color: "lightblue"
}
QML İlk Uygulama
QML
import QtQuick 1.0
//Açık mavi bir kare tanımlayın
Rectangle {
width: 400; height: 400
color: "lightblue"
}
QML İlk Uygulama
QML
import QtQuick 1.0
// Açık mavi bir kare tanımlayın
Rectangle {
width: 400; height: 400
color: "lightblue"
}
QML İlk Uygulama
QML
import QtQuick 1.0
// Açık mavi bir kare tanımlayın
Rectangle {
width: 400; height: 400
color: "lightblue"
}
QML İlk Uygulama
QML
import QtQuick 1.0
// Açık mavi bir kare tanımlayın
Rectangle {
width: 400; height: 400
color: "lightblue"
}
Uygulama Özeti
QML
import QtQuick 1.0
//Açık mavi bir kare tanımlayın
Rectangle {
width: 400; height: 400
color: "lightblue"
}
Rectangle elamanı
Gövde yapısı : { ... }
Genişlik, yükseklik, renk özellikleri
Satır sonları boş Ya da noktalı virgül
Uygulama qml viewer üzerinde çalışıyor
Görüntüleyici pencerenin boyutları 400px 400px
Elemanlar (Elements)
QML
Biçimlendirme dilindeki yapılardır
Görünür ve görünür olmayan bölümleri temsil eder
Item ise görülür eleman tabanlıdır
Genellikle görsel öğeler için kullanılır
Sık sık üst düzey eleman olarak kullanılır
Rectangle, Text, TextInput,...
Görünmeyen elemanlar
Durumlar, geçişler
Modeller,yollar
Gradyanlar, zamanlayıcılar,..
Daha fazla özellik için tıklayın
Özellikler (Properties)
QML
Elemanlara çeşitli özellikler uygulanabilir
Basit ad-değer tanımları
width, height, color, ...
Varsayılan değerler
Belirlenmiş türler
Satır sonları boş Ya da noktalı virgülle ayrılmı ş
Kullanım amaçları...
Elemanları tespit etmek için (id özelliği)
Görünümü özelleştirmek
Öğe davranışını degiştirmek
Özellik Örnekler
QML
Standart özelliklere değerler verilebilir:
Text {
text: "Hello world"
height: 50
}
Gruplanan özellikler bir arada tutulabilir:
Text {
font.family: "Helvetica"
font.pixelSize: 24
}
Kimlik özelliği bir ad ile belirtilir:
Text {
id: label
text: "Hello world"
}
Binding Özellikleri
QML
import QtQuick 1.0
Item {
width: 400; height: 200
Rectangle {
x: 100; y: 50;
width: height * 2; height: 100
color: "lightblue"
}
}
Yukarıda görüldüğü genişliğe yükseklik üzerinden atama yapılmış
Gerektiğinde bu özellik kullanılabilir.
Daha fazla binding özelliği için tıklayın
Elemanları Belirleme (Identifying Elements)
QML
Her elemana id tanımlaması
Göreceli olarak konumlandırma ve hizalama
Özellik değiştirme(Örneğin animasyon)
Ortak öğelerin yeniden kullanımı(Örneğin Gradyan)
Elemanlar arasındaki ilişkiler
Temel özelliklerin kullanımı
Kimlik Kullanımı (Using Identities)
QML
import QtQuick 1.0
Item {
width: 300; height: 115
Text {
id: txt
x: 50; y: 25
text: "Qt Quick"
Font.family: "Helvetica"; font.pixelSize: 50
}
Rectangle {
x: 50; y: 75; height: 5
width: txt.width
color: "green"
}
}
Kimlik Kullanımı (Using Identities)
QML
Text {
id: txt
x: 50; y: 25
text: "Qt Quick"
font.family: "Helvetica"; font.pixelSize: 50
}
Rectangle {
x: 50; y: 75; height: 5
width: txt.width
color: "green"
}
Text elemanı id'ye sahip(txt)
Rectange'ın genişliği id ile atanmıştır
Konu Özeti
QML
QML dilinin özellikleri ile gelişmiş kullanıcı arayüzleri
Elemanları QML kaynak kodu yapısında
Öğeler görünür
Standart eleman özellikleri ve yöntemler
Varsayılan özelliklerin degişimi
Özelliklere değerler atanabilir
İd özelliği
Standart eleman tanımlama yöntemleri
Kullanıcı Arayüzü Oluşturma Giriş
Kullanıcı Arayüzü Oluşturma Giriş
İçiçe Elemanlar
Grafik Elemanları
Metin Öğeleri
Anchor düzeni
Kullanım Amaçları
Kullanıcı Arayüzü Oluşturma Giriş
İç içe yapı
Bir eleman diğerini içerir
Elemanların özellikleri yönetme
Renk, gradyent ve resim
Göze hitap eden arayüz
Yazı
Metin Görüntüleme
Metin giriş olayı
Anchors ve hizalama
Elemanların yerleşimi
Elemanlar arasındaki yerleşim ilişkisi
İçiçe Elemanlar Giriş
İçiçe Elemanlar
İçiçe Elemanlar
Grafik Elemanları
Metin Öğeleri
Anchor düzeni
Uygulama
İçiçe Elemanlar
import QtQuick 1.0
Rectangle {
width: 400; height: 400
color: "lightblue"
Rectangle {
x: 50; y: 50; width: 300; height: 300
color: "green"
Rectangle {
x: 200; y: 150; width: 50; height: 50
color: "white"
}
}
}
Grafik Elemanları
Grafik Elemanları
İçiçe Elemanlar
Grafik Elemanları
Metin Öğeleri
Anchor düzeni
Renkler
Grafik Elemanları
Renk elemanı bir çok şekilde tanımlanabilir
Renklerin isimleri ile
“red”,”green”,”blue”
Bileşenlerin dizin isimleriyle
Red,green,blue: # <rr><gg><bb>
“#ff0000”,”#008000”,”#0000ff”
Fonksiyon kullanımı ile (red,blue,blue,alpha)
Qt.rgba(0,0.5,0,1)
Renkler
Grafik Elemanları
import QtQuick 1.0
Item {
width: 300; height: 100
Rectangle {
x: 0; y: 0; width: 100; height: 100; color: "#ff0000"
}
Rectangle {
x: 100; y: 0; width: 100; height: 100
color: Qt.rgba(0,0.75,0,1)
}
Rectangle {
x: 200; y: 0; width: 100; height: 100; color: "blue"
}
}
Son
Teşekkürler

Download Report