Slicing wird verwendet, um einer Box einen Hintergrund zu geben, der einen Rand hat, der gestreckt werden kann, ohne den Rand zu verzerren. Das folgende Bild ist ein Beispiel für ein Hintergrundbild mit einem Rand.

Wenn wir dieses Bild in eine rechteckige Box, anstelle einer quadratischen Box, einfügen, wird sich das Bild verformen. Wenn allerdings Slicing verwendet wird, wird der Rand erhalten, und nur das Zentrum gestreckt. Die folgende Grafik zeigt, wie die Box ohne und dann mit Slicing aussieht:

Slicing teilt eine Grafik in neun Teile: Vier Ecken, vier Ränder, und die Mitte.

Das erlaubt es der Rendering Engine die Box auf jede Größe zu skalieren, ohne die Proportionen der Ecken und Ränder zu verändern. Um Slicing in einer Anwendung zu verwenden, erstellen wir eine Box, die ein Bild als Fill verwendet, und benutzen das s:fillSize Attribute in Verbindung mit dem s:fillSlice Attribut.

<box s:fill="url(#mySliceFill)" s:width="190" s:height="60"
     s:fillSize="both" s:fillSlice="11" />

Im obigen Code, weist s:fillSize="both" die Rendering Rngine an, das Bild entlang der x- und y-Achse zu strecken, und s:fillSlice="11" teilt ihr mit, das Bild 11 Pixel von jeder Kante aus einzuteilen. Falls unterschiedliche Pixel Werte für jede Kante benötigt werden, kann die Boxely TRBL (top right bottom left) Notation folgendermaßen verwendet werden: s:fillSlice="11 6 11 6".

Boxen können mit zwei Arten an non-gradient Brushes gefüllt werden: solidBrush und imageBrush. (Gradient Brushes werden im nächsten Teil behandelt). Definieren eines Brushes erlaubt es, alle Fill Attribute in ein wiederverwendbares Objekt zu gruppieren, das als Fill auf jede Box angewendet werden kann. Zum Beispiel, falls wir ein Bild auf mehr als eine Box aufteilen möchten, können wir alle Attribute bezogen auf den Fill in einem imageBrush festlegen und dann den Fill einfach auf die Box, die wir füllen moechten anwenden. Die solidBrush und imageBrush Objekte werden in der Library erstellt, auf die gleiche Art und weise wie das definieren eines Bildes. Zum Beispiel:

<library xmlns="http://www.aol.com/boxely/resource.xsd">
    <imageBrush id="myImageBrush" fill="myImage.png"
        fillRepeat="both" fillRepeatOriginX="0" fillRepeatOriginY="0" />
</library>

Jetzt können wir diesen Braush einfach als Fill auf eine Box übernehmen:

<box id="myBox" s:width="100" s:height="100" s:fill="url(#myImageBrush)"/>

Dies vereinfacht es, einen zerteilten Fill auf mehr als eine Box anzuwenden, und erlaubt es Boxen zu erstellen die so aussehen:

Durch Verwendung einer Grafik die so aussieht:

Um eine Maske auf ein Bild anzuwenden, muss zunächst ein imageBrush für das Bild und die Maske (mask) erstellt werden. Wir müssen mindestens eine id und einen fill für den imageBrush bestimmen.

<library xmlns="http://www.aol.com/boxely/resource.xsd">
    <imageBrush id="myImage" fill="myImage.png" />
    <imageBrush id="myMask" fill="myMask.png" />
</library>

Die Maske sollte ein Graustufenbild sein. Bereiche, die transparent sind verstecken das Zielbild, (maskieren es aus) und bereiche, die sichtbar sind, erlauben es dem original, hindurchzuschauen. Um die Maske auf eine Box anzuweden, verwenden wir das s:mask Attribut.

<box s:width="100" s:height="100" s:fill="url(#myImage)"
    s:mask="url(#myMask)" />

Das folgende Bild zeigt das Maskenbild das Zielbild, sowie die Box, mit der Maske angewandt auf das Bild.

Farbänderungen erlauben es, das Farbattribut einer Box zu manipulieren, durch das Hinzufügen und Abziehen von Farbe und dem Festlegen der Farbsättigung. Diese Funktion ist nützlich, wenn wir einen Button, oder gar eine vollfunktionsfähige Photobearbeitungsuite erstellen möchten. Die folgenden sieben Attribute bestimmen Farbänderungen in einer Box:

