Thursday, December 27, 2007

Convert HTML color to System.Drawing.Color

It's very simple to convert a HTML color (Hexadecimal color) to System.Drawing.Color.

Just ask the System.Drawing.ColorTranslator class to do so.

Color myColor = System.Drawing.ColorTranslator.FromHtml("#660000");

Remember to include the leading '#' sign.


You may also pass in color names instead of the hexadecimal color.


 


Same, if you want to convert the System.Drawing.Color to hexadecimal string.


string htmlColor = System.Drawing.ColorTranslator.ToHtml(System.Drawing.Color.Navy);

Thursday, December 20, 2007

FusionChart Free

URL: http://www.fusioncharts.com/free/Default.asp

Would you like to have nice animated flash chart displayed in your website?
I was looking for charting tool, and found this -- FusionCharts Free. It's a flash charting component and the good news is It's FREE.

It just came out with a newer version, FusionCharts Free V2. If I'm not mistaken, the version 1 was only free for personal use, so I couldn't recomment it to my company, unless we pay for it. Just now, I checked through the License Agreement again, it seems like it's now free for indivisual/research/commercial user. It's completely free to OEM and distributed with the open or closed source application. Of course, there are also some rules you need to follow. Well, it's really a good news to me, and I can propose this to my company, coz I really like the charts, they look nice!

  • * FusionCharts Free can be used for free if you are a individual/research/commercial user.
  • * FusionCharts Free can be distributed for free with your free or commercial softwares, irrespective of whether they're open source or closed source.

It's using XML data, so it's quite easy for everyone to embed this chart in your application using your own language. There are bar charts, line charts, pie charts, area charts and etc. In the new version, they even include Gantt chart and Funnel chart. You may view the types of chart in the Chart Gallery.

Funnel Chart & Gantt Chart

You can download the FusionChart Free V2 here: Download

Remember to read the License Agreement / Terms of Use 

I'll post some prototypes after I've embedded this chart in my application. Love Struck

Thursday, December 6, 2007

CSS Button Designer

URL: http://www.pagetutor.com/button_designer/index.html

I plan to build some CSS buttons by myself, instead of using Image Buttons in ASP.NET, especially for the rollover effect.

I've found this useful tool to design a CSS button, provided by PageTutor.com.

It's very simple for you to generate your own button. You just need to define the button style, you can even add the background image for the button. Then, you can click on Mouseover tab to define the mouseover effect. You'll get the CSS & javascripts codes, plus the button codes in the Code tab. It's just that simple and friendly to build a CSS button. Isn't it cool? This saved me a lot of hassles to study and build my own buttons.

You can also go to the Samples tab to look for some already defined buttons, and apply them in your applications. You may make some amendments on the samples to fit your applications too. Enjoy!

Tuesday, December 4, 2007

Creating ASP.NET Custom Controls with Style

Reference: CoDe Magazine - Creating ASP.NET Custom Controls with Style

My Notes:

* A control's Render method will render a control in the last step of a control's life cycle, just before the control is disposed.

* The only parameter for Render method is an HtmlTextWriter object.

HtmlTextWriter object writes HTML to the output stream. It provides a set of Write methods.

By default, ASP.NET renders HTML 3.2 for all non-Microsoft browsers that does support HTML 4.0 and CSS properly.

* It's better practice to use CSS.

<p style="color:red">My Text</p>
is better than

<p><font color="red">My Text</font></p>

 

Create different HTML for different browsers:

* To check the type of requesting browser: use HttpBrowserCapabilities

HttpBrowserCapabilities client = Page.Request.Browser;
if (client.Browser == "IE")
{
if (client.MajorVersion > 6)
{
writer.Write("You are using IE 7.0 or above.");
}
else
{
writer.Write("You are using IE 6.0 or below.");
}
}
else
{
writer.Write("You are not using IE");
}

* Besides checking the browser type, the alternative way is to check the type of HtmlTextWriter passed to the Render method. It can be either HtmlTextWriter or Html32TextWriter.

HtmlTextWriter: indicates that a browser supports HTML 4.0 with CSS.

Html32TextWriter: indicates the browser only supports HTML 3.2 without CSS.

Downside: All non-Microsoft browsers, including Netscape versions that do support CSS, pass Html32TextWriter to the Render method.

if (writer.GetType().ToString() == "HtmlTextWriter")
{
//Render CSS
}
else
{
//Render HTML 3.2
}

#METHOD 1: Basic HTML output


writer.Write("<H2>" + _message + "</H2>");

#METHOD 2: Create HTML with Write & WriteLine


writer.WriteLine("<p>");
//Indent HTML by inserting a Tab
writer.Write(HtmlTextWriter.DefaultTabString);
//Make text red with Font tag
writer.Write("<font color=\"red\">");
writer.Write(_message);
writer.WriteLine("</font>");
writer.WriteLine("</p>");

#METHOD 3: Using Writer Helper methods to create HTML


writer.WriteFullBeginTag("p");
//Indent HTML by inserting a Tab
writer.Write(HtmlTextWriter.DefaultTabString);
//Make text blue with Font tag
writer.WriteBeginTag("font");
writer.WriteAttribute("color", "blue");
writer.Write(HtmlTextWriter.TagRightChar);
writer.Write(_message);
writer.WriteEndTag("font");
writer.WriteEndTag("p");

#METHOD 4: Writing Styles


//Write begin tag without closing >
writer.WriteBeginTag("p");
//Add a style
writer.Write(" style");
writer.Write(HtmlTextWriter.EqualsDoubleQuoteString);
writer.WriteStyleAttribute("color", "green");
writer.Write(HtmlTextWriter.DoubleQuoteChar);
//Output the '>' for the 'p' tag
writer.Write(HtmlTextWriter.TagRightChar);
writer.Write(_message);
//Write end tag
writer.WriteEndTag("p");