Geekette Mai

The Dynamic pages load!!

2010-02-18T15:35:27-08:00:00

The Dynamic pages load!!

Effective web pages are the result of mmany different factors, including compelling content, good design, and attention to details, such as how fast the page load

In other words, instead of your web server pushing the page experience to the user, the server push script over the Internet. The script then uses the power of the user's computer to make the page come alive.

Pages with scripts like these can be called dynamic pages By moving the processing from the server side to the client(user)side, you get better performance and you can personalize the user experience.

One of my 3 months project at J&J Cordis Corporation for Convert Ms Excel to Ms Access application with is putting the current Date/previous of time the new Processing Engineer got all Training Date into a Forms now is Web page,

Back then I was not familiar much with Date Time as much like today.

which is gets as a number in Access and it's very suck!!. Today I can can manipulate that figure in many ways,

because javascript has to handle the conversion from the number the computer uses into textual date you can understand:

a. window.onload = iniDate;

When the document loads call iniDate( ).

b.var dayName= new array("Sunday", "Monday", "Tuesday", "Wednessday", "Thursday", "Friday", "Saturday");

First, we need to create a new array that contains the day of the week. Make sure to use commas to seperate the items in the array; and because they are text string, each item must enclosed in quotes. The array gets assigned to the variable dayName.

c. var MonName= new array("January", "February", "March", "April", "May", "June", "July", "august", "September", "October", "November", "December");

d. var now = new Date( ) ;

The last thing to do in this first section is to tell javarScript to create a new Date Object, call is now, and fill it with the current date.

e. var dtString = dayName[now.getDay( )] + ", " + monName[now.getMonth( )] + " " + now.getDate ( ) ;

The object dayName[now.getDay ( )] is read from right to left; getday( ) is the javarscript method that gets today's day of the week, and asking now for it gets today's of the week.

The numerical result reference one of the entries in the array dayName

next we concatenate a comma and a space to the text string that we're building, and then we concatenate the next expresion, which is the month name, expression by the object monName[getMonth( )]. This gets the month in much the same fashion as getting the day name; and the reference on of the entries in the array monName.

A space is concatenated next, and we end the object now.getDate( ), which return the date of the month. All of this assigned to dtString variable.

e. document.getElementById( "dtField" ).innerHtml = dtString

The id dtField is in Html page; it's within a <span>tag, liked so

<h1> today is <span id = "dtField"></span>.</h1>

Javarscript:

window.onload = iniDate;