In dieser Übung werden wir ein einfaches Szenario mit einer Box erstellen und dann Farbänderungen auf die Box, mit Scripten anwenden.

Zusätzlich zur Addition von Farben können auch andere Farbänderungen vollzogen werden, durch Verwendung der folgenden Attribute:

Zusätzlich zur Möglichkeit des füllens von Boxen und deren Komponenten mit statischen Farben, können auch Farbverläufe verwendet werden, wärend eine Boxely Anwendung entwickelt wird. Farbverläufe (Gradients) sind auf- oder absteigende Farben. Es gibt zwei arten an Farbverläufen: radialGradientBrush und linearGradientBrush.

Einen linearen Farbverlauf erstellen:

Ein linearer Farbverlauf wechselt von einer in mindestens eine andere Farbe. Der folgende Code zeigt das komplette Markup, das für einen linearen Farbverlauf benötigt wird.

<linearGradientBrush id="fillWindow">
  <rotateTransform center="0% 0%" angle="270"/>
  <gradientStops>
    <gradientStop color="#FFFFFF" offset="0%"/> <!-- weiß -->
    <gradientStop color="#000000" offset="100%"/> <!-- schwarz -->
  </gradientStops>
</linearGradientBrush>

Im obigen Code enthalten die gradientStop Elemente die Farben des Farbverlaufs. Das offset Attribut legt die Position des Farbverlaufs entlang der Achse fest, unter der Vorraussetzung, sie wurde nicht verändert. Ein offset Wert von 0% repräsentiert die linkeste Position entlang der x-Achse, und 100% repräsentiert die rechteste Position. Das rotateTransform Element dreht den Farbverlauf 270 Grad von der originalen Position.

Das folgende Bild stellt den linearen Farbverlauf dar, der im obigen Code beschrieben wird.

Einen radialen Farbverlauf verwenden:

Ein radialer Farbverlauf is ein kreisförmiger Verlauf mit einer oder mehr Farben. Der folgende Code zeigt das komplette Markup, das für einen radialen Farbverlauf benötigt wird:

<radialGradientBrush id="fillWindow">
  <scaleTransform x="160%" y="70%"/>
  <translateTransform x="50%" y="50%"/>
  <gradientStops>
    <gradientStop color="#ffffff00" offset="0%"/>
    <gradientStop color="#ff0000ff" offset="20%"/>
    <gradientStop color="#ff00a000" offset="60%"/>
    <gradientStop color="#ffff2000" offset="100%"/>
  </gradientStops>
</radialGradientBrush>

Im obigen Code enthalten die gradientStop Elemente die Farben des Farbverlaufs. Das offset Attribut legt die Position des Farbverlaufs entlang der Achse fest, unter der Vorraussetzung, sie wurde nicht verändert. Das scaleTransform Element Skaliert die Größe des Farbverlaufs entlang der x und y-Achse, während das translateTransform Element den Farbverlauf entlang der x und y-Achsen verschiebt.

Das folgende Bild stellt den radialen Farbverlauf dar, der im obigen Code beschrieben wird.

Eine andere tolle Funktion des Boxely UI Toolkits ist die Fähigkeit Hintergründe in einem Szenario zu verteilen. So ist es möglich einfach ein kleineres Bild zu nehmen und es, entlang der x und y-Achse zu wiederholen. Diese Funktion hat vier Style Attribute die auf die Szene oder eine Box angewandt werden können. Um Teilen zu verwenden, müssen alle vier Attribute eingefügt werden. Die folgende Liste beschreibt jedes der vier Attribute.

Um ein Bild zu verteilen verwenden wir folgenden Code:

<library>
    <bitmap id="bmp.someImage" src="path/to/some/image.png" />
</library>

<hbox s:height="100" s:width="100" s:fill="url(#bmp.someImage)"
    s:fillRepeat="both" s:fillRepeatOriginX="0" s:fillRepeatOriginY="0" />

Strich Patterns sind eine Möglichkeit, eine feste Kante an eine oder mehrere Seiten einer Box anzufügen. Das Boxely UI Toolkit besitzt fünf eingebaute Strich Patterns, allerdings, können wir auch unsere eigenen erstellen. Die fünf eingebauten Striche sind:

Um ein einfaches Strich Pattern zu verwenden, einen blauen dotDash Rand, verwenden wir folgenden Code:

<vbox s:strokePattern="dotDash" s:stroke="blue" s:strokeWidth="1" />

