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

Saturday, April 4, 2009
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 :-)

Labels: , , , ,

 
posted by madhu at 7:04 PM, | 0 comments

Code Behind in Flex

Wednesday, January 21, 2009
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 :-)

Labels:

 
posted by madhu at 1:52 PM, | 0 comments

Using google maps in flex

Wednesday, December 17, 2008
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 :-)

Labels:

 
posted by madhu at 7:47 PM, | 0 comments

Checking user is idle or not in AIR

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>

Labels:

 
posted by madhu at 6:01 PM, | 0 comments

Maximising an air application on startup

Tuesday, December 2, 2008
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 :)
 
posted by madhu at 12:39 PM, | 0 comments

"Process Terminated without connecting to debugger" in flex

Wednesday, November 26, 2008
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 :)

Labels:

 
posted by madhu at 12:29 PM, | 8 comments

Enabling Ole Automation Procedures

Tuesday, June 3, 2008

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

Labels:

 
posted by madhu at 1:08 PM, | 0 comments