Abstract:
WPF enables new scenarios, in particular regarding rich data visualization. In this session we will present an ongoing project at Zürich Airport, where a WPF based map is used to display near real time data about the airport. With this system it is possible in a blink of an eye to see the status of the airport, including landing and taking off airplanes with the relative information like delays, load, etc... At the beginning we will present the overall architecture of the system, and in particular how Service Oriented Architecture (SOA) helped in having all the data available and aggregated. Then we will focus on the WPF User Interface (UI) showing the application running and how to build the basic construct in WPF. This session has the goal of providing you with new ideas and scenarios combining WPF and SOA. We will also demonstrate the ease of use and productivity of WPF.
Auf diese Session bin ich jetzt wirklich gespannt. Ronnie war gestern (war ja auch schon bei uns) auch an der Swiss Country Night, Ich weiss, was er zeigen wird, wir haben und gestern noch darüber unterhalten. Es ist vor allem so, das für WPF immer die gleichen Demos gebraucht werden. Ronnie wird uns endlich eine "echte" Applikation zeigen.
Ronnie beginnt sehr witzig und macht sich auch gleich lustig über die Demo die man immer irgendwo sieht. Er erklärt, dass Zürich bei den letzten war in ganz Europa, wenn es sich um Verspätungen gehandelt hat. Nun, er wisse zwar nicht ob es sich wegen seiner App so Entwickelt hat, aber jetzt ist er nr5. Er erklärt, dass das Problem ist, irgendwie sinnvoll die grosse Menge von Daten darzustellen. Jetzt kommt die Demo. Wooow , geile Applikation !!
Man sieht die Map vom Flughafen Zürich. Ich sehe, welche Flugzeuge wo sind, ich sehe wie beladen die Flugzeuge sind etc. Einfach nur cool !
Was musste alles beachtet werden ?
Client Service Communication:
• Web Services Pull every 10 seconds
• Message is zipped
○ I don’t like the zip idea
• Get the last 10 seconds vector for the animation
• Plus all the additional information
○ Delays, Passengers load, Destination, Etc..
• Today, considering Duplex binding in WCF
• Still not the best in regarding of Firewall
○ Then two binding
§ Intranet: Duplex over TCP or HTTP and Binary
§ Extranet: HTTP/SOAP BasicProfile
• Need to host it outside IIS for TCP
○ WAS not yet available
• WCF doesn’t work for a XBAP deployment
○ WCF needs full trust, XBAP are partial trust by default
• Why WPF?
• Powerfull graphical engine
○ Takes advantage of GPU
• Full animations support
○ fully programmable
• Any visual element is a .NET object
○ Easy to create, manipulate and interact
• XAML
○ Nice separation UI/Code
○ Possibility to convert from other formats
• Used Expression Interactive Designer for XAML generation
• Great way to learn WPF
• Used Visual Studio for code behind and XAML editing
• Disabled Cidar
• Remember always to save when switching tool!
Nun zeigt Ronnie, wie er mit dem Interactive Designer das ganze gebaut hat. Er bringt das ganze sehr witzig rüber und hat viele Lacher auf seiner Seite.Die Flugzeuge sind buttons…
Cool Featurers:
• Controls are look less
• Choose them by behavior
• Can be completely restyled through templates
• Nice for changing look and feel of an application without changing code
○ Application face-lifting like Car face-lifting
• Template can be applied at design and at runtime
• Template binding
• Can expose inner property of a template as external property
○ E.g.. Fill of a Rectangle bound to a Button Background
• The coordinate system
• Double precision
• Can apply transformation to it
• I can use original Latitude and Longitude
○ Can position airplane based on lat/long coming from the radar
○ Simply flip the Y axis
• WPF ist nicht Resolution independent !!
• Data and Control binding
• Can bind data to any property
• Can also bind an element property to another element property
• Scalable and hierarchical vector engine
• Can transform an element and all the contained ones
• Super easy to build zoom or panning
Er zeigt nun, wie er aus dem Button ein Flugzeug macht. (Canvas)
Ist wirklich cool, und ich weiss, wie wir in Zukunft unsere UI's machen !!
Nun zeigt er, wie er wirklich die Verschiedenen Flugzeuge gezeichnet hat, Er nimmt eine svg Graphik und Konvertiert sie in Xaml. Somit kann er diese einfach importieren und der Button sieht nun wirklich aus wie ein Flugzeug, Das ganze ist schon sehr schön animiert und sehr schnell entstanden.
Woher stammen die Daten für die Koordinaten ?
• Where it comes from
• Airport GIS application
○ Original too detailed (e.g doors numbers)
○ Exported in SVG
○ SVG is XML so it is easy to convert in XAML
§ Watch out for scaling problems
§ We used XAML Pad as a conversion tool
□ Alternatively can build a XSLT
§ Every element has a name (e.g. Runway1) so it is very easy to interact with
• Er zeigt nun, wie er die Daten (XAML) importiert und er nun gleich die "Original" Map hat, die immer exact dem Original entspricht.
… Remeber, the airplaine is a Button.
Simply Zoom in:
Nun kommt die Erklärung, wie das ganze animiert wird. Cool ist auch, da das ganze ja vektor basiert ist, ich einen Zoom hinzufügen kann. So kann ich jetzt überall hinzoomen.
Nun wird noch das scroling hinzugefügt. Und fertig ist die App!
Jetzt implementiert er noch ein "Alarm" System. So dass die Leute, welche diese Applikation benutzen, auch gleich darauf aufmerksam gemacht werden, Er fügt dem Runway 1 Grau und Rot hinzu, und nun blinkt die Runnway…
Also jetzt bin ich voll von WPF überzeugt !!
Summary:
• When a company adopt SOA you have tons of data at your disposal
• The problem is how to visualize it
• WPF is an amazing technology for data visualization
• Easy to learn, fast to build
○ No need of DirectX or Direct3D special knowledge
• Quite performing
• Any technical visualization apps is a good candidate for WPF
○ F1 Racing simulation
○ Pollution visualization
○ Medical instruments visualization
○ Map based solutions
Ronnie, nicht weil ich dich kenne oder du einen Bonus bei mir hast, aber das war die Beste Session für mich an dieser TechEd! Es war die erste Demo, die Realitätsbezogen war, aus der ich einen Nutzen ziehen konnte und das ganze so nachvollziehen konnte, das ich es auch verstand ;-) und unterhaltsam war das ganze auch noch.
Keine Kommentare:
Kommentar veröffentlichen