Beim Entwickeln einer Boxely Anwendung ist es wichtig, den Code zu organisieren, und ihn in spezielle Libraries und Module zu zerlegen, die optimiert und wiederverwendet werden können.
Zum Beispiel kann eine Anwendung, die zwei benutzerdefinierte Gadgets enthält, aufgebaut sein, wie in der Grafik unten gezeigt.
|
In diesem Beispiel startet Main.box die Anwendung, und lädt Gadget1.box und Gadget2.box, die externe Libraries repräsentieren.
Um externe Libraries zu erstellen und zu laden, folgen wir folgenden Schritten:
Eine Library erstellen:
Um eine Library zu erstellen, erstellen wir eine neue .box Datei, die folgendes Schema enthält:
<?xml version="1.0" encoding="utf-8" ?> <?import href="box://ocpToolkit/content/core/coreGadgets.box"?> <?import href="box://ocpToolkit/theme/default/toolkit.box"?> <library ...> </library>
Dann, innerhalb des Library Elements, definieren wir die wiederverwendbaren Elemente, die das Modul aufbauen:
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<library ...>
<!-- Wiederverwendbare Elemente hier definieren. -->
</library>
Um eine Library in eine Anwendung zu importieren:
Sobald wir eine Library erstellt haben, können wir sie in jede .box Datei importieren, die die Elemente des Moduls benötigt, indem wir folgenden Code verwenden:
<?import href="file://SomeFolder/content/SomeFile.box"?>
Eine Anwendung kann beliebig viele importierte Module enthalten wie hier gezeigt:
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?> <?import href="box://ocpToolkit/theme/default/toolkit.box"?> <?import href="file://SomeFolder/SomeFile.box"?> <?import href="../common/AnotherFile.box"?>
In einer .box Datei müssen alle Import Tags in der Nähe der XML deklaration und vor dem Basis window Element stehen. Falls diese Konvention nicht eingehalten wird, wird es dem OCP Toolkit nicht möglich sein, die externe Datei erfolgreich zu importieren.
In dieser Übung werden wir den XML Code in unserer "To-Do List" Anwendung in vier einzelne .box Dateien aufteilen, wie in der Grafik unten gezeigt.
Die ToDoList.box wird die Anwendung initialisieren und drei externe Gadget Libraries referenzieren, (titleAreaGadgets.box, noteAreaGadgets.box, und buttonsAreaGadgets.box), die deren jeweilige Gadgets definieren.
Wir gehen folgendermaßen vor um diese Dateien zu erstellen.
Im ToDoList/content Verzeichnis erstellen wir eine neue Datei namens titleAreaGadgets.box und fügen folgenden Code ein. (Es sollte uns möglich sein, den unten fett hervorgehobenen Code zu markieren sowie aus der originalen .box Datei, die unsere "To-Do List" Anwendung beschreibt, auszuschneiden und einzufügen.)
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<library xmlns="http://www.aol.com/boxely/resource.xsd"
xmlns:box="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd">
<gadget id="titleArea">
<parts>
<box:label id="title" value="My To Do List"/>
<box:label id="dateTime" value="Time: 00/00/0000 12:00:00 PM" />
</parts>
</gadget>
<style tag="titleArea" orient="vertical" height="64" hAlign="center"
vAlign="center">
<part name="title" margin="0" padding="0 4 2 4"
fontFamily="ITC Highlander Book" fontSize="18pt"/>
<part name="dateTime" margin="0" padding="0 4 2 4"
fontFamily="Arial" fontSize="12pt"/>
</style>
</library>
Im gleichen Verzeichnis erstellen wir eine zweite Datei namens noteAreaGadgets.box fügen folgenden Code ein. (Es sollte uns möglich sein, den unten fett hervorgehobenen Code zu markieren sowie aus der originalen .box Datei, die unsere "To-Do List" Anwendung beschreibt, auszuschneiden und einzufügen.)
Beim Kopieren und Einfügen des Codes ist sicherzustellen, dass das notepadImage entfernt wurde, das als Hintergrund Fill für das Gadget verwendet wird. (Dieses Bild wird nicht mehr benötigt.) Um es zu entfernen, ist sicherzustellen, beide, sowohl das bitmap Element, identifiziert als notepadImage, als auch das fill Attribut im noteArea Gadget Style Element zu entfernen.
Um die Scroll Box sehen zu können, muss mehr Text zum Wert des multilineLabel Tags hinzugefügt werden. Falls die mehrzeiglige Textbox eine Breite von 240 und eine Höhe von 80 besitzt, wird für 260 oder mehr Zeichen eine Scrollbar benötigt.
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/inputPack/inputGadgets.box"?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<library xmlns="http://www.aol.com/boxely/resource.xsd"
xmlns:box="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd">
<gadget id="noteArea">
<parts>
<box:label id="itemTitle" value="To-Do Item Title"/>
<box:label id="itemDate" value="00/00/0000 12:00:00 PM"/>
<box:vbox id="descriptionContainer">
<box:multilineLabel id="itemDescription"
value="This is the description for the to-do item. If it gets
too long, it will be scrollable." />
</box:vbox>
<box:image id="itemImage"
src="../../theme/images/image4.jpg"/>
</parts>
</gadget>
<style tag="noteArea" orient="vertical" margin="12 0" flex="1"
hAlign="center" vAlign="top">
<part name="itemTitle" padding="0" margin="8 0 0 0" fontFamily="Arial"
fontSize="22pt"/>
<part name="itemDate" padding="0" margin="0" fontFamily="Arial"
fontSize="12pt"/>
<part name="descriptionContainer" overflow="scroll" minHeight="90"
maxHeight="90" minWidth="280" maxWidth="280" hAlign="center"
margin="14 0"/>
<part name="itemDescription" width="240" minHeight="80"
fontFamily="Brush Script" fontSize="14pt"/>
<part name="itemImage" maxWidth="240" maxHeight="180"/>
</style>
</library>
Im gleichen Verzeichnis erstellen wir eine dritte Datei mit dem Namen buttonsAreaGadgets.box fügen folgenden Code ein. (Es sollte uns möglich sein, den unten fett hervorgehobenen Code zu markieren sowie aus der originalen .box Datei, die unsere "To-Do List" Anwendung beschreibt, auszuschneiden und einzufügen.)
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<library xmlns="http://www.aol.com/boxely/resource.xsd"
xmlns:box="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd">
<gadget id="buttonsArea">
<parts>
<box:hbox id="prevNextButtons">
<box:textButton label="« Prev Note"
tooltip="Go to your previous Note."/>
<box:hbox s:flex="1"/>
<box:textButton label="Next Note »"
tooltip="Go to your next Note."/>
</box:hbox>
<box:button s:flex="1" defaultButton="true"
icon="../../theme/images/iconWrite.png"
label="Create To-Do Item" tooltip="Create new To-Do Note." />
<box:hbox>
<box:button s:flex="1"
icon="../../theme/images/iconClearItem.png"
label="Clear To-Do Item"
tooltip="Remove this Note from your list."/>
<box:button s:flex="1"
icon="../../theme/images/iconClearList.png"
label="Clear To-Do List"
tooltip="Remove all Notes from your list."/>
</box:hbox>
</parts>
</gadget>
<style tag="buttonsArea" height="88" orient="vertical" >
<part name="prevNextButtons" flex="1" margin="0 0 12 0"/>
</style>
</library>
Jetzt, in der originalen ToDoList.box Datei, die unsere Anwendung beschreibt, fügen wir folgenden Code ein, unten fett formatiert, um die drei externen Libraries zu importieren, die wir in den vorigen Schritten erstellt haben. Wir entfernen die Zeile, die inputGadgets.box importiert, weil inputGadgets.box in der noteAreaGadgets.box importiert wird.
<?xml version="1.0" encoding="utf-8" ?> <?import href="box://ocpToolkit/content/inputPack/inputGadgets.box"?> <?import href="box://ocpToolkit/content/core/coreGadgets.box"?> <?import href="box://ocpToolkit/theme/default/toolkit.box"?> <!-- Eigene Importe --> <?import href="titleAreaGadgets.box"?> <?import href="noteAreaGadgets.box"?> <?import href="buttonsAreaGadgets.box"?> <window xmlns="http://www.aol.com/boxely/box.xsd" xmlns:s="http://www.aol.com/boxely/style.xsd" s:fill="url(#backgroundFill)" s:top="center" s:left="center" s:minHeight="543" s:minWidth="323" s:maxHeight="543" s:maxWidth="323" title="To-Do List" > <library xmlns="http://www.aol.com/boxely/resource.xsd" xmlns:box="http://www.aol.com/boxely/box.xsd" xmlns:s="http://www.aol.com/boxely/style.xsd"> <linearGradientBrush id="backgroundFill"> <scaleTransform x="160%" y="70%"/> <translateTransform x="50%" y="50%"/> <gradientStops> <gradientStop color="#ffffffff" offset="0%"/> <gradientStop color="#00000000" offset="100%"/> </gradientStops> </linearGradientBrush> </library> <titleArea></titleArea> <noteArea></noteArea> <buttonsArea></buttonsArea> </window>
In der ToDoList.box Datei führen wir folgende Code Änderungen durch, unten fett hervorgehoben, um den linearen Hintergrund Fill durch einen neuen Fill zu ersetzen, und um ein neues Gadget mit dem Namen ToDoList zu instantiieren.
<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/inputPack/inputGadgets.box"?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>
<!-- Eigene Importe -->
<?import href="titleAreaGadgets.box"?>
<?import href="noteAreaGadgets.box"?>
<?import href="buttonsAreaGadgets.box"?>
<window xmlns="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd"
s:fill="url(#backgroundFill)"
s:top="center"
s:left="center"
s:minHeight="543"
s:minWidth="323"
s:maxHeight="543"
s:maxWidth="323"
title="To-Do List" >
<library xmlns="http://www.aol.com/boxely/resource.xsd"
xmlns:box="http://www.aol.com/boxely/box.xsd"
xmlns:s="http://www.aol.com/boxely/style.xsd">
<!-- Define the ToDoList gadget: -->
<gadget id="ToDoList">
<parts>
<box:titleArea id="titleArea"/>
<box:noteArea id="noteArea"/>
<box:buttonsArea id="buttonsArea"/>
</parts>
</gadget>
<style tag="ToDoList" orient="vertical" flex="1"/>
<!-- Einen neuen Hintergrund Fill hinzufügen,
um den linearen Farbverlauf zu ersetzen: -->
<bitmap id="backgroundFill"
src="../../theme/images/background.png"/>
<!-- Entfernen des linearen Gradients: -->
<linearGradientBrush id="backgroundFill">
<scaleTransform x="160%" y="70%"/>
<translateTransform x="50%" y="50%"/>
<gradientStops>
<gradientStop color="#ffffffff" offset="0%"/>
<gradientStop color="#00000000" offset="100%"/>
</gradientStops>
</linearGradientBrush>
</library>
<!-- Instantiieren des ToDoList Gadgets: -->
<ToDoList/>
<!-- Entfernen der titleArea, noteArea, und buttonsArea Instanzen: -->
<titleArea></titleArea>
<noteArea></noteArea>
<buttonsArea></buttonsArea>
</window>
In der ToDoList.box Datei ist sicherzustellen, dass die Instanzen der titleArea, noteArea, und buttonsArea Gadgets entfernt sind. Sie werden nicht mehr benötigt, seit das ToDoList Gadget erstellt und instatiiert wurde.
Wir speichern und führen die Anwendung aus, und verwenden die nun neu erstellte ToDoList.box Datei. die "To-Do List" Anwendung wird mit dem neuen Hintergrund Fill Bild angezeigt. Die titleArea, noteArea, und buttonsArea Gadget Definitionen werden nun aus externen Libraries importiert und verwendet.
|
Falls Elemente der Anwendung nicht korrekt angezeigt werden, so sind die Box URLs, die in den Import Tags verwendet wurden, zu überprüfen.