Qt Quick Eren BAŞTÜRK [email protected] 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
© Copyright 2024 Paperzz
