top trim

Festes Layout benutzen

Im Fließendes Layout benutzen Teil dieses Anhangs haben wir über das eingebaute, standard, fließende Layout Schema gelernt. Um absolute Positionierung zu verwenden, müssen wir das fixed Positionsattribut verwenden, wie in folgender Übung gezeigt:

  1. Wir erstellen ein Fenster mit einer einfachen Box.

    <?xml version="1.0" encoding="utf-8" ?>
    <?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
    <?import href="box://ocpToolkit/theme/default/toolkit.box"?>
    
    <window xmlns="http://www.aol.com/boxely/box.xsd"
      xmlns:s="http://www.aol.com/boxely/style.xsd"
      xmlns:on="http://www.aol.com/boxely/reaction.xsd"
      s:height="100" s:width="400" s:top="center"
      s:left="center" s:fill="white" title="Using Fixed Layout">
    
      <box id="myBox" s:height="100" s:width="100" s:fill="green" />
    
    </window>
    
  2. Wir modifizieren den box Tag, um das s:position Attribut einzufügen und seinen Wert auf "fixed" zu setzen.

    <?xml version="1.0" encoding="utf-8" ?>
    <?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
    <?import href="box://ocpToolkit/theme/default/toolkit.box"?>
    
    <window xmlns="http://www.aol.com/boxely/box.xsd"
      xmlns:s="http://www.aol.com/boxely/style.xsd"
      xmlns:on="http://www.aol.com/boxely/reaction.xsd"
      s:height="100" s:width="400" s:top="center"
      s:left="center" s:fill="white" title="Using Fixed Layout">
    
      <box id="myBox" s:height="100" s:width="100" s:fill="green"
          s:position="fixed" />
    
    </window>
    
  3. Sobald die Positionierung der Box im festen Modus ist, können wir die s:top, s:right, s:bottom, und s:left Attribute festlegen, die die Position der Box bestimmen, relativ zum Parent. Wir können positive und negative Ganzzahlen (in Pixeln) für alle vier Attribute verwenden. Oder, die "start", "center", und "end" Wörter verwenden. In den s:top und s:bottom Attributen, ist "start" das obere Ende der Parent Box, "center" die vertikale Mitte der Parent Box, und "end" ist das untere Ende der Parent Box. In den s:right und s:left Attribute, ist "start" das Linke Ende der Parent Box, "center" die horizontale Mitte der Parent Box, und "end" das rechte Ende der Parent Box.

    Wichtig: Standardmäßig, werden Boxen anhand der rechten oberen Ecke positioniert, es sei denn es wird "center" (in diesem Fall werden sie anhand ihres Zentrums angeordnet) oder ein Offset (in diesem Fall wird die Pixelposition der Box verändert) verwendet. Das offset Attribut wird im folgenden Offset benutzen Teil erklärt.

    • Das folgende Code Beispiel zeigt die Verwendung von Pixeln zum positionieren der Box:

      <?xml version="1.0" encoding="utf-8" ?>
      <?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
      <?import href="box://ocpToolkit/theme/default/toolkit.box"?>
      
      <window xmlns="http://www.aol.com/boxely/box.xsd"
        xmlns:s="http://www.aol.com/boxely/style.xsd"
        xmlns:on="http://www.aol.com/boxely/reaction.xsd"
        s:height="200" s:width="400" s:top="center"
        s:left="center" s:fill="white" title="Using Fixed Layout">
      
      <box id="myBox" s:height="100" s:width="100" s:fill="green"
            s:position="fixed" s:top="100" s:left="100" />
      
      </window>
      

      Auf dem Bildschirm dargestellt präsentiert dieser Code eine grüne Box, deren obere linke Ecke am 100. Pixel von der oberen linken Ecke der Parent Box ausgehend positioniert ist.

    • Das Folgende Code Beispiel zeigt die Verwendung des "center" Wortes um die Box zu positionieren:

      <?xml version="1.0" encoding="utf-8" ?>
      <?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
      <?import href="box://ocpToolkit/theme/default/toolkit.box"?>
      
      <window xmlns="http://www.aol.com/boxely/box.xsd"
        xmlns:s="http://www.aol.com/boxely/style.xsd"
        xmlns:on="http://www.aol.com/boxely/reaction.xsd"
        s:height="200" s:width="400" s:top="center"
        s:left="center" s:fill="white" title="Using Fixed Layout">
      
        <box id="myBox" s:height="100" s:width="100" s:fill="green"
            s:position="fixed" s:top="center" s:left="center" />
      
      </window>
      

      Auf dem Bildschirm dargestellt präsentiert dieser Code eine grüne Box, die sowohl horizontal als auch vertikal innerhalb ihres Parents zentriert ist. (Da wir das "center" Wort verwendet haben, um die Box zu positionieren, wird die Box anhand ihres Zentrums angeordnet, und nicht anhand ihrer oberen linken Ecke.)

