Šenaj Lelić V-TSPMicrosoft Schweiz
Visualisierungsportale für Unternehmensdaten (IT, BI) mit Visio und SharePoint
Vortrag- TextViele 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.
Netzwerkportale mit MonitoringProzessportaleVisualisierung von AD, SharePoint und sonstigen InfrastrukturenEigene graphische Visualisierungen
Warum brauche ich Visio?
Fertige graphische EngineEinfach einzubinden (ActiveX, Direkte Ansteuerung, Add-In)Mächtige 2D Visualisierung für Diagramme (kein Zeichenprogramm)Standard-Microsoft Office-Tool UND Applikation
Wieso Visio ?
Visio ShapeSheet – „das unbekannte Wesen“Grundlagen im ShapeSheet
Visio Automation – „kennt man so ein wenig“Programmierung im Objektmodell
Visio als Komponente – Das Visio Drawing ControlEinbetten und nutzen – ein paar Grundgedanken
Visio Services – Visio goes SharePointGrundlagen Visio ServicesNutzung und Programmierung der Visio Services
Agenda
ShapeSheet Grundlagen
Visio Shapes
Ist die erste Programmierumgebung von VisioIst essenziell für die Nutzung UND Programmierung in VisioIst wie ein „graphisches Excel“Was der Anwender tut landet im ShapeSheetPoweruser und Programmierer arbeiten direkt im ShapeSheet
Das 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
Grundlagen ShapeSheet
Einführung in das ShapeSheet
Demo 1
Programmierung im ShapeSheet
Besteht aus dem Setzen von Zellformeln und –funktionenDas Visio ShapeSheet kennt hunderte von Funktionen
MathematischeGeometrischeLogischeRelationale
ALLES was das Shape ausmacht, steht im ShapeSheetAusnahme: der Text des Shapes
ShapeSheet - 2Jede Shape hat einen externen und internen Namen
Extern: Prozess.3Intern: Sheet.5
Achtung: die IDs müssen NICHT übereinstimmenDas ShapeSheet ist für EIN Shape definitorischShapeSheet-Referenzen können auf andere Shapes und Zeichenblätter gehen, jedoch die Datei nicht verlassen
ShapeSheet - 2
Demo 2
ShapeSheet - 3
Viele Eigenschaften des Shapes sind NUR über das ShapeSheet erreichbar, es gibt hierfür KEINE „Properties“ im ObjektmodellBeispiele:
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-ProgrammierungVorteil: die Logik liegt im Shape, nicht im CodeDeployment: Weitergabe der Schablone
Regel: S F T C
„Shapes First, Then Code“
ShapeSheet – Zus.fassung
Das Shape ist das ShapeSheet ist das ShapeDas ShapeSheet ist die Grundlage von allemViele Lösungen nutzen NUR das ShapeSheetVisio Lösung := Vorlage + Schablone (+evtl. Code)Wer Excel kann, kann auch das ShapeSheet
Automation in Visio
Visio - Code
Visio Automation
Programmierung gegen das Visio-ObjektmodellVerfü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 CodeCode auch bei 2003 möglich
Grundlegender Einstieg
Oberstes Element: Visio.ApplicationDann hierarchisch:Documents->Document->Pages->Page>-Shapes->ShapeGenerell: 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 FormelCells.(„XX“).Result(VisEINHEIT) = Wert
VisEINHEIT: visMilimeters, visSeconds etc..Wichtig: übergeben Sie die richtige EinheitAlternativ: 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
Visio Objektmodell - 1
Demo 3
Automation - 2
Prototyping in VBA ist Immer noch OKTip: Makro-Rekorder für „ungewöhnliche“ Zugänge im Objektmodell
Bei Add-InsApplication Objekt ist direkt im Application-Fields der ThisAddin-Klasse verfügbarAdd-Ins: In-Process-Memory. Erweiterungen von VisioWerden aber IMMER mitgeladen, also schonendes Ressourcenhandling nötig
Dateikennezichnung über ShapeSheet
VBA und Makro-Rekorder
Demo 4
Visio Drawing Control und Add-Ins
Demo 5
Hinweise
Das Objektmodell war bis Visio 2007 für alle Editionen (Standard, Professional) identischAb Visio 2010 blockiert das Objektmodell Aufrufe die nicht der Edition entsprechen, bsp:
Diagram Validation: Premium onlyData 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
Publikation von Diagrammen
Visio Services
Visio Services - Überblick
Visio Services – eine Komponente von SharePoint 2010
Grundlagen: Visio Services ist ein PUBLIKATIONsmechanismusAnwendung: Visio Web Access WebpartDatenaktualisierung: Datenquellen werden aktualisiert – und damit DatengrafikenEndanwender-sicher: Diagramme können NICHT in Visio Services geändert werdenPoweruser-sicher: Berechtigte Anwender KÖNNEN die Diagramme ändern – im Visio Client
Visio Web Access Webpart
Demo 6
Grundlagen zu Visio Services
Visio Services:Komponente von SharePoint Enterprise ServerReine Publikation, ohne DiagrammänderungMIT 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“ WebpartDas Visio Services Webpart unterstützt Webpart-Connections
Datenverknüpfungen in Visio Services
Unterstützte Data SourcesSQLSharePoint ListsExcel ServicesOLE DB / ODBCCustom Data Adapters
Nicht unterstütztAccess / Excel (JET & ACE)SQL Analysis Services
Visio Services für den Programmierer und PoweruserDie Visio Services haben ein API: Mashup
APIDas API steht z.B. als JavaScript zur Verfügung
Visualisierung von Shapedaten in anderem Webpart über JavaScript KomponenteHighlightning von Shapes in Visio Web Access Diagramm
Get Drawing URL and Page Name From
Provider sendet document URLConsumer lädt das Diagram zur Ansicht
Page Name nur über SharePoint Designer konfigurierbar
Get Shapes to Highlight From
Provider sendet Liste von Shape NamenConsumer betont die angegebenen Shapes
Highlight Color nur über SharePoint Designer konfigurierbar
Get Filter Results From
Provider sendet Shape Data WerteConsumer betont Shapes mit passenden Werten
Get Shape to View From
Provider sendet Shape NamenConsumer zentriert Sicht auf das angegebene Shape
Zoom Level nur über SharePoint Designer konfigurierbar
Send Shape Data ToProvider ist hier VWA
Auswahl welche Daten an den Consumer gehenConsumer verarbeitet die Argumente
Multiple Argumente nur über SharePoint Designer
Einschließlich der betroffenen Shape Data Felder
Connections verbinden
Web part page kann viele connection beinhaltenAber: nur eine connection per connection Definition
Visio Services JavaScript API
JavaScript basiert
Programmatischer Zugriff aufShape DataHyperlinksAusrichtungsfeld-Koordinaten
Ebenso:Highlight shapesOverlays für das DiagrammMouse events beantwortenPan und Zoom properties ändern
API SzenarienEvents 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 SzenarienEvents 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 APIgetActivePage()
setActivePage()
getShapes()
getItemById() getItemAtIndex()
diagramComplete
shapeMouseEnter
shapeMouseLeave
selectionChanged
diagramError
getSelectedShape()setSelectedShape()
VWA Control
Page
Shapes
Shape
getShapeData()getHyperlinks()
Shape
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 handlenfunction 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 APIOverlays 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 leftreturn "<Path Stroke=\"Red\" StrokeThickness=\"2\" Fill=\"#00000000\" Data=\"M0,0 L" + shapeWidth + ",0 L" + shapeWidth + "," + shapeHeight + " L0," + shapeHeight + "z\" \/>";
Objekt: VWAProperties
VersiondiagramURLdisplayMode
MethodengetDiagramURLopenDiagramrefreshDiagramgetActivePage – setActivePagegetAllPageIDsisShapeInView
Objekt: Page
MethodsgetSelectedShape - setSelectedShapecenterViewOnShapegetSizegetIDgetShapesgetPosition – setPositiongetZoom – setZoomisShapeInView
Objekt: Shapes
PropertiesCount
MethodsgetItemAtIndexgetItemByID
Objekt: ShapeProperties
IDboundingBoxLeft – boundingBoxRightboundingBoxTop - boundingBoxBottom
MethodsgetIDgetBoundsgetShapeDatagetHyperlinksaddHighlight – removeHighlight (rectangle)addOverlay – removeOverlay (html or xaml)
Visio Services – komplexeres Szenario
Demo 7
51
ZusammenfassungVisio Web Access Web Part
Erzeugung einfacher Dashboards mit automatischem Refresh
Web Part ConnectionsFür Poweruser: erlauben mash ups ohne Code in JavaScript
JavaScript APIMächtige Dashboard Applikationen mit Javascript, html, asp, etc.
Visio 2003-2010Das Dateiformat ist das GLEICHE (Ausnahme: VDW)Alle Lösungen auf ShapeSheet-Basis funktionieren von 2003 – 2010 gleichermassenFunktionen werden „stummgeschaltet“ sind aber „aktiv“ wenn die richtige Plattform die Datei öffnetAUSNAHME: Addins wie Flowchart (Code-Abhängigkeit)
Q&A
Links und ReferenzenVisio 2010 SDK
http://www.microsoft.com/downloads/en/details.aspx?FamilyID=1cdbb7e7-6bd4-488f-91bd-7bd732dbf378&displaylang=en
Visio Serviceshttp://technet.microsoft.com/en-us/library/ff829834.aspx
Demo-Environment:http://www.microsoft.com/downloads/en/details.aspx?FamilyID=751fa0d1-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 templateSubtitle color
Example of a slide with a subheadSet the slide title in “Sentence case”Set subheads in “Sentence case”Set subhead to 60pt to match the title sizeThe 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
Category 1 Category 2 Category 3 Category 40
1
2
3
4
5
6
Series 1Series 2Series 3
Line chart
Category 1 Category 2 Category 3 Category 40
1
2
3
4
5
6
Series 1Series 2Series 3