Full Trust European Hosting

BLOG about Full Trust Hosting and Its Technology - Dedicated to European Windows Hosting Customer

Umbraco 7 with Free ASP.NET Hosting - HostForLIFE.eu :: How to Create Costum Sections in Umbraco

clock May 6, 2015 07:16 by author Rebecca

In this post, I will tell you how to create costum section in Umbraco 7. Every section in Umbraco is called an application, so sections and applications is basically the same thing.The first thing you’ll need to do is to create the application. In this examples I will not fiddle with the xml-files or the database. So, I’ll use class annotations to create my section.

The first step that you’ll need to do is to create a class that implements the IApplication-interface so that Umbraco will initialize this class on start up.

[Application("CustomSection", "CustomSection","icon-car", 15)]
public class CustomSectionApplication : IApplication {}


This is not something new for Version 7, The "Application"attribute basically tells Umbraco to create a new application:
Name: CustomSection
Alias: CustomSection

Icon: icon-car (the css class for the icon that will be displayed in the left side bar of the backoffice)
Sort order: 15

Next, Umbraco runs and will add an XML-element to the /config/applications.config-file that will add your new section/application to the Umbraco backoffice.

Creating The Tree

Umbraco will not care about your new application before creating the tree. An application without a tree is not worth anything. Let's start with creating a new class that inherits from Umbraco.Web.Trees.TreeController, make sure to suffix the class name with “Controller” ie. CustomSectionTreeController.

public class CustomSectionTreeController : TreeController
{
}

Now we need to give Umbraco some extra information about our tree. Let's add two attributes on the class, the Tree and the PluginController-attributes.
[PluginController("CustomSection")]
[Umbraco.Web.Trees.Tree("CustomSection", "CustomSectionTree", "My custom section", iconClosed: "icon-doc")]
public class CustomSectionTreeController : TreeController
{
}

PluginController
This attribute tells Umbraco that this class is part of a plugin, and it also tells Umbraco the name of that plugin. This will make Umbraco look for views inside the /app_plugin/{NameOfApplication}/-folder and not in the folder of the core-views which is the default.

Tree
This attribute is “older” and has been around since somewhere around 4.7 I think. It tells Umbraco that this is a tree-class and Umbraco will add this to the /config/trees.config-file. In V7 this attribute is mandatory for a tree that inherits from the TreeController-class as some underlying logic is looking at the attribute values to determine the name of the tree.

The properties are:
Application: CustomSection (must match the name of the application we added before)
Alias: CustomSectionTree (the name/alias of the tree)
Title: The title of the tree (used as the name of the root node)
Icon: The icon (or class) used as the tree icon.

Alright. Almost there. Now we need to add some code to show items in the tree.
[PluginController("CustomSection")]
[Umbraco.Web.Trees.Tree("CustomSection", "CustomSectionTree","My custom section", iconClosed: "icon-doc")]
public class CustomSectionTreeController : TreeController
{
    protected override TreeNodeCollection GetTreeNodes(string id, FormDataCollection queryStrings)
    {
        var nodes = new TreeNodeCollection();
        var item = this.CreateTreeNode("dashboard", id, queryStrings, "My item", "icon-truck", true);
        nodes.Add(item);
        return nodes;
    }
 
    protected override MenuItemCollection GetMenuForNode(string id, FormDataCollection queryStrings)
    {
       var menu = new MenuItemCollection();
       menu.DefaultMenuAlias = ActionNew.Instance.Alias;
        menu.Items.Add<ActionNew>("Create");
        return menu;
    }

}

This will give us something like this:

This code has two methods that are the least we need to do to create a new section.

GetTreeNodes (TreeNodeCollection)
This returns a collection of tree items, in our case we just return one item but we could of curse add more items to the collection. We use the CreateTreeNode-method from the base class to create a new node called “My item” with the id “dashboard”. Umbraco will append the id of the node to the URL later on so that we can handle the routing from our AngularJS-controllers.

GetMenuForNode (MenuItemCollection)
This method handles the “right click alternatives”. The “DefaultMenuAlias” configures which action that should be fired when we click the “touch dots”.

There's a lot of actions that you can use and you can also build your own ones:

Displaying Your New Section

