Scaffolding a yFiles for HTML powered app using VSCode and TypeScript

Scaffolding a yFiles for HTML powered app using VSCode and TypeScript


Hi! In this short introduction I’m going
to show you how to scaffold your own yFiles for HTML powered graph
drawing web application. We’re going to use Visual Studio Code, the yeoman
generator to create a typescript powered application using webpack for hot
reloading and development. I assume you already downloaded the yFiles
package and unzipped the package into a convenient location. The package
contains the library, the tools, documentation, et cetera. Next we’re going
to create a new directory. So let’s just switch to the shell. We’re going to
create a directory “yfilestest”. Let’s change into that directory and next
we’re going to use yeoman. If you haven’t done so install yeoman using “npm
install -g yo” or “yarn”. I did that already.
Also make sure you have installed the yeoman generator specific for yFiles so
that would be “npm install -g generator-yfiles-app”. I did this already
– so now I can just go ahead and write “yo yfiles-app”. This will start the yeoman
generator and it will start by asking me for the application name which I can
just accept in this case. Next, it will ask me for the first time I call the
generator it will ask me for the location of the yFiles package. It will
remember this for the second time and you won’t be needing to do this. So I’m just
copying the the path to the package pasting it here. Next it will ask
where to find the license file if you have the evaluation version just hit
enter because the default will apply. Next it will ask us what kind of modules
we we want to use for loading the yFiles library. We usually recommend local
NPM modules because they work perfectly with code completion and with all the
major tool-chains like webpack and the CLI tools. For this example we are going to use
TypeScript but you could just as well use ecmascript 6 and the next question
is whether to scaffold a project structure for us – we’re going to use
this to make it easy for us to get started. So we’re going to create a
Visual Studio Code integration sample and we would like to use NPM for
downloading webpack and the various tools we require for the web
pack serving and for the live reloading, for the hot reloading and for compiling
the application. So it will now scaffold all the required files into the yfilestest application. As you can see there’s a “.vscode” directory so we’ll be able to
just open the the directory within Visual Studio Code and let’s wait.
Wait for it to finish – takes a few seconds the first time after that it
will cache the results the next time it should be much faster. So it will now scaffold the application
once it’s done we can also try it out directly
we’ll put it into an output folder for us to try You see, the files aren’t minimised yet so it takes a while. Okay here we go so let’s start Visual Studio
Code in the directory and you’ll see that we have the package situation which
loaded the web pack the WebEx CLI and the dev server as well as the babel
tool-chain and the typescript loader and we also see that we are using yfiles as
our first dependency and right now it’s loaded from a local file
system and there’s three scripts available: production, dev, and start
actually there’s also the option to run a tasks so we can just hit NPM start
this will again start the webpack dev server and open the browser for us it
will now compile the the application meanwhile we can take a look at the
script sources so here’s the typescript file and it’s a simple application that
just instantiates the graph component (creates a few…) configures the styles,
creates a few nodes and runs an automatic layout as you can see a we got
working code completion so we can inspect the property, the parameters
that we have, get code completion and we know what type we can use for the
various options we can create a new node “graph.createNode” look at the
documentation read the documentation see the code examples copy them and let’s
see whether it’s already done now. Takes a while; typescript is a bit slower
but now it’s almost done here we have the graph so two nodes in the sample
application let’s create another node and give it a different size so as you
can see if I use the wrong number of arguments it will complain rightfully
because layout accepts four arguments for X Y width a height I could
also be using this variant where there’s X 50 Y 50 with 100 and completion as you
can see works right 100 so it’s a large node just hit control-s it will
recompile directly reload the application. Yeah – here’s the bigger node.
perfect! fine. That’s it. So, have fun writing your typescript application!

Leave a Reply

Your email address will not be published. Required fields are marked *