Monday, March 23, 2009

Getting the code you want from DotNetNuke

Introduction:
DotNetNuke development is always an interesting for me. New developers come to the forums posting same silly questions again and again, and guys out there on the forums give them a gentle reply with some guidelines. This happens always everyday on DotNetNuke Forums. Sometimes i think is it really hard to find what we want from DotNetNuke source and DotNetNuke web app?

Understanding the way DotNetNuke works:
I think developers should start learning DotNetNuke from the basic understanding about portals, tabs, modules, skins, skin objects etc. Don't start your development before understanding these terms. I am not going to introduce or summarize these terms as you will find many web logs regarding this.

Getting started with development:
Once you get basic understanding about this, you will be able to understand how DotNetNuke development will go for you. Once you are done with this, whenever you need to write a code that you don't have ask this questions to your self: Is DotNetNuke doing this? How DotNetNuke is doing this? For instance, if you are looking for code to dynamically create a tab in dotnenuke. you should ask, is DotNetNuke creating dynamic tabs? and the answer is obviously yes. Second question is how it is creating the tab? This is a hard question for new developer. Basically, all the DotNetNuke admin related stuff can be found in admin directory. If you look at ~/Admin/Tabs/ManageTabs.ascx, You will see the page that is used to create a new tab from DotNetNuke UI. Click on update link and you can easily find the code written in vb. You just need to find a part of code you basically want. You can also convert this code to c#.

How to search the code i want?
Well its really depends upon what code you want. But if you think like the way I demonstrated above, you will probably find the code you want after some trial and errors. The big help will be from the DotNetNuke UI and the way the directory structure is provided. Let's take another example of updating a user. So for finding that code, if you look at admin folder, you will find ~/Admin/Users where we think the code can be. Let's try that folder first. Opps! looking at the folder increases the problems, we have many controls in it unlike tabs folder. So let's try the controls one by one. Just open the ascx control on by one in design mode and see if you can find update button on it. Well the control ~/Users/User.ascx controls a floppy icon which is obviously a universal icon for save in DotNetNuke . so let's see what is written in the code of the click event of it. Well it contains a code to create a new user as well as update an existing user. Am I right? Ok, so this code says UserController.UpdateUser() is a method you can use to update the user. Just pass userportalid and userinfo object to it, and it will update the stuff. So if you want to implement a custom user profile update page, you just need to get the userInfo object from UserController.GetUserByName and assign the new values to the object properties and UserUser Method of the UserController class. An you are done.

Conclusion:
So basically DotNetNuke has all the code you want. You just need to guests where can i find the code and just go through the code and you will definately find the code you want. Accessing source code is more complecated than accessing web application because you don't have UIs to compare with, but once you got familiar with DotNetNuke , you will find your required code in the source code also. I think DotNetNuke documentation is also helpful finding the right code as well as if you understand the way DataProvider and SqlDataProvider implemented, it will be fun digging into the code.
Best luck with your DotNetNuke code review and hope you will find the code you need from DotNetNuke .

Friday, March 20, 2009

Free DotNetNuke skin template of BluePrint CSS framework

There are lots and lots of css framework available across the world which means to solve the repetative css code writing problem for you. There are two remarkable frameworks that earn respect in the designing web 2.0 websites, 960 grid framework and BluePrint css framework. There are some good articles for comparing the the two and lots of other one, and most of the discussions ends with BluePrint css framwork is better than anyone else and after that 960 css framework. You can just click here for search results about comparing BluePrint vs 960 framwork. There are good css frameworks which can be found through google by the term Css Framework.


I found an implementation of 960 grid framework for dotnetnuke in dotnetnuke forums. You can visit the site here. Its always helpful to get this kind of efforts available online. Because of this implementation news, I started thinking about which is the css framework that really can help speed up the skin development in dotnetnuke. As 960 is a good option to go with, those who want to use 960 will get started with the implementation at http://www.dnngrid960.com/. Those who think BluePrint is a better option, I implemented a very basic skin. Here is how it looks like the one shown in the image. Here is a quick summary:

  1. The template is of so basic lavel
  2. There is a single container
  3. Single skin file with html4 strict doctype validation.
  4. No skin objects or dotnetnuke controls are added in it
  5. Very light weight and simple template

You can download the skin template from here. The template will help you implementing your skin quickly.

You can find an example skin BluePrint0.1 implemented here.

  • The example skin implementation is a very basic level and same as the default dnn blue skin
  • Tried implementing the sking with just a grid.css and only core basic classes so that everyone can understand the dnn classes as well as blue print css classes easily
  • IE and Mozilla fonts are leaved intentionally different so that users can understand they can fix ie related css stuff in ie.css
  • No images, single basic container.
  • YSlow : 28.4k Stylesheet files(4 files), 0.05k image (BluePrint.png), 169.2k Javascript files, total 214.4k with 17 requests.
Hope this will help you understand the BluePrint css implementation as well as help speed up your dotnetnuke skin development.

Thursday, March 5, 2009

Free DotNetNuke Skin - Nutica