To display your new section you need to give the current user access to it. Go to the users-section and open the edit-view for the current logged on user. In the bottom, check the checkbox for [CustomSection] and hit save. Now you’ll probably need to refresh the page using F5 to show the new section in the left side bar.

Umbraco 7 with Free ASP.NET Hosting
Try our Umbraco 7.2.2 with Free ASP.NET Hosting today and your account will be setup soon! You can also take advantage of our Windows & ASP.NET Hosting support with Unlimited Domain, Unlimited Bandwidth, Unlimited Disk Space, etc.



Umbraco Hosting UK - HostForLIFE.eu :: Tips on Using Javascript in Umbraco

clock April 16, 2014 08:08 by author Peter

While redesigning our new website I had the task of getting the Umbraco package to play ball with our existing design. While mashing it around I noticed a bit of a trend for injecting Javascript directly into templates etc. which can limit the usabilty and portability of the code. So I though I would just write some notes/tips on using javascript in your Umbraco website(s).There will be no end of different ways to achieve some of what I discus here so feel free to throw your opinions into the ring at the bottom of the post. When I mention templates I mean XSLT/Razor or any other flavour you might be using. Anyway on with it.

Don't write out chunks of javascript in your templates

The place for javascript is in your external javascript files where it can get cached, write out javascript in template and it has to go down the wire each and every time, not good. That is not to say that you are not allowed to inject any javascript into the page, of course you are but ideally it should be a global javascript object which contains the data that your external javascript can use when ondomready (aka jQuery.ready) fires. You might be thinking that you only want to include the javascript on the pages it affect, but as long as the javascript is not overly long (and if it is it should be an external file) your users will loose very little by you including it sitewide and just having it activate when it knows it is on the right page. Remember your users can't cache javascript that is in page so get it moved to an external and adjust your code a little to work with this model rather than against it.

Assume jQuery or similar only gets included in the footer

Loading your scripts in the footer greatly increases the speed that your website renders and is shown to your users. So you should get in the habit of rendering your code in the footer.To ease this we have a ContentPlaceHolder called "CustomFooterJs" in our parent master page template which we can use to render out any custom JS and <script /> tags into the footer.

This content place holder is always included after our jQuery (other javascript frameworks are available) and sitewide setting files are included. Now if you assume that you have to wait until the footer before you can do any special JS then you have to be careful in your template with what javascript you include. Again similar to point one you are limited to only writing out javascript objects or setting variables.