Offset benutzen

Offset ermöglicht das Einfügen von zusätzlichem Abstand von dem Punkt an dem die Box angeordnet wird. Standardmäßig werden Boxen anhand ihrer linken oberen Ecke angeordnet, außer wenn sie zentriert sind und anhand ihres Zentrums angeordnet werden.

Offset kann sowohl in fließendem als auch festem Layout verwendet werden. Es weist eine Pixelveränderung auf die Box zu, nachdem ihre Position bestimmt wurde. Zum Beispiel, um die obere linke Ecke einer Box im Szenario zu zentrieren, folgen wir folgenden Anweisungen.

  1. Erstellen einer einfachen zentrierten Box.

    <?xml version="1.0" encoding="utf-8" ?>
    <?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
    <?import href="box://ocpToolkit/theme/default/toolkit.box"?>
    
    <window xmlns="http://www.aol.com/boxely/box.xsd"
      xmlns:s="http://www.aol.com/boxely/style.xsd"
      xmlns:on="http://www.aol.com/boxely/reaction.xsd"
      s:height="200" s:width="400" s:top="center"
      s:left="center" s:fill="white" title="Using Offset">
    
      <box id="myBox" s:height="100" s:width="100"  s:position="fixed"
        s:fill="green" s:top="center" s:left="center" />
    
    </window>
    

    Wenn wir dieses Szenario ausführen, wird diese Box im Szenarion zentriert, was nicht exakt das ist, was wir wollen. (Wir möchten die obere rechte Ecke der Box zentrieren.)

  2. Um die obere linke Ecke zu zentrieren, verwenden wir das s:offset Attribut, um die Box um 50 Pixel nach unten und 50 Pixel nach rechts zu verschieben.

    • Die vier offset Attribute verwenden: s:offsetTop, s:offsetRight, s:offsetBottom, und s:offsetLeft:

      <?xml version="1.0" encoding="utf-8" ?>
      <?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
      <?import href="box://ocpToolkit/theme/default/toolkit.box"?>
      
      <window xmlns="http://www.aol.com/boxely/box.xsd"
        xmlns:s="http://www.aol.com/boxely/style.xsd"
        xmlns:on="http://www.aol.com/boxely/reaction.xsd"
        s:height="200" s:width="400" s:top="center"
        s:left="center" s:fill="white" title="Using Offset">
      
        <box id="myBox" s:height="100" s:width="100"  s:position="fixed"
          s:fill="green" s:top="center" s:left="center"
           s:offsetTop="50" s:offsetLeft="50"  />
      
      </window>
      
    • Das s:offset Meta-Attribut verwenden:

      <?xml version="1.0" encoding="utf-8" ?>
      <?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
      <?import href="box://ocpToolkit/theme/default/toolkit.box"?>
      
      <window xmlns="http://www.aol.com/boxely/box.xsd"
        xmlns:s="http://www.aol.com/boxely/style.xsd"
        xmlns:on="http://www.aol.com/boxely/reaction.xsd"
        s:height="200" s:width="400" s:top="center"
        s:left="center" s:fill="white" title="Using Fixed Layout">
      
        <box id="myBox" s:height="100" s:width="100"  s:position="fixed"
          s:fill="green" s:top="center" s:left="center"
             s:offset="50 0 0 50"  />
      
      </window>
      
  3. Wenn wir das Szenario ausführen, sehen wir eine grüne Box, deren obere linke Ecke in ihrem Parent (das Fenster) zentriert ist.

