Entwicklung von Desktopanwendungen mit Adobe Flex

Transcription

Entwicklung von
Desktopanwendungen mit
Adobe Flex
Lisa Florian
Gliederung
●
●
●
●
Grundlagen von Adobe Flex
–
Entstehung von Flex
–
Aufbau eines AIR-Projekts
–
Wer kann Flex-Anwendungen ausführen?
–
MXML
–
Actionscript
AIR – Adobe Integrated Runtime
Wichtige Klassen und Komponenten von Flex in
AIR
Entwicklung von eigenen Komponenten
Lisa Florian
Seite 2
Entstehung von Flex
1997: Macromedia veröffentlicht erste Version von Flash
1999: Flash Version 4:
Actionscript ermöglicht das Empfangen und Verarbeiten von Daten
2003: Flash MX 2004 (Version 7):
Actionscript 2.0 ermöglicht objektorientierte Programmierung
2005: Adobe übernimmt Macromedia
Später entstehen noch weitere Flash-Versionen und Actionscript 3.0.
Lisa Florian
Seite 3
Entstehung von Flex
Flash war unter Macromedia ein Animationswerkzeug.
=> Für Business-Applikationen schuf Macromedia Flex 1.0.
Flex basiert auf Flash.
2006 – Adobe veröffentlicht Flex 2.0:
kostenpflichtige Möglichkeit zur Serveranbindung
2008 – Flex 3.0:
BlazeDS – eine kostenlose Möglichkeit zur Serveranbindung
AIR – eine Laufzeitumgebung um Flex für Desktopapplikationen
verwenden zu können
März 2011 – Flex 4.0:
Optimierung der Compilerleistung
Spark-Komponentensatz
Zukunft: OpenSource Foundation?
Lisa Florian
Seite 4
Aufbau eines AIR-Projekts
●
●
●
●
Lisa Florian
die Hauptanwendungsdatei
(Projektaufbau.mxml)
eine Anwendungsdeskriptordatei
(Projektaufbau-app.xml)
einige Flex-Bibliotheken
(Dateien unter Flex 4.0)
das Kompilat der Anwendung
(Dateien unter bin-debug)
Seite 5
Webanwendung
Adobe Flash Player wird benötigt.
Verbreitung unklar:
● Adobe: 99% aller internetfähigen PCs
● Florian Müller (Autor): zwischen 60% und 98%
● Vermutlich hohe Verbreitung, da:
● Viele Seiten (z.B. Youtube) benötigen Flash-Player
● Google Chrome (Marktanteil im September 2011 bei 23,61%)
enthält den Flash-Player
Lisa Florian
Seite 6
AIR-Anwendung
Adobe AIR wird benötigt.
Juni 2010: über 300 Millionen Installationen laut Adobe
Zu dieser Zeit gab es etwa 760 Millionen Hosts im Internet.
=> Verbreitung von etwa 40%
Adobe Flash Player und Adobe AIR können kostenlos von Adobe
heruntergeladen werden.
Lisa Florian
Seite 7
MXML
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<s:Button label="Mein Button" id="button" x="10"
y="20"/>
</s:WindowedApplication>
Lisa Florian
Seite 8
MXML
<fx:Declarations>
●
●
●
Elemente innerhalb werden nicht gezeichnet.
Unsichtbare Komponenten (z.B. DateFormatter) müssen innerhalb von
fx:Declarations stehen.
Sichtbare Komponenten (z.B. Button) können innerhalb stehen, sind dann
aber vorerst nicht sichtbar.
Lisa Florian
Seite 9
Actionscript
Kann entweder in einer eigenen Actionscript-Klasse oder -Datei
geschrieben werden oder direkt in MXML eingebunden werden. Dazu muss
ein <fx:Script>-Tag geöffnet werden.
<fx:Script>
<![CDATA[
]]>
</fx:Script>
Lisa Florian
Seite 10
Actionscript
package mypackage
{
public class MyClass
{
public function MyClass()
{
}
protected var myNumber:Number;
private function myFunction(i:Number):Object{
var j:Number = i;
myNumber = j++;
return new Object();
}
}
}
Lisa Florian
Seite 11
Actionscript – Events
WindowedApplication Click Phase:1
Group Click Phase:1
Button Click Phase:2
Group Click Phase:3
WindowedApplication Click Phase:3
Lisa Florian
Seite 12
Actionscript – Events
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="creationCompleteHandler(event)"
click="wapp_clickHandler(event)">
<fx:Script><![CDATA[
import mx.events.FlexEvent;
protected function creationCompleteHandler(event:FlexEvent = null):void{
this.addEventListener(MouseEvent.CLICK, wapp_clickHandler, true);
group.addEventListener(MouseEvent.CLICK, group_clickHandler, true);
}
protected function button_clickHandler(event:MouseEvent = null):void{
trace("Button Click Phase:"+event.eventPhase);
}
protected function group_clickHandler(event:MouseEvent = null):void{
trace("Group Click Phase:"+event.eventPhase);
}
protected function wapp_clickHandler(event:MouseEvent = null):void{
trace("WindowedApplication Click Phase:"+event.eventPhase);
}
]]></fx:Script>
<s:Group id="group" click="group_clickHandler(event)">
<s:Button click="button_clickHandler(event)"/>
</s:Group>
</s:WindowedApplication>
Lisa Florian
Seite 13
Actionscript – Databinding
Databinding bedeutet, dass eine Datenquelle an eine andere gebunden ist.
So kann beispielsweise das Label eines Buttons immer den Wert haben, der
in einem TextInput angegebenen wird oder der in eine Variablen steht. In
Flex kann Databinding auch bidirektional sein.
[Bindable]
private var myText:String = "Hier Text eingeben";
<s:TextInput text="@{myText}" x="10" y="10"/>
<s:Label text="{myText}" x="10" y="40"/>
Lisa Florian
Seite 14
Gliederung
●
●
●
●
–
AIR-Anwendungen für TV-Geräte
–
AIR-Anwendungen für mobile Geräte
–
AIR-Anwendungen für den Desktop
–
Verteilung der Desktopanwendung
AIR
Lisa Florian
Seite 15
AIR-Anwendungen für TV-Geräte
●
Adobe: „im Wesentlichen identisch mit dem Entwickeln von AIRAnwendungen für andere Geräte“
●
Einzige Eingabemöglichkeit: Fernbedienung
●
Problem: Jede Fernbedienung ist anders aufgebaut
Lisa Florian
Seite 16
AIR-Anwendungen für mobile Geräte
●
Problem: Niedrige Prozessorgeschwindigkeit
●
Akku-Laufzeit
●
Problem: Kleiner Bildschirm
Lisa Florian
Seite 17
AIR-Anwendungen für den Desktop
Zusätzliche Möglichkeiten im Vergleich zu Webanwendungen:
●
Zugriff auf das Dateisystem
●
Lokale Datenbanken
●
Manipulation von Fenstern
Lisa Florian
Seite 18
Verteilung – Manuell
●
AIR-Datei wird auf den PC gebracht (z.B. als Download oder auf CD)
●
Doppelklick auf die Datei startet Installation oder Update
●
Die erste Installation muss immer auf diesem Weg erfolgen.
Lisa Florian
Seite 19
Verteilung – Halb automatisiert
●
AIR-Datei wird auf den PC gebracht (z.B. als Download oder auf CD)
●
Mit Updater-Klasse kann Update gestartet werden
●
Pfad und Version der neuen Datei müssen bekannt sein
●
Gefahr vor Endlosschleife
var updater:Updater = new Updater();
var file:File = File.desktopDirectory.resolvePath(
"Projektaufbau.air");
updater.update(file, "3");
Lisa Florian
Seite 20
Verteilung – automatisiert
●
AIR-Datei wird vom Server geladen und gespeichert
●
Mit Updater-Klasse kann Update gestartet werden
●
Versionsnummer kann direkt eingegeben oder vom Server geladen werden
●
Versionsnummer sollte überprüft werden
●
Internetverbindung wird benötigt
Lisa Florian
Seite 21
Lebenszyklus
Lisa Florian
Seite 22
Gliederung
●
●
●
●
AIR
–
Allgemein
–
spark.components.Button
–
mx.controls.DataGrid
–
spark.components.Group
Lisa Florian
Seite 23
Allgemein
Lisa Florian
Seite 24
spark.components.Button
Lisa Florian
●
Soll bei Klick eine Funktion ausführen.
●
Ändert bei mouseOver die Farbe.
Seite 25
mx.controls.DataGrid
●
●
Kann beliebig viele Spalten enthalten.
●
Jede Spalte hat headerText und dataField.
●
●
Lisa Florian
Wird zur Darstellung von Daten in einer
Tabelle verwendet.
Bekommt eine Liste mit Objekten als
dataProvider.
Jedes Objekt entspricht einer Zeile.
Seite 26
mx.controls.dataGridClasses.DataGridColumn
Lisa Florian
●
dataField
●
dataTipField
●
labelFunction
●
dataTipFunction
●
headerText
Seite 27
spark.components.Group
Lisa Florian
●
unsichtbare Komponente
●
enthält andere Komponenten
●
kein Scrollbalken oder Rahmen
●
Layouts
Seite 28
Gliederung
●
●
●
●
AIR
Lisa Florian
–
Vorbereitungen
–
Implementierung der grundlegenden Funktionen
–
Erweiterungen
–
ExpandableTextArea
–
Einbau der ExpandableTextArea
Seite 29
Vorbereitungen
●
●
Flex-Bibliotheksprojekt erstellen
Entscheidung zwischen ActionScript-Klasse und MXML-Komponente
● Interfaces oder MXML
●
Beispiel: MXML-Komponente, basiert auf spark.components.Group
●
Label und TextInput fest eingebauen
●
Projekteigenschaften → Flex-Erstellungspfad → Bibliothekspfad
●
Namespace definieren
Lisa Florian
Seite 30
●
Größe und Positionierung der Komponente änderbar
●
sinnvolle Standardwerte vorgeben
●
label und text im Script-Block definieren
●
Die Komponente kann nun verwendet werden.
Lisa Florian
Seite 31
<s:Group height="24" left="10" right="10"
minHeight="22">
<fx:Script>
<![CDATA[
[Bindable]
public var label:String = "";
[Bindable]
public var text:String = "";
]]>
</fx:Script>
<s:Label text="{label}" verticalCenter="0"
left="0"/>
<s:TextInput verticalCenter="0" left="140"
right="0" text="@{text}"/>
</s:Group>
Lisa Florian
Seite 32
Erweiterungen
●
vielfältig einsetzbar
●
direkter Zugriff auf Label und TextInput
●
weitere Eingabefelder
●
●
type
[Inspectable(enumeration="TextInput,CheckBox")]
selected analog zu text
Lisa Florian
Seite 33
Erweiterungen
●
mehrzeiliger Text → TextArea analog zu TextInput
●
Standardhöhe für TextArea größer
●
●
Problem beim Überschreiben der Höhe, wenn man diese mit Databinding
im MXML anpasst:
● Festlegen von type → Berechnen der Höhe → Überschreiben der Höhe
● Überschreiben der Höhe → Festlegen von type → Berechnen der Höhe
Setter von type prüft ob die Höhe -1 Pixel ist und ändert dann die Höhe
Lisa Florian
Seite 34
ExpandableTextArea
●
Problem der Größe
●
eigene Komponente
●
2 Klassen: Popup mit dem großen Textfeld und kleineres Textfeld
●
TextAreaPopup als MXML-Komponente basierend auf TitleWindow
●
close: PopUpManager.removePopUp(this);
●
TextArea: 10 Pixel Abstand, text bidirektional binden
●
Methode zum Öffnen, DisplayObject als Übergabeparameter
PopUpManager.addPopUp(this, parent);
PopUpManager.centerPopUp(this);
Lisa Florian
Seite 35
ExpandableTextArea
●
MXML-Komponente ExpandableTextArea, basiert auf TextArea
●
2 zusätzliche Attribute: title:String und par:DisplayObject
●
Der DoubleClickHandler überprüft, ob par gesetzt ist und öffnet ein
TextAreaPopup.
BindingUtils.bindProperty(this,"text",popup,"text");
BindingUtils.bindProperty(popup,"text",this,"text");
Lisa Florian
Seite 36
Einbau der ExpandableTextArea
●
Namespace definieren
●
TextArea durch ExpandableTextArea austauschen
●
par und title im LabeledInputField ergänzen
●
Ist title leer so wird dafür der Wert aus label verwendet.
Lisa Florian
Seite 37
Quellen
Das Aufrufdatum aller online verfügbaren Quellen ist, sofern nicht anders
angegeben, der 15.11.2011.
Professionelle Rich-Client-Lösungen mit Flex und Java von Florian Müller
Tour de Flex von Adobe Version 2.0
http://help.adobe.com/de_DE/air/build/air_buildingapps.pdf
http://livedocs.adobe.com/flex/3/html/help.html
http://livedocs.adobe.com/flex/3/html/help.html?content=events_02.html
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/
http://help.adobe.com/de_DE/flashbuilder/using/WSe4e4b720da9dedb524b8220
http://www.adobe.com/products/flashplatformruntimes/statistics.html
http://www.adobe.com/de/products/air/faq.html
http://blog.axxg.de/2010/11/verbreitung-des-flash-player-plugins/
http://www.webhits.de/deutsch/index.shtml?webstats.html
http://www.google.com/support/chrome/bin/answer.py?hl=de&answer=108086
http://www.tech-blog.net/googles-chrome-schon-bald-vor-mozillas-firefox/
http://www.chip.de/downloads/Google-Chrome_32709574.html
https://www.isc.org/solutions/survey/history
Lisa Florian
Seite 38
Quellen
http://www.adobe.com/de/aboutadobe/pressroom/pdfs/fastfacts.pdf
http://www.netgear.de/support/glossar/
http://www.adobe.com/de/devnet/flex/quickstart/coding_with_mxml_and_action
http://www.die-eigene-homepage-erstellen.de/php/
http://www.rz.rwth-aachen.de/global/show_document.asp?id=aaaaaaaaaacejhs
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/statements.
http://www.brianapps.net/sizer/
www.dpunkt.de/java/Anhang/Glossar/2.html
http://help.adobe.com/de_DE/flex/using/WS2db454920e96a9e51e63e3d11c0bf6
http://campusphere.de/flashtutorial/2008/10/22/flash-geschichte/
(02.12.2011)
http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4
(05.12.2011)
http://www.adobe.com/de/devnet/flex/articles/flex4sdk_whatsnew.html
(05.12.2011)
http://www.gulli.com/news/14731-ausserplanmaessiges-update-fuer-adobe-acro
(13.12.2011)
http://groups.adobe.com/index.cfm?event=page.index (13.12.2011)
Lisa Florian
Seite 39
Ende
Lisa Florian
Seite 40

Entwicklung von Desktopanwendungen mit Adobe Flex

Transcription

Documents pareils

EDV-Anforderungen für M3

Formular Dreamweaver

83457 Bayerisch Gmain - Gästehaus und Restaurant St. Florian

gRafiK-DaTEiENDuNgEN

Raum M 218

c. Keck - Christine Keck

Adobe Reader Update - Individuelle PC

Peloponnesischer Krieg

Bürger-Brunch

Digitaler Videoschnitt