Das s:stroke Attribut kann vier parameter enthalten, getrennt durch ein Leerzeichen im TRBL (top right bottom left) Format. Dies ermöglicht es verschiedene Farben (oder keine Farbe) auf die individuellen Ränder einer Box anzuwenden. Zum Beispiel, ein Strich Pattern, bei dem nur der obere und untere Rand einen sichtbaren Strich haben, verwenden wir folgenden Code:

<vbox s:strokePattern="dotDash" s:stroke="blue none blue none"
    s:strokeWidth="1" />

Zusätzlich zur Verwendung der fünf eingebauten Strich Patterns, kann ein eigener definiert werden, indem bis zu 64 Pixel eines benutzerdefinierten Striches erstellt werden, der dann wiederholt wird:

Zusammen mit dem Kontrollieren des strokePattern, kann auch fillCornerRadius und strokeCornerRadius kontrolliert werden. fillCornerRadius bestimmt wie die Ecke des Fills gezeichnet wird basierend auf dem Kreisradius. strokeCornerRadius wendet die gleiche Änderung wie fillCornerRadius auf das Strich Pattern an. Wenn wir beabsichtigen, eine gleichmäßige Ecke zu erstellen, ohne Überlappung (oder Unterlappung), müssen wir den Wert von fillCornerRadius und strokeCornerRadius auf die gleiche Ganzzahl festlegen.

Einen Strich erstellen, der einen Eckradius besitzt, setzen wir den Wert auf die Pixelgröße der Ecke:

<vbox s:strokePattern="dotDash" s:fillCornerRadius="2"
    s:strokeCornerRadius="2" />

Pens erlauben das schnelle Anwenden einer Gruppe von Strichen. Anstelle des konstanten duplizierens von Strichen, und dem Anwenden, woimmer sie hin sollen, das Boxely UI Toolkit kann Striche in Pens zusammenfassen, die dann anstatt der Striche verwendet werden können. Um einen Pen in einem Gadget zu verwenden, wuerden wir folgenden Code benutzen:

<pen id="greenpen" color="black" width="5" cornerRadius="8"/>
<gadget id="square" type="box">
  <parts>
    <box:vbox s:fill="" s:height="100" s:width="100" s:stroke="url(#greenpen)"
        s:strokeLayer="above"
    s:margin="10" s:fillCornerRadius="8" inherits="$fill=color"/>
  </parts>
</gadget>

Es gibt Instanzen, in denen eine Box nicht alle Informationen anzeigen kann, die sie enthält. In solchen Fällen, müssen wir festlegen, wie sich die Boxely Rendering Engine verhalten soll. Das Standardverhalten ist, sowie sich der Inhalt vergrößert, so vergrößert sich auch die Box. Wenn wir dieses Verhalten vermeiden möchten, gibt es zwei Möglichkeiten, Überfluss zu steuern:

Um das standard, clipping und scrolling Verhalten yu definieren, verwenden wir folgenden Code:

<hbox s:height="100" s:width="100"  s:overflow="none" />

Um den Überfluss abzuschneiden, verwenden wir folgenden Code:

<hbox s:height="100" s:width="100"  s:overflow="hidden" />

Um den Überfluss zu scrollen, verwenden wir folgenden Code:

<hbox s:height="100" s:width="100"  s:overflow="scroll" />

Zusätzlich zum Abschneiden von Überfluss kann das Boxely UI Toolkit anhand von Style Attributen abschneiden. Das Boxely UI Toolkit kann nicht nur Boxen beschneiden, als auch das darunterliegende Fenster, falls eines existiert. Zum Beschneiden einer Windows® Box, kann das gleiche Markup verwendet werden wie bei einer gewöhnlichen Boxely Box.

Das s:clip Attribut lässt uns ein Rechteck definieren, das von der aktuellen Box abgezogen wird, kurz bevor dem Clipping (dieses Attribut ist dem Cropping ähnlich). Zum Beispiel, durch festlegen von s:clip="0" für eine Box, beschneidet das Boxely UI Toolkit die Box auf ihre Dimensionen (das bedeutet, es beschneidet sie nicht). Durch Festlegen von s:clip="20", beschneidet es die Box auf ihre Dimensionen minus 20 Pixel an jeder Kante. Wichtig, wenn Clipping mit dem Clip Stzle verwendet wird, wird das Clip Rechteck auf das äußere Box Rechteck angewandt, einschließlich anderer Eigenschaften wie stroke oder fill. Das ist anders als Overflow Clipping, welches den Verschnitt der Inhalte einer Box bestimmt (innere Box) nachdem stroke und fill angewandt wurden.

