Š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