presentation

Visualisierungsportale für
Unternehmensdaten (IT, BI)
mit Visio und SharePoint
Šenaj Lelić
V-TSP
Microsoft Schweiz
Vortrag- Text
Viele kennen Visio als Tool für Flussdiagramme,
Organigramme und Netzwerkdokumentationen. Dabei
verkennt man schnell, dass Visio eigentlich auch eine
sehr mächtige Graphikengine ist, die für viele
Visualisierungsaufgaben anprogrammiert werden kann.
Diese Session zeigt die Grundlagen der Visio Engine und
führt in die zwei Programmierumgebungen innerhalb
von Visio ein. Damit erstellte Diagramme können dann
mit SharePoint 2010 und den Visio Services publiziert
werden. Der Publikationsmechanismus der Visio Services
hat ebenso ein API welches für die programmatische
Steuerung und Navigation verwendet werden kann und
so die reine Publikation mit Funktionen erweitert.
Warum brauche ich Visio?
Netzwerkportale mit Monitoring
Prozessportale
Visualisierung von AD, SharePoint und sonstigen
Infrastrukturen
Eigene graphische Visualisierungen
Wieso Visio ?
Fertige graphische Engine
Einfach einzubinden (ActiveX, Direkte Ansteuerung,
Add-In)
Mächtige 2D Visualisierung für Diagramme (kein
Zeichenprogramm)
Standard-Microsoft Office-Tool UND Applikation
Agenda
Visio ShapeSheet – „das unbekannte Wesen“
Grundlagen im ShapeSheet
Visio Automation – „kennt man so ein wenig“
Programmierung im Objektmodell
Visio als Komponente – Das Visio Drawing Control
Einbetten und nutzen – ein paar Grundgedanken
Visio Services – Visio goes SharePoint
Grundlagen Visio Services
Nutzung und Programmierung der Visio Services
Visio Shapes
ShapeSheet Grundlagen
Das ShapeSheet
Ist die erste Programmierumgebung von Visio
Ist essenziell für die Nutzung UND Programmierung
in Visio
Ist wie ein „graphisches Excel“
Was der Anwender tut landet im ShapeSheet
Poweruser und Programmierer arbeiten direkt im
ShapeSheet
Grundlagen ShapeSheet
Der Inhalt einer Zelle heisst IMMER Formel (auch
wenn nur eine Ziffer drin steht)
Kann als Formel oder als berechneter Wert
eingesehen und genutzt werden (Wichtig im
Objektmodell)
Ist etwas USA-lastig 
Besteht aus Zellen und Zellbezügen
Demo 1
Einführung in das ShapeSheet
Programmierung im
ShapeSheet
Besteht aus dem Setzen von Zellformeln und –
funktionen
Das Visio ShapeSheet kennt hunderte von Funktionen
Mathematische
Geometrische
Logische
Relationale
ALLES was das Shape ausmacht, steht im ShapeSheet
Ausnahme: der Text des Shapes
ShapeSheet - 2
Jede Shape hat einen externen und internen Namen
Extern: Prozess.3
Intern: Sheet.5
Achtung: die IDs müssen NICHT übereinstimmen
Das ShapeSheet ist für EIN Shape definitorisch
ShapeSheet-Referenzen können auf andere Shapes und
Zeichenblätter gehen, jedoch die Datei nicht verlassen
Demo 2
ShapeSheet - 2
ShapeSheet - 3
Viele Eigenschaften des Shapes sind NUR über das
ShapeSheet erreichbar, es gibt hierfür KEINE
„Properties“ im Objektmodell
Beispiele:
Farbe in „FillForeGnd“
Breite in „Width“
Schutzfunktionen in „Protection“
Einfache „Shape-Events“ in „Events“
ShapeSheet - 4
Kenntniss des ShapeSheets ist UNERLÄSSLICH für
die Visio-Programmierung
Vorteil: die Logik liegt im Shape, nicht im Code
Deployment: Weitergabe der Schablone
Regel:
S
F
„Shapes First, Then Code“
T
C
ShapeSheet – Zus.fassung
Das Shape ist das ShapeSheet ist das Shape
Das ShapeSheet ist die Grundlage von allem
Viele Lösungen nutzen NUR das ShapeSheet
Visio Lösung := Vorlage + Schablone (+evtl. Code)
Wer Excel kann, kann auch das ShapeSheet
Visio - Code
Automation in Visio
Visio Automation
Programmierung gegen das Visio-Objektmodell
Verfügbar:
in jeder COM-Fähigen Sprache (VBA, VB6, C++)
In .NET über PIAs, C#, VB.NET etc..
Empfehlung:
Visio ab 2007 (bedingt durch Deployment NICHT
durch Code
Code auch bei 2003 möglich
Grundlegender Einstieg
Oberstes Element: Visio.Application
Dann hierarchisch:
Documents->Document->Pages->Page>-Shapes>Shape
Generell: Cells->Cell, aber andere Art von Coding!
Cells („ZellennameAusSHapeSheet“).
Programmierung am Shape
Cells.(„Zellenname“) kann als Wert oder als Formel
übergeben und ausgelesen werden:
Cells.(„XX“).Formula= String der Formel
Cells.(„XX“).Result(VisEINHEIT) = Wert
VisEINHEIT: visMilimeters, visSeconds etc..
Wichtig: übergeben Sie die richtige Einheit
Alternativ: resultStr – gibt den Inhalt immer als
(berechneten !) String zurück
Programmierung - Auswahl
Programmierung über externe EXE (Add-On)
Programmierung über Einbetten (Drawing Control)
Programmierung über In-Memory-Dll (Add-In)
ACHTUNG: Änderung von Visio 2003 zu 2007 (dann
aber konsistent mit anderen Office Add-Ins) im
Deployment
Demo 3
Visio Objektmodell - 1
Automation - 2
Prototyping in VBA ist Immer noch OK
Tip: Makro-Rekorder für „ungewöhnliche“ Zugänge
im Objektmodell
Bei Add-Ins
Application Objekt ist direkt im Application-Fields der
ThisAddin-Klasse verfügbar
Add-Ins: In-Process-Memory. Erweiterungen von Visio
Werden aber IMMER mitgeladen, also schonendes
Ressourcenhandling nötig
Dateikennezichnung über ShapeSheet
Demo 4
VBA und Makro-Rekorder
Demo 5
Visio Drawing Control und
Add-Ins
Hinweise
Das Objektmodell war bis Visio 2007 für alle
Editionen (Standard, Professional) identisch
Ab Visio 2010 blockiert das Objektmodell Aufrufe
die nicht der Edition entsprechen, bsp:
Diagram Validation: Premium only
Data Connectivity: ab Professional
Generell: bis auf Application – kein new nötig und
auch nicht unterstützt!
Visio Automation – Zsfssg.
Automation ist „die halbe Miete“
Jeder Aspekt, der nicht über das ShapeSheet zu
erreichen ist, ist per Code ansprechbar ( und Zellen
über das ShapeSheet)
Es bestehen diverse Einbindungsmöglichkeiten
Visio Services
Publikation von Diagrammen
Visio Services - Überblick
Visio Services – eine Komponente von SharePoint 2010
Grundlagen: Visio Services ist ein
PUBLIKATIONsmechanismus
Anwendung: Visio Web Access Webpart
Datenaktualisierung: Datenquellen werden aktualisiert
– und damit Datengrafiken
Endanwender-sicher: Diagramme können NICHT in
Visio Services geändert werden
Poweruser-sicher: Berechtigte Anwender KÖNNEN
die Diagramme ändern – im Visio Client
Demo 6
Visio Web Access Webpart
Grundlagen zu Visio Services
Visio Services:
Komponente von SharePoint Enterprise Server
Reine Publikation, ohne Diagrammänderung
MIT Aktualisierung der Datengrafiken (!)
Speicherung in speziellem – neuen – Format nötig:
Visio for Web oder Visio Webdrawing (VDW)
Zeigt sich dem Anwender als „Visio Web Access“
Webpart
Das Visio Services Webpart unterstützt WebpartConnections
Datenverknüpfungen in
Visio
Services
Unterstützte Data Sources
SQL
SharePoint Lists
Excel Services
OLE DB / ODBC
Custom Data Adapters
Nicht unterstützt
Access / Excel (JET & ACE)
SQL Analysis Services
Visio Services für den
Programmierer und Poweruser
Die Visio Services haben ein API: Mashup API
Das API steht z.B. als JavaScript zur Verfügung
Visualisierung von Shapedaten in anderem
Webpart über JavaScript Komponente
Highlightning von Shapes in Visio Web Access
Diagramm
Get Drawing URL and Page
Name
From
Provider sendet document URL
Consumer lädt das Diagram zur Ansicht
Page Name nur über SharePoint Designer konfigurierbar
Get Shapes to Highlight
From
Provider sendet Liste von Shape Namen
Consumer betont die angegebenen Shapes
Highlight Color nur über SharePoint Designer konfigurierbar
Get Filter Results From
Provider sendet Shape Data Werte
Consumer betont Shapes mit passenden Werten
Get Shape to View From
Provider sendet Shape Namen
Consumer zentriert Sicht auf das angegebene Shape
Zoom Level nur über SharePoint Designer konfigurierbar
Send Shape Data To
Provider ist hier VWA
Auswahl welche Daten an den Consumer gehen
Consumer verarbeitet die Argumente
Multiple Argumente nur über SharePoint Designer
Einschließlich der betroffenen Shape Data Felder
Connections verbinden
Web part page kann viele connection beinhalten
Aber: nur eine connection per connection Definition
Visio Services JavaScript API
JavaScript basiert
Programmatischer Zugriff auf
Shape Data
Hyperlinks
Ausrichtungsfeld-Koordinaten
Ebenso:
Highlight shapes
Overlays für das Diagramm
Mouse events beantworten
Pan und Zoom properties ändern
API Szenarien
Events im Diagramm bewirken Änderungen auf der
Seite
OnClick()
{
for (var j = 0; j < data.length; j++)
{
if (data[j].label == "Step")
{
document.getElementById('StepData').src=
"http://localhost:8080/details.aspx?ID=" + "'" + data[j].value + "'";
return;
}
}} // NOTE: this is pseudo code.
API Szenarien
Events auf der Seite triggern Änderungen im
Diagramm
OnClick()
{
shapes = page1.getShapes();
foreach shape in shapes
{
if (shape.data[0].value = TextBox.value)
{
shape.addHighlight();
}
}
} // NOTE: this is pseudo code.
Visio Services JavaScript API
VWA
Control
getActivePage()
setActivePage()
diagramComplete
Page
getShapes()
shapeMouseEnter
Shapes
shapeMouseLeave
selectionChanged
getItemById()
getItemAtIndex()
diagramError
Shape
Shape
getSelectedShape()
setSelectedShape()
getShapeData()
getHyperlinks()
Visio Services API
VWA Instanz und an events anbinden
//------------------------------------------------------------------------------------------------// Wait till the Visio Web Access HTML & Script has been sent
// down from the server and create a VwaControl Object
//
// Also add handlers for the onDiagramComplete & shapeSelectionChanged
//------------------------------------------------------------------------------------------------Sys.Application.add_load(onApplicationLoad)
function onApplicationLoad()
{
vwaControl= new Vwa.VwaControl("WebPartWPQ3");
vwaControl.addHandler("diagramcomplete", onDiagramComplete);
}
vwaControl.addHandler("shapeselectionchanged",
shapeSelectionChangedHandler);
Visio Services API
selectionChanged
für Shape Data handlen
function shapeSelectionChangedHandler(source, shapeId)
{
var vwaPage = vwaControl.getActivePage();
var vwaShapes = vwaPage.getShapes();
var vwaShape = vwaShapes.getItemById(shapeId);
var data = vwaShape.getShapeData();
for (var j = 0; j < data.length; j++)
{
if (data[j].label == "Step")
{
document.getElementById('StepData').src=
"http://vsdemo02:8080/processImproved.aspx?ID=" + "'" +
data[j].value + "'";
}
}
return;
Visio Services API
Overlays nutzen
vwaShape.addOverlay(
"myOverlay" + j,
generateOverlayMarkup(vwaShape),
Vwa.HorizontalAlignment.center,
Vwa.VerticalAlignment.middle,
shape.getBounds().width,
shape.getBounds().height);
function generateOverlayMarkup…
var shapeWidth = shape.getBounds().width;
var shapeHeight = shape.getBounds().height;
// Data for path is clock-wise from top left
return "<Path Stroke=\"Red\" StrokeThickness=\"2\" Fill=\"#00000000\"
Data=\"M0,0 L" + shapeWidth + ",0 L" + shapeWidth + "," + shapeHeight + "
L0," + shapeHeight + "z\" \/>";
Objekt: VWA
Properties
Version
diagramURL
displayMode
Methoden
getDiagramURL
openDiagram
refreshDiagram
getActivePage – setActivePage
getAllPageIDs
isShapeInView
Objekt: Page
Methods
getSelectedShape - setSelectedShape
centerViewOnShape
getSize
getID
getShapes
getPosition – setPosition
getZoom – setZoom
isShapeInView
Objekt: Shapes
Properties
Count
Methods
getItemAtIndex
getItemByID
Objekt: Shape
Properties
ID
boundingBoxLeft – boundingBoxRight
boundingBoxTop - boundingBoxBottom
Methods
getID
getBounds
getShapeData
getHyperlinks
addHighlight – removeHighlight (rectangle)
addOverlay – removeOverlay (html or xaml)
Demo 7
Visio Services – komplexeres
Szenario
51
Zusammenfassung
Visio Web Access Web Part
Erzeugung einfacher Dashboards mit
automatischem Refresh
Web Part Connections
Für Poweruser: erlauben mash ups ohne
Code in JavaScript
JavaScript API
Mächtige Dashboard Applikationen mit
Javascript, html, asp, etc.
Visio 2003-2010
Das Dateiformat ist das GLEICHE (Ausnahme: VDW)
Alle Lösungen auf ShapeSheet-Basis funktionieren von
2003 – 2010 gleichermassen
Funktionen werden „stummgeschaltet“ sind aber „aktiv“
wenn die richtige Plattform die Datei öffnet
AUSNAHME: Addins wie Flowchart (Code-Abhängigkeit)
Links und Referenzen
Visio 2010 SDK
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=1c
dbb7e7-6bd4-488f-91bd-7bd732dbf378&displaylang=en
Visio Services
http://technet.microsoft.com/en-us/library/ff829834.aspx
Demo-Environment:
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=7
51fa0d1-356c-4002-9c60-d539896c66ce&displaylang=en
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
PowerPoint template
Example of a slide with a subhead
Set the slide title in “Sentence case”
Set subheads in “Sentence case”
Set subhead to 60pt to match the title size
The subhead color is defined for this template but must be
selected; In PowerPoint 2007/2010, it should match the section title
color
Hyperlink color: www.microsoft.com
Bar chart
Line chart