Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Add-ons/UmbracoForms/Developer/Custom-Markup/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -214,7 +214,7 @@ Contents of the FieldType.Textfield.cshtml view:
@{if (Model.Validate) {<text> data-val-regex="@Model.InvalidErrorMessage" data-regex="@Model.Regex"</text>}}
/>

By default the form makes uses of jquery validate and jquery validate unobtrosive that's why you see attribute like data-val and data-val-required again this can be customized but it's important to keep the id of the control to @Model.Id since that is used to match the value to the form field.
By default the form makes uses of jQuery validate and jquery validate unobtrosive that's why you see attribute like data-val and data-val-required again this can be customized but it's important to keep the id of the control to @Model.Id since that is used to match the value to the form field.


### Customizing for a specific form
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ Then we will start building the view at `Views\Partials\Forms\Fieldtypes\FieldTy

The view simply takes care of generating the UI control and setting its value.

On the view, it is important to note that the id attribute is fetched from @Model.Id. You'll also see that we are using jquery validate unobtrusive to perform client side validation so that's why we are adding the data* attributes.
On the view, it is important to note that the id attribute is fetched from @Model.Id. You'll also see that we are using jQuery validate unobtrusive to perform client side validation so that's why we are adding the data* attributes.

## Umbraco backoffice view

Expand Down
2 changes: 1 addition & 1 deletion Development-Guidelines/Coding-Standards/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ _Coding standards and naming conventions for all languages used in the Umbraco c
### File names

* All file names throughout the solution will be **ProperCase/PascalCase** - this is extremely important for Visual Studio so that the generated class names follow the correct c# naming conventions
* **However**, there is one exception to this rule and in v7 the AngularJs project (*Umbraco.Web.UI.Client*) all files names need to follow the convention for that project which is that all file names are **lowercased**
* **However**, there is one exception to this rule and in v7 the AngularJs project (*Umbraco.Web.UI.Client*) all file names need to follow the convention for that project which is that all file names are **lowercased**

### C&#35;
When developing new Class Libraries we will be adhereing as closely as possible to the official guidelines as proposed by Microsoft [http://msdn.microsoft.com/en-us/library/ms229042.aspx](http://msdn.microsoft.com/en-us/library/ms229042.aspx)
Expand Down
43 changes: 22 additions & 21 deletions Development-Guidelines/Coding-Standards/jquery-guidelines.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# JQuery coding guidelines
# jQuery coding guidelines

_Ensure that you have read the [JavaScript Guidelines](js-guidelines.md) document before continuing. As documented in [JavaScript Guidelines](js-guidelines.md) method names are named in "camelCase" and therefore jQuery plugins (since they are methods) are named as "camelCase"._
_Ensure that you have read the [JavaScript Guidelines](js-guidelines.md) document before continuing. As specified in the [JavaScript Guidelines](js-guidelines.md) document, method names are named in "camelCase" and therefore jQuery plugins (since they are methods) are named as "camelCase"._

Just like with other JavaScript in the Umbraco back-office, you need to wrap your class in the jQuery self executing function if you want to use the dollar ($) operator.
Just like other JavaScript in the Umbraco back-office, you need to wrap your class in the jQuery self executing function if you want to use the dollar ($) operator.

## Simple jQuery plugins
Simple jQuery plugins don't require an internal class to perform the functionality and therefor do not expose or return an API. These could be as simple as vertically aligning something:

(function($) {
$.fn.verticalAlign = function(opts) {
//were not using opts (options) for this plugin
//but you could!
// we are not using opts (options) for this plugin
// but you could!
return this.each(function() {
var top = (($(this).parent().height() - $(this).height()) / 2);
$(this).css('margin-top', top);
Expand All @@ -27,57 +27,58 @@ There are many different ways to expose an API for a jQuery plugin, in Umbraco t
* `$("#myId").myFirstJQueryPlugin();` = to instantiate the plugin
* `var pluginApi = $("#myId").myFirstJQueryPluginApi();` = to retrieve the plugin API for that selector

So essentially, we'll be creating 2 plugins, one to instantiate it and one to retrieve the API. The naming conventions are obvious, create your plugin name and then append the term *Api* to it to create your API plugin name.
So essentially, we'll be creating 2 plugins, one to instantiate it and one to retrieve the API. The naming conventions are obvious, create your plugin name and then append the term *Api* to create your API plugin name.

### Creating the plugins

//using the same vertical align concept but we'll expose an API for it
//( not that this is very useful :) )
// using the same vertical align concept but we'll expose an API for it
// ( not that this is very useful :) )

Umbraco.Sys.registerNamespace("MyProject.MyNamespace");

(function($) {

//create the standard jQuery plugin
// create the standard jQuery plugin

$.fn.verticalAlign = function(opts) {
//were not using opts (options) for this plugin
//but you could!
// we are not using opts (options) for this plugin
// but you could!
return this.each(function() {
//create the aligner for the current element
// create the aligner for the current element
var aligner = new MyProject.MyNamespace.VerticalAligner($(this));
});
};

//create the Api retriever plugin
// create the Api retriever plugin

$.fn.verticalAlignApi = function () {
//ensure there's only 1
// ensure there is only one
if ($(this).length != 1) {
throw "Requesting the API can only match one element";
}
//ensure this has a vertical aligner applied to it
// ensure this has a vertical aligner applied to it
if ($(this).data("api") == null) {
throw "The matching element had not been bound to a VerticalAligner ";
}
return $(this).data("api");
}

//Create a js class to support the plugin
// create a js class to support the plugin

MyProject.MyNamespace.verticalAligner = function(elem) {
//the jQuery selector
// the jQuery selector
var _e = elem;
var api = {
align: function() {
var top = ((_e.parent().height() - _e.height()) / 2);
_e.css('margin-top', top);
}
}
//store the api object in the jquery data object for
//the current selector
// store the api object in the jQuery data object for
// the current selector
_e.data("api", api);
//return the api object

// return the api object
return api;
}

Expand All @@ -87,7 +88,7 @@ Umbraco.Sys.registerNamespace("MyProject.MyNamespace");

To use the plugin and api is very easy:

NOTE: this is an example plugin, i realize this is not really that useful as a non-simple plugin!
NOTE: this is an example plugin, I realize this is not really that useful as a non-simple plugin!

$("#myId").verticalAlign();
//now to get the api and do the alignment
Expand Down
50 changes: 25 additions & 25 deletions Development-Guidelines/Coding-Standards/js-guidelines.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,50 +15,50 @@ The above code will require a reference to the NamespaceManager.js file which sh
If you are going to use jQuery and its dollar ($) operator, you will need to wrap your code in a self executing function, this is to ensure that your code will still work with jQuery.noConflict() turned on. Example:

(function($) {
//your code goes here
// your code goes here
alert($);
})(jQuery);

To create jQuery plugins, see the [jQuery Plugin Guidelines](jquery-guidelines.md)

## Creating classes

There are actually quite a few different ways to create classes in JavaScript. For Umbraco we have opted to use the 3rd party, classical inheritance library, [Base2](http://base2.googlecode.com/svn/version/1.0.2/doc/base2.html#/doc/!base2) to make class declarations simple and extendable:
There are actually quite a few different ways to create classes in JavaScript. For Umbraco we have opted to use the 3rd party, classical inheritance library, [Base2](http://base2.googlecode.com/svn/version/1.0.2/doc/base2.html#/doc/!base2) to make class declarations simple and extendable:

Umbraco.Sys.registerNamespace("MyProject.MyNamespace");

MyProject.MyNamespace.NamePrinter = base2.Base.extend({

//in order to make private methods/variables accessible
//to derived types, everything actually has to be public
//so to identify private variables, just prefix with an underscore
// in order to make private methods/variables accessible
// to derived types, everything actually has to be public
// so to identify private variables, just prefix with an underscore

//private methods/variables
// private methods/variables

_isDebug: true,
_timer: 100,
_currIndex: 0,

_log: function (p) {
//this is a private method that can only be
//accessed inside of this class
// this is a private method that can only be
// accessed inside of this class
if (this._isDebug) {
console.dir(p);
}
}

//public methods/variables
// public methods/variables

name: ctorParams,
start: function() {
this._log("start method called");

//need to create a closure so we have a reference to our
//current this object in the interval function
// need to create a closure so we have a reference to our
// current this object in the interval function
var _this = this;

//this will write the name out to the console one letter
//at a time every _timer interval
// this will write the name out to the console one letter
// at a time every _timer interval
setInterval(function() {
if (_this._currIndex < _this.name.length) {
console.info(_this.name[_this._currIndex]);
Expand All @@ -74,8 +74,8 @@ Using the class above is easy:
var printer = new NamePrinter("Shannon");
printer.start();

//or since we exposed the name property publicly,
//we can set it after the constructor
// or since we exposed the name property publicly,
// we can set it after the constructor
var printer2 = new NamePrinter();
printer2.name = "Shannon";
printer2.start();
Expand All @@ -90,15 +90,15 @@ Define a singleton class:

MyProject.MyNamespace.NamePrinterManager = base2.Base.extend({

//in order to make private methods/variables accessible
//to derived types, everything actually has to be public
//so to identify private variables, just prefix with an underscore
// in order to make private methods/variables accessible
// to derived types, everything actually has to be public
// so to identify private variables, just prefix with an underscore

//private methods/variables
// private methods/variables

_registeredPrinters: [],

//public methods/variables
// public methods/variables

registerPrinter: function(printer) {
this._registeredPrinters[printer.name] = printer;
Expand All @@ -107,9 +107,9 @@ Define a singleton class:
return this._registeredPrinters[printer.name];
}

}, { //Static members
}, { // Static members

//private methods/variables
// private methods/variables
_instance: null,

// Singleton accessor
Expand All @@ -121,7 +121,7 @@ Define a singleton class:

});

Defining a singleton is the same as defining a regular class, except that we also define a static "getInstance" accessor for accessing the entity in a controlled mannor. By providing the static accessor we can ensure only one instance of the class is created per request.
Defining a singleton is the same as defining a regular class, except that we also define a static "getInstance" accessor for accessing the entity in a controlled manner. By providing the static accessor we can ensure only one instance of the class is created per request.

Using the singleton is very easy:

Expand All @@ -130,7 +130,7 @@ Using the singleton is very easy:

## Static classes

Sometimes its useful to have static classes that require no constructor. Before you make one of these, definitely make sure that you wont require different instances of one.
Sometimes its useful to have static classes that require no constructor. Before you make one of these, definitely make sure that you won't require different instances of one.

Static classes are very easy:

Expand All @@ -153,6 +153,6 @@ Both singleton and static classes allow you access methods directly without havi

A singleton class can hold information which can be manipulated and retrieved via its public methods and will be stored between method calls, where as static methods should only manipulate and return values which it can gather from its parameters and should not be persisted between individual method calls.

A good example of a Singleton is the one highlighted above, "NamePrinterManager". Here printers can be registered using the registerPrinter method for storage, and later retrieved using the getPrinter method. Here, a singleton is used as you will only want one central repository of printers.
A good example of a Singleton is the one highlighted above, "NamePrinterManager". Here printers can be registered using the registerPrinter method for storage, later retrieved using the getPrinter method. Here a singleton is used as you will only want one central repository of printers.

A good example use of a Static class is for helper methods, where each method will perform a single self contained task based upon the parameters passed in and will return a immediate response.
14 changes: 5 additions & 9 deletions Development-Guidelines/building-angular-project.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,21 @@
## Overview
Umbraco 7 has a slightly unorthodox project structure, compared to a normal asp.net project. This is by design, a choice from the beginning to embrace a much larger group than "just" the developers who know how to use Visual Studio.

As a result, the Umbraco UI is not a Visual Studio project, but simply a collection of folders and files, following certain conventions, and a small configuration file called `gruntfile` - we will get to the grunt part in a moment.
As a result, the Umbraco UI is not a Visual Studio project, but simply a collection of folders and files, following certain conventions, and a small configuration file called `gruntfile` - we will get to the Grunt part in a moment.

This means that anyone with a text editor can open the UI source, make changes and run the project, without having Visual Studio installed - we will get into how to do that in a moment as well.

The bottom line is the UI project has zero dependencies on asp.net or Windows. However you will need node.js installed, but don't worry we will get into that in a second.
The bottom line is the UI project has zero dependencies on asp.net or Windows. However you will need Node.js installed, but don't worry we will get into that in a second.


## Prerequisites
Umbraco 7 needs a couple of things to run:

### Node.js
To compile and run the UI project you need Node.js installed, which is available for both Windows and OSX.

[Read more at the official **Node.js** website](https://nodejs.org/)
To compile and run the UI project you need Node.js installed, you can get that at [http://nodejs.org](nodejs.org) for both Windows and OSX.

### Grunt
When you have node.js installed, you need to install Grunt. Grunt is a simple JavaScript task runner, basically like Nant, Msbuild or any traditional build system.

[Read more at the official **Grunt** website](https://gruntjs.com/)
When you have Node.js installed, you need to install Grunt. Grunt is a simple JavaScript task runner, basically like Nant, Msbuild or any traditional build system [http://gruntjs.com](more about grunt here).

To install, open a terminal and run:

Expand All @@ -34,7 +30,7 @@ For OSX users, you will most likely need to do:
This installs a `grunt` command into your terminal so you can run Grunt scripts with simple commands. That might sound scary, but really it isn't, while working with Umbraco 7, you will become really good friends with `grunt` and your terminal.

### Project dependencies
Now its time to install all the dependencies that the project requires to compile, debug, test, minify and so on. Luckily this is all automatic and is done with the node.js package manager (which you already have installed with node)
Now its time to install all the dependencies that the project requires to compile, debug, test, minify and so on. Luckily this is all automatic and is done with the Node.js package manager (which you already have installed with node)

In your terminal, browse to the `Umbraco.Web.Ui.Client` folder and run the command:

Expand Down
Loading