Fundamental of XHTML MP

Overall, XHTML elements consist of a start tag—element name and its attributes, element content, and closing tag. The format is like:

element content

Most of WML is easily portable to XHTML MP, but some features require workarounds. Some features are not supported at all, so if you need them, you should use WML instead of XHTML MP. WML 1.x will be supported in any mobile device that conforms to XHTML MP standards

The standard resolution of most desktop is 1024x768 pixels
S60 176x208
QVGA 240X320
iPhone: 320X480
VGA 480X640


Expect at least 256 colors on a mobile device. Most mobiles support images well—GIF and JPG are universal. As the RAM and processor capabilities are limited, many devices keep a limit on the total size of a page—including WCSS, XHTML MP, and images. 10 kilobytes is the minimum you can expect, but it's best to keep the page sizes as small as possible—less than 30K is recommended. Many users browse with images turned off to save bandwidth costs. Hence our application must not rely on images for navigation or critical operations. Giving proper alternative text to images becomes a must

Fundamentals of XHTML MP

XHTML Documents Must Be Well Formed,
Tags Must Be Closed!
Elements Must Be Properly Nested
Elements and Attributes Must Be in Lowercase
Attribute Values Must Be Enclosed within Quotes
Attributes Cannot Be Minimized
XHTML Entities Must Be Handled Properly
If you want to use an ampersand in your XHTML code, you must use it as & and not just &.

Clear browser with each rejax call in order to get new data

function GetSid(url)
{
var myRegX = new RegExp(/\?/);
var result = url;
if(myRegX.test(url))
{
result = url + "&sid=" + Math.random();
}
else
{
result = url + "?sid="+ Math.random();
}

return result;
}

There are the five ways to apply CSS IN XHTML MP

Linking to an external style sheet:



Style definition within the document:



Document style sheet with @media qualifer:



Importing an external style sheet to the document:



Inline style for an element:

Some text

Jquery--- checkbox check on/off display/hide some fields

I have one checkbox, I want to check on this checkbox display some textbox and lable, off check hide these textbox and lables, here is the function to do it:

$("#ckIsAgent").click(function() {
SwitchShowAgent();
});


function SwitchShowAgent() {
var ckValue = $("#ckIsAgent:checked").val();
if (ckValue)
ShowAgentData();
else
HideAgentData();
}
function HideAgentData() {

$("#lblAgentName").hide();
$("#txtAgentName").hide();
$("#lblAddress").hide();
$("#txtAddress").hide();
$("#lblSiteLink").hide();
$("#txtSiteLink").hide();
}
function ShowAgentData() {
$("#lblAgentName").show();
$("#txtAgentName").show();
$("#lblAddress").show();
$("#txtAddress").show();
$("#lblSiteLink").show();
$("#txtSiteLink").show();
}


the key part is using var ckValue = $("#ckIsAgent:checked").val(); to check the checked/not checked value

.NET clear cookies

I try to clear my login cookies in .net by using Request.Cookies.clear(),
it doesn't work at all. Then I did some search online and found out set exired time to pass will solve this problem. I try and still not working, final I set the cookie value to empty string, works!
Notes: Request.Cookies.Clear() is a function to clear current buffer cookies. So confuse by MS.
here is code:

if (Request.Cookies != null && Request.Cookies.Count > 0)
{
foreach (string cookie in Request.Cookies.AllKeys)
{
Request.Cookies[cookie].Expires = DateTime.Now.AddDays(-1);
Response.Cookies[cookie].Value = "";

}

}
}

Javascript break long text in readable mode

function BreakOnSpace(str, num) {
if(str.length > num)
{
var extraStr = str.substring(num + 1, 20)
if(extraStr.indexOf(' ') > -1) {

var pos = extraStr.indexOf(' ')
var extraLen = pos

extraStr = extraStr.substring(0, pos);
extraStr += '......';
return str += extraStr;
}
}
else
return str;
}

Chain Effects on single set of element

Chain effects in the single element is inline effect but not including .css():
Here is the example:
$('div.label').click(function(){
$('div.button').fadeTo('slow',0.5)
.animate({left: 650},'slow')
.fadeTo('slow',1.0)
.slideUp('slow')
.css('backgroundColor','#f00');

});
You will see the backgroundColor of button will immediately affected after click on div.label

useful small function to write text log in local machine

public static void WriteLog(string logFile, string logHeader, string message)
{
string logMessage = string.Empty;
byte[] logMessageBytes;
try
{
FileInfo logFileInfo = new FileInfo(logFile);
if (!IsFileOrDirectoryExists(logFile, FileType.File))
{
logMessage = logHeader + "\r\n" + message;
logMessageBytes = Encoding.ASCII.GetBytes(logMessage);
}
else
{
logMessage = "\r\n" + message;
logMessageBytes = Encoding.ASCII.GetBytes(logMessage);
}

using (FileStream logFileStream = logFileInfo.Open(FileMode.Append, FileAccess.Write, FileShare.Read))
{
logFileStream.Write(logMessageBytes, 0, logMessageBytes.Length);
}
}
catch(Exception ex)
{
DSTrace.LogEvent(DSTL.E, FormatE4XException(ex));
}
}

here: logfile is the file name
message is what you want to write to this page
logheaere is not you need

reference: system.IO; system.text

WCF--- Foundation Programming Model

Addressing a service is essential to being able to use a service.
Address Section includes: Transport scheme, machinename(fully qualified domain name of the machine), port, path.
Addresses: HTTP, TCT, MSMQ, Pipes

