Tip:
Highlight text to annotate it
X
GoJS is a JavaScript library for implementing interactive diagrams
in HTML5 Canvas applications. The samples that are included with GoJS
all have a very simple model for where the data for the sample is and that's
in the html and javascript
for the sample
in other words...
all our samples are just client they're not client-server.
The purpose of the samples is to show how to do diagrams with GoJS with
a minimum of fuss so that's how it should be.
But the whole point of
a browser based application is that it actually stores some data
somewhere on the server so that you can retrieve and view and edit the
documents that you've created later,
so this tutorial is to show how to build a simple ASP.NET MVC
Web API server
and a minimal orgchart client and show you how to put those two things together.
The org chart were going to build looks like this...
and we will start by doing File > New Project
and we're going to pick
the template
the Visual C# web template and the ASP.NET MVC for web application
we're going to call it OrgChartWebAPI
and say okay
and
for a project template we're going to use Web API.
and Build that...
and there we have it ... now it's created a values controller by default...
We don't want that so we're going to delete that.
Now for an org chart you need employees in an org chart so we're going to create an
employee class
under the models we're going to add a class
and call it...
employee.cs
employee.cs
The employee
will have an ID
and
each employee has a BossID. This is the pointer to
the boss in the org chart
and each employee has
a Name
and a Title
and we won't get any fancier than that.
so that's our class that we need our model for
building so
will build that now
to add the model to the application and now
we need a controller for that... a Web API controller
so we'll add a controller
and we'll call this EmployeesController
and we'll call this EmployeesController
Now... it's
because we picked the Web API template the default here's an API
controller with Read Write actions using entity framework
our model class is Employee
and we'll let it create a new
org chart Web API context for the data context
and we'll add that
and let that all run (Build) ok...
so now we have
a controller that supports
GET, PUT, POST and DELETE HTTP operations
GET, PUT, POST and DELETE HTTP operations
to get
all the employees or a specific employee by ID
and
that's your Web API that's all been generated for you...
pretty clever, actually.
so if run this program now it's going to open
the home View
the index which is just a default
web MVC page...
but also note here that we also have
api/employees
And... if i do this
it goes off and it's actually the first time you do this it's off creating an
SQL database, so it's a little bit slow
and down at the bottom it says "do you want to open or save the employees"
from that URL I gave it.
It's two bytes... now there's no data in the database... what it's generating across
this Web API is JSON (JavaScript object notation) format data...
and the JSON for a null set is open square bracket, close square bracket,
so I won't show you but that's the two bytes that got generated from
localhost. So...
back to here we need to
populate the data
in the database so i have an org chart to show.
That involves using
the package manager... (and Entity Framework Database Migrations) I'm not going to show how that is done.
If you go to our web based,
text version of this tutorial, it will show a little bit more about how to do that.
Okay, so I've paused this and I've added some data.... let me show you the data table
here
the employees table
has eleven
employees from the Sopranos HBO show
and you can see
"Junior" is Employee ID 1
and Tony is (EmployeeID) 2 but his boss ID is Junior, so...
that's how the the pointer from employee to boss works.
So we'll get rid of that now,
and we will run this one more time...
and add our api/employees URL
and you'll note this time
we got 794 bytes of data so we're now getting in JSON
format the
data from the server.
And here's what that JSON data looks like with a little bit of
formatting added
each one of these employees is going to be a node in our OrgChart.
So now we can close that down. So now
we're done with the server. We've got
a web API and data in the database and a way using the URLs
to do the GETs.
So let's get started on the client-side. I need to add the go.js script
file
to the scripts. Now I've already copied it
into this directory, so I'm going to add existing item...
scripts and pick go.js,
and add that. And now I'm going to go down to the view
and just take the the default View that was generated
and
open that
and that's all nice but I'm just going to delete it...
at the top I'll put some
boiler plate for MVC,
and i'm going to create a section
called "scripts"
like that
and I'm going to
come down and I'm going to add
the base for the
html... a header,
and a which is called myDiagramDiv
and it has a one pixel border and it's 800 by 400 (width and height).
This is the location where the (element) will be created... GoJS creates the
canvas and only want you to create the DIV
and we manage that canvas creation inside of that.
Now we need a little javascript...
so the first thing we're going to add is a reference to go.js and
have a little section for some additional script here.
Now we need to load the diagram
when
the page loads, so
we're going to have a window onload function
which
creates a new go dot diagram
(That's GoJS)
and we point that at the DIV that we created in
the html
we set the initial content alignment to be center and
GoJS is a model view view model environment so
the model for the diagram
is a simple tree model
and the "nodeKeyProperty" is employeeID
and
"nodeParentKeyProperty" property is BossID.
And then we call the load function... Well, we don't have a "load" of function here, so we
need to paste that in here
and load is very simple
and it uses the Web API that we created... we use xmlhttp request
and
we call open on GET api/employees
and send that GET request
and then the response text is the JSON that
the Web API service sends back.
And we parse that into "nodeArray".
and nodeArray now is the list of employees
and...
we set the myDiagram model node array to nodeArray
and because we've set up the model in the diagram it knows how to look at that
data and
figure out the structure. So we now have
a complete program. We have created a diagram
we've told the diagram what its model is that it's a
tree structured data and the keys for that
and we've
told the model... here's your data.
so let's run this and see what it looks like...
so we're getting a diagram here...
But it doesn't look like an org chart yet... we're missing three things...
The first thing we're missing is a layout. By default, GoJS uses a simple
layout
that gives every node a unique position if it
doesn't have one. We haven't told it that the visual layout of of the data is
that of the tree, we have told that the data (model) is a tree format.
(2) We haven't given it a node template... we haven't told how to format each employee
but GoJS has a simple default template that it employs and that's why we're
getting the name here.
and (3) we haven't told it what a link looks like so we're just getting a straight
from - to arrow link.
from - to arrow link.
Let's go back then and some of those things
one of the time
we're going to first add a tree layout
so we'll come back here
and just under the model
we're going to
paste in
setting the diagram layout to be a go.TreeLayout and the angle is ninety
which is Down.
So now we'll it run again...
There. That looks a little more like an org Chart, it now understands the visual
structure of the data in addition to the structure of the where the links are.
So let's go back now...
and add in a Link template to tell what what the links should look like
and we will paste that in here...
We're telling
the Link template for the diagram to be
an orthogonal link
the has rounded corner of five
that it's relinkable in the user interface
and we're giving it a shape of with the stroke width of two and a
color
So, let's run that...
and see what that adds...
OK... another improvement...
Let's tell it what the node should look like
and we'll go here and just do a very simple node that formats the name
property
of the employee...
now this is
a go.Node object,
using auto layout... auto layout uses the first object that you give it as the
background shape
and then the next object as the foreground.
So we've created a shape which is a rounded rectangle which is one of
predefined figures and giving it a fill and a stroke
so that's the first object... the background shape. The foreground is now
the text block
with a margin of three (some room around the text)
and we're binding the
text value of that TextBlock to the data.Name
so the data binding is is being used here too
to fill in the name
in the node.
Let's run that...
So, now it looks like an Org Chart... we've added a tree layout
we've told of what the links look like and what the nodes look like. Let's go
back and add the title into the to the node. OK, now, to add two text blocks to give
us the name and the title
we need to take the second object and replace it was something that does
vertical stacking of
the two
Text Blocks that we're going to use, so
we're going to get rid of the text block that we have here and insert
a vertical panel object which then has two children: a text block which was the
Name like we have before
and text block which has the binding of
the text for this text block to Title.
and when we run this...
we now have a complete org chart...
at least of a read only version of it... we will do more work to add some
editing capabilities in the future video.
That's all for now.
Thank you very much.