MieJowo.NET

On the 1st February of 2008, the UK Webmaster World Community launched an international SEO contest - SEOcontest2008 - which give out $1000 for the first winner and $100 for each 3 runners ups. Now, have you challenged enough to test your skill in SEO? Read more about SEOcontest2008.

Labels: seo contest, seocontest2008

And do you use google desktop? If so, I have a simple solution for that. After installing Google Desktop a couple days ago, my Internet Explorer 7 crash everytime I open it. I thought that some of my add-ons (I installed web-dev for IE, stumble-upon) causes this. After a couple days of investigation I found out that when you enable web history indexing on google deskto, it will make the IE crash. To disable it, you simply set preference on your google desktop (right click > preference) to not index the web history, and voila!! IE works like before.

Conspiracy?

Wow, it is been a long time since my last post. I guess I've been forgetting this blog for a while now. Anyway, I just want to wish you all Merry Christmas and Happy New Year. I hope you all get the best holidays ever. Thank you for reading my posts and keep up the good work!

This part 1 of mini how-to will use the Beta 2 version of the framework. It will also work with beta 1, but will NOT work with versions prior to beta.

Since the beta v1.0, Microsoft has been moved their ASP.NET Ajax client-controls to Sys.Preview.UI from Sys.UI namespace. This namespace is similar but not identical to ASP.NET server controls.

The following table is a list of ASP.NET AJAX client side controls from the 'value-add' release.

MS AJAX Controls	Description	HTML	Javascript
Sys.Preview.UI.Label	Use this with span, p, or label tags	<span>,<p>,<label>	label
Sys.Preview.UI.Window	To display pop-up window	none	window.alert(), window.confirm(), window.prompt()
Sys.Preview.UI.Selector	This is the dropdown list	<select>	select
Sys.Preview.UI.Hyperlink	Create a hyperlink	<a>	link
Sys.Preview.UI.Textbox	Text field	<input type="text,passsword">	text,password,textarea
Sys.Preview.UI.Button	Button element	<input type="button,submit,reset">	button,submit,reset
Sys.Preview.UI.Image	Image element	<img>	image

For each ajax element that I will create later, I will try to include the javascript equivalent using either the $create, or just plain javascript. First thing, the default syntax for using the xml-script:

<script type="text/xml-script">
     <page xmlns:script="http://schemas.microsoft.com/xml-script/2005" xmlns:"JavaScript: Sys.UI,Sys">
         <components>
         </components>
    </page>
</script>

Since the beta version MS Ajax enable user to use their own namespace to be included in the xml-script, but this is not one subject that we are going to cover. So, we will eliminate the xmlns:JavaScript: Sys.UI,Sys declaration in our xml-script. Warning: if you use this declaration, you WILL get a "not well-formed" error.

Next thing, let's create a button control and a label control in html page:

<input type="button" id="button1" value="change text" /> <br />
<span id="span1">This is a span element</span>

Now, include both button and the label element in our xml-script:

<script type="text/xml-script">
     <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
          <components>
               <label id="span1">
               </label>
               <button id="button1">
               </button>            
          </components>
     </page>
</script>

And that's basically it. You include each element that needs to be participated in the wonderful world of MS Ajax inside the components tags. Now, let's create the click event for our button1.

<script type="text/xml-script">
     <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
          <components>
               <label id="span1">
               </label>
               <button id="button1">
                    <click>
                         <setPropertyAction target="span1" property="text" value="button 1 clicked" />
                    </click>
               </button>            
          </components>
     </page>
</script>

The 'setPropertyAction' contains:

1. target
   This is the target element of our other MS Ajax element (in this case: 'span1') that we want to modify in case of click event.
   
2. property
   This is the property of the 'span1' element (in this case: 'text').
   
3. value
   This is the new value of the 'text' property of the 'span1' element.

So, when the 'button1' is clicked, the 'text' property of the 'span1' element will be changed to 'button 1 clicked'. It is very simple right? Compare them to the following javascript code that performs the same action:

var button1;
var label1;

function pageLoad()
{
    button1 = new Sys.Preview.UI.Button($get('button1'));
    button1.add_click(changeText);
    button1.initialize();

    label1 = new Sys.Preview.UI.Label($get('span1'));
    label1.initialize();
}

function changeText()
{
    labe1.set_text('button1 clicked');
}

Using the xml-script you actually eliminate the need to initialize each components (although you can achieve this using the $create function) and typing the long, error-prone type of each components. I, myself, sometimes prefer to use xml-script in a case like using validators rather than using javascript. But for simple lines of code, I usually just use javascript. So, depends on my need I can use both of them at the same time. To be continued...

Today I feel like doing some flex apps and .NET webservice. Surprisingly, when I was trying to find an example of calling .NET webservice from flex, most of the example is either for flex 1.5 or not present at all. So I decided to post it here, and hoping that google engine will crawl my blog and spread this code to whoever needs it.