Bindingss: the format to communicate with the service
The transport(HTTP, MSMQ,Named Pipes, TCP)
The channels(one-way, duplex, request-reply)
The encoding(XML, binary, MTOM...)

Messaging Exchange Patterns: Request-Reply(default pattern), One-Way(similar to calling an an asynchronous method with a void return type)
Duplex--- the both ends simultaneously acting as both a sender and a receiver.

.NET3.5 load XML class--- ObjectDataSource

public class CustomerDataProvider
{
public CustomerDataProvider(){}
private List Customers
{
get
{
XDocument xdoc = XDocument.Load(@"customers.xml");
List customers = new List();
IEnumerable iCustoms
= from C in xdoc.Descendants("customer")
orderby C.Attribute("CustomerID").Value
select new Customer
{
ID = C.Attribute("CustomerID").Value,
CompanyName = C.Attribute("CompanyName").Value,
ContactName = C.Attribute("ContactName").Value,
Address = C.Attribute("Address").Value,
ContactTitle = C.Attribute("ContactTitle").Value,
City = C.Attribute("City").Value,
Phone = C.Attribute("Phone").Value,
State = C.Attribute("State").Value,
ZipCode = C.Attribute("ZipCode").Value

};
customers = (List)iCustoms;
return customers;

}
}
public IEnumerable FindAll()
{
return this.Customers;
}
public IEnumerable FindById(string CustomerId)
{
return (from C in this.Customers where C.ID == CustomerId select C);
}
public void Update(Customer newCustomer)
{
Customer custm = this.Customers.Find(x => x.ID == newCustomer.ID);
custm.CompanyName = newCustomer.CompanyName;
custm.ContactName = newCustomer.ContactName;
custm.ContactTitle = newCustomer.ContactTitle;
custm.Address = newCustomer.Address;
custm.City = newCustomer.City;
custm.State = newCustomer.State;
custm.Phone = newCustomer.Phone;
custm.ZipCode = newCustomer.ZipCode;
}
}

jquery load xml and display in html

$(function(){
$.get('books.xml',function(d){
$('body').append(' <h1>Recommended Web Development Bookds</h1>');
$('body').append(' <dl>');
$(d).find('book').each(function(){

var $book = $(this);
var title = $book.attr("title");
var description = $book.find('description').text();
var imageurl = $book.attr('imageurl');

var html = ' <dt><img class="bookImage" alt="" src="http://www.blogger.com/" /> </dt>';
html += ' <dd><span class="loadingPic" alt="Loading">';
html += ' <p class="title">' + title + '</p>';
html += ' <p>' + description + '</p>' ;
html += '</dd>';

$('dl').append($(html));

$('.loadingPic').fadeOut(1400);
});

});
});</dl></span>
<span class="loadingPic" alt="Loading"></span>

JQuery post data to .ashx, pass to LINQ to SQL

First I create contact table which has contactId, name, email and comment. Then I create LINQtoSQL contact.dbml file.
Create new handler file call : SubmitDB.ashx. update the ProcessRequest method :

public void ProcessRequest (HttpContext context) {
var name = context.Request["name"];
var email = context.Request["email"];
var comment = context.Request["comment"];

ContactDataContext contactDB = new ContactDataContext();
Contact contact = new Contact();
contact.Name = name;
contact.Email = email;
contact.Comments = comment;
contactDB.Contacts.InsertOnSubmit(contact);
contactDB.SubmitChanges();
context.Response.Write("loading success");
}

On the front file: submitDataToDB.htm add the form method="post" action ="SubmitDB.ashx"
add container div:

<div id="container">
<label for="name">Name</label>
<input type="text" name="name" id="name" />

<label for="email">Email</label>
<input type="text" name="email" id="email" />

<label for="comment">Comment</label>
<textarea id="comment" name="comment" cols="35" rows="5">
</textarea>

<br />
<input type="button" id="submit" name="submit" value="Go" />
</div>

In Javascript, reference google javascript:



add another script:

$(function(){
$('#submit').click(function(){
$('#container').append('<img id="loadining" src="ajax-loader.gif" alt="loading"/>');
var name = $('#name').val();
var email = $('#email').val();
var comment = $('#comment').val();
// console.log(name,email, comment);
$.ajax({
url: 'SubmitDB.ashx',
type: 'POST',
data: 'name=' + name + '&email=' + email + '&comment=' +comment,

success:function(result)
{
$('#response').remove();
$('#container').append('<p id="response">'+ result+ '</p>');
$('#loadining').fadeOut(500,function(){
$(this).remove();
});
}
});

return false;
});
});

Resize Text in JQuery

$('a').click(function(){

var os = $('p').css('font-size');
var num = parseFloat(os, 10);
var um = os.slice(-2);
$('p').css('font-size', num / 1.4 + um);
if(this.id == 'larger')
{
$('p').css('font-size', num * 1.4 + um);
}

});

------ HTML-----




<a href="#" id ="larger">Larger</a>
<br>
<a href="#" id="smaller">Smaller</a>
<p>
Fits Single/Double Shopping Carts, High Chairs & Infant Swings!
</p>

JQuery Hover Images

$(function(){
$('#container img').animate({
"opacity" : .5
});
$('#container img').hover(function(){
$(this).stop().animate({"opacity" :1});
},function(){
$(this).stop().animate({"opacity" : .5});
});
});