EPiServer 7 and Dojo/dijit

Vote:
 

Hi! Im trying to use dijit with EPiServer 7. I have a basic understandig of how dojo and dijit works, so thats not the problem. The problem is when I try to use it with EPiServer 7. I currently have a MVC project which I'm playing around with. I've tried this tutorial (http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2012/10/Creating-a-Dojo-based-component/), but I can't find the dlls he is using at the top of the C# class. Does anyone know of a tutorial or documentation which demonstrates how to/best practice for using dijit with EPiServer 7 in a MVC project? I have found very little information on the sunject, so any help would be appriciated!

#63255
Nov 13, 2012 13:05
Vote:
 

You can find EPiServer.Shell in the bin folder and EPiServer.Cms.Shell.UI in modulesbin. EPiServer.Cms.Shell.UI is usually not required but provides some nice stuff like constants for the plug in areas.

There is also quite a lot of infomation under the EPiServer Framework SDK developer guide:

http://sdkbeta.episerver.com/Developers-guide/Framework/?id=3511&epslanguage=en

I would specifically check out the User Interface => View Composition => How to section that provides some samples. If you feel that anything is missing, incorrect or unclear please provide us with feedback since we know that this is a new area and for most EPiServer developer, also a new technology.

#63258
Nov 13, 2012 13:47
Vote:
 

Thank you! I will have a look at it!

#63260
Nov 13, 2012 13:55
Vote:
 

I have a couple more questions. After looking around in the how to section, and following som examples, I still have some problems. So here are some questions:

1) I have included version 1.8, is this a problem? The docs said the realse version of EPiServer 7 uses 1.7. Or doesn't I have to include one? EPiServer does not do this for me?

2) In the .cs file I have made a component with WidgetType set to the same string as the name I give my widget in the .js file and PlugInAreas to what the value was in the examples. But when I try to enter the edit view, the view does not load. I can force the old episerver edit view (/Edit/Default.aspx), but the new edit view does not load unless I exlude the .cs file with the component from the project. Anyone knows why?

#63276
Nov 14, 2012 10:01
Vote:
 

1. You don't need to include Dojo, that's done by the EPiServer view. Currently EPiServer loads 1.7 but we are working on upgrading to 1.8 right now.

2. The widget type property in your .cs-file needs to match a file located in a location matching the namespace. For instance, in the Alloy Templates we define a root namespace in the module.config file located in the site root:

<add name="alloy" path="Scripts" />

Since ClientResources is the root for all client resources for the default module the directory for your root namespace is /ClientResources/Scripts

This means that if you want to add a widget with the full class name alloy.MyWidget you should add the following file /ClientResources/Scripts/MyWidget.js

And following the same logic, a client side class with the full name alloy.editors.StringEditor would request the file /ClientResources/Scripts/editors/StringEditor.js

If you are unsure, just check the network traffic to see if you get any 404 responses when loading the view to see what URL is used to try and load the class/widget.

#63277
Nov 14, 2012 10:12
Vote:
 

Ok, I got it working now, thanks! Excelent help.

Just a couple more questions.

I got it working once i added module.config to my project and added the <add name="..." path="..." /> tag inside the dojoModules tag. But since I'm some what new to episerver, do you have some information on module.config? An article or something? And I need to define a namespace which dojo recognizes, or else it won't work?

Thanks for your help!

 

#63281
Nov 14, 2012 12:53
Vote:
 

There is a section in the SDK on how to configure your module.config file(s):

http://sdkbeta.episerver.com/SDK-html-Container/?path=/SdkDocuments/EPiServerFramework/7/Knowledge Base/Developer Guide/OnlineCenter/../Configuration/ConfigurationModuleConfig.htm&vppRoot=/SdkDocuments//EPiServerFramework/7/Knowledge Base/Developer Guide/

Regarding namespaces in Dojo: Dojo uses something called AMD (http://requirejs.org/docs/whyamd.html) to load classes and resources. When EPiServer starts a view each class will be required through the AMD loader. For a lot of classes in dojo,dijit and episerver these are packed into separate packages to reduce the amount of files to load. When a class/widget is loaded, for instance something that you have plugged in using the Component-attribute, this request will go through the AMD loader. To be able to do a request for a file you need to map where your root namespaces are located.

EPiServer provides mappings for Dojo, Dijit and different EPiServer namespaces but for extensions you need to map your root namespaces in able to be able to load the JavaScript files needed when they are needed. The easiest way to do this is to add a mapping in the module.config file in the site root and then place your Dojo classes under the directory that you have configured for your namespace (Theorerically the classes don't have to be Dojo classes as long as they comply to the AMD-pattern).

#63289
Edited, Nov 14, 2012 14:09
This thread is locked and should be used for reference only. Please use the Episerver CMS 7 and earlier versions forum to open new discussions.