Create your own Data Type editor

Tutorials

This section contains longer written tutorials on how to perform certain tasks with the new angular-based UI.

Our initial focus is getting developers up and running with their own property editors, and secondly we will focus on how to use the serverside support methods to hook into the clientside code from asp.net.

Getting up and running

There are 2 ways to get umbraco 7 running, either from source, or from one of the nightly builds.

Running a nightly build

This only works on windows with IIS or IISExpress

Building from source

You can run the client bits on osx and windows, or simple run the source from Visual Studio

Create your own editor

One of the big breaking changes in Umbraco 7 is the new format for property editors / data types. Get ahead by reading through our series on how to build your own:

Create an editor

The initial setup of the plugin, the manifest and files

Adding configuration

How we make the editor configurable so it becomes flexible and reusable

Intergrating services

How you can get access to all the standard services inside of Umbraco from your editor

Adding serverside data

How you can return your own custom data from the server to a property editor through a ApiController

Start developing

how the source code is structured

An overview of the different folders and files in the Umbraco 7 client project

Recommended reading

It is always recommended to have a clear understanding of the underlying framework, before you start building on top of it.

Html and css

For our html, css and various widgets, we use twitter bootstrap 2

Javascript application framework

For the underlying application framework we use AngularJS, there are plenty of really good ressources for learning but these are our preffered ones:

Environment

We use various tools to built the client-side code. This is to ensure that our javascript is automatically tested, our .less files are compiled, and that files are minified and linted.

For all these automated tasks, we use gruntjs which is a javascript based task-runner for node.js

it is highly recommended to read and understand the basics of grunt, and have a closer look at our gruntfile.js in the source, since this ties the entire application together.

http://umbraco.github.io/Belle/#/tutorials

 

About Nguyễn Viết Hiền

Passionate, Loyal
This entry was posted in C#, Umbraco. Bookmark the permalink.

Leave a comment