Views of a software engineer

Hide / Show Panel on client side with button click using java script

2009-04-04T19:04:00.007+05:30

To hide or show a panel in javascript we use client Id of the control to target the panel and also set style property to show or hide the panel.


<head runat="server">
    <title>show hide on client side</title>
    <script language="javascript" type="text/javascript">
        function click_button()
        {
            if(document.getElementById('<%=Panel1.ClientID%>').style.display == 'none')
            {
                document.getElementById('<%=Panel1.ClientID%>').style.display = 'block';
                document.getElementById('btnshowHide').value = 'hide';
            }
            else 
            {
                document.getElementById('<%=Panel1.ClientID%>').style.display = 'none';
                document.getElementById('btnshowHide').value = 'show';
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input id="btnshowHide" type="button" value="hide" onclick="click_button();" />
    <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">
        click hide to hide this text
    </asp:Panel>    
    </div>
    </form>
</body>

To enable client side click we are using a html button


<input id="btnshowHide" type="button" value="show" onclick="click_button();" />

In the method click_button() we are accessing the panel to hide using the client id of the control


document.getElementById('<%=Panel1.ClientID%>').style.display

so now to hide we set the style as 'none'


document.getElementById('<%=Panel1.ClientID%>').style.display = 'none';

and to show it back we set style as 'block'


document.getElementById('<%=Panel1.ClientID%>').style.display = 'block';

Also we toggle the text of the button between show and hide


document.getElementById('btnshowHide').value = 'show';

image when intially loaded

when hide is clicked, this is how shown, every thing done on client side

Madhu :-)

Code Behind in Flex

2009-01-21T13:52:00.004+05:30

If you are a Asp.Net developer you are more interested in writing code behind file to separate logic from interface.

This is a simple example to show code behind in flex
CodeBehindTest.mxml


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
 layout="absolute" creationComplete="initApp();">
 <mx:Script>
  <![CDATA[
   include "CodeBehindTest.as";
  ]]>
 </mx:Script>
 <mx:Button id="btnMessage" label="Show Message"/>
</mx:Application>

In the above code we included the code behind file in main mxml

This is actual code behind action script file
CodeBehindTest.as


// ActionScript file
import flash.events.MouseEvent;
import mx.controls.Alert;
private function initApp():void
{
 btnMessage.addEventListener(MouseEvent.CLICK,ShowMessage);
}
private function ShowMessage(e:MouseEvent):void
{
 Alert.show("Message from codebehind");
}

Madhu :-)

Using google maps in flex

2008-12-17T19:47:00.009+05:30

Basic requirements before using Google maps (assuming you already have flex builder)

1. Get GoogleMaps API SDK
2. Sign up for API Key

Follow these steps

3. Open flex builder
4. Create new web project
5. Add reference of map_flex_1_8b.swc to the project

6. Add mxml code


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="com.google.maps.controls.*">
<maps:Map url="http://www.yoururl.com/" xmlns:maps="com.google.maps.*" id="myMap" mapevent_mapready="onMapReady(event)" width="100%" height="100%" key="yourkey"/>
<mx:Button label="Current Lat Long" click="ShowLatLong()" x="10" y="10"/>
<mx:Button label="++" width="50" click="zoomIn()" x="10" y="40"/>
<mx:Button label="--" width="50" click="zoomOut()" x="10" y="238"/>
<mx:VSlider id="vsZoom" x="28" y="70" minimum="1" maximum="17" tickInterval="0.1" change="zoomChange()"/>
<mx:Script>
   <![CDATA[
       import mx.controls.Alert;

       import com.google.maps.LatLng;
       import com.google.maps.Map;
       import com.google.maps.MapEvent;
       import com.google.maps.MapType;
 
       private function onMapReady(event:Event):void {
           init();
           myMap.setCenter(new LatLng(17.7345444917096,83.32132062557982),vsZoom.value, MapType.NORMAL_MAP_TYPE);
           //click not working - but by default it handles
           //myMap.addEventListener(MouseEvent.DOUBLE_CLICK,handleMouseClick);
           myMap.addEventListener(MouseEvent.MOUSE_WHEEL,handleMouseWheel);
       }
       private function ShowLatLong():void{
           var objLatLong:LatLng;
           objLatLong = myMap.getCenter();
           myMap.zoomIn();
           Alert.show("[lat]"+objLatLong.lat()+ "[long]"+objLatLong.lng());
       }
       private function zoomIn():void{
           vsZoom.value = vsZoom.value + 1;
           zoomChange();
       }
       private function zoomOut():void{
           vsZoom.value = vsZoom.value - 1;
           zoomChange();
       }
       private function init():void{
           vsZoom.value = vsZoom.maximum;
       }
       private function zoomChange():void{
           myMap.setZoom(vsZoom.value);
       }
       private function handleMouseClick():void{
           vsZoom.value = vsZoom.value + 1;
       }
       private function handleMouseWheel(ev:MouseEvent):void{
           vsZoom.value = vsZoom.value + ev.delta/30;
           zoomChange();
       }
   ]]>