The Flex' mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
   <mx:Panel width="346" height="87" layout="absolute" title="Calling .NET Web Service from Flex Application" backgroundColor="#000000" horizontalAlign="center" verticalAlign="top">
       <mx:Button x="89.5" y="15" label="Call .Net Web Service" click="{WebService.HelloNet.send()}" color="#ffffff"/>
     
   </mx:Panel>
   <mx:WebService id="WebService" wsdl="http://localhost:4364/FlexService/Service.asmx?WSDL" showBusyCursor="true" result="showResult(event.result)">
       <mx:operation name="HelloNet">

       </mx:operation>
   </mx:WebService>
   <mx:Script>
       <![CDATA[
           import mx.controls.Alert;
         
           function showResult(result):void
           {
               Alert.show(result);
           }
       ]]>
   </mx:Script>
</mx:Application>

The .NET Web Service:

[WebMethod]
   public string HelloNet() {
       return "Hello Flex, this is now: " + DateTime.Now.ToString(); ;
   }

Reference:

1. http://livedocs.macromedia.com/flex/2/langref/mx/rpc/soap/mxml/WebService.html
   
2. http://www-128.ibm.com/developerworks/webservices/library/ws-macroflex/

Happy coding!!!

Since there are a lot of people asking how to call a web service in the new Beta version, I am going to post it here:
Testpage.aspx:

<%@ Page Language="C#" EnableViewState="true" AutoEventWireup="true" CodeFile="testpage.aspx.cs"
   Inherits="testpage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Test Page</title>
</head>
<body>
   <form id="form1" runat="server" enableviewstate="true">
       <atlas:ScriptManager ID="ScriptManager1" runat="server">
           <Services>
               <atlas:ServiceReference Path="~/WebService.asmx" />
           </Services>
       </atlas:ScriptManager>
       <input type="button" onclick="callWebService();" value="get time" />
       <div id="Label">Loading ...</div>
      
       <script type="text/javascript">
           function callWebService()
           {
               WebService.GetServerTime(onComplete);
           }
          
           function onComplete(result)
           {
               $get('Label').innerHTML = result;
           }
       </script>
   </form>
</body>
</html>

WebService.cs:

using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

/// <summary>
/// The client code will call this web service to get the server time
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[Microsoft.Web.Script.Services.ScriptService]
// Dont forget to include this scriptservice attribute
public class WebService : System.Web.Services.WebService {

   public WebService () {

       //Uncomment the following line if using designed components 
       //InitializeComponent(); 
   }

   [WebMethod]
   public String GetServerTime()
   {
       return DateTime.Now.ToString();
   }

However if you are calling PageMethods instead of WebService.asmx, you would have to:

"Replaced the instance page method in the CTP release with static page method support."

AND, you have to put your page method at the aspx-page level, eventhough you have code-behind files for the particular page (I think this is a bug). So for example:

<%@ Page Language="C#" EnableViewState="true" AutoEventWireup="true" CodeFile="testpage.aspx.cs"
   Inherits="testpage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Test Page</title>
   <script runat="server">
       [System.Web.Services.WebMethod]
       public static String GetString()
       {
           return "This text is generated at: " + DateTime.Now.ToString();
       }
  
   </script>
</head>
<body>
   <form id="form1" runat="server" enableviewstate="true">
       <atlas:ScriptManager ID="ScriptManager1" runat="server">
           <Services>
               <atlas:ServiceReference Path="~/WebService.asmx" />
           </Services>
       </atlas:ScriptManager>
       <input type="button" onclick="callWebServer();" value="call web service" />
      
       <div id="Label">Web Service Call Label</div>
       <div id="Label2">Page Methods Label</div>
       <script type="text/javascript">
           function callWebServer()
           {
               WebService.GetServerTime(onComplete);
               PageMethods.GetString(onCompletePageMethods);
           }
          
           function onComplete(result)
           {
               $get('Label').innerHTML = result;
           }
          
           function onCompletePageMethods(result)
           {
               $get('Label2').innerHTML = result;
           }
       </script>
   </form>
</body>
</html>

The callWebServer function will call both the same webservice from the previous example and the GetString() page method.

That's all. I hope it helps anyone who needs it.

Well, well, well ... After playing with the Beta release today, I am very overwhelmed with the changes that they made from CTP to this Beta 1.0 version.

First in order is of course the changes in web.config file. At first I tried to manually rewrite the web.config file by copy-pasting the code from the beta's web.config. It turns out that this approach caused me tons of problem. The most annoying one is that standard <asp:???> tags didn't get recognized (even I rebuild and rebuild the website). Then, I just erased my web.config  and copy the web.config file from the beta and add some lines like <connectionstrings> or <system.net> into my web.config file. After that, I followed the AjaxToolkit guide in modifying web.config and Voila! the page compiled successfully with no errors.

Second in order is modifying my codes. This is where I spend most of the time since there are a lot of codes that I need to rewrite(modify) in order to adapt to the beta release.

• Changing the prefix. The "atlas" prefix becomes "ajax" prefix and "atlasctk" becomes "ajaxToolKit". This is not much of a problem since my good friend (find&replaceAll) helps me save a lot of time.
• Create an extender instance for each Properties object of the toolkit. This is where I spend a lot of time to do copy-pasty-copy-paste-copy-paste.
  Example:
  

