Tuesday, October 28, 2008
Building a Color Editor using COR
Check out the AJAX Color Editor control for a control that displays a color picker. This project includes source code that shows how to incorporate the Web Control in an ASP.NET page. The Color Picker is based on AJAX technology that provides partial rendering for the control, giving it the feel of a fat client.
Table 1 displays the Color Picker. The control displays 2 color palettes – one for the back color and the second for the fore color. The sample text to color shows the selected back and fore colors.
![]()
The Color Picker uses:
- The COR project provides a set of public static methods for adding Controls.
- AJAX technology provides partial rendering for the control, giving it the feel of a fat client
COR Project
The Color Picker is a Web Control. It is created programmatically using public static methods from the 'C' class in COR.
Sunday, October 19, 2008
FAQs for COR - A Web Site Building Tool
Q: What is COR?
A: COR is software that helps power users to become Web gurus by letting them build and maintain Web Sites. Users, with only browser, can log on to the Web Site to modify or create pages. Pages employ templates that support the placement and editing of web parts by the user (shown below – notice the 'Edit' and 'Delete" controls).
![]()
Q: How is COR different from web pages built using Microsoft ASP.net?
A: COR is a small layer of management software that is built directly on top of ASP.net 2.0. It takes full advantage of ASP.net Web Parts to implement its functionality. You get the full power of ASP.net 2.0 without requiring a software programmer for all, but the most complicated web pages.
Q: What Web Parts come with COR?
A: COR comes with a Library of 30 Web Parts. One notable inclusion in the library is a Word Web Part. It allows users to update content using Microsoft Word. Tables, formatting, and pictures in the Word document are automatically converted to HTML by the Word Web Part.
Q: What are some of the other key features of COR?
A: COR directly supports a menu bar across the top of the page and a menu bars on either the side of the page. COR also keeps track of the user's location in the WEB site by displaying "bread crumbs".
Q: What does COR stand for?
A: COR stands for Controls On the Right. This is because when a user is editing a page the controls are displayed on the right hand side of the page. The example below shows the 'controls on right' being employed to add a web part to the header area of the page.
![]()
Q: Why did you build COR?
A: We built COR because we needed something to build our own WEB sites. We started by building our Web sites using just ASP.net pages and eventually evolved to COR. We also use COR to build Jetfire Workflow solutions.
Q: Why not just use SharePoint?
A: Microsoft SharePoint is a wonderful product. Many of the features of COR look very similar to SharePoint. COR; however is a much lighter product that is focused on building Web sites.
Q: How much does COR cost?
A: COR is free. The source code is available and does not have any restrictive licensing requirements (BSD license). See COR-Why make it free? and Open Source License Favorites for more details.
Q: How can I extend COR or add a new WEB Part?
A: COR is well documented and uses standard Microsoft programming patterns. An experienced programmer should have no trouble extending COR or adding a Web Part. Naturally, we can be contracted to add new features or build new Web Parts (contact us).
Q: Where can I download COR?
A: www.codeplex.com/cor
Q: What is the difference between DotNetNuke and COR?
A: DotNetNuke employs Web controls and is based on .Net 1.1. Pages in DotNetNuke are built by programmers. COR uses Web Parts and is based on .net 2.0. Pages in COR are built by privileged user(s).
Q: What is required get a Web site running using COR?
A: COR can use, as the server, any Windows or Vista PC that supports Internet Information Services and Forms authentication. Many ISPs support this configuration. The ISP we use is LFC Hosting.
Q: Are there some examples of sites that use COR?
A: yes.
Jetfire
Ontario Amateur Wrestling Association
National Capital Wrestling Club
Ottawa Wrestling Festival
Canada Cup
Arbutus Associates
See Also
COR-Why make it free?
Open Source License Favorites
Download COR from CodePlex
Sunday, September 28, 2008
Adding ASP.NET Controls programmatically
If you design ASP.NET Web Controls or Composite Controls, you have designed controls programmatically. This approach is not as easy as using the Visual Designer in Visual Studio. This post explores the use of the "C class", which is part of the COR download. The "C class" is a set of public static methods for adding Controls, managing strings, XML files and more.
Personally, once I started designing Web Parts, I did not want to go back to designing controls using the Visual Designer. I actually find it easier to place controls on the page and use logic to decide what controls are being placed on the page. However, designing Web Parts with standard Web Controls leads to much code. The "C class" allows design of controls with minimum code.
// Let's review how a Label is added to a control:
Label label = new Label();
Label.ID = "ThisLabel";
label.Text = "The name to display";
label.Width = Unit.Pixel(200);
label.CssClass = "AFormatOption";
this.Controls.Add(label);
It takes five statements just to add a simple label. For complex GUI's, it is easy to get lost in the number of lines required. I started thinking: "Why not have a simple method that adds the Label with a number of parameters?". E.g. Let's review what such a method would look like.
// Using a method that does the work of assigning the values to the named properties
Label label = AddLabelMethod("ThisLabel", "The name to display", "AFormatOption", Unit.Pixel(200), this);
The AddLabelMethod takes five parameters: ID, Text, CssClass, Width and an object that the label control is added to. The AddLabelMethod returns the new label object, which typically is not required because all the work is done in the AddLabelMethod.
The C class in COR is a set of helper methods that simplify the addition of Web Controls. To add a label,
// Using the AddLabel method is the C class simplifies programmatic design.
Label label = C.AddLabel ("ThisLabel", "The name to display", "", "AFormatOption", Unit.Pixel(200), this);
Note: ToolTip is added to the list of parameters. It is shown as a blank string in the example.
The C class, over 2000 lines of code at last count, contains a number of useful methods, including:
- AddTable, NewTableRow, NewTableCell
- AddLabel, AddTextBox, AddLinkLabel, and a lot more
- AddHiddenField and other methods to get and set the value of the hidden field
- Xml file management, e.g. GetAttribute, ReadXmlFile
- AddUpdatePanel, AddUpdateProgress, AddTimer (recent additions)
- ... and more
I find using tables to place controls on the page is now simple. E.g
// Add a table to this control
Table table = C.AddTable("table", Unit.Percentage(100), this);
// Add the first Row
TableRow row = C.NewTableRow(table);
// Add the first cell to the Row – it has text and a tooltip and is 100 pixels wide.
C.NewTableCell(row, Unit.Pixel(100), "a name to display", "a tooltip for the cell", "CellFormat");
// Add a second cell to the Row.
TableCell cell = C.NewTableCell(row);
// Add a text box to the second cell
C.AddTextBox("tb2", "", "Enter the name of something", "TextBoxFormat", Unit.Pixel(200), cell);
Using ASP.NET controls, this five-line sample would have taken about 20 lines of code. This approach has clear advantages:
- Reduced footprint – The number of lines makes it easier to understand what is being done.
- It is easier to add Comments that relate to what is being done.
- The C class methods prompt the user for the typically used parameters. It is now easy to identify if any of the typical parameters have been forgotten.
The "C class" is available in the COR download found on Code Plex.
Related posts include: ASP.NET Life Cycle.
Labels: ASP.net
The Life Cycle of ASP.NET Controls
Designing ASP.NET websites is easier if you understand the Life Cycle of the ASP.NET controls. Let's review the ASP.NET controls (Refer to table 1). These include:
- Page (Master Page)
- User Control
- Web Control
- Html Control
- Composite Control
- Web Part
From an object model perspective, the Life Cycle methods are derived from Control, Web Control and Composite Control.
The table presents ASP.NET controls mapped against Life Cycle methods. This is what I think of as the 'get started' Life Cycle for controls. There are more Life Cycle methods, e.g. Pre-Init, if you want to manage Master Pages and Themes for a page. Here are some observations:
- You don't need to use all of the states when writing a control
- You are best served if you match functionality to the correct Life Cycle method
- Your control will behave properly in all use cases.
- Subtle bugs can occur because you have placed functionality in a non-optimal Life Cycle method
- Your control will behave properly in all use cases.
Life Cycle Method | Member of | Page, User Control | Web Control | Composite Control, Web Part | Html Control |
Inherits from -> | X | Control – Template Control | Control | Control – Web Control | Control |
Init | Control | 1 | 1 | 1 | 1 |
Load Control State | Control | 2 | 2 | 3 | 2 |
Load View State | Web Control | 3 | 3 | 4 | |
Load | Control | 4 | 4 | 5 | 3 |
Create Child Controls | (Composite) Control | 2 or 6 (See Note 1) | |||
Post back Event Handling | Web Control | 5 | 5 | 7 | 5 |
Pre Render | Control | 6 | 6 | 8 | 6 |
Save Control State | Control | 7 | 7 | 9 | 7 |
Save View State | Web Control | 8 | 8 | 10 | |
Render | Web Control | 9 | 9 | 11 | |
Dispose | Control | 10 | 10 | 12 | 8 |
Unload | Control | 11 | 11 | 13 | 9 |
Table 1: Life Cycles of various ASP.NET Controls
Controls and the Life Cycle
Html Controls are simple controls that inherit from Control. As such, valid Life Cycle methods include:
- Init
- Load Control State
- Load
- Post back event handling
- Pre Render
- Save Control State
- Dispose
- Unload
Page, User Control and Web Control includes the methods above, plus:
- Load View State
- Save View State
- Render
The Composite Control and Web Part include the base methods from above, plus:
- Create Child Controls
Composite Controls
Being a Web Part designer means that I use Composite Controls. Composite Controls are different in that they have a Life Cycle method called 'CreateChildControls'. (This is probably because of the history of Web Parts and SharePoint.) Here are a couple of notes from MSDN documentation on Composite Controls.
The CompositeControl class is new in ASP.NET 2.0. If you created custom controls in ASP.NET version 1.0 or 1.1, you had to implement the INamingContainer interface to create a new naming scope for child controls. In addition, you had to override the Controls property and invoke the EnsureChildControls method. In ASP.NET 2.0, these and other steps are performed by the CompositeControl class.
You should create the child controls in the CreateChildControls method and not in OnInit or another life cycle phase. The server control architecture relies on calls to CreateChildControls whenever the Controls collection is needed, such as during data binding (if applicable).
Note 1: When the Composite Control is displayed normally, 'CreateChildControls' is called AFTER the 'Load' method. However, when a post back event occurs, 'CreateChildControls' is called AFTER the 'Init' method. This certainly makes the 'CreateChildControls' method an "interesting" aspect of the Life Cycle.
References
- http://blogs.thesitedoctor.co.uk/tim/2006/06/30/Complete+Lifecycle+Of+An+ASPNet+Page+And+Controls.aspx – this shows a trace of the Life Cycles of MasterPage, Page, and various Controls.
- http://msdn.microsoft.com/en-us/library/ms178472.aspx - this describes the Page Life Cycle.
Labels: ASP.net
Friday, March 16, 2007
Using SilverLight (WPF/E) creates clear images
Migrating to Microsoft .net 3.0 is MUCH simpler, because the ASPX server is still a ASP.net 2.0 Server. Of course, our ISP seems to be taking a 'measured' approach. But does that stop us from playing with .net 3.0 and wanting to show our endeavors? Of course not.
Do you get annoyed when images are not clear on web pages because of rescaling? The really cool facet of .net 3.0 is Managed Code directly accessing un-managed code, namely DirectX. Use XAML - a new, mark-up language to build user interfaces with.net 3.0 libraries. Images can be displayed with amazing clarity.
Using Microsoft Expression Design, we created a simple WPF/E image control that displays thumbnails and allows the user to select an image that scales. Look at the clarity of this image. So how did this code reach the web?
1. Post code to ISP. Problem - XAML file type not recognized and hence the control did not display at all.
2. Change XAML file type to XML file type - control now displays!
3. Login to ISP technical page and chat with support staff. Ask them to add the XAML file type to the web server (use same characteristics as XML file type).
4. WPF/E control now displays in a web page from our ISP.
5. Go to 'virgin' PC (one that hasn't used .net 3.0). Open web page with WPF/E control. Because this control is a WPF/E control, the page displays a note that the WPF/E plugin needs to be downloaded. Click to download.
6. View fantastic WPF/E image selector control with great image clarity.
Labels: ASP.net, SilverLight
Thursday, March 15, 2007
SharePoint and ASP.Net Web Parts Suite
Download the suite and tells what you think. We plan on enhancing the suite both with more parts and features.
If you want the source code or would like custom web parts built, well that's not free. Somebody has to pay the bills.
Labels: ASP.net, SharePoint, Web Parts
Subscribe to Posts [Atom]
