Designer

Designer

Der Designer ist derzeit noch ein Prototyp, der aber schon so einiges auf dem Kasten hat.
Du kannst zum Beispiel jede Änderung, die Du im SML (Simple Markup Language) vornimmst, sofort in der Vorschau sehen.

Wenn Du Buttons verwendest, um zu anderen Seiten zu navigieren, dann funktioniert diese Navigation bereits auch in der Vorschau.

Videos werden hier allerdings nur als Thumbnail angezeigt.

Werd auch Du zum Designer

Mit unser Hilfe kannst auch Du zum App-Designer werden. Du mußt weder Programmieren lernen noch Informatik studieren.

SML

Page {
    backgroundColor: "#0000ßß" 
    color: "#ffffFF" 
    padding: "8"

    Column {
        padding: "8"

        Markdown {
            color: "#888888"
            text: "Lorem ipsum dolor"
        }
    }
}

SML steht für Simple Markup Language und ist verwandt mit QML (Qt Markup Language).

Eine App ist in Seiten (Pages) eingeteilt. Der User kann später in der App von Seite zu Seite navigieren.
Entweder mit einem Tap auf einen Button oder das tappen eines Links.
Oder mit einem sogenannten Pager, mit dem man die Seiten nach links oder rechts wischen kann.

Jede Seite fängt mit Page an.
Der Inhalt der Page wird zwischen die geschweiften Klammern { und } gesetzt.

Ein Attribut wie oben backgroundColor (Hintergrundfarbe) wird mit dem Zeichen ":" ein Wert in Hochkomma bzw. Anführungszeichen zugewiesen. In diesem Fall die Zeichenkette "#0000ßß" was den Hexadezimalwert für eine Farbe darstellt.
So eine Farbwert setzt sich aus dem Zeichen "#" und drei Hexadezimalwerten für die Farbwerte R (rot), G (gelb) und B(blau) zusammen. Die Werte haben einen Bereich von "00" (0) bis "FF" (255).
Stellt man den drei Farbwerte noch einen Hexwert voran, so bezeichnet dieser die Transparenz "00" unsichtbar bis "ff" vollständig sichtbar.

Der Wert "color" steht hier für die Textfarbe und "padding" für die inneren Abstände. Der Wert padding: "8" bedeutet, das alle Abstände (oben, unten, link und rechts) auf 8 dp (dichteunabhängige Pixel) eingestellt sind. Bei padding: "8 16 20 4" steht jeder Wert für oben, rechts, unten, links.
Also oben 8, rechts 16, unten 20 und links 4.

Layouts

Um Elemente innerhalb der Seite anzuordnen benutzt man Layouts wie zum Beipiel Row und Column.

Mit der Row werden die Elemente innerhalb von links nach rechts in Spalten angeordnet.

Row {
    Text { 
        text: "Linke Spalte" 
    }
    Text { 
        text: "Rechte Spalte" 
    }
}

Mit Column werden die Elemente innerhalb von oben nach unten in Zeilen angeordnet.

Column {
    Text { 
        text: "Obere Zeile" 
    }
    Text { 
        text: "Untere Zeile" 
    }
}

Elemente

Text {
    text: "Lorem ipsum dolor"
}

Normalen Text kann man mit dem Element Text darstellen.

Markdown {
    text: "
        # Header
        Lorem ipsum
        - List item
        - List item
        "
}

Mit Markdown kann man formatierten Text darstellen.

Schaltflächen definiert man mit dem Element Button.
Das Attribut label definiert welcher Text im Button angezeigt werden soll und link definiert, was passieren soll, wenn der Nutzer den Button anklickt.
In diesem Fall wird die Seite about geöffnet.

Button {
    label: "About"
    link: "page:about"
}

Mit dem Element Video kann man ein Video anzeigen, das Bestandteil des Projektes ist und im Verzeichnis assets abgelegt wurde.
Das Attribut src definiert die Videodatei hier "beach.mp4" und das Attribut height definiert die Höhe des Videos in dp (device pixel).

Video { 
    src: "beach.mp4" 
    height: "120"
}

Dies sind nur ein paar der verfügbaren Elemente und Attribute. Dafür wird es dann später eine Dokumentation geben.
Wir beschränken uns hier nun erst einmal darauf, das wichtigste zuerst zu implementieren.

Und da dies ein Open Source Projekt ist, hoffe ich, das sich noch ein paar Entwickler einfinden werden, die den Rest erledigen ;-)

Markdown

Markdown { text: "
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
*Line 2*
**Line 3**
***Line 4***
(c) (tm) (r) > & <
(C) (TM) (R)
~~this is strikethrough~~
"}

Mit der Hilfe von Markdown, einer Sprache die zum Beispiel von GitHub, Reddit, Stack Overflow und Trello genutzt wird, um Text zu formatieren, kannst Du sehr einfach und schnell Text eingeben.

Mit dem Zeichen # leitest Du zum Beispiel eine Überschrift (<H1>) ein.
Stellst Du der Zeile zwei ## dieser Zeichen voran, so wird ein Untertitel (<H2>) erzeugt und so weiter bis <H6>.

Willst Du ein Wort kursiv darstellen, dann stellst du es innerhalb von zwei * Zeichen.
Willst Du ein Wort fett darstellen, dann stellst du es innerhalb von zwei mal * Zeichen.
Fett und kursiv wird dadurch erreicht, dass du eine´oder mehrere Wörter innerhalb von zwei mal ** Zeichen stellst.
Wenn Du den Text durchgestrichen darstellen möchtest, benutzt du zwei ~~ Zeichen vor und zwei Zeichen hinter dem Wort.