Alternativ, kann jede Kante des Verschnitts bestimmt werden. Der Clip akzeptiert TRBL (top right bottom left) Formate, wie Margins und Padding. Zum Beispiel ist es möglich s:clip="0 5 0 10" festzulegen, um die rechte Seite um 5 Pixel und die linke Seite um 10 Pixel zu beschneiden.

Es ist möglich, Schatten zu Bildern und Boxen hinzuzufügen, die in Echtzeit gezeichnet werden. Falls das Bild Transparent ist, kann die Boxely Rendering Engine den Schatten werfen, um das animierte oder statische Bild aussehen zu lassen, als ob es einen Schatten hätte. Um einen Schatten zu einem 24-bit PNG Bild, das einen Aplpha Kanal hat, hinzuzufügen, gehen wir so vor:

Das folgende Code Beispiel zeigt das komplette Markup für die Übung oben.

<hbox>
  <image src="../../../../ocpSamples/content/animation/aollogo.png"
    s:shadowKeying="alpha"
    s:shadowColor="#ff000000"
    s:shadowOpacity="80%"
    s:shadowRadius="4"
    s:shadowLeft="4"
    s:shadowTop="4" />
</hbox>

Im Beispiel oben können wir, da das Bild einen Alpha Kanal besitzt, den Schatten im Alpha Kanal werfen, und dann die Farbe des Schattens, die Sichtbarkeit, den Radius, und die Position festlegen.

Verwischen und Glühen sind Design Effekte, die auf jede Box angewandt werden können, und oft mit Boxen verwendet werden, die Text anzeigen. Um eine Box zu verwischen, kann einfach das s:blur Attribut auf einen Ganzzahl Wert festgelegt werden, der bestimmt wie stark die Box verwischt werden soll.

<text value="hello world" s:blur="2" />

Ein Glüheffekt kann durch einen Schatten hervorgerufen werden. Im folgenden Beispiel wird die Textfarbe auf weiß festgelegt und ein Schatten um die Textbox herum erstellt.

<text value="hello world" s:shadowKeying="alpha"
    s:shadowColor="#ff0000ff"
    s:shadowOpacity="100%"
    s:shadowRadius="6"
    s:shadowLeft="0"
    s:shadowTop="0"
    s:textColor="white" />

Diese beiden effekte werden in den Bildern unten veranschaulicht.

Bevel ist ein Effekt, der verwendet wird, um Kanten einer Box hervorzuheben. Die drei Style Attribute, die für einen Bevel verwendet werden, sind s:bevelRadius, s:bevelOpacity und s:bevelColor. Das s:bevelRadius Attribut legt die Dicke des Bevels. Um die Sichtbarkeit, oder wie stark der Bevel angezeigt wird, zu bestimmen kann das s:bevelOpacity Attribut verwendet werden. Die Farbe des Bevels wird mit s:bevelColor festgelegt. Hier ist ein Beispiel:

<box s:fill="red" s:width="50" s:height="50" s:bevelRadius="4"
    s:bevelOpacity="60%" s:bevelColor="#000000" />

Das Diagramm unten zeigt eine rote Box ohne und dann mit Bevel.

Das Boxely UI Toolkit besitzt eingebaute Styles die es erlauben eine Box zu skalieren und zu drehen. Um eine Box zu skalieren verwenden wir das s:scale Attribut und setzen seinen Wert auf eine prozentuale Größe der original Box. Zum Beispiel, ein Wert von 100 wird die originale Größe beibehalten, ein Wert von 200 wird sie verdoppeln, und ein Wert von 50 wird sie auf die Hälfte reduzieren.

<hbox s:hSpace="20">
    <box s:fill="red" s:width="50" s:height="50" s:scale="50" />
    <box s:fill="red" s:width="50" s:height="50" s:scale="150" />
</hbox>

Um eine Box zu drehen, verwenden wir das s:rotation Attribut. Wir legen den Wert auf eine Gradzahl im entgegengesetzten Uhrzeigersinn fest. Gültige Werte reichen von -180 bis 180.

<hbox s:hSpace="20">
    <box s:fill="blue" s:width="50" s:height="50" s:rotation="15" />
    <box s:fill="blue" s:width="50" s:height="50" s:rotation="45" />
</hbox>