QML

Wigand Blind Oktober 20, 2016 Q 6 0
FONT SIZE:
fontsize_dec
fontsize_inc

QML ist eine Benutzeroberfläche Auszeichnungssprache. Es ist eine JavaScript-basierte, deklarative Sprache für die Gestaltung von Benutzerschnittorientierte Anwendungen. Es ist Teil der Qt Schnell, der UI-Kreationssatz von Nokia in der Qt-Framework entwickelt. QML ist vor allem für mobile Anwendungen, bei denen Berührungseingabe, flüssige Animationen und Benutzerfreundlichkeit sind entscheidend verwendet. QML Dokumente beschreiben einen Objektbaum von Elementen. QML Elemente mit Qt ausgeliefert sind eine anspruchsvolle Reihe von Bausteinen, grafische und Verhaltens. Diese Elemente können kombiniert werden, um Komponenten bis hin in die Komplexität von einfachen Tasten und Schieberegler zu bauen, internetfähigen Programme abzuschließen.

QML Elemente können durch Standard JavaScript sowohl inline als auch über included.js Dateien erweitert werden. Elemente können auch nahtlos integriert und von C ++ Komponenten mit der Qt-Framework erweitert werden.

QML ist die Sprache; die Laufzeit wird als Qt Deklarative.

Verabschiedung

  • KDE Plasma Workspaces 2
  • Einheit
  • Hawaii
  • Einfache Desktop-Display Manager

Syntax, Semantik

Basic-Syntax

Beispiel:

Objekte werden durch ihren Typ, gefolgt von einem Paar von Klammern angegeben. Objekttypen beginnen immer mit einem Großbuchstaben. In dem obigen Beispiel gibt es zwei Objekte, ein Rechteck; und sein Kind, ein Bild. Zwischen den Klammern kann man Informationen über das Objekt, wie zum Beispiel seine Eigenschaften festlegen. Eigenschaften werden als Eigenschaft angegeben: Wert. Im obigen Beispiel können wir sehen, das Bild hat eine Eigenschaft mit dem Namen Source, die seit der Wert "pics / logo.png" zugewiesen wurde. Die Eigenschaft und deren Wert durch einen Doppelpunkt getrennt.

Die ID-Eigenschaft

Jedes Objekt kann eine spezielle einzigartige Eigenschaft genannt ID angegeben werden. Zuweisen einer ID können Sie das Objekt an, um von anderen Objekten und Skripten bezeichnet werden. Die erste folgende Rectangle-Element besitzt eine ID, "MyRect". Das zweite Rechteck Element definiert in seiner eigenen Breite mit Bezug auf myRect.width, was bedeutet, dass es die gleiche Breite wie der erste Wert rechteckigen Element aufweisen.

Beachten Sie, dass eine ID muss mit einem Kleinbuchstaben oder einem Unterstrich beginnen und kann nicht außer Buchstaben, Zahlen und Unterstriche Zeichen enthalten.

Property Bindungen

Eine Eigenschaft Bindung gibt den Wert einer Immobilie in einer deklarativen Weise. Der Wert der Eigenschaft wird automatisch aktualisiert, wenn die anderen Eigenschaften oder Datenwerte zu ändern, nach der reaktiven Programmierparadigma.

Property Bindungen werden implizit in QML, wenn eine Eigenschaft ist eine JavaScript-Ausdruck zugeordnet erstellt. Die folgende QML verwendet zwei Immobilien-Bindungen, um die Größe des Rechtecks ​​zu der otherItem verbinden.

QML erstreckt sich eine standardkonforme JavaScript-Engine, so dass jeder gültige JavaScript-Ausdruck kann als eine Eigenschaft Bindung verwendet werden. Bindings können Objekteigenschaften zugreifen, stellen Funktionsaufrufe und sogar integrierte JavaScript-Objekte wie Datum und Math.

Beispiel:

Staaten

Staaten sind ein Mechanismus, um Änderungen an Eigenschaften in einem semantischen Einheit zu kombinieren. Ein Knopf zum Beispiel hat eine Press- und eine nicht-gedrückten Zustand, eine Adressbuchanwendung könnte ein Nur-Lese-und ein Bearbeitungszustand für Kontakte. Jedes Element hat eine "implizite" Grundzustand. Jeder andere Zustand wird durch die Auflistung der Eigenschaften und Werte dieser Elemente, die aus dem Grundzustand unterscheiden beschrieben.

Beispiel: In der Grundeinstellung wird MyRect bei 0,0 positioniert. In der "bewegt" Zustand, wird bei 50,50 positioniert ist. Ein Klick in der Maus Bereich ändert den Zustand von dem Standard-Zustand in den "bewegt" Zustand, so bewegt die Rechteck.

Zustandsänderungen können mit Transitions animiert werden.

Zum Beispiel, indem Sie diesen Code auf der obigen Artikel Element belebt den Übergang zur "bewegt" Zustand:

Animation

Animationen in QML durch Animieren Eigenschaften von Objekten durchgeführt. Objekte vom Typ real, int, Farbe, rect, zeigen, Größe und Vector3D können alle animiert werden.

QML unterstützt drei wichtigsten Formen der Animation: Grundeigenschaft Animationen, Übergänge und Immobilien Verhaltensweisen.

Die einfachste Form der Animation ist ein PropertyAnimation, die alle der oben genannten Immobilienarten animieren können. Eine Eigenschaft Animation kann als Wertquelle unter Verwendung des Animations auf Eigenschaft Syntax angegeben werden. Dies ist besonders nützlich für die Wiederholung Animationen.

Das folgende Beispiel erstellt einen Springeffekt:

Qt / C ++ Integration

QML muss nicht Qt / C ++ Wissen zu nutzen, aber es kann bequem über Qt erweitert werden.

Bekannte Konzepte

QML bietet direkten Zugang zu den folgenden Konzepten von Qt:

  • QAction - der Aktionstyp
  • QObject Signale und Slots - erhältlich als Funktionen in JavaScript aufrufen
  • QObject Eigenschaften - verfügbar als Variablen in JavaScript
  • QWidget - QDeclarativeView ist eine QML-Anzeige-Widget
  • Q * Modell - direkt in die Datenbindung verwendet

Qt Signal-Handler

Signalverarbeitungsroutinen gestatten Aktionen in Reaktion auf ein Ereignis genommen werden. Zum Beispiel hat die MouseArea Element Signal-Handler in der Handhabung der Maus drücken, loslassen und klicken Sie auf:

Alle Signal-Handler beginnen mit "on".

Entwicklungswerkzeuge

Weil QML und JavaScript sind sehr ähnlich, fast alle Code-Editoren unterstützenden JavaScript werden für Syntaxhervorhebung, Code-Vervollständigung, integrierte Hilfe, und auch funktionieren, aber volle Unterstützung eine technische Vorschau von einem WYSIWYG-Editor ist in der kostenlose Cross-Plattform IDE Qt Creator verfügbar seit 2.1-Version.

  Like 0   Dislike 0
Vorherige Artikel Weicher Grunge
Nächster Artikel Wizard of New Zealand
Bemerkungen (0)
Keine Kommentare

Fügen Sie einen Kommentar

smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile smile smile smile smile
smile smile smile smile
Zeichen übrig: 3000
captcha