Gokul's Blog


Leave a comment

String Stream for .NET

A good article for using a stream of string.

Article Link:http://www.canerten.com/string-stream-for-net/

public class StringStream : Stream
{
        private StringBuilder strBuilder;
        public StringStream()
        {            strBuilder = new StringBuilder();        }
 
        public StringStream(string str)
        {            strBuilder = new StringBuilder(str);        }
 
        public override int Read(byte[] buffer, int offset, int count)
        {
            int howMuchRead = 0;
            for (int i = offset; i < count; i++)
            {
                var actualIndex = i * 2;               
                howMuchRead = i+1;
                if (actualIndex >= strBuilder.Length)
                {
                    howMuchRead = count;
                    break;
                }                                  
                string s = strBuilder[actualIndex].ToString() + strBuilder[actualIndex + 1].ToString();
                buffer[i] = Convert.ToByte(s,16);
            }
            return howMuchRead;
        }
      public override void Write(byte[] buffer, int offset, int count)
        {           
            for (int i = offset; i < count; i++)
            {
                strBuilder.Append(buffer[i].ToString(“x2”));
            }
        }
}

Advertisements


Leave a comment

Tabless design (HTML)

Here is an example of using tables. This is the output from photoshop after slicing up an image. Below it will be the same thing after I converted to tableless design.

Code:

<table id="Table_01" width="248" height="355" border="0" cellpadding="0" cellspacing="0">
   <tr>
      <td colspan="6">
         <img src="images/calcTables_01.jpg" width="248" height="22" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/calcTables_02.jpg" width="20" height="50" alt=""></td>
      <td colspan="4">
         <img src="images/calcTables_03.jpg" width="205" height="50" alt=""></td>
      <td>
         <img src="images/calcTables_04.jpg" width="23" height="50" alt=""></td>
   </tr>
   <tr>
      <td colspan="6">
         <img src="images/calcTables_05.jpg" width="248" height="22" alt=""></td>
   </tr>
   <tr>
      <td colspan="2">
         <img src="images/calcTables_06.jpg" width="30" height="68" alt=""></td>
      <td>
         <img src="images/calcTables_07.jpg" width="184" height="68" alt=""></td>
      <td>
         <img src="images/calcTables_08.jpg" width="1" height="68" alt=""></td>
      <td colspan="2">
         <img src="images/calcTables_09.jpg" width="33" height="68" alt=""></td>
   </tr>
   <tr>
      <td colspan="2">
         <img src="images/calcTables_10.jpg" width="30" height="64" alt=""></td>
      <td colspan="2">
         <img src="images/calcTables_11.jpg" width="185" height="64" alt=""></td>
      <td colspan="2">
         <img src="images/calcTables_12.jpg" width="33" height="64" alt=""></td>
   </tr>
   <tr>
      <td colspan="2">
         <img src="images/calcTables_13.jpg" width="30" height="74" alt=""></td>
      <td colspan="2">
         <img src="images/calcTables_14.jpg" width="185" height="74" alt=""></td>
      <td colspan="2">
         <img src="images/calcTables_15.jpg" width="33" height="74" alt=""></td>
   </tr>
   <tr>
      <td colspan="6">
         <img src="images/calcTables_16.jpg" width="248" height="54" alt=""></td>
   </tr>
   <tr>
      <td>
         <img src="images/spacer.gif" width="20" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="10" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="184" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="1" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="10" height="1" alt=""></td>
      <td>
         <img src="images/spacer.gif" width="23" height="1" alt=""></td>
   </tr>
</table>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Going tableless means less code in your html. It is easier for text based browsers to understand and puts all the definitions in an external style sheet. This means removing the need to edit your html later on. Using this method allows you to edit your style sheet instead.

Code:

<div id="calculatorWrapper">
   <div id="calcTop"></div>
    <div id="calc02"></div><div id="calc03"></div><div id="calc04"></div>
    <div id="calc05"></div>
   <div class="calcBtn1"></div><div class="calcBtn2"></div><div class="calcBtn3"></div>
    <div class="calcBtn1"></div><div class="calcBtn2"></div><div class="calcBtn3"></div>
    <div class="calcBtn1"></div><div class="calcBtn2"></div><div class="calcBtn3"></div>
   <div id="calcBottom"></div>
</div>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Now isn’t that much nicer.

Here is the css required.

Code:

#calculatorWrapper {
   width:248px;
   height:319px;
   display:block;
   position:relative;
   margin-left:auto;
   margin-right:auto;
   }
#calcTop {
   background-image:url(../images/calculator_01.jpg);
   width:248px;
   height:22px;
   }
#calc02 {
   background-image:url(../images/calculator_02.jpg);
   width:20px;
   height:50px;
   float:left;
   }
#calc03 {
   background-image:url(../images/calculator_03.jpg);
   width:205px;
   height:50px;
   float:left;
   }
#calc04 {
   background-image:url(../images/calculator_04.jpg);
   width:23px;
   height:50px;
   float:left;
   }
#calc05 {
   clear:left;
   background-image:url(../images/calculator_05.jpg);
   width:248px;
   height:22px;
   }
.calcBtn1 {
   float:left;
   background-image:url(../images/calculator_10.jpg);
   width:30px;
   height:64px;
   }
.calcBtn2 {
   float:left;
   background-image:url(../images/calculator_11.jpg);
   width:185px;
   height:64px;
   }
.calcBtn3 {
   float:left;
   background-image:url(../images/calculator_12.jpg);
   width:33px;
   height:64px;
   }
#calcBottom {
   clear:left;
   background-image:url(../images/calculator_16.jpg);
   width:248px;
   height:54px;
   }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

You can see this code live in action here. I’ve used it to for designing a form. And inserted form elements in between the div tags.

http://laweightlosssurgery.com/bmic.html

Article Source