MieJowo.NET

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.

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>

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...

posted by a.wirayudha  # 10:36 PM 0 Comments

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!!!

posted by a.wirayudha  # 1:38 PM 2 Comments