Function inDate( ) {

var dayName= new array("Sunday", "Monday", "Tuesday", "Wednessday", "Thursday", "Friday", "Saturday");

var MonName= new array("January", "February", "March", "April", "May", "June", "July", "august", "September", "October", "November", "December");

var now = new Date( )

var dtString = dayName[now.getday( )] + " , " + monName[now.getmonth( )] + " " + now.getdate( ) ;

document.getElementById( "dateField" ).innerHtm = dtString;

<h1> today is <span id = "dtField"></span>.</h1>

Working with days:

We are figure out if this is weekday or this is a weekend;

a. var now = new Date( );

Fill the variable now with the current date.

b. If(now.getDay( ) > 0 && now.getDay( ) < 6) {

c. dtString = "Sorry, it's a weekday. ";

If the result is greater than zero and less than 6, it has to between 1 and 5, which is to say from Moday to Friday.

d. else {

dtString = "You wrong, It's a weekend!" ;

If we fail b step , it must be weekend.

e. document.getElementById( "dtField" ).innterHTML = dtString ;

Script:

window.onload = initDate ;

Function initDate( ) {

var now = new Date ( ) ;

If(now.getDay( ) > 0 && now.getDay( ) < 6) {

var dtString = "Sorry, it's a weekday.";

}

else {

dtString = "You wrong, It's a weekend!" ;

document.getElementById( "dtField" ).innterHTML = dtString ;

}

Customizing a Message for the Time of the Day:

I take the technique used in the last example and use it again to customize a message for the user, depending on the time of the day.

This can be a friendly greeting when user enter the site

Script:

window.onload = initDate ;

Function initDate( ) {

var now = new Date ( ) ;

document.getElementById( "dtField" ).innterHTML = timeString(now.getHours( ) ) ;

function timeString(theHour) {

if (thehour < 5) {

return "What are you doing so late?";

}

if (thehour < 9) {

return "Good Morning";

}

if (thehour < 17) {

return "No surfing during working hours!";

}

return "Good Everning!";

}

Displaying Dates by time Zone:

By default the dates and times that are displayed are those on the user's machine. If you want to

display a date somewhere else, you need a calculate it based on UTC(Coordinate Universal time) is essential a different name for

GMT(Greenwich Mean Time) or UTC also goes under Universal Time(UT).

Script:

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">

<head>

<Title>Time Zones</title>

</head>

<h3>Our office hours are 9:00 am to 5:00 pm, Monday through Friday, at each of our locations it is now</h3><ul>

<li><span class= "tz-8"></span> in Sanfancisco </li>

<li><span class= "tz-5"></span> in NewYork </li>

<li><span class= "tz-0"></span> in London </li>

</body>

</html>

window.onload = initDate;

function initDate( ) {

var allTags = document.getElementByTagName("*") ;

for (var i=0; i<allTags.lenght; i ++) {

if (allTags[i].classname.indexOf("tz")==0) {

ShowThetime(allTags[i], allTags[i].className.substring(2)) ;

}

function showthetime(currElem, tzOffset) {

var dayName= new array("Sunday", "Monday", "Tuesday", "Wednessday", "Thursday", "Friday", "Saturday");

var thatTZ = new Date( );

var dateStr = thatTZ.ToUTCString( ) ;

dateStr = dateStr.substr(0, datStr.lenght - 3) ;

thatTZ.setTime(Date.parse(dateStr)) ;

thatTZ.setHours(thatTZ.getHours( ) + parseInt(tzOffset)) ;

currElem.innerHTML = showTheHours(thatTZ.getHours( ) ) + showZerofilled(thatTZ.getminutes( ) ) +

-> showAmPm(thatTZ.getHours( ) ) + dayName[thatTZ.getday( )];

function showtheHours(theHour) {

if(theHour ==0) {

return 12;

}

if(theHour < 13) {

return theHour;

}

return theHour - 12

}

function showZeroFilled(intValue) {

if(intValue > 9) {

              return ":" + intValue

            }

              return ":0" + intValue

}

function showAmPm (thattime) {

if(intValue < 12) {

              return "AM" ;

            }

              return "PM" ;

}

Converting 24-Hour to 12-Hour Time:

Javarscript provides the time in 24 hour format, also know as military time. many people are unfamiliar or uncomfortable

with this format. In the next two script has two important elements:

Script:

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">

<head>

<Title>Javar Script Clock</title>

</head>

Display 24-hour clock?

<h3>Our office hours are 9:00 am to 5:00 pm, Monday through Friday, at each of our locations it is now</h3><ul>

</form>

</body>

</html>

window.onload = showTime;

function showthetime( ) {

              var now = new Date( ) ;


              document.getElementByTagName("showTime").innerHTML = showTheHours(now.getHours( ) ) +

-> (now.getHours( ) ) +

showZeroFilled(now.getminutes( ) ) +

showZeroFilled(now.getseconds( ) ) +

settimeout(showTheTime, 1000);

function showtheHours(theHour) {

if(show24Hour( ) || (theHour > 0 && theHour < 13)) {

return theHour;

}

if(theHour == 0) {

return 12

}

return - 12

}

function showZeroFilled(intValue) {

if(intValue > 9) {

              return ":" + intValue

            }

              return ":0" + intValue

}

function show24Hour( ) {

              return (document.getElementById("show24".checked) ;


            }

               function showAmPm (thattime) {

if(show24Hour( ) ) {

              return " " ;

            }




              if(now.getHour( ) < 12)) {

return " AM " ;

             }
              return "PM" ;

}

Creating a Count down:

In case you want to put a count down on your pages that tell the user how many days or hours until a particular event:

Script:

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">

<head>

<Title>Dynamic Countdown</title>

</head>

<p> It's only <span class = "daysTill" id ="Bday"> </span> days until my birthday and <span class = "daysTill" id "Easter" </span> days until EastTer, so you' d better start shopping now!</p>

<p> It's only <span class = "daysTill" id ="anniv"> </span> days until our anniversity...</p>

</body>

</html>

window.onload = showDays;

function showDays( ) {

varAllTags=document.getElementByTagName("*") ;

if (allTags[i].className.indexOff("daysTill") > - 1) {

allTag[i].innerHTML = showtheDaysTill(allTags[i].id) ;

}

function showtheDaysTill(thisDate) {

var theDays ;

Switch(thisDate) {

Case "bday" :

theDays = daysTill(4,13);

break;

Case "Easter" :

theDays = daysTill(4,25);

break;

Case "anniv" :

theDays = daysTill(6,16);

break;

}

return theDays + " ";

function daysTill(mm,dd) {

var now = new Date( ) ;

var inDate = new Date(now.getFullYear( ), mm-1,dd) ;

if(inDate.getTime( ) < now.getTime( ) ) {

inDate.setYear(now.getFullYear( ) + 1) ;

}

return (Math.ceil(dayToDays(intDate) - dayToDays(now( ) ) ) ;

}

           function dayToDays(intime ) {

              return (inTime.getTime( ) / (1000 * 60 * 60 * 24));


              }

        }

Javarscript stores dates in milliseconds since January 1, 1970. In order to compare two dates.

Fist, get the number of millisecond in a day by mutiplying 1000(the numberr of milliseconds in a second), by 60 (number of seconds by minute),

by 60 again(number of minute in an hour), and then by 24(number of hour in a day.

Dividing the number of milliseconds returned by getTime( ).

Object Literals

2010-02-17T15:14:26-08:00:00

We have to talk about About Object literals when mention DOM Nodes, because there more than one way to write any javarScript and can be reWritten in Object Literals:

var myDog = new Object ;
myDog.name = "Uno" ;
myDog.breed = "Chihuahua" ;
myDog.website = "http://www.akc.org/breeds/chihuahua/photos.cfm" ;

function allaboutMyDog( );

            alert (" Can I tell you about my Dog? ") ;

            tellmemore = true ;

Where in Object literal format, that same code would be something like this:

var myDog = {

name = "Uno" ,

breed = "Chihuahua" ,

website = "http://www.akc.org/breeds/chihuahua/photos.cfm" ,

allabout : function ( ) {

         alert("Can I tell you about my Dog") ;

         tellMeMore = true;

}

With either format, you can refer to a property of myDog as myDog.name ( for instance). However with object literal format, the function becomes myDog.allAbout ( ) instead of allAboutMydog ( ).

At this point you're thinking that this look sort familar, pat yourself on the back--it's very similar in many ways, to CSS. At its most basic level, it's a list of property and value pairs, which the colon in between and a seperater around each pair.

Object literals:

-Properties are set Using : not=.

-Lines end with , instead of ;.

-No comma needed on the last statement inside of the object

HTML Script:

function nodeChanger() {

return ChgNodes.doAction( ) ;

}

var ChgNodes = {

ActionType : function ( ) {

var radioButtonSet = document.GetElementByTagName ( "form" ) [ 0 ].nodeAction ;

for (var i = 0 ; i <radioButtonSet.Lenght ; i ++ ) {

if (radioButtonSet [ i ].checked ) {

actionType = i ;

}

return - 1

allGraft : Function ( ) {

return this.nodeChgArea.getElementByTagName ( " p " ) ;

allGraft : Function ( ) {

return this.allGrafs ( ).length ;

intext : function ( ) {

return document.getElementById( " textArea " ).value

newtext : function ( ) {

return document.createTextNode(this.intext( ) ) ;

graftChoice : function ( ) {

return document.getElementById ("grafCount".slectIndex ;

},

newGraf : function ( ) {

var myNewGraf = document.CreateElement( " p " ) ;

myNewGraf.appendChild(this.newText( ) ) ;

return myNewGraf ;

},

oldGraf : function ( ) {

return this.allGrafts( ).item(this.grafChoice ( ) );

doAction : function ( ) {

Switch ( actionType ( ) ) {

case 0 :

this.nodeChgArea.appendChild( this.newgraf ( ) ) ;

break ;

case 1 :

If (this.pGrafCt( ) > 0 ) {

this.nodeChgArea.removeChild( this.oldgraf ( ) ) ;

break ;

}

case 2 :

If (this.pGrafCt ( ) > 0 ) {

this.nodeChagArea.InsertBefore(this.newGraf ( ),this.oldGraf ( ) ) ;

break ;

}

case 3 :

If (this.pGrafCt ( ) > 0 ) {

this.nodeChagArea.replaceChild(this.newGraf ( ),this.oldGraf ( ) ) ;

break ;

}

default:

alert( "No valid action was chosent " ) ;

}

document.getElementById ( "grafCount " ).option.Lenght = 0 ;

For ( var i= 0 i<this.pGrafCt ( ) ; i + + ) {

document.getElementById ( " grafCount " ).option [ i ] = new Option ( i + 1)

}

return false ;

}

init : function ( ) {

this.nodeChgArea = document.getElementbyID( "DOM" ) ;

}

DOM: Adding Nodes, Deleting Nodes, Deleting specific Nodes, Inserting Nodes, Replacing Nodes

2010-02-16T12:10:32-08:00:00

Today I like to talk about DOM(document object model).

The best to look is as ECMAScript bidings, which can be found at http://www.w3.org/TR/DOM-level -3-Core/ecma-script-biding.html

I learned that the easiest way to create nodes is to start off by simply appending an element node to the end of your document.script , a new paragraph is added to your page.

Adding Nodes:

1. Var newText = document.CreateTextNode(intext) ;

newText is the new text node, using CreateTextNode() method, which contain what ever text was found in the textArea.

2. var newGraf = document.CreateElement(" p ") ;

CreatElement() method while the node we creating here is a paragraph tag, and it could be any HTML container(div, span, etc)

3. newGrag.appendChild(newText) ;

Call appendChild() that's a method of newGraf which , when pass newText, put the text node into the paragraph.

4. var docBody = document.getElementsByTagName( "body " ) [ 0 ] ;

The getElementsByTagName() method gives us everybody tag on our page. The [ 0 ] property is that first body tag, and we store that in docBody

5. docBody.appendChild(newGraft) ;

docBody using appendChild() again puts the use's text on the page

Script HTML 01

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">

<head>

<Title>Adding Nodes</title>

</head>

<body>

<p>textarea id = "textArea " rows = "5 " Cols = " 30 "></p>

</form>

</body>

</html>

Script HTML 02

Window.onload = intiAll ;

function initAll () {

document.GetElementByTagName( " form " ) [ 0 ].onsubmit = addNode ;

}

function addNode () {

var inText = document.GetelementById( "textArea " ).value ;

var newtext = document.createtextNode( intext ) ;

varNewGraf = document.createElement (" p ") ;

newgraf.appendChild( newtext ) ;

var docBody = document.getElementByTagName( "body " ) [ 0 ] ;

docBody.appendChild (newGraft );

return false ;

}

Why we are bother to go through all the hassle of creating a text node, elemen node, and appending a child just to do what you could do in innerHTML. Every <p> or <dir> tag that's added is automatically closed, and it's easy to create tag soup and once you do, your page DOM become very difficult to work with.

Deleting Nodes:

If you want to add content to your page, then you likely want to delete content from your page

1. var allGrafs = document.getElementsByTagName( "p " ) ;

The getElementsByTagName method collect all the paragraph tag in our page ans store them in the allGrafs array.

2. If (allGrafs.length > 1) {

We have to check the allGrafs array has a lenght grater than 1. We don't delete anything that doesn't exist.

3. var lastGraf = allGrafs.item(allGrafs.length - 1) ;

Get the last one from the page by subtracting one from lenght and use it as our index array. Oh, lenght is one-relative while array are zero-relative.

4. var docbody = document.getElementBytagName( " body " ) [ 0 ] ;

docBody.removeChild( lastGraf ) ;

Script HTML 03

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">

<head>

<Title>Deleting Nodes</title>

</head>

<body>

<p>textarea id = "textArea " rows = "5 " Cols = " 30 "></p>

</form>

<a id= "deleteNode" href = "# "> Delete last paragraph </a>

</body>

</html>

Script HTML 04

Window.onload = intiAll ;

function initAll () {

document.GetElementByTagName( " form " ) [ 0 ].onsubmit = addNode ;

document.GetElementById( " DeleteNode " ).Onclick = delNode ;

}

function addNode () {

var inText = document.GetelementById( "textArea " ).value ;

var newtext = document.createtextNode( intext ) ;

varNewGraf = document.createElement (" p ") ;

newgraf.appendChild( newtext ) ;

var docBody = document.getElementByTagName( "body " ) [ 0 ] ;

docBody.appendChild (newGraft );

return false ;

}

function delNode () {

var allgrafs = document.getElementByTagName ( "p" );

if (allGraph.Lenght > ! ) {

var lastGrafs.lenght = allGrafs.item(allgrafs.lenght - 1) ;

var docBody = document.GetElementBytagName( "body" ) [ 0 ] ;

docBody.RemoveChild( lastGraft ) ;

}

else {

alert (" nothing to remove ! " ) ;

}

return false ;

}

We need to get the content of the body. Once we've got that, it's simply a matter of calling the docBody.removeChild () method.

Deleting Specific Nodes:

We sometimes want to delete something that's not at the end of the page

1. nodeChgArea = document.getElementById( "DOM " ) ;

Script HTML 05

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">

<head>

<Title>deleting specific Nodes</title>

</head>

<body>

<p>textarea id = "textArea " rows = "5 " Cols = " 30 "></p>

<p><label><input Type = " radio " name = "nodeAction" />Delete node</label></p>

Paragraph # : <select id= "GraftCount "></select>

</form>

</body>

</html>

Script HTML 06

Window.onload = intiAll ;

function initAll () {

document.GetElementByTagName( " form " ) [ 0 ].onsubmit = NodeChanger ;

nodeChagArea = document.getElementById ( " DOM " ) ;

}

function addNode () {

var inText = document.GetelementById( "textArea " ).value ;

var newtext = document.createtextNode( intext ) ;

varNewGraf = document.createElement (" p ") ;

newgraf.appendChild( newtext ) ;

var docBody = document.getElementByTagName( "body " ) [ 0 ] ;

docBody.appendChild (newGraft );

}

function delNode () {

var allgrafs = document.getElementByTagName ( "p" );

if (allGraph.Lenght > ! ) {

var lastGrafs.lenght = allGrafs.item(allgrafs.lenght - 1) ;

var docBody = document.GetElementBytagName( "body" ) [ 0 ] ;

docBody.RemoveChild( lastGraft ) ;

}

function nodeChanger() {

var actionType = - 1 ;

var pGrafCt = nodeChgArea.GetelementByTagName ( " p " ).lenght ;

var radioButtonSet = document.GetElementByTagName ( "form" ) [ 0 ].nodeAction ;

for (var i = 0 ; i <radioButtonSet.Lenght ; i ++ ) {

if (radioButtonSet [ i ].checked ) {

actionType = i ;

}

Switch ( actionType ) {

case 0 :

addNode ( ) ;

break ;

case 1 :

If (pGrafCt > 0 ) {

delNode ( ) ;

break ;

}

default:

alert( "No valid action was chosent " ) ;

}

document.getElementById ( "grafCount " ).option.Lenght = 0 ;

For ( i= 0 i<nodeChgArea.getElementByTagName ( " p " ).lenght ; i + + ) {

document.getElementById ( " grafCount " ).option [ i ] = new Option ( i + 1)

}

return false ;

}

Inseting Nodes:

Along wanting to delete nodes other than at the end of the document. You want to add nodes

Script HTML 06

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">

<head>

<Title>Inserting Nodes</title>

</head>

<body>

<p>textarea id = "textArea " rows = "5 " Cols = " 30 "></p>

<p><label><input Type = " radio " name = "nodeAction" />Delete node</label></p>

<p><label><input Type = " radio " name = "nodeAction" />Insert before Nodes</label></p>

Paragraph # : <select id= "GraftCount "></select>

</form>

</body>

</html>

Script HTML 07

Window.onload = intiAll ;

function initAll () {

document.GetElementByTagName( " form " ) [ 0 ].onsubmit = nodeChanger ;

nodeChgArea = document.GetElementById ( " DOM " ) ;

}

function addNode () {

var inText = document.GetelementById( "textArea " ).value ;

var newtext = document.createtextNode( intext ) ;

varNewGraf = document.createElement (" p ") ;

newgraf.appendChild( newtext ) ;

var docBody = document.getElementByTagName( "body " ) [ 0 ] ;

docBody.appendChild (newGraft );

return false ;

}

function delNode () {

var allgrafs = document.getElementByTagName ( "p" );

if (allGraph.Lenght > ! ) {

var lastGrafs.lenght = allGrafs.item(allgrafs.lenght - 1) ;

var docBody = document.GetElementBytagName( "body" ) [ 0 ] ;

docBody.RemoveChild( lastGraft ) ;

}

function InsertNode() {

var GraFchoice = nodeChgArea.GetelementById ( " grafCount " ).SelectIndex ;

var inText = document.GetElementById ( "textArea" ).value;

var newText = document.CreateTextNode(intext) ;

Var newGraft = document.CreateElement ( " P " ) ;

newGraft.appendChild(newText) ;

var allGrafts = nodeChgArea.grtElementByTagName ( " p " ) ;

var oldGraft = allGrafts.item(grafChoice) ;

}

function nodeChanger() {

var actionType = - 1 ;

var pGrafCt = nodeChgArea.GetelementByTagName ( " p " ).lenght ;

var radioButtonSet = document.GetElementByTagName ( "form" ) [ 0 ].nodeAction ;

for (var i = 0 ; i <radioButtonSet.Lenght ; i ++ ) {

if (radioButtonSet [ i ].checked ) {

actionType = i ;

}

Switch ( actionType ) {

case 0 :

addNode ( ) ;

break ;

case 1 :

If (pGrafCt > 0 ) {

delNode ( ) ;

break ;

case 2 :

If (pGrafCt > 0 ) {

InsertNode( ) ;

break ;

}

default:

alert( "No valid action was chosent " ) ;

}

document.getElementById ( "grafCount " ).option.Lenght = 0 ;

For ( i= 0 i<nodeChgArea.getElementByTagName ( " p " ).lenght ; i + + ) {

document.getElementById ( " grafCount " ).option [ i ] = new Option ( i + 1)

}

return false ;

}

Replacing Nodes:

While you can always delete existing nodes and insert new nodes. It's simply just replace nodes if that what you want

Script HTML 08

<!DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1?DTD/xhtml-transitional.dtd">

<head>

<Title>Inserting Nodes</title>

</head>

<body>

<p>textarea id = "textArea " rows = "5 " Cols = " 30 "></p>

<p><label><input Type = " radio " name = "nodeAction" />Delete node</label></p>

<p><label><input Type = " radio " name = "nodeAction" />Insert Nodes</label></p>

<p><label><input Type = " radio " name = "nodeAction" />Replacing Nodes</label></p>

Paragraph # : <select id= "GraftCount "></select>

</form>

</body>

</html>

Script HTML 09

Window.onload = intiAll ;

Using Multi-level Conditionals in a Switch/Case statement

2010-02-15T12:17:01-08:00:00

Below the HTML sets up the page for multi-level conditionals

<!DOCTYPE html PUBLIC "_//W3C/DTD XHTML 1.0 Transitional//EN "

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Switch/Case Handling</title>

</head>

<body bgcolor= "#FFFFFF"

<h2>Famous quote on the President day!!</h2>

// by the way today is the President day 02/15/2010

<input type= "button" id= "Barah Obama" Value = "Barah Obama"

<input type= "button" id= "George W Bush" Value = "George W Bush"

<input type= "button" id= "Bill Clinton" Value = "Bill Clinton"

</form>

</body>

</html>

NOW is the time for us to use a Switch/Case statment

1. Window.onload = initAll;

When on the pageLoads, call the initAll ( ) function

2. function initAll ( ) {

document.getElemtbyId ("Barah Obama").onclick = the new president of the United States;

document.getElemtbyId ("George W Bush").onclick = the former president of the Untined States;

document.getElemtbyId ("Bil lClinton").onclick = the previous former president of the Untined States;

In the function, we set onClick handler for each of the button on the page. Because we set id attribute along with the value attribute on HTML, we've able to use getElementById ( ) to set event handler. If it existed, it would have been nice to be able to use a getelementByValue ( ) Call --then, we wouldn't had to set the id attribute.

3. Function saysomething ( ) {

This begins the saysomething ( ) function.

4.switch(this.id) {

The id of this object is used as the parameter to switch( ). Its value will decide which of the below case statements gets executed.

5 Case " Barah Obama";

alert("Yes We Can" );

break;

If the Id of this object is " Barah Obama", this alert appears. Regarding break, if the user clicked Barah Obama, we've in this section of code. However, we've done everything we want to do, and we want to get out of the switch. In order to do that, we need to break out. Otherwise, we'll execute all of the code below, too. While that continued execution cna be handly in certain circumtances, this isn't one of them.

6 Case "Geoge W. Bush";

alert(" You mess with Bush, you messed with Texas.");

break;

7 Case "Bill Clinton";

alert("I didn't have a sexual relationship with that woman");

break;

And finally, if user click on George Bush we end up poping up another alert and then breaking out of the switch.

8 Default:

If you were wondering what would happen if the user's entry didn't meet on of the critiria, you are in the right place. The defaul section is where we end up our switch value didn't match any of the case values. The default block is optional, but it's always good coding practice to include it. just incase (so to speak). In this script, there no code their to execute, because we shouldn't get over here.

9 }

This closing brace ends the switch statement

Using Javarscript to enhance links

2010-02-15T12:12:44-08:00:00

A while ago I was asked to performed some sort of action for Acounting group after a user clicks a link, but before the brower loads the new page. A typical example would be when you want to put an alert before user goes to a particular page on my application, or it make it clear when the user leaves yoour application

<!DOCTYPE html PUBLIC "_//W3C/DTD XHTML 1.0 Transitional//EN "

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

Hey, check out <a herf=http://www.pixel.mu/ id="redirect"> my page 2 website</a>

</h2>

</body>

</html>

THE LINK Enhancement script.

window.omload = initALL;

function initAll( ) {

document.getElementbyId( "redirect").onclick = initRedirect;

}

function iniTredirect ( ) |

alert("We are not blah blah blah..."); window.location = this;

return false

}

You may noticed that nowhere in the code does it refer to a mypage 2-- That's part of this power of "this;"

One of the things the "this; " keyword does for us is grab the URL from the HTML link (that is, the value of the a tag's herf attribute). If I using this approach, I don't have to touch the links ehnamcement script. I could have links all over our Application Website calling from the same script, and all line of code would automately grab their href values as well.

SOAP Header required information from Web Service

2010-02-12T12:56:01-08:00:00

From what I understand that .NET is rich with classesa andd Web Service Suppor, and SOAP headers arewith the authentication theme...

The first thing to do this is create a class that will represent the header:

Public class AuthToken: SoapHeader

{

protected string m_strAuthToken;

public AuthoToken ( )

{

m_strAuthToken = " " ;

}

public String Token

{

Get { return m_strAuthToken; }

Set { m_strAuthToken = Value; }

}

As it happens, SOAP Headers within .Net Framework are actually implemented as attributes of the Web Method. Therfore, within your Web Service class you will create an instance of the header class that may be referenced by each interested Web method:

public class Service1: System.Web.Services.WebService

{

public AuthoToken m_authotoken;

...

[webmethod]

[soapHeader ( "m_authToken "' Direction = SoapHeaderDirection.In)]

public string MyBillablewebmethod ( )

{

return " " ;

}

//continue processing...

...

}

We need to inform .Net that we infact understand the SOAP Header or .Net will throw the require SOAP fault. Soap 's must understand constraint wasn't met and we will have to provide an implementation for Authenticate( ) to actual validate the authentication token.

The key for web Service proxy you must use wsdl.exe or via VS .Netadd a reference at the menu option Or if you download a WSDL file for Web Service that require a SOAP header than you must do this

public class service1:

system.web.services.protocals.soaphttpclientprotocol

{

public AuthToken AuthTokenValue;

...

[system.xml.serialization.xmlrootattribute(Naspace= " http:// tempuri.org / " , isNullable=false)]

public class AuthToken: SoapHeader

{

public string Token ;

}

When you create an instance proxy in your main application file, you will create an instance of AutToken class and assign the string:

Service1 objSvc = New Service ( ) ;

//Create the header itself. Thios header will go to

//web service processing

objSvc.AuthTokenValue = new AuthToken ( ) ;

ObjSvc.AuthTokenValue.Token = < actual token value > ;

// Call the Web Service

string strResult = objSvc.MybillableWebMethod ( ) ;

.Net will make sure the SOAP header is created and filled with the authentication token's value

C#, Custom Attribute, Static Constructor

2010-02-12T12:29:30-08:00:00

I have not programming in a while, and I have forgotten some of the concept and definition of terminology. Until I was being asked, they took me a while before they snapped back in my brain :-)

Custom Attribute?
For example: How I create a Custom attribute?

From what I remember the primary step to properly design custom attribute classes follows:

Applying the AttributeUsageAttribute([AttributeUsage(AttributeTargets.All, Inherited=false, AllowMutiple=true)])

a) Declaring the attribute. (Class public class MyAttribute: System. Attribute {//...}

b) Declaring constructors (Public MyAttribute(bool myvalue){this.myvalue= myvalue;})

c) Declaring properties

Public bool MyProperty

{

get {return this myvalue;}

Set {this.myvalue = value;}

}

The following is the sample demonstrates the basic way of using reflection to get access to custom attributes:

Class MainClass

{

public static void Main()

{

System.Reflection.MemberInfo info = typeof(myclass);

object [] attributes = info.getcustomAttributes( );

for (int i = 0 ; i < attributes. Length; i ++)

{

System.Console.Writeline(attributes [ i ] ;

}

Static constructor
If I were asked that different type constructor and instance constructor. then I will flick to

What is static constructor, when it will be fired?

How to use it Instance constructor is executed when a new instance of type is created and the class instructor is executed after the type is loaded and before one of the type members is accessed. ( it will get executed only 1st time, when we call any static methods/fields in the same class) Class constructor is used for static field initialization.

Only one class constructor per type is permitted, and it cannot use the variable argument calling convention

A static constructor is used to initialize a class.

It is called automatically to initialize the class before the first instance created or any static members are referenced.

What news in Visual Studio 2010

2010-02-05T16:34:16-08:00:00

Set your ideas free

Create what you can imagine, build on the strengths of your team, and open up new possibilities.

· New prototyping, modeling, and visual design tools enable you to create innovative applications for Windows and the Web

· Create a shared vision as a foundation for creativity with SketchFlow ,in Microsoft Expression® Studio , and Team Foundation Server

· Take advantage of new opportunities & capabilities offered by multi-core programming and cloud development tools

Simplicity through integration

A single integrated

Simplicity through integration

A single integrated development environment that takes your skills further and adjusts to the way you work.

· Complete all your coding, modeling, testing, debugging, and deployment work without leaving the Visual Studio 2010 environment

· Use existing standards and skills to target a growing number of application types including Microsoft SharePoint® and Windows^® Azure™

· Work your way through multi-monitor support, partner extensions, and a new editor.

Quality tools help ensure quality results

Powerful testing tools with proactive project management features help you build the right app the right way.

· Use the new IntelliTrace debugger to isolate the point of failure within a recorded application history.

· Stay ahead of the curve with proactive project management tools including new reports, dashboards, and planning worksheets.

· Know that you’ve built the right application the right way with manual and automated testing tools.

"2010 is different - handing off files to my team is a lot more efficient. That frees up my time to be more creative."

"With the prototyping tool, I can share my ideas and then watch them come to life."

An Ultimate offer for devs

Buy or renew your MSDN Premium subscription now to receive a more advanced edition of Visual Studio 2010 with MSDN when it ships. Limited time offer – Act now.

See what it means for you

In the press

SD Times: Visual Studio 2010 beta goes live

Washington Post: Microsoft Moves Visual Studio Towards The Cloud

eWeek: Microsoft Launches Beta 2 of Visual Studio 2010, .Net 4

InfoWorld: Microsoft to offer second beta for Visual Studio 2010

Ars Tecnica: Visual Studio 2010 simplified to four SKUs, Beta 2 arrives

Wanna learn more about the Visual Studio 2010 launch?

Sign up email alerts to access more information about launch and to receive insider notifications about forthcoming Visual Studio releases

Jono Wells is twittering away about what’s going on with Visual Studio 2010.

Follow @onojw on Twitter

#vs10 RSS

.Net 4.0

2010-01-14T21:54:27-08:00:00

The .NET Framework is Microsoft's comprehensive and consistent programming model for building applications that have visually stunning user experiences, seamless and secure communication, and the ability to model a range of business processes.

Expression Web Interface

2009-11-16T23:17:56-08:00:00

The success of any design tool lies on how well its interface contributes to your productivity. Expression Web’s interface is designed specifically to make access to tools easy while maintaining maximum area for design surface. Specialized task panes, toolbars and visual designs give you precise control of page layout and formatting.

Workspace

The Microsoft® Expression® Web workspace provides you with the tools you need to create and modify web pages and websites. The workspace is customizable, so you can change the way it looks to best match your working style. Here's what the workspace looks like when you first install Expression Web.

TIP: To reset the workspace to the default, on the Task Panes menu, click Reset Workspace Layout.

Toolbars can contain buttons, menus or a combination of both.

Task Panes

The folder list has many similar features like a file manager, such as creating new folders, adding files, deleting folders, and so on. The Folder List is similar to the Web Site tab in the Editing window. But this tab allows for more customized views than the basic view provided by the Folder List.

d. Apply Styles and Manage Styles:

The Apply Styles task pane enables you to apply, remove, modify and delete styles; attach or detach external cascading style sheets (CSS); select all instances of a style and traverse to the code that defines a style’s rule set. Apply Styles task pane displays each style according to the rules of the style, so you can identify the style you want to apply just by looking at the style’s visual appearance.

When you open a Webpage, this task pane lists styles that are defined in all of the pages and CSS, including external, inline and internal CSS. You can set the task pane to list all styles or only the styles used in current web page or current selection in the page.

The Manage Styles task pane enables you to do all the tasks you can do with Apply Styles task pane. Apart from these tasks you can use Manage Styles task pane to move styles from an external CSS to an internal CSS and vice versa, or to move the location of a style within a CSS.

When you open a web page, the Manage Styles task pane lists all styles that are defined in the page, external and internal CSS, but not inline CSS. All class-based, element-based and id-based styles appear under either the name of the external.css file that contains the style or Current Page if the style is in an internal CSS.

All the other Task Panes can be found in the Task Panes Menu. Task Panes can be maximized by clicking on the maximize button. You can have multiple task panes open at a time and adjust the position and size of each task pane according to your requirement. For that you can drag a task pane to any edge of the Expression Web Interface to dock it on that edge or drag it away from an edge to make it a floating task pane that can be positioned anywhere within the user interface. When you arrange the task panes in a layout that suits your need, Expression Web automatically uses this layout the next time you start the program.

Task panes also contain tabs so that multiple task panes can be present within the same window. The following figure shows the Manage Styles task pane with several tabs inside it. TO activate any of the other task panes, simply click the tab. Arrows are also provided when the pane doesn’t have enough space to display all tabs.

To add a task pane as a tab within another task pane, simply drag one task pane on top of another.

To open other task panes

Select the intended task pane from the Task Panes menu. A checkmark on the Task Panes menu indicates that a task pane is visible in your workspace. If a task space is selected but is not visible because it is merged with other task panes, simply click the task pane on the Task Panes menu to make the task pane visible.

To move a task pane

Click on the title bar of the Task Pane and then drag the title bar of the task pane to the new location.

To dock a task pane

You can both drag the title bar of a floating task pane to the edge of the program window or Right-click the task pane tab or title bar and then click Dock.

To float a task pane

You can both drag the title bar of a docked task pane away from the edge of the program window or Right-click the task pane tab or title bar and then click Float.

Editing Window

Editing Window is the area in Microsoft Expression Web where you create and modify your Web pages.

The top of the Editing Window shows the files that are open in the form of tabs. The file you are currently working on is highlighted. You can close the current page or file by clicking on the cross displayed on the extreme right corner of the Editing Window. You can switch between the tabs by keyboard shortcuts Ctrl + Tab or Ctrl + Shift + Tab.

Below the tabs is a Quick Tag Selector Bar. HTML tags from the document are displayed on this bar in a nested order. To select the tag you can either click on it or on the arrow next to it for more options.

In addition to these, there are three views to this window for the purpose of editing the web pages.

Page views –

Design View: This view is WYSIWYG. You can create and edit web pages using the design controls in this view.

Split View: You can review and edit web page content in a split screen format that offers you a simultaneous access to both the Code and Design views.

Code View: You can view, write and edit the HTML tags yourself with the optimize code features provided.

For switching between these three views you can use the keyboard shortcuts Ctrl + Page up or Ctrl + Page Down

The Editing Window in Expression Web does not use Internet Explorer for rendering. It is a browser-independent rendering of your web page.

Status Bar

The Status bar of Expression Web is extremely informative. It contains tools that warn you when incompatible or invalid code is detected and also provides information about your current editing modes, such as visual aids mode, style application mode, rendering mode and page size as well as information about the file you are editing, such as file size, HTML schema and CSS schema.

You can Right-click a file or folder in the Folder List for a menu of options.

CAUTION: Any files deleted from the Folder List are permanently deleted. There is no Recycle Bin in Expression Web, so be careful!

b. Tag Properties and CSS Properties:

The Tag Properties task pane enables you to quickly see all of the set attributes and values of the tags that are currently active in the current web page. The task pane also enables you to modify the set attributes and set new attributes for the current tag.

CSS Properties task pane can be used with an open web page, external CSS file, or with the Manage Styles task pane to review and change the properties and values of existing styles. The CSS Properties task pane enables you to quickly see all of the styles that the current selection in your web page uses, the order of precedence of those styles, and all of the properties and values of those styles.

c. Toolbox:

Toolbox task pane contains HTML Elements, Form Controls and ASP.NET Controls. Microsoft Expression Web has made it convenient for you to use all these controls in your web pages only by dragging these onto your web pages. The code Expression Web creates when you drag an item onto your page depends upon the DocType declaration in your page.

Task Panes in Microsoft Expression Web are designed to help you access the tools you need, easily while you work. The default interface will include an Editing window surrounded by four task panes:

a. Folder List:

Expression Web displays all the files and folders in the current Website inside the Folder List task pane. You can expand the folders by clicking the [+] button to the left of the folder name and collapse folders by clicking the [-] button to the left of the folder name.

Workspace comprises of:

i. Menu and Toolbars

ii. Task Panes

iii. Editing Window

iv. Status Bar

Menus and Toolbars

Menus display a list of commands. Most of these commands have images next to them to help you quickly associate the command with the image. For instance File Menu contains commands like New, Open, Open Site, and so on. Some of these commands are also expandable displaying some more options.

1. Code Error Detected : You can traverse to the error in the code on your web page.

2. HTML Incompatibility Detected : You can go to the HTML incompatibility schema in your code.

6. Standard: Standard Rendering mode. The rendering mode is determined by the document’s DocType. Double clicking would open the Page Editor Dialog box from where you can select the suitable DocType. For more information see How to Set Document Type Information later in this article.

8. XHTML 1.0 T: This tells you what document type is set. Double clicking would open the Page Editor Options dialog box that would show the options for HTML Schema. For more information see How to Set Document Type Information later in this article.

9. CSS 2.1: This shows the CSS Schema that Expression Web applies to the current page. Double click to open the Page Editor Option dialog box. For more information see How to Set Document Type Information later in this article.

Visual Aids are user interface elements that make it easier to work with Web pages. Expression® Web offers nine different Visual Aids to make it easier to position items and locate elements on the Web page. Visual aids help you see empty or invisible elements and elements with hidden borders. You can also use visual aids to find elements that have hidden or invisible styles, as well as ASP.NET controls that aren't visible on a page. Finally you can use visual aids to see which tags are used around specific content, and you can see the size of margins and padding around your tags.

To access Visual Aids; select Visual Aids from View menu and select the desired visual aid from the sub menu.

NOTE: The Status bar displays the current status of the Visual Aid. You can turn it on or off just by double clicking on the Visual Aids area of the Status bar.

Following Visual Aids are available on the Visual Aids menu:

1. Block Selection= This is enabled by default. Expression® Web displays a block selector for HTML blocks. A Block selector is a small tag indicator, when you hover your cursor in a block a dotted rectangle appears around the tag. When you select the block a shaded area is displayed indicating padding around the element.

2. Visible Borders= This selection displays dotted borders around HTML elements that don’t have borders. For instance, a table in Expression® Web, Visual borders will render a dotted border around every cell even if the table has no border.

3. Empty Containers= The Empty Containers Visual Aid displays borders around certain elements that act as containers for other elements. For example, an HTML form is visible by default in Design View, even when the form has no controls in it.

4. Margins and Padding= This shows the margins and padding around all elements; margins appear in red and padding appears in blue. You cannot use Margins and padding visual aid to change margins and padding.

5. CSS Display: none elements=Shows elements that are hidden by a style that includes display: none.

6. CSS Visibility: hidden Elements = Shows elements that are hidden by a style that includes visibility: hidden.

7. ASP.NET Non-visual Controls= Shows a rectangle for ASP.NET controls which don't display anything.

8. ASP.NET Control Errors= Shows an error message when an ASP.NET control encounters an error, such as not connecting to a data source.

9. Template Region Labels= Shows a border around editable template regions, including a tab with the name of the region, in pages based on Dynamic Web Templates or ASP.NET master pages.

The Browsers read the Document Type (DocType) information to determine which version of HTML is used in the web page. You can set a default DocType so that Microsoft® Expression® Web automatically inserts a DocType declaration on all the new pages. You can also choose not to automatically insert a DocType declaration on new pages.

The DocType declaration on a web page also determines the schema Expression Web uses to coerce incompatibility notifications and IntelliSense for HTML and script. Expression Web uses the secondary schema if a page has an unrecognized or missing DocType. If there is an incompatibility or error in your HTML, Expression Web displays it as an icon in the status bar. The Code Error Detected icon indicates an error in the code on your page. The HTML Incompatibility Detected icon indicates an incompatibility with the HTML schema you selected.

To set the default DocType declaration that Expression Web inserts when you create new pages

On the Tools menu, click Page Editor Options.

In the Page Editor Options dialog box, on the Authoring tab, select the DocType and Secondary Schema you want to use for all new files.

NOTE: To prevent Expression Web from inserting a DocType declaration, in the DocType box, select None.

To change the DocType declaration in an existing page

In Code view, in your page, edit the DocType declaration. Here's an example of a DocType declaration.

<! DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

When you format items in a web page, Microsoft® Expression® Web produces that formatting by generating new styles in an internal cascading style sheet (CSS) or modifying existing styles in the CSS.

Expression Web generates and modifies styles for you in Auto mode (default) or Manual mode. No matter which mode you choose, when you format an item that doesn't have a style, Expression Web generates and applies a new style for you. For example, if you select a paragraph of plain text in your web page and apply color to the text by using the Font Color button in the Common toolbar, Expression Web creates a new style and applies it to the text to format its color. If you then format another property of that same paragraph of text, such as the paragraph's font-family, Expression Web adds a new property declaration to the generated style it just created.

In Manual mode, you can write your own CSS to simplify your design process. You also have additional control provided by the Style Application toolbar.

TIP: If you're new to writing CSS, use Auto mode. If you're an experienced CSS author that can write your own CSS, use Manual mode to streamline your design process.

7. 591 x 554Describes the current page size of the editing window. To change the size of the window click on the current size and select the size from the list or select Modify Page sizes.

TIP: You can add, modify or remove the page size setting also in the Design view from View menu, select Page Size and then click Modify Pages.

3. Visual Aids: Off: Change the Visual aids mode. For more information see Visual Aids later in this article.

4. Style Application :Manual: Double click to open the Style Applicator Toolbar and change the mode. For more information see Generated Cascading Stylesheets later in this article.

5. 87.6 KB: Size of the current file. When you hover over the number, Download statistics are displayed, which give a breakup of the total file size.

ADO.NET Data Architecture

2009-11-16T23:15:57-08:00:00

DataSet

The dataset is a disconnected, in-memory representation of data. It can be considered as a local copy of the relevant portions of the database. The DataSet is persisted in memory and the data in it can be manipulated and updated independent of the database. When the use of this DataSet is finished, changes can be made back to the central database for updating. The data in DataSet can be loaded from any valid data source like Microsoft SQL server database, an Oracle database or from a Microsoft Access database.

Data Provider

The Data Provider is responsible for providing and maintaining the connection to the database. A DataProvider is a set of related components that work together to provide data in an efficient and performance driven manner. The .NET Framework currently comes with two DataProviders: the SQL Data Provider which is designed only to work with Microsoft's SQL Server 7.0 or later and the OleDb DataProvider which allows us to connect to other types of databases like Access and Oracle. Each DataProvider consists of the following component classes:

The Connection object which provides a connection to the database
The Command object which is used to execute a command
The DataReader object which provides a forward-only, read only, connected recordset
The DataAdapter object which populates a disconnected DataSet with data and performs update

Data access with ADO.NET can be summarized as follows:

A connection object establishes the connection for the application with the database. The command object provides direct execution of the command to the database. If the command returns more than a single value, the command object returns a DataReader to provide the data. Alternatively, the DataAdapter can be used to fill the Dataset object. The database can be updated using the command object or the DataAdapter.

Component classes that make up the Data Providers

The Connection Object

The Connection object creates the connection to the database. Microsoft Visual Studio .NET provides two types of Connection classes: the SqlConnection object, which is designed specifically to connect to Microsoft SQL Server 7.0 or later, and the OleDbConnection object, which can provide connections to a wide range of database types like Microsoft Access and Oracle. The Connection object contains all of the information required to open a connection to the database.

The Command Object

The Command object is represented by two corresponding classes: SqlCommand and OleDbCommand. Command objects are used to execute commands to a database across a data connection. The Command objects can be used to execute stored procedures on the database, SQL commands, or return complete tables directly. Command objects provide three methods that are used to execute commands on the database:

ExecuteNonQuery: Executes commands that have no return values such as INSERT, UPDATE or DELETE
ExecuteScalar: Returns a single value from a database query
ExecuteReader: Returns a result set by way of a DataReader object

The DataReader Object

The DataReader object provides a forward-only, read-only, connected stream recordset from a database. Unlike other components of the Data Provider, DataReader objects cannot be directly instantiated. Rather, the DataReader is returned as the result of the Command object's ExecuteReader method. The SqlCommand.ExecuteReader method returns a SqlDataReader object, and the OleDbCommand.ExecuteReader method returns an OleDbDataReader object. The DataReader can provide rows of data directly to application logic when you do not need to keep the data cached in memory. Because only one row is in memory at a time, the DataReader provides the lowest overhead in terms of system performance but requires the exclusive use of an open Connection object for the lifetime of the DataReader.

The DataAdapter Object

The DataAdapter is the class at the core of ADO .NET's disconnected data access. It is essentially the middleman facilitating all communication between the database and a DataSet. The DataAdapter is used either to fill a DataTable or DataSet with data from the database with it's Fill method. After the memory-resident data has been manipulated, the DataAdapter can commit the changes to the database by calling the Update method. The DataAdapter provides four properties that represent database commands:

SelectCommand
InsertCommand
DeleteCommand
UpdateCommand

When the Update method is called, changes in the DataSet are copied back to the database and the appropriate InsertCommand, DeleteCommand, or UpdateCommand is executed.

I have been focus on dot.net development

2008-03-09T15:40:10-07:00:00

I have been focus on dot.net development. This is one of my sample website: http://dischigh.com that I created for sample store via php. ;

Please visit my other site: http://dotnetmai.com; http://politics.dotnetmai.com; http://family.dotnetmai.com

Florida.NET User Group a Success with code idol Contest!

2007-10-04T01:59:47-07:00:00

I attended the Florida.net at Citrix Ft Lauderdale on 10/02/2007 and have seen all the talented “GEEKS” successfully presented their codes:

Steve Potter - Cache Register
Jonas Strawski - SQL Server as Document Repository
Lou Yovin - Volume Shadow Copy
Tim Corbett - System Tray App
Louis Datz - dashCommerce
Martin Anderson - XML Schemas and powershell
Max Trinidad - Powershell script to create CSV

Shervin Shakibi, Dave Noderer, and Jeff Barnes of Microsoft who were Judges and Mc as well.

As all of the presenters, some of them did very well. (50's in this case, on a 10-50 rating).

I was honoring seeing Dave Noderer, finaly met Sherwin Shakibi and everyone at Florida.Net and the most happiest of that night I ran into my former boss Jeff Barnes. Though he is now a big and famous as Microsoft Architect Evangelist, but he is still the nicest, kindness, and down to earth Jeff Barness that I remembered back in IT Burger King Corporation.

Thank you Dave Noderer for the Citrix location resources/eateries/knowledge you provided.

I have very good times(For a long time since I have been at the last event) at the code Idol Contest Event I've learned some techiques only came from these genius geeks I have met that night.

Database Object Security

2007-06-06T02:21:49-07:00:00

No discussion of the new CLR features would be complete without a description of the security issues associated with using .NET assemblies and the SQL Server CLR:

http://m.makesdatawork.net/ShowArticle.aspx?ID=145

Display Record's Description Through AJAX

2006-07-21T14:48:00-07:00:00

Description:

This customization utilizes the power of AJAX to make asynchronous calls to server-side methods. The server-side methods then call back a JavaScript function to display data in a popup window. The code customization for .NET Framework 2.0 uses the Microsoft Atlas library. For .NET Framework 1.1, the AJAXPro (available free) third-party DLL is used.

Procedure:

Step 1: Call JavaScript function on MouseOver

Define an area that the user can mouse over to see the popup data. When the user mouses over, the MyCustomFunction JavaScript function is called. This function takes two arguments. The first argument is the Id of the record being retrieved. The second argument is the reserved word 'event' that specifies the location of the mouse.

You can use a code generation tag to specify a field value within the table row. Make sure to specify the database field corresponding to the Field Value code generation tags on the Page Properties dialog box.

<a OnMouseOver='MyCustomFunction(<GEN:FieldValue NAME="MyRecordID"/>, event);'>
<GEN:FieldValue NAME="MyRecordName"/>
</a>

Step 2: Define two JavaScript functions

Define two JavaScript functions within the script tags in the HTML page. The first function is called by the MouseOver event. It will save the current mouse position and then call the server-side method declared in your page class. The second function is the call-back function called by the server-side method.

There are slight differences between .NET Framework 1.1 (using AjaxPro.dll) and .NET Framework 2.0 (using Microsoft Atlas) as shown below.

For .NET Framework 1.1

function MyCallBack(result)
{
    // The detailRollOverPopup() displays the content returned from the AJAX call in a popup window
    // It accepts three parameters:
    // - aTitle, string to be displayed in the title bar of the popup window.
    // - aContent, string containing HTML to be displayed in the body of the popup.
    // - aPersist, boolean indicating whether the popup should remain visible even on mouseout.
    detailRolloverPopup('Window Title', result.value, false);
}
</script>

For .NET Framework 2.0

    // Invoke the WebMethod defined in the code-behind of the page through the PageMethods command
    // Also, specify the callback function - MyCallBack (defined below)
    PageMethods.GetRecordDescription(MyRecordID, MyCallBack);
}

Step 3: Add ScriptManager reference to page (only for .NET Framework 2.0)

In the HTML page, include the <atlas:ScriptManager> element. The tag must be within the <form> tag to enable the page for Microsoft Atlas. This tag enables Atlas client scripts to be downloaded when the web page is requested.

<atlas:ScriptManager ID="scriptManager1" runat="server"/>

Step 4: Use this wizard to add customized code.

Step 5: Build and run the application

Applies To:

This customization applies to pages with table controls.

Note:

Please note that this code customization example for .NET Framework 2.0 makes use of the April Community Technology Preview (CTP) version of Microsoft Atlas DLL.

Disclaimer:

Customizations included in this wizard are provided as a sample to demonstrate a feature, and may work only in specific situations. Geeketee Mai cannot assist in the resolution of problems which may occur as a result of customizing your application or modifying a customization to fit a particular purpose.

SQL Statement Generation

2006-09-01T09:46:00-07:00:00

Specifies where and how to generate your application’s SQL.

Option Inline:

Build the application using inline SQL statements. The SQL is placed in the Data Access Layer’s generated code. Inline SQL generation, also called “dynamic SQL” is frequently used when your application must connect to a database that does not support stored procedures.

Option Stored procedures:

(Enterprise Edition feature.) Build the application’s SQL in database-stored procedures. The stored procedures are automatically loaded into your database. Stored procedures are frequently the best choice when overall performance is important, because stored procedures generally execute faster than inline SQL.

Can’t generate stored procedures in all cases

Sometimes we may not be able to generate stored procedures in all cases, even though you have selected this option. In these cases, we will generate inline SQL. For example, we cannot generate stored procedures for Microsoft Access databases, a database product which does not support stored procedures. Also, we designer will not generate stored procedures in cases where it detects your database access credentials do not have sufficient permissions to load stored procedures into the database or execute them once there.

Other reasons why we can’t generate stored procedures include:

· You are running SQL Professional Edition. Only Enterprise Edition can generate stored procedures. If you have been switching your development activities between the Professional Edition and Enterprise Editions, you may incorrectly believe that Professional Edition can generate stored procedures.

· Your database is “read only”. Check your database permissions to see if any setting has changed to make it read-only, which means stored procedures will not be generated.

· Your database tables or views are missing primary keys or Virtual Primary Keys. Check if the changes made to your database views render them capable of having stored procedures generated. For example, a view without a Virtual Primary Key cannot have an Update stored procedure generated. (Virtual Primary Keys are an Enterprise Edition feature.)

· The Stored Procedures option is set to 'true' in the .config file.

Customizing the Look and Feel

2006-09-01T09:51:00-07:00:00

A style sheet (.CSS cascading style sheet) defining the basic stylistic aspects of a design them, such as the fonts, colors, and table styles. There are two ways to change a design theme’s look and feel:

Modify the class definitions within the style sheet. This is the easiest way to modify a design theme and works best when you want to make global cosmetic changes.
Modify the design theme’s look and feel by changing the HTML within the various panel files themselves. This works best for very specific changes to an individual panel file.

Application Customization and Integration

2006-07-20T20:48:00-07:00:00

Extensible C# and Visual Basic .NET classes

Code generated by Iron Speed Designer is designed to be customized and then regenerated repeatedly without reapplying your code customizations. This is accomplished by a class hierarchy designed for code customization that is not affected when rebuilding your application.

Easy to Customize Code

Simply subclass the appropriate page, control or database class. Your code extensions are preserved when code files are regenerated, allowing you a high degree of flexibility in extending your application program code.

Visible, customizable code. Page and control classes in the Presentation Layer are easy to understand and modify. Quickly see how your application builds SQL queries, loads data, and initializes UI controls – right in the code. To customize, simply override the appropriate method right in the same code file!

Customize data retrieval. Calling custom stored procedures and loading your own data is a snap.

Customize data validation and storage. Quickly add custom data validation and data storage code.

Customize dropdown lists. Customizing the query and sort order for dropdown lists is straightforward, even for the most complex applications.

Customize filters. Customize the query and sort order for filters with ease.

Native ASPX controls. Generated applications use native ASP.NET controls. There's nothing new or proprietary to learn.

Separate UI, Business and Data name spaces. Page classes are generated in the UI name space, the Business name space contains all Record and Table classes, and the Data name space contains classes that connect to your database.

Straightforward Class Hierarchy

Generates a complete, robust class hierarchy for your application. Your application is fully documented and browsable using Code Telescope. Learn more...

Several of the major class types are:

	Page. A code-behind class is generated for each page in your application. The Web page and user control classes provide advanced functionality, including browser independence, event handling methods for both client and application layer commands, unified object model methods, state management and scalability.
	Record. A class corresponding to a record is generated for each database table used in your application to perform record-based access (e.g., insert, update, delete). “Virtual record” classes are generated for each database table and database view that are joined together.
	Table. A class is generated for each table and database view in your application to provide the methods necessary to retrieve a group of records based on your filtering criteria and end-user filtering criteria.

Application Security

2006-07-20T21:10:00-07:00:00

Built-in security features critical for today's enterprise applications

Although most corporations take security precautions at the network level, the majority of application security must be built into the application itself. Several important application security features including role-based access control, automatic sign-out, and database-resident password storage.

Role-based access control
You can automatically add end-user authentication (sign-in) and role-based access control as a standard feature to your applications. This authentication feature is based on your own user and role data in your database, making it easy to set up and administer.

An unlimited number of user roles, and individual users can possess multiple roles. For example, the customer service supervisor has one role as a "rep" with access to customer account information, and a second role as "manager" with authorization to issue refunds or credits. These roles are accessible simultaneously without requiring the user to log in under a second role.

Automatic sign-out
Users are automatically logged-out after a designated period of time to guard against identity theft when a user leaves their Web browser open to the application.This is especially important for applications that connect between enterprises.

Password Storage
Highly sensitive user name and password data is stored directly in the application's existing database tables and not in any separate file that could be compromised.

Data Transmission Encryption
All application data transmitted to and from the client browser is encrypted using the web server's built-in SSL (secure socket layer) encryption. This standard security ensures that no one can see your data as it passes over the public Internet or over your private intranet and local area networks.

Single sign-on using Active Directory
Users of multiple applications will want a single sign-on feature, saving them from having to sign in to each individual application. Iron Speed Designer applications are easily extended to add single sign-on using Active Directory and Lightweight Directory Access Protocol (LDAP).

Referencing Data Access Functions in Code

2006-07-20T20:43:00-07:00:00

Creates two classes for each table in your database.

The Record classes represent a record from the database. Some of the record classes specify an actual physical record in the database while others correspond to a virtual record – the result of a join between tables. A “Record” suffix is added to the name of the table to get the name of the class. For example, if you have a Customers table in your database, the class will be called CustomersRecord. The record class is different from the record control class described elsewhere. A record class corresponds to a database record, while a record control class corresponds to a user interface control that contains other fields that display or edit data.

The Table class is one of the most important classes used in applications. This class is generated for each table in your application to provide the methods necessary to retrieve a group of records based on a query. A “Table” suffix is added to the name of the table to get the name of the class. For example, if you have a Customers table in your database, the class will be called CustomersTable. A “View” or a “Query” suffix is added to the name if the class is generated for a view or query respectively.

To read data from the database you can use the GetRecords function on the Table class. There are a number of variations of the GetRecords functions that either take a string based where clause or an object that specifies the clause. Each of the GetRecords functions can take optional arguments that specify the order by clause, the number of records to retrieve, and the starting page number.

GetRecords with a where clause string

The following examples show how to use the GetRecords functions with a string based where clause. This case is typically used to make a call to GetRecords when there is only one where clause that is not combined with another clause using an AND or OR operator. While the clauses can be combined in a string, it is better to use a WhereClause object defined later in this section.

C#:

CustomersRecord[] myRecords;

myRecords = CustomersTable.GetRecords("Country = USA");

if (myRecords != null)

{

foreach (CustomersRecord rec in myRecords)

{

// To access a field in the record, simply specify

// rec.

String s = "Company: " + rec.CompanyName;

}

Visual Basic .NET:

Dim myRecords As CustomersRecord()

myRecords = CustomersTable.GetRecords("Country = USA")

If Not (IsNothing(myRecords)) Then

For Each rec In myRecords

' To access a field in the record, simply specify

' rec.

Dim s As String = "Company: " & rec.CompanyName

End If

The GetRecords function takes a WHERE clause and retrieves all records that meet that criteria. Please note that the number of records returned is dependent on the number of records in the database. If you want to limit the number of records, you can pass additional parameters to the GetRecords function. The following code will return the third set of 50 records.

C#:

CustomersRecord[] myRecords;

myRecords = CustomersTable.GetRecords("Country = USA", null, 3, 50);

if (myRecords != null)

{

foreach (CustomersRecord rec in myRecords)

{

// To access a field in the record, simply specify

// rec.

String s = "Company: " + rec.CompanyName;

}

Visual Basic .NET:

Dim myRecords As CustomersRecord()

myRecords = CustomersTable.GetRecords("Country = USA", Nothing, 3, 50)

If Not (IsNothing(myRecords)) Then

For Each rec In myRecords

' To access a field in the record, simply specify

' rec.

Dim s As String = "Company: " & rec.CompanyName

End If

The above examples demonstrate how you can read a set of records from the database. If you want to access the records that are being displayed on a page, you would need to call the GetRecords() function on the Table Control class within the page.

In addition to the above example, you can also use the GetRecord function to read a single record from the database. GetRecord takes a WHERE clause similar to GetRecords and will return the first record that matches the query.

GetRecords with a WhereClause object

The following examples show how to use the GetRecords functions with a WhereClause object. This case is typically used to make a call to GetRecords when there are more than one where clauses that must be combined with AND or OR operators. The CreateWhereClause method generated by Iron Speed Designer uses this method to retrieve data from the database.

You can defined a WhereClause object and then call the iAND and iOR methods to define clauses. The iAND and iOR methods take a field name, an operator and a value. The field name may contain spaces or other characters, so it is safer to use the name as provided by the database schema. The database schema field name can be specified using the Table class followed by the column name such as CustomersTable.CompanyName.

C#:

public virtual void LoadData()

{

try

{

DbUtils.StartTransaction();

// The WHERE clause will be empty when displaying all records in table.

WhereClause wc = CreateWhereClause();

this.DataSource = CustomersTable.GetRecords(wc);

}

catch (Exception ex)

{

throw ex;

}

finally

{

DbUtils.EndTransaction();

}

protected virtual WhereClause CreateWhereClause()

{

// Start with a blank WhereClause

WhereClause wc = new WhereClause();

// Create a WhereClause that is as follows:

// Country = "USA" AND State = "California" AND (Name Contains "Jones" OR CompanyName Contains "Jones")

// Add the value selected in the Country filter dropdown

if (this.CountryFilter.SelectedValue != "")

{

wc.iAND(CustomersTable.Country, EqualsTo, this.CountryFilter.SelectedValue);

}

if (this.StateFilter.SelectedValue != "")

{

wc.iAND(CustomersTable.State, EqualsTo, this.StateFilter.SelectedValue);

}

// Now we need to create a separate WhereClause that OR's the search string and then

// this separate clause is ANDed with the rest of the clauses)

if (this.CustomersSearchArea != "")

{

WhereClause search = new WhereClause();

search.iOR(CustomersTable.Name, Contains, this.CustomersSearchArea.Text);

search.iOR(CustomersTable.CompanyName, Contains, this.CustomersSearchArea.Text);

// Now AND this with the WhereClause wc defined earlier.

wc.iAND(search);

}

return wc;

}

Visual Basic .NET:

Public Overridable Sub LoadData()

Try

DbUtils.StartTransaction()

' The WHERE clause will be empty when displaying all records in table.

Dim wc As WhereClause = CreateWhereClause()

Me.DataSource = CustomersTable.GetRecords(wc)

Catch ex As Exception

Throw ex

Finally

DbUtils.EndTransaction()

End Try

End Sub

Protected Overridable Function CreateWhereClause() As WhereClause

' Start with a blank WhereClause

Dim wc As WhereClause = New WhereClause

' Create a WhereClause that is as follows:

' Country = "USA" AND State = "California" AND (Name Contains "Jones" OR CompanyName Contains "Jones")

' Add the value selected in the Country filter dropdown

If Me.CountryFilter.SelectedValue <> "" Then

wc.iAND(CustomersTable.Country, EqualsTo, Me.CountryFilter.SelectedValue)

End If

' Add the value selected in the State filter dropdown

If Me.StateFilter.SelectedValue <> "" Then

wc.iAND(CustomersTable.State, EqualsTo, Me.StateFilter.SelectedValue)

End If

' Now we need to create a separate WhereClause that OR's the search string and then

' this separate clause is ANDed with the rest of the clauses)

If Me.CustomersSearchArea.Text <> "" Then

Dim search As WhereClause = New WhereClause

search.iOR(CustomersTable.Name, Contains, Me.CustomersSearchArea.Text)

search.iOR(CustomersTable.CompanyName, Contains, Me.CustomersSearchArea.Text)

' Now AND this with the WhereClause wc defined earlier.

wc.iAND(search)

End If

Return wc

End Function

C#:

// By default we want to expand foreign keys and to sort in a case sensitive order

OrderBy orderBy = new OrderBy(true, true);

// Order by Name in Ascending order

orderBy.Add(CustomersTable.Name, Asc);

this.DataSource = CustomersTable.GetRecords(wc, orderBy, 3, 50);

Visual Basic .NET:

' By default we want to expand foreign keys and to sort in a case sensitive order

Dim orderBy As orderBy = New orderBy(True, True)

' Order by Name in Ascending order

orderBy.Add(CustomersTable.Name, Asc)

Me.DataSource = CustomersTable.GetRecords(wc, orderBy, 3, 50)

I should doing this...

2006-06-02T20:12:00-07:00:00

But instead me and my computer right now...

First SharePoint at Devry University in Miramar

2006-06-03T18:24:00-07:00:00

I attended the first SharePoint (Session #1 - Level 100 - June 3rd, 2006) at Devry University in Miramar, Room #240, from 2:00 pm to 5:00 pm this weekend.

I am very impress with the SharePoint class today, and from Duray Akar's lecture and I have learned more about:

1. List items in calendar

2. Automatically convert Office documents in SharePoint repository, such as World and Excel to Adobe ® allow distribution of read-only, non-editable copies

3. Establish a referential integrity relationship between two SharePoint lists using this web part.

4. Simultaneously create SharePoint and Active Directory Users! Allows third party editors, such as Adobe FrameMaker and Autodesk AutoCAD to easily browse the SharePoint repository for viewing.

5. Editing, check in/out, and uploading.

6. SharePoint list items from multiple areas and web sites into a single view with the ability to display, filter, and sort relevant information

7. List Alert Web Part gives users a more flexible way to receive alerts from SharePoint list, such as when tasks are due or when an issue’s status field changes from “Open” to “Fixed”.

Hoped I captured everything... :).

Thank you Florida.NET: Dave Noderer, Duray Akar, and Stacy Draper for made this happened.

South Florida Code Camp Feb 2, 2006

2006-06-02T20:10:00-07:00:00

I attended my 1st Code Camp– 2006 South Florida Code Camp, Feb 2, 2006. Not only did I learn a lot, I had a great time. I learned which of the presentations I should goto...( I have seen David Silverlight, Alex Funhouse, and Russ Fustino’s presentations many times during the year).

I think that I should attend new presenters that I have never seen before, and I did. I also learned from every session I attended, and from the many conversations I had with other speakers and attendees. I could easily turn into a Code Camp evangelist (Joe Healy, and Dave Noderer).

I think it is one of the best ideas in a long time for training and networking within the Microsoft developer community. I'll give a quick 10 great things about Code Camps (I know I could list many more), but these are the ones that personally benefit me.

Unfortunately, I wasn’t feeling well, I went home early and I knew I missed all others fun in the afternoon, and the Microsoft's Party at night.

1. Free knowledge from folks actually using the product.

2. Choices - I get to choose what topics (and often levels of difficulty) to attend.

3. Opportunity to listened to a friendly group of IT professionals

4. Learn from questions and feedback from the attendees

5. Meeting new friends and peers - I've made new contacts at the Code Camp I have attended

6. Hooking up with old friends - keeping in touch with those I familiar face that I met at the day before prior to last year Code Camps

7. User Group networking - I have found that user groups help other user groups and they really enjoy helping other user groups

8. In Fort LauderdaleFlorida the top prize seemed to be popular this year is “Communities Credits Awards” “marketing material(?)”.

9. Great food (of course)

10. A LOT OF FUN!

Geekette maisblogette

2006-06-02T15:49:00-07:00:00

For those of you keeping up with my Geekette maisblogette, I am between jobs again. No, I didn't get fired; I completed working for SunCruzCasino, Inc. So what does a geekette do with the time off liked this? Well, among other things (yeah yeah...geeky things), I decided to catch up on some entertainment.

I started with Showtime than HBO. I have been interested in the show for some times. Nevertheless, I head on down to the local video rental store (which is not so local, if you take my meaning) and pick up a few episodes. I have no patient to watch re-run each night.

What a cool show! It is somewhat esoteric but not so much that it's annoying. It's very strange, but not so strange that it can't be understood. It's an excellent blend of very vivid characters and extremely well-written dialogue with a stark yet somehow rich backdrop of interweaving tales. The acting is very good, sometimes even great. Remember “Sex in the City“? Provides the best performances followed VERY good stars liked ” Sarah Jessica Parker as Carrie Bradshaw, Kim Cattrall as Samantha Jones, Kristin Davis as Charlotte York, and Cynthia Nixon as Miranda Hobbes.

One of the key interests I had was Sarah Jessica Parker as Carrie Bradshaw. I think Sarah Jessica Parker is a very versatile actor and I really enjoy watching her work. For interestingly enough, however, my favorite character is Charlotte York played by Kristin Davis. Thought, I liked the show and I have begun understand how single people. Dating games liked, I won't ever want to be part of these games.

All in all, I recommend, if not highly, that you see the show. If nothing else, checks it out on IMDB and HBO. I am 8 episodes into season one and hope to finish the season over the weekend. As always, your thoughts on the show are appreciated!

Many psychics’ stopped me

2006-06-09T21:34:00-07:00:00

Many psychics’ stopped me in the malls, restaurant, drug stores, bookstores, department stores...etc, and told me about my past love life, and future career, family love life. All of them made me believed that some evils have came into my life from the past has had harm my life for a long time. I needed them to unharm all my bad luck so this will help me be lucky again :)

The first few times, I believed in some of them, because they with children, or older folks. For examples:

“You are thinking of your soul mate but not your husband, you meant to be with him. You two met from the past life and thing didn’t work…etc. You are will be together this life, because he loves you, just because evil has stopped us to be together. I can help you two got back together“. “Give me $200, $300, $900…etc“. None of them got any dimes from me.

“Some others told me liked you are always wanted children, and you can't have them Or “you've always abused and mistreated by your family...etc“. Does my face look like I was abused and mistreated? Or because I looked stupid enough to get them stop me then see if I have money for them to steal :)?

I am very sick of the psychics’. They are a whole Gang of evils people. They will make up the story, made you believed that something wrong with you from your past and now but they are all lie just to get your money.

I will report to the police next time any of them stop me, and I advice you to do the same,