</mx:Script>

</mx:Application>

7. Change url and apikey to your values

sample output

Madhu :-)

Checking user is idle or not in AIR

2008-12-17T18:01:00.007+05:30

This changes the label according to user is active or idle on system.
Please note this is for AIR only.


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication  xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" layout="absolute">
       <mx:Script>
       <![CDATA[
  private function init():void
  {
     NativeApplication.nativeApplication.idleThreshold = 5;

     NativeApplication.nativeApplication.addEventListener(Event.USER_PRESENT, userActiveAlert);

     NativeApplication.nativeApplication.addEventListener(Event.USER_IDLE, userIdleAlert);
  }
  private function userActiveAlert(ev:Event):void
  {
     lblUserStatus.text = "User came back :-)";
     lblUserStatus.setStyle("color",StyleManager.getColorName("green"));
  }
  private function userIdleAlert(ev:Event):void
  {
     lblUserStatus.text = "User is idle :-(";
     lblUserStatus.setStyle("color",StyleManager.getColorName("red"));
  }
       ]]>
       </mx:Script>
       <mx:Label id="lblUserStatus" />
</mx:WindowedApplication>

Maximising an air application on startup

2008-12-02T12:39:00.003+05:30

Maximising an air application on startup

dont forgot to use in applicationComplete

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
applicationComplete="onApplicationComplete();">

<mx:Script>
<![CDATA[

private function onApplicationComplete():void {
stage.nativeWindow.maximize();
}

]]>
</mx:Script>

</mx:WindowedApplication>

Madhu :)

"Process Terminated without connecting to debugger" in flex

2008-11-26T12:29:00.000+05:30

I got this error while debugging some complex code of AIR application, and then i was unable to even run the application. I closed flex builder and opened again still its not running and not even debug is working. Only after restarting my system it started working.

Error shown:
Process terminated without establishing connection to debugger.

Command:
"C:\Program Files\Adobe\Flex Builder 3 Trial\sdks\3.0.0\bin\adl.exe" E:\madhu\learning\flex\BindingToMethod\bin-debug\BindingToMethod-app.xml E:\madhu\learning\flex\BindingToMethod\bin-debug

Output from command:
invocation forwarded to primary instance

check this image:

Reason for issue:
This occurs when there is already another debugger running.
For more info check this link
http://bugs.adobe.com/jira/browse/FB-11037

Solution:
1. Close flex builder
2. Open task manager
3. kill the process ALD.exe

Thats it, you can work now with out any problem.

Madhu :)

Enabling Ole Automation Procedures

2008-06-03T13:08:00.000+05:30

When you want to initilise a com component (sp_OACreate) or call a method (sp_OAMethod) of com component we have to use Ole Automation Procedures.

If we use those procedures we get error like

SQL Server blocked access to procedure 'sys.sp_OACreate' of component 'Ole Automation Procedures' because this component is turned off as part of the security configuration for this server. A system administrator can enable the use of 'Ole Automation Procedures' by using sp_configure. For more information about enabling 'Ole Automation Procedures', see "Surface Area Configuration" in SQL Server Books Online.

This is because by default Ole Automation Procedures are disabled for security reasons. To avoid this error we need to enabled Ole Automation Procedures.

Lets see steps for enabling Ole Automation Procedures

1. Open SQL Server Surface Area Configuration tool from

start menu > program files > Microsoft SQL Server 2005 > Configuration Tools

2. Open Surface Area Configuration for Features

3. Select OLE Automation and check the box Enable OLE Automation

4. Click Apply

Now you can use Ole Automation Procedures

Madhu :-)

www.madhu.qsh.in

licenced software free for a day :)

2008-03-21T00:02:00.000+05:30

Hi,

This is my first blog, and I hope this will be really helpful to you all.

How do you think if we get a software, I mean licenced software free to use personally. I hope its difficult for us to buy each and every software, even its found to be worth using. So what if we get those softwares free of cost, that too licenced versions. I dont think its possible, what we may get is only open source softwares, but no I found a place where we get licenced versions free of cost. Its a new project to help the people like us to get free softwares and also it helps the software developers as an adversisement.

I was surprised to hear that this projet team is paying money for the software developers, just for us to download. I am happy and exited on seeing this site, its worth a watch. Only limitation is that they wont give softwares free of cost all time, they only give you one software a day for free of cost. You have to download that software if you found really worth using, and you get licenced version.

just visit http://www.giveawayoftheday.com/

you will really enjoy this site, worth watching daily once, also if you are busy, you can subscribe to your email, so that you get the new software that is free as an email.

MadhU :)