My third free dotnetnuke skin converted from a free xhtml template. Here is a quick description:

  • Different layout support - supports one column, two column, three columns
  • Different containers - 4 containers, each for left, right and middle column and a middle column block quote container
  • Single package for skin and container, its working in dotnetnuke 4.5.5, but if its not working for you, extrack the file, and you will get different zips for skin and container, paste them to different folder and rename them with Nutica.zip
  • Again, the limitation with this is, menu and submenu are not formated properly and not looking too good. please tell me how can we improve this?
  • Download the skin

Please give your valueable feedbacks about the skin, so that i can improve the stuff. Providing feedback will help me understanding the skins conversion, that will help me write my tutorial about converting xhtml template to a dotnetnuke skin.

Note: Free skins are in this blog are distributed under creative common licence, you can use all skins for free, but please provide credit link to my blog. Thanks

Wednesday, March 4, 2009

Adding javascript events to dropdownlist items

This code applies to all the controls which contains ListItem, Here is a code sample for DropDownList:
XHTML Code

<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem Value="1">Item 1</asp:ListItem>
<asp:ListItem Value="2">Item 2</asp:ListItem>
</asp:DropDownList>

C# code

foreach (ListItem item in DropDownList1.Items)
{
item.Attributes.Add("onclick", "itemclick(this);");
}

Javascript code:

function itemclick(obj)
{
alert(obj.text);
alert(obj.value);
}

DNN 5 - Get All tabs


TabController controller = new TabController();
TabCollection tabs = controller.GetTabsByPortal(0);
IDictionaryEnumerator hs = tabs.GetEnumerator();
while (hs.MoveNext())
{
TabInfo tab = (TabInfo)hs.Entry.Value;
Response.Write(tab.TabName + "<br/>");
}

Tuesday, March 3, 2009

Flash Remoting with ASP.NET

Before some time, I was involved with the project which requires a flash application to call asp.net application and gets data from there. There are obviously many ways for doing it. The way we implemented it was a bit tricky. We used Macromedia Flash Remoting MX which is a product by Adobe. Macromedia Flash Remoting MX allows a flash application to call an asp.net service (method) using remoting connection. According to the theories i've gone through on adobe, this way of calling a service of asp.net in place of using web services is more faster. The bad part of that experience was, none of the documentation samples were working directly and there are lots and lots of duplicate articles and links which discribes almost same code for sample. Finally, we manage to get through that and created a FACADE architecture at asp.net side which works like following:


  • Flash application will call gateway.aspx at the asp.net website with some parameters in the request and name of class which is remotely invoked
  • gateway.aspx will create an instance of the class described by the service parameter and passes all the request params to constructor as a collection
  • The FACADE class then reads the parameters and decides which method to call, and it calls that method from business logic layer and returns the output to flash application

This story works nicely as a theory and practical for us, and I was satisfied with the way it was working.

There is almost a year passed after that, and today morning i came across an open source project AMF.NET which is an open source version of flash remoting. I was just reading the documentation and wondering if i can implement the thing again. I was surpriced that i get through this also.

Initially, i started implementing it and i was not quite getting it, then i came across an article on http://codebetter.com/blogs/karlseguin/archive/2006/04/13/142770.aspx which has some links about the documentation. I didn't quite get some good documentation but a comment on the post also helped me.

You can download the code from here

Using Sample code:

  • Extract zip file and open the project.
  • Add a blank Default.aspx page and run it.
  • the url looks like http://localhost:3434/AMF/Default.aspx
  • Now open the facade.fla in flash 8. Also open util.as
  • In Util.as, line 12, you will require a service url as a first parameter, replace the with gateway.aspx of your application url, for example, http://localhost:3434/AMF/gateway.aspx.
  • gateway.aspx will be available in the dll in the bin directory.
  • That's it, run your AMF project and be in the debug mode, place breakpoint at getUser method of the User.cs in the app_code.
  • Run your flash application and enter username and password, and click on button. If everything goes well, you will be redirected to scene 2 and will see label over there.

After some days of writing this article, I got a comment from a user who pointed me to yet another flash remoting open source library. This one is a simple to understand. You can find the library on codeplex at http://dotnetflex.codeplex.com/ the source code is available. This library gives some better implementation of flash remoting because its much more simpler to understand than AMF. I downloaded the library from the source code section of the site and try my hand on it. I got it working in almost an hour. So hopefully developers will simply get a quick start with this. The wiki on the site provides some implementation details from asp.net side, but there is no source code sample for flash, I just tried same file as i used in the AMF.NET with some minor changes and its working nicely. Hope you all find it helpful.

You can download the file from here. You can also find a link in DOWNLOAD section of this blog also. To test the code, follow the same step described in AMF.NET section. Sample Application description:

  • Flash application displays a Login page with username and password and a login button
    clicking on login will calls a method getUser(HashTable ht) of an asp.net application from flash side
  • after getting a successfull return value, it redirects to scene2

Enhancements that can be applied at Flash Side:

  • I don't even know how to create a password textbox in flash, and i want to display a username returned from asp.net in scene2.
  • I'm working on this but if anybody can help, it would be appriciated.

Please note that I don't know flash as well as action scripts, But I'm good at learning, and i have good experience on developing asp.net applications.

Thanks and happy coding. :)

Popular Posts