In your external code you can run code on dom ready which can check for the existance of your javascript objects or dom elements before running (this stops the code running on pages it shouldn't). We tend to use the body's id as an inital check followed by a check for an element we definitely need before running any code that uses said element. Its safer to assume it won't be their and not run than to assume it will be and try to run everytime.

// Somewhere in your footer code
$(document).ready( function() {
    // Are we on a blog post page?
    if ( jQuery("body#blogpost") ) {
      // Do something blog post related, beauty of this       
// is it can safely be included site wide but will
      // only run when it should
    }
});

Don't add events directly to elements, use javascript to add javascript events

Following on from the first two tips this one is a well known issue but it is still oh so easy to add a quick and dirty onclick even to your elements within the template itself. If on the other hand you follow the rule that jQuery et al are not available right there you will have to add the event after you've rendered out the HTML.This is what jQuery and its like are so good at, decorating any HTML with javascript events. So in your Custom Footer JS place holder you can add in (or even better in an external file which you can include in the place holder if need be)

Don't add events directly to elements, use javascript to add javascript events

Following on from the first two tips this one is a well known issue but it is still oh so easy to add a quick and dirty onclick even to your elements within the template itself. If on the other hand you follow the rule that jQuery et al are not available right there you will have to add the event after you've rendered out the HTML.This is what jQuery and its like are so good at, decorating any HTML with javascript events. So in your Custom Footer JS place holder you can add in (or even better in an external file which you can include in the place holder if need be):

// Somewhere in your footer code
  $(document).ready( function() {
      jQuery("#myElementId").click( function( elem ) {
        // Do something with my elem
      });
  });

Store Handy Information As Part of Your Master Page Template

We always try to store sitewide important information in the same page in all pages. That way our javascript only has to look in one place for it. A great example of this is storing the current page's node id in a meta tag in the head of your HTML.

<head>

  <meta name="pageId" id="pageId" content="<umbraco:Item field='pageId' runat='server' />" />

  ...

We can use a little jQuery to get this and to have it available to all our scripts to save us having to try to inject this into our Javascript.

// Add this code as one of your first lines
// of code in your sitewide js file
$(document).ready( function() {
  // Stash this value once where all the
  // other scripts can get to it
  window.pageId = jQuery.("#pageId").attr("content");

  // Other code should always check for the
  // existance of the pageId before running if they require it
  if ( window.pageId ) {
    // do page Id related goodness, Ajax call to
    // Base to get comments for this page for instance?
  }
});

Again this was handy for re-writing the blog comment form javascript so that we could pull it out of the XSLT template, move the javascript into an external file and have it reference this in page bit of meta data rather than having to write out the javascript inline. I've mentioned earlier that you should write out javascript objects with data in them rather than code it self if you are looping over content in a template. A nice trick with doing that is to inject the data into an global array variable, this stops you having to come up with lots of unique names which can clutter up the global javascript namespace (or clash with something else). Something like this:

<!-- Imagine we are looping over a XML dataset in a XSLT for-each...-->
<xsl:for-each select="MyNodes">
  <!-- Do other stuff -->
  <script type="text/javascript">
  // This check will ensure you either create the "mystore"
  // variable or re-use it if you are not the first in the
  // loop, of course this variable might have been created
  // in another template entirely. The lack of a "var" means
  // this variable will be global so available to all
  mystore = typeof( mystore ) != "undefined" ? mystore : [];

  // Add in this loops data
  mystore.push({
    name: '<xsl:value-of select="name" />',
    latlng : '<xsl:value-of select="latlng" />',
    url : '<xsl:valur-of select="umbraco.library:NiceUrl(pageId)" />'
  });
 </script>

An alternative is to inject the content in hidden HTML elements or Form elements, depends on your needs.



Press Release - European HostForLIFE.eu Proudly Launches Umbraco 7 Hosting

clock January 15, 2014 11:33 by author Scott

HostForLIFE.eu, a leading Windows web hosting provider with innovative technology solutions and a dedicated professional services team, today announced the supports for Umbraco 7 Hosting plan due to high demand of Umbraco 7 CMS users in Europe. Umbraco 7 features the stable engine of Umbraco 6 powering hundreds of thousands of websites, but now enriched with a completely new, remarkably fast and simple user interface.

Umbraco is fast becoming the leading .NET based, license-free (open-source) content management system. It is an enterprise level CMS with a fantastic user-interface and an incredibly flexible framework which is both scalable and easy to use. Umbraco is used on more than 85,000 websites, including sites for large companies such as Microsoft and Toyota.

HostForLIFE.eu is a popular online Umbraco 7 hosting service provider catering to those people who face such issues. The company has managed to build a strong client base in a very short period of time. It is known for offering ultra-fast, fully-managed and secured services in the competitive market.

Umbraco has given a lot of thought to the user experience of their CMS. The interface uses a navigational flow and editing tools that anybody using Windows Explorer and Microsoft Word will immediately recognise. Your site structure sits in a tree view - just like Windows Explorer. Anybody with experience using Microsoft Word, can use Umbraco's simple rich text editing (RTE) interface.

"Umbraco 7 is easy to install within few clicks, special thanks to HostForLIFE.eu special designed user friendly web hosting control panel systems." - Ivan Carlos, one of the many HostForLIFE.eu satisfying clients.

Further information and the full range of features Umbraco 7 Hosting can be viewed here http://hostforlife.eu/European-Umbraco-7-Hosting.



About HostForLIFE.eu

HostForLIFE.eu is European Windows Hosting Provider which focuses on Windows Platform only. We deliver on-demand hosting solutions including Shared hosting, Reseller Hosting, Cloud Hosting, Dedicated Servers, and IT as a Service for companies of all sizes.

We have offered the latest Windows 2012 Hosting, ASP.NET 4.5 Hosting, ASP.NET MVC 4 Hosting, and SQL 2014 Hosting.

Free ASP.NET Hosting - Europe

Tag cloud

Sign in