  <atlasToolkit:ConfirmButtonExtenderID="cbe1"runat="server"> 
      <atlasToolkit:ConfirmButtonProperties TargetControlID="LinkButton1" 
          ConfirmText="Delete Item?" /> 
      <atlasToolkit:ConfirmButtonProperties TargetControlID="LinkButton2" 
          ConfirmText="Update Item?" /> 
  </atlasToolkit:ConfirmButtonExtender>
  
  <!-- becomes -->
  
  <ajaxToolkit:ConfirmButtonExtender ID="cbe12" runat="server" 
      TargetControlID="LinkButton1"
      ConfirmText="Delete Item?" /> 
  <ajaxToolkit:ConfirmButtonExtender ID="cbe2" runat="server"
      TargetControlID="LinkButton2"
      ConfirmText="UpdateItem?" />

  
  
  

          Yes, no more properties, just extender. Simplicity works well here.
          But, yikes, this is a lot of work!

• More changes for controltoolkit. Since my project is using accordion control from toolkit I notice that now the AccodionPane needs runat="server" attribute.
  
• Changes in the "atlas" script that impact my code:
  custom prefix is now supported
  <script type="text/xmlscript">
  <page xmlns:script="http://schemas.microsoft.com/xmlscript/
  2005" xmlns:"JavaScript: Sys.UI,Sys">
  
  yet somehow, I couldn't manage to use ajax-script anymore, eventhought I append Sys.Preview and Sys.Preview.UI namespace inside the <page xmlns: >. Help, anyone!?
  
  next is
  <setProperty ... > becomes <setPropertyAction>
  
  
• Ajax from javascript:
  Sys.UI.Button becomes Sys.UI.Preview.Button
  Sys.UI.Label becomes Sys.UI.Preview.Label
  Sys.UI.HyperLink becomes Sys.UI.Preview.HyperLink
  and so on ... but...
  Sys.UI.Select becomes Sys.UI.Preview.Selector
  
  Not changing:
  Sys.UI.Control
  Sys.UI.VisibilityMode.collapse
  
  Other than that:
  instead: 
  var x = Sys.UI.Button($('myButton'));
  x.click.add(myClickHandler);
  var y = Sys.UI.Select($('myDropDown'));
  y.selectionChanged.add(myClickHandler2);
  
  use this:
  var x = Sys.Preview.UI.Button($get('myButton'));
  x.add_click(myClickHandler);
  var y = Sys.Preview.UI.Selector($get('myDropDown'));
  y.add_selectionChanged(myClickHandler2);
  
  notice the difference?
  
• [ScriptService] or [ScriptMethod()] attribute & public and static for your proxy that needed by the javascript.
  
  for example instead of:
  [System.Web.Services.WebMethod]
  public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)
  {
  return new DropDownListService().GetDropDownContents(knownCategoryValues, category);
  }
  
  you have to:
  1. Add [Microsoft.Web.Script.Services.ScriptMethod()]
  2. Make it public and static! It's a MUST!
  
  [System.Web.Services.WebMethod]
  [Microsoft.Web.Script.Services.ScriptMethod()]
  public static AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)
  {
  return new DropDownListService().GetDropDownContents(knownCategoryValues, category);
  }
  
  Other than that:
  I was using the GetDropDownContentsPageMethod (in the above code) in code-behind, but now I have to put the method at the aspx page level.
  
• NOT WORKING yet:
  My modalpopup that resides inside <itemtemplate> in <gridview> control does not work anymore. When I click the button that triggers the modal-popup the page just refreshed itself, and then the modal-popup works normal. Strange.

I love the performance gained by the beta release. My pages are more responsive, and they load very fast (eventhough the site is not precompiled). And surely, MS needs to write better documentation and better migration document. I feel that I get very confused reading them. There are value-add, ajax-core (RTM), clientFX, serverFX, and AJAX CTP itself in this release.  Which one control which? Which one support xml-script? Which one don't? Other than that, Intellisense is gone at the content page-level (just for standard asp tags) when using updatepanel in masterpage that wraps the contentplaceholder. One solution to this is to change the "asp" prefix for the Ajax controls back to "atlas". I hope they will fix this soon.