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.

Labels: ,


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

Labels: ,


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:

  1. Reduced footprint – The number of lines makes it easier to understand what is being done.
  2. It is easier to add Comments that relate to what is being done.
  3. 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:


 

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

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

Labels:


Friday, March 16, 2007

 

Using SilverLight (WPF/E) creates clear images

Remember migrating from .net 2.0 from 1.1 at your ISP? Our ISP created a separate server with .net 2.0 libraries and selected clients moved their applications to that server. Of course, if the application included Web Service, Web Pages and Windows Client, ALL code had to be converted to .net 2.0 before it was deployed.

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: ,


Thursday, March 15, 2007

 

SharePoint and ASP.Net Web Parts Suite

Our Web Parts Suite is now here. It is free and will remain free. The big news is that it works with both SharePoint and ASP.net 2.0. In fact our web site uses these web parts.

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: , ,


This page is powered by Blogger. Isn't yours?

Subscribe to Posts [Atom]