Layer benutzen

Wenn wir mit mehreren Boxen arbeiten, können wir die Reihenfolge bestimmen, in der die Boxxen platziert werden, indem wir die s:layer und s:zIndex Attribute verwenden.

Das s:layer Attribut legt den Layer fest, in dem eine Box gezeichnet wird. Mögliche Werte sind:

  • below - Das ist die Hintergrund Ebene unserer Szene. Die Boxely Rendering Engine zeichnet alle Boxen in diesem Layer zuerst. Sie befinden sich unterhalb aller Boxen.

  • stack - Das ist der Hauptlayer eine Szene. Die Boxely Rendering Engine zeichnet alle Boxen in diesem Layer in der Reihenfolge ihres zIndex.

  • above - Das ist der Vordergrundlayer eine Szene. Die Boxely Rendering Engine zeichnet alle Boxen in diesem Layer zuletzt. Sie befinden sich oberhalb aller Boxen im Szenario.

Das s:zIndex Attribut repräsentiert die z-Achse. Während die x- und y-Achsen zweidimensionale Anordnung auf einer flachen Ebene darstellen, wird mit der yßAchse eine dritte Dimension eingeführt und ermöglicht uns Boxen übereinander zu stapeln.

Das folgende Beispiel demonstriert das Boxely z-Achsen Layout System:

<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>

<?import href="../../../../ocpSamples/theme/samples.box"?>

<appWindow xmlns="http://www.aol.com/boxely/box.xsd"
        xmlns:s="http://www.aol.com/boxely/style.xsd"
        id="window" translucent="true"
        title="Layered Box Test">

  <!-- Einfache Beispiele für Layer Boxen -->

  <box style="bordered" s:width="150" s:height="150">
    <spacer style="blue" s:position="fixed"
            s:width="60" s:height="60"/>

    <spacer style="yellow" s:position="fixed"
            s:layer="above" s:zIndex="2"
            s:top="30" s:left="30"
            s:width="60" s:height="60"/>

    <spacer style="red" s:position="fixed"
            s:layer="above" s:zIndex="2"
            s:top="60" s:left="60"
            s:width="60" s:height="60"/>

    <spacer style="green" s:position="fixed"
            s:layer="stack"
            s:left="90" s:top="90"
            s:width="120" s:height="120"/>

    <spacer style="green" s:position="fixed"
            s:layer="below"
            s:top="30" s:right="-50"
            s:width="50" s:height="50"/>
  </box>

  <hbox style="bordered" s:height="50" s:hAlign="end">
    <spacer style="blue" s:width="30"/>
    <spacer style="yellow" s:width="80" s:layer="below"/>
    <spacer style="green" s:width="50"/>
  </hbox>
</appWindow>

Auf dem Bildschirm dargestellt, präsentiert der obige Code die folgenden Layer Boxen:

Standardmäßig zeichnet die Boxely Rendering Rngine die Parent Box zuerst, bevor sie die Layer Child Boxen zeichnet. Um diese Reihenfolge zu ändern, kann das s:anchor Attribut verwendet werden. Nach dem Zeichen einer Box im Szenario zeichnet die Rendering Engine irgendeine Box deren anchor auf die ID der ersten Box festgelegt wurde, egal, wo sich die Box in der Hierarchie befindet. Diese Funktionalität ermöglicht es, gezielt, Bereiche der Anzeige neu zu zeichen.

Es ist auch möglich, die Rendering Engine eine Box ausserhalb des Bereichs des Szenarios zeichnen zu lassen, durch das festlegen des s:layer Attributs auf "framed". Das ist nützlich, wenn es nötig ist, eine zentrierte Dialogbox zu zeichen, während die Szene an die linke Seite des Bildschirms angedockt ist. Anstelle des Zwingens der Rendering Engine zum erhöhen des Containers, um die Mitte des Bildschirms einzuschließen, was die Geschwindigkeit stark reduziert, ist es möglich, ein zweites Szenenfenster in die Mitte des Bildschrims zu legen, das dann die Dialogbox enthält.

bottom trim