Boxely™ Anleitung
Einleitung
Über das Boxely UI Toolkit
Über die "To-Do List" Anwendung
Wie man diese Anleitung benutzt
In der Anleitung navigieren
Zielgruppe
Konventionen in der Anleitung
Das Boxely Team kontaktieren
Über Boxely Anwendungen
Über Boxen
Über Bibliotheken und Resourcen
Über Scripte
Installieren der Boxely Dateien
Übungsdateien
Übungen/ToDoList
Übungen/appendix
Zusammenfassung
Kapitel 1. Der Anfang
Einführung in die Boxely Umgebung
Boxely Quelltextdateien
Boxely Anwendungen entwickeln
Boxely Anwendungen ausführen
Boxely Anwendungs Darsteller
Bearbeiten der Konfigurationsdatei
Benutzerdefinierte starter erstellen
Eine neue Boxely Anwendung erstellen
Die Dateistruktur aufbauen
Die .box Datei
"To-Do List" Übung 1.1: Eine neue Anwendung erstellen
Boxen hinzufügen
Über Textboxen
Über einfache, horizontale und vertikale Boxen
Über Bilderboxen
"To-Do List" Übung 1.2: Boxen hinzufügen
Gadgets hinzufügen
Über Box Dateien
Gadgets definieren
Gadgets instanziieren
Warum Gadgets benutzen?
"To-Do List" Übung 1.3: Gadgets hinzufügen
Styling Gadgets
"To-Do List" Übung 1.4: Styling Gadgets
Zusammenfassung
Kapitel 2. Styles benutzen
Einführung des s Namespace
Positioning und Alignment Styles
Dimension Styles
Fill, Stroke, Shadow, Bevel, Affine, und andere Styles
Text Styles
Deklaieren des s Namespace
Styling des Window Elements
"To-Do List" Übung 2.1: Styling des Window Elements
Styling Gadgets (Rückführung)
Styling Parts in einem Gadget
"To-Do List" Übung 2.2: Styling Parts in einem Gadget
Styling Parts in einem Gadget (Mehr Techniken)
"To-Do List" Übung 2.3: Hinzufügen einer scrollbaren Textbox
States zum erweitern von Styles benutzen
"To-Do List" Übung 2.4: States benutzen
Bilder als Fills benutzen
Unterstützte Bildformate
Bilder einbinden
Bilddateien referieren
"To-Do List" Übung 2.5: Laden einer Bilddatei in eine Bildbox
"To-Do List" Übung 2.6: Laden einer Bilddatei in die Bibliothek
Farbverläufe benutzen
"To-Do List" Übung 2.7: Farbverläufe benutzen
Zusammenfassung
Kapitel 3. Toolkit Gadgets benutzen
Einführung: Toolkit Gadgets
Toolkit Gadgets benutzen: Wie es funktioniert
Text Gadgets benutzen
"To-Do List" Übung 3.1: Benutzen des multilineLabel Gadgets
"To-Do List" Übung 3.2: Benutzen des label Gadgets
Button Gadgets benutzen
"To-Do List" Übung 3.3: Benutzen des textButton Gadgets
"To-Do List" Übung 3.4: Benutzen des button Gadgets
Quelltext organisieren
"To-Do List" Übung 3.5: Quelltext organisieren
Zusammenfassung
Kapitel 4. Scripting und Event Handling
Einführung: Scripting und Event Handling
Erstellen des Inhalts: Anwendungsfenster
Erstellen des Inhalts: Pop-up Fenster
Erstellen von JavaScript Funktionen für ein Gadget
JavaScript Funktionen einem Gadget zuweisen
Die Anwendung testen
Mehr über Scripting
Shell Class
Scene Class
appUtils Class
Mehr über Event Handling
Event Handling mit Behaviors und Reactions
Event Handling mit dem on Namespace
Debugging einer Anwendung
"To-Do List" Übung 4.1: Programmieren des titleArea Gadget
"To-Do List" Übung 4.2: Programmieren des buttonsArea Gadget
"To-Do List" Übung 4.3: Programmieren des noteArea Gadget
"To-Do List" Übung 4.4: Programmieren des buttonsArea Gadget (Fortsetzung)
Zusammenfassung
Kapitel 5. Drag-and-Drop
Drag-and-Drop Verhalten programmieren
Ein "ziehbares" Quellobjekt erstellen
Ein Zielobjekt zum fallenlassen des Objekts erstellen
"To-Do List" Übung 5.1: Das noteArea Gadget "ziehbar" machen
"To-Do List" Übung 5.2: Ein Zielobjekt erstellen
Zusammenfassung
Kapitel 6. OCP Dienste benutzen
Einführung: OCP Dienste
OCP Dienste verwenden
"To-Do List" Übung 6.1: Den basics Dienst benutzen
"To-Do List" Übung 6.2: Den localStorage Dienst benutzen
Zusammenfassung
Kapitel 7. Übergänge benutzen
Einführung: Übergang
"To-Do List" Übung 7.1: Übergänge benutzen
Zusammenfassung
Kapitel 8. Animationen benutzen
Einführung: Animation
"To-Do List" Übung 8.1: Animationen benutzen
Zusammenfassung
Kapitel 9. Datenbindung benutzen
Einführung: Datenbindung
Einführung: Sammelbindung
"To-Do List" Übung 9.1: Datenbindung benutzen
Zusammenfassung
Kapitel 10. Veröffentlichen der Boxely Anwendung
Veröffentlichen der Boxely Anwendung
Modifizieren des Boxely Darstellprogramms und der Konfigurationsdatei
Erstellen der Boxely Anwendungs- Verzeichnisstruktur
Packen der Anwendung
Zusammenfassung
Anhang A. Box Layout Referenz
Fließendes Layout benutzen
Layout basierend auf Parent
Orientierung benutzen
Boxengröße und Veröffentlichung (mit s:flex)
Padding und Margins benutzen
Ansichten benutzen
Festes Layout benutzen
Offset benutzen
Layer benutzen
Zusammenfassung
Anhang B. Style Referenz
Fills und Farben benutzen
Eingebaute Farben benutzen
Systemfarben benutzen
HEX Farben benutzen
Ein Bild als Fill benutzen
Fills und Farben modifizieren
Slicing benutzen
Brushes benutzen
Eine Maske benutzen
Farbänderungen erstellen
Farbverläufe benutzen
Bilder teilen
Strich Patterns benutzen
Pens benutzen
Clipping und Scrolling benutzen
Schatten benutzen
Verwischen und Glühen benutzen
Bevel benutzen
Boxen skalieren und drehen
Boxely Farbkonstanten Referenzen
Eingebaute Farben: W3C CSS Standard Farbnamen
Systemfarbenkonstanten mit Windows Equivalents
Zusammenfassung
Anhang C. Animationsreferenz
Erstellen einfacher Animationen
Eine Animation zurücksetzen
Animieren einer Boxposition
"Set" Animationen benutzen
Animationen bei Eingang und Ausgang von Staten aufrufen
Dynamische Effekte zu Animationen hinzufügen
Eine komplexe Animation erstellen: Hüpfendes Bild
Zusammenfassung
Anhang D. Problembehandlungsreferenz
Debugging JavaScript Code
Debugging der Einbindung von externen Dateien
Zusammenfassung
Anhang E. Zugriffsreferenz
Über Zugreifbare Anwendungen
Über volle Tastaturnavigation
Über hohen Kontrast-Modus
Über Bildschirmlesertechnik
Volle Tastaturavigation aktivieren
Registerreihenfolge bestimmen
Tastaturkürzel einbauen
Beschleunigungstasten einbauen
Zugriffstasten einbauen
Styling Zugreifbarer Anwendungen
Hohen Kontrastmodus aktivieren
Systemfarben benutzen
Non-System-Farben benutzen
Anwendungsgröße für hohen Kontrast-Modus
Integrieren mit Bildschirmlesertechnik
Wie es funktioniert
Integrationsrichtlinien
"Reading" Eingabefelder
"Reading" Check Boxen
"Reading" Radio Buttons
"Reading" Combo Boxen
"Reading" Menüs
"Reading" Baumansichten
"Reading" Benutzerdefinierter Gadgets
Anwendungen auf Zugreifbarkeit testen
Anwendungen auf volle Tastaturnavigierbarkeit testen
Anwendungen im hohen Kontrast-Modus testen
Anwendungen mit einem Bildschirmleser testen
Zusammenfassung
Glossar
attribute
box
Boxely UI Toolkit
commandable
container
CSS (Cascading Style Sheets)
data binding
decimal code
DHTML (Dynamic HTML)
Document Object Model (DOM)
event
flowed child boxes
gadget
HTML, HyperText Markup Language
listener
namespace
object
OCP Toolkit
overflow
registered view factory
scene
state
styles
shell
style cascade
TRBL (top right bottom left)
eXtensible Markup Language (XML)
OCP Service API Referenz
basics
arrayListener
arrayOperation
onArrayModified
asyncInvokeListener
onAsyncInvokeComplete
collectionOwner
beforeCollectionDestroyed
dictionaryElement
key
value
dictionaryListener
dictionaryOperation
onDictionaryModified
enumerator
current
moveNext
reset
simpleArray
count
getEnumerator
insertValueAtIndex
removeValueAtIndex
replaceValueAtIndex
valueAtIndex
simpleDictionary
allKeys
getEnumerator
removeValueForKey
setValueForKey
valueForKey
simpleLiveArray
count
addListener
getEnumerator
insertValueAtIndex
removeListener
removeValueAtIndex
replaceValueAtIndex
valueAtIndex
simpleLiveDictionary
addListener
allKeys
getEnumerator
removeListener
removeValueForKey
setValueForKey
valueForKey
valueComparator
compareValues
array
count
addValue
addValuesFromArray
containsValue
exchangeValuesAtIndex
fromJSON
fromXML
getEnumerator
getValue
indexOfKey
indexOfValue
indexOfValueInRange
insertArrayAtIndex
isEqualToArray
lastValue
removeAllValues
removeLastValue
removeValue
removeValueAtIndex
removeValueInRange
removeValuesInArray
removeValuesInRange
replaceValueAtIndex
replaceValuesInRange
replaceValuesInRangeWithValuesFromArrayRange
setArray
setValue
sort
subarrayWithRange
toJSON
toXML
valueAtIndex
bigInt
signed
value
add
compare
divide
isEqual
multiply
subtract
toString
comparator
integerAscending
integerDescending
stringAscending
stringCaseInsensitiveAscending
stringCaseInsensitiveDescending
stringDescending
dictionary
addEntriesFromDictionary
allKeys
allKeysForValue
allValues
fromJSON
fromXML
getEnumerator
isEqualToDictionary
removeAllValues
removeValueForKey
removeValuesForKeys
setDictionary
setValueForKey
toJSON
toXML
valueForKey
valuesForKeysWithNotFoundMarker
fileStream
position
size
type
close
openForRead
openForWrite
seekRelative
seekToEnd
seekToStart
liveArray
collectionOwner
addListener
removeListener
liveDictionary
collectionOwner
addListener
removeListener
memoryStream
position
size
type
close
seekRelative
seekToEnd
seekToStart
message
arguments
method
target
asyncInvoke
fromDOM
fromURI
invoke
toURI
toXML
rawStreamReader
terminatorDispostion
bigEndian
position
size
stream
type
readDouble
readInt16
readInt32
readInt64
readInt8
readLengthPrefixedString
readStringOfLength
readStringTillEndOfStream
readStringToTerminator
readUInt16
readUInt32
readUInt64
readUInt8
seekRelative
seekToEnd
seekToMatchingString
seekToStart
rawStreamWriter
bigEndian
position
size
stream
type
seekRelative
seekToEnd
seekToStart
writeDouble
writeInt16
writeInt32
writeInt64
writeInt8
writeLengthPrefixedString
writeStream
writeString
writeUInt16
writeUInt32
writeUInt64
writeUInt8
timer
cancel
setForOffset
setForTime
utilities
minimizeWorkingMemory
boxelyRenderer
sceneListener
beforeSceneClose
onSceneClosed
onSceneOpen
appUtils
TRANSFER_OPERATION_BLOCK
TRANSFER_OPERATION_COPY
TRANSFER_OPERATION_LINK
TRANSFER_OPERATION_MOVE
TRANSFER_OPERATION_NONE
accHighContrast
accScreenReader
accTheme
desktopHeight
desktopWidth
mouseWheelScrollLines
mouseX
mouseY
workAreaHeight
workAreaWidth
workAreaX
workAreaY
boxURLToPath
browseFolderDialog
colorDialog
enumFonts
fontDialog
generateGUID
getString
hasAutohideBar
monitorRectFromPoint
openFileDialog
playSound
saveFileDialog
saveFontOutline
trimWorkingSet
bitmap
height
src
styleURL
width
deleteBitmap
getStyle
save
setStyle
setThumbHeight
setThumbSize
setThumbWidth
box
anchor
blockEvents
bottom
boxHeight
boxType
boxWidth
boxX
boxY
childCount
collapsed
contentChildCount
contentHeight
contentWidth
customAttributes
data
disabled
dragHovered
dragged
firstChild
firstContentChild
flowed
focused
frameX
frameY
gadgetParent
grew
height
hidden
hovered
id
ignoreEvents
intrinsicHeight
intrinsicWidth
lastChild
layered
left
maxHeight
maxWidth
minHeight
minWidth
nextBox
nextSibling
ornament
overflowHeight
overflowWidth
overflowed
parent
popped
pressed
previousBox
previousSibling
right
scene
screenX
screenY
scrollOffsetX
scrollOffsetY
selectableMode
selected
styleId
tag
top
width
zIndex
addAttributeEventHandler
addChild
addContentChild
addDOMObject
addEventHandler
addKeyEventHandler
attachSourceSnapshot
attachTargetSnapshot
blur
clone
cloneAndInsert
connectObject
createSnapshot
createTransition
deleteChild
deleteContentChild
deleteContentChildren
detachSourceSnapshot
detachTargetSnapshot
disconnectObject
dispatchEvent
equals
focus
getAttribute
getBindingById
getBoxByTag
getChildAt
getChildIndex
getDataBinding
getEventHandlerAction
getKeyEventActions
getMouseEventActions
getPartById
getStyle
getStyleString
hasDataBinding
importScript
insertChildAt
insertContentChildAt
moveToBottom
moveToTop
removeAttribute
removeChild
removeContentChild
removeDOMObject
removeEventHandler
removeStyle
renderTargetSnapshot
scrollBy
scrollToBox
scrollToRow
sendMessage
setAttribute
setStyle
setStyleVal
command
action
disabled
id
update
execute
getAttribute
setAttribute
commandEvent
command
message
commandGroup
commandCount
commands
id
addCommand
getCommandById
removeCommand
contextMenuEvent
boxX
boxY
frameX
frameY
generatedByKeyboard
screenX
screenY
controlBox
label
toggled
tristate
value
click
command
dataBinding
bindMethod
bindType
collectionSourceId
defer
elementSource
elementSourceId
id
objectSourceId
path
replicationMethod
sourceTransformer
target
targetId
targetProperty
targetTransformer
updateMethod
validator
connect
disconnect
update
validate
dhtmlBox
EExecOptions
EReadyState
charset
clientHeight
clientWidth
defaultFont
dom
editable
embeds
href
html
htmlSelection
modified
mshtmlExtensions
readyState
scrollHeight
scrollLeft
scrollTop
scrollWidth
security
text
textSelection
windowHandle
addDHTMLDOMObject
addListener
addServiceManager
clear
emptyUndoBuffer
enableFeature
execCmd
hasContent
loadStream
loadURL
queryCmdEnabled
queryCmdSupported
queryCmdValue
queryFeatureEnabled
removeDHTMLDOMObject
removeListener
removeServiceManager
save
scrollBy
scrollTo
setCaretPos
dhtmlEvent
readyState
target
url
domEvent
currentBox
originalTargetBox
paramsDictionary
relatedTargetBox
dragEvent
canDrop
operation
sourceBox
sourceData
event
targetBox
type
enablePropagation
preventDefault
propagateScenes
stopPropagation
factory
createBitmap
createEvent
createPoint
createRect
createTransferData
gadget
attributeList
handleBox
next
referenceBox
target
imageBox
bitmap
src
key
alt
command
ctrl
id
key
shift
keyEvent
keyCode
virtualKeyCode
keyGroup
id
keyCount
keys
addKey
getKeyById
removeKey
library
firstResource
nextResource
resourceCount
addResource
getResourceById
removeResource
messageEvent
message
mouseEvent
boxX
boxY
button
detail
frameX
frameY
screenX
screenY
mutationEvent
attributeName
objectBox
classid
control
params
progid
windowHandle
execCmd
queryCmdEnabled
queryCmdSupported
point
x
y
rangeBox
pageSize
pagingDirection
coordsToTicks
rect
bottom
height
left
right
top
width
x
y
resource
id
library
tag
scene
commandGroupCount
commandGroups
defaultButton
focusedBox
keyGroupCount
keyGroups
library
name
paramsDictionary
parentScene
rootBox
savedFocusedBox
url
waiting
addCommandGroup
addDOMObject
addKeyGroup
advanceFocus
alert
close
confirm
connectObject
createBox
destroyBox
disconnectObject
displaySystemMenu
doesKeyCodeMatch
flashWindow
getBoxById
getBoxesByTag
getCommandById
getCommandGroupById
getKeyGroupById
getResourceById
importCode
importLibrary
layout
openDialog
openSheetDialog
paint
prompt
removeCommandGroup
removeDOMObject
removeKeyGroup
replaceLibrary
rewindFocus
seekFocus
sendMessage
setThemeForAlias
sceneBox
paramsDictionary
scene
selectBox
cursorBox
cursorData
cursorIndex
firstVisibleRowIndex
lastVisibleRowIndex
rowCount
selectedBox
selectedIndex
selection
sortColumn
contractRow
deleteAllItems
deleteItem
deleteSelectedItems
expandRow
getBoxAtRow
getFirstRowBox
getIsRowVisible
getNextRowBox
getRowOfBox
selectAllItems
setCursorRowData
sortByValue
selection
firstSelectedData
firstSelectedRow
nextSelectedData
nextSelectedRow
rowCount
selectionIndex
clear
select
selectData
selectRow
unselectData
unselectRow
selectionData
collection
value
selectionEvent
index
oldIndex
shell
clipboard
currentData
currentEvent
currentEventTargetBox
factory
isPopupOpen
sceneCount
addDOMObject
closeScene
getIconForFile
getSceneAt
getSceneByName
openScene
openSceneAndWait
print
removeDOMObject
replaceLibrary
snapshot
thumbnail
styleRect
bottom
left
right
top
styleVariant
colorValue
floatValue
intValue
isNull
keywordValue
rectValue
stringValue
unit
systemEvent
reason
textBox
selectionEnd
selectionStart
execCmd
queryCmdEnabled
queryCmdSupported
replaceSelection
setCaretPos
setRelatedPopupBox
setSelection
transferData
count
addStream
addString
getFormatAt
getStreamAt
getStringAt
hasFormat
transition
duration
dynamicsType
fillColor
type
perform
uiEvent
altKey
ctrlKey
shiftKey
userEvent
type
windowBox
active
alwaysOnTop
chromeless
dock
floating
title
translucent
windowHandle
windowPlacement
bringToFront
fitOnScreen
maximize
minimize
restore
setAutoHideBar
http
requestListener
error
onError
onResponse
request
flags
proxy
cancelAllRequests
closeKeepAlive
get
post
postWithOptions
sendRequest
sendRequestWithOptions
localStorage
factory
folderType
createKeyDatabase
createKeyDatabaseForLocalMachine
createSQLDatabase
createSQLDatabaseForLocalMachine
deleteData
deleteDataForLocalMachine
getFolder
getFolderForLocalMachine
keyDatabase
identity
getValueForKey
getValueForKeyWithDefault
keyExists
listKeysWithPrefix
removeKey
removeKeysWithPrefix
setValueForKey
sqlDatabase
identifierForStorageDomain
executeSQL
getLastRowId
getTableVersion
queryGetNumber
queryGetString
setTableVersion
tableExists
maxiXML
domDocument
docType
documentElement
namespaceURI
readyState
createElement
getElementsByTagName
domElement
tagName
getAttribute
getElementsByTagName
removeAttribute
setAttribute
domNode
childNodes
dataType
firstChild
lastChild
nextSibling
nodeName
nodeType
nodeValue
parentNode
previousSibling
text
appendChild
hasChildNodes
insertBefore
removeChild
selectNodes
selectSingleNode
factory
createDOMDocument
createDOMDocumentFromPath
createEmptyDOMDocument
performXSLTTransform
nodeList
length
item
nextNode
reset
xmlHTTPRequest
readyStateValue
onreadystatechange
readyState
responseText
responseXML
status
statusText
abort
getAllResponseHeaders
getResponseHeader
open
send
sendXML
setRequestHeader
serviceManager
serviceManager
createInstance
urlData
controller
canonicalizeURL
downloadURLToStream
urlDispatcher
controller
dispatchURLToOS