Wednesday, December 21, 2011

Show and Hide Effect for Image

The Fade effect animates the alpha property of a component. If played manually (outside of a transition) on an object whose visible property is set to false, and told to animate alpha from zero to a nonzero value, it will set visible to true as a side-effect of fading it in. When run as part of a transition, it will respect state-specified values, but may use the visible property as well as whether the object is parented in the before/after states to determine the values to animate alpha from and to if alphaFrom and alphaTo are not specified for the effect.




Here is the code for Adobe Example:



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:Fade id="myFade" duration="2000"/>
</fx:Declarations>

<s:Panel width="800" height="650" backgroundColor="#DB2DA0" contentBackgroundColor="#B66D27"
title="Show and Hide Statue of Liberty Flex Effects">

<s:Image width="800" height="600" id="statue" source="assets/statue_of_liberty-800x600.jpg"  hideEffect="{myFade}" showEffect="{myFade}" />
<s:controlBarContent>
<s:Button label="Show" click="statue.visible=true"/>
<s:Spacer width="100%"/> 
<s:Button label="Hide" click="statue.visible=false" toolTip="Please wait for 2 seconds"/>
</s:controlBarContent>
</s:Panel>

</s:Application>

Tuesday, December 20, 2011

Background Image Just for Fun :)

A BitmapImage element defines a rectangular region in its parent element's coordinate space, filled with bitmap data drawn from a source file or source URL


SkinnablePopUpContainer Example

The SkinnablePopUpContainer class is a SkinnableContainer that functions as a pop-up. One typical use for a SkinnablePopUpContainer container is to open a simple window in an application, such as an alert window, to indicate that the user must perform some action.
You do not create a SkinnablePopUpContainer container as part of the normal layout of its parent container. Instead, it appears as a pop-up window on top of its parent. Therefore, you do not create it directly in the MXML code of your application.
Instead, you create is as an MXML component, often in a separate MXML file. To show the component create an instance of the MXML component, and then call the open() method. You can also set the size and position of the component when you open it.
To close the component, call the close() method. If the pop-up needs to return data to a handler, you can add an event listener for the PopUp.CLOSE event, and specify the returned data in the close() method.
The SkinnablePopUpContainer is initially in its closed skin state. When it opens, it adds itself as a pop-up to the PopUpManager, and transition to the normal skin state. To define open and close animations, use a custom skin with transitions between the closed and normal skin states.



Here is the code for Above Example:



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" >
<fx:Style source="CustomPopup.css"/>

<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function login_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
if(txtUserName.text=='Rocky' && txtPassword.text=='Hacker')
{
Alert.show("Successfully login to Adobe Flex 4.5 ....","Login ");
login.close();
}
else
{
Alert.show("Please enter the correct User Name and Password","Error");
}


}

protected function logout_clickHandler(event:MouseEvent):void
{
// TODO Auto-generated method stub
Alert.show("Successfully Logout to Adobe Flex 4.5 ....","Log Out ");
login.close();
}

]]>
</fx:Script>

<fx:Declarations>
<s:SkinnablePopUpContainer id="login">
<s:Panel title="Launching Adobe Flex 4.5 ...">
<s:Form x="-14" y="5" width="450" height="200" color="#3F9122" fontFamily="Verdana" fontSize="13">
<s:FormItem label="User Name">
<s:TextInput id="txtUserName" />
</s:FormItem>
<s:FormItem label="Password" >
<s:TextInput id="txtPassword" displayAsPassword="true"/>
</s:FormItem>
<s:HGroup>
<s:Button label="Log In" click="login_clickHandler(event)"/>
<s:Button label="Log Out" click="logout_clickHandler(event)"/>
</s:HGroup>
<s:Label text="Enter User name Rocky and Password Hacker to login"/>
</s:Form>

</s:Panel>
</s:SkinnablePopUpContainer>
</fx:Declarations>
<s:Button x="53" y="37" label="Click here to Sign to Adobe Flex 4.5"
 click="login.open(this,false)"/>
<s:Label x="53" y="11" text="Welcome to Adobe Flex 4.5 Components "/>

</s:Application>


Css file:



/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";




global
{
font-family: Georgia;
font-size: 14;
color: #3363A4;
chrome-color: #A2B8A2;
selection-color: #424234;
}




Monday, December 19, 2011

Custom Alert Message in Flex 4.5

The Alert control is a pop-up dialog box that can contain a message, a title, buttons (any combination of OK, Cancel, Yes, and No) and an icon. The Alert control is modal, which means it will retain focus until the user closes it.
Import the mx.controls.Alert class into your application, and then call the static show() method in ActionScript to display an Alert control. You cannot create an Alert control in MXML.
The Alert control closes when you select a button in the control, or press the Escape key.




Here is the Code for the Alert Message:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Style source="PopUpWindow.css"/>

<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function button1_clickHandler(event:MouseEvent):void
{
Alert.yesLabel="Flex is Awesome";
Alert.noLabel="I am not Agree !";
Alert.buttonWidth=120;
Alert.show("Flex 4.5 is Awesome ....","Flex Message",(Alert.YES|Alert.NO));

}
]]>
</fx:Script>

<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Button x="216" y="182" label="Show Alert Message" click="button1_clickHandler(event)"/>
</s:Application>

Css:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";


global
{
font-family: Georgia;
font-size: 14;
color: #762C2C;
}



Wednesday, December 14, 2011

Flex SDK Security Patch Now Available


A security patch for the Flex SDK is now available to address a vulnerability that will cause many Flex applications to be vulnerable to cross-site scripting (XSS) attacks.  These applications must be patched in order to protect user data. Please review this bulletin to determine if your applications are at risk and to obtain instructions on how to patch your applications.
If you have any questions about the security bulletin, please email PSIRT@adobe.com

An Update on Flex -- Deepa Subramaniam


I wanted to share a brief update on where we are with our preparation of proposals for incubation of Flex SDK and BlazeDS to the Apache Software Foundation as well as our commitment to engaging with the Flex community further.
Regarding the incubation proposals, we have received all of the necessary Adobe legal clearance in order to contribute the full Flex SDK (including MXML compiler, automation libraries and data visualization components) to Apache. As such we have a draft incubation proposal for Flex SDK prepared and are aiming to post that to the Apache incubation mailing list within the next 1-2 weeks. Once the proposal has been posted, the normal process is that community members review the proposal for a period of time (normally 72 hours) after which the ASF votes. A positive vote means the project has been accepted as an incubation podling into Apache. Keep an eye out on this blog for regular status updates, including a link to the proposal once its been posted to the Apache incubation mailing list.
As for BlazeDS, at this time we are still working on legal clearance but aim to have that before the end of the year such that we can post the BlazeDS incubation proposal to the Apache mailing list at the start of the new year.
In order to better facilitate discussion with our broad developer community, next Monday (12/12/11) and Tuesday (12/13/11) Adobe is hosting a Flex Community Summit where we are inviting a number of Flex community leaders and enterprise developers to participate in a discussion on a variety of topics. We will be discussing the recent announcements regarding Flex and the Flash Platform as well as educating all attendees about the Apache process and what it takes for a project to thrive within Apache. Unfortunately, due to budget, we were unable to invite everyone we would have liked to the summit. Most of the summit sessions and ensuing discussions will be video-taped and posted publicly after the summit. Additionally, we are working on a Flex Whitepaper that we will publish on the Adobe Developer Center which will recap much of the content covered in the summit.
And lastly, in order to replicate the same discussions that will happen at the summit, we are organizing a multi-city international Flex User Group tour that we are looking to kick off in early 2012.
We’ll be sure to share regular updates on this blog as the Apache proposals progress, the Flex Community Summit content is posted and cities/dates are finalized for the 2012 Flex User Group tour.
Deepa Subramaniam
Group Product Manager, Adobe

Saturday, November 26, 2011

Adobe Flex 4.5 Combo and Dropdownlist

Differences between ComboBox and DropDownList


1)First difference between the controls is that the prompt area of the ComboBox control is implemented by using the TextInput control, instead of the Label control for the DropDownList control.
2) a user can edit the prompt area of the ComboBox control to enter a value that is not one of the predefined options; the values in the DropDownList cannot be edited.
3) However, because dataProvider is the DropDownList control’s default property, you do not have to specify a child tag of the tag, as the following example shows:
Code:






<s:application backgroundcolor="#528CDA" minheight="600" minwidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark">
<s:layout>
<s:verticallayout paddingleft="5" paddingtop="5">
</s:verticallayout></s:layout>

<fx:declarations>

</fx:declarations>

<s:label text="Spark ComboBox ">
<s:combobox id="mySparkCB" prompt="Select a Color" width="140">
<s:dataprovider>
<mx:arraylist>
<fx:string>Pink</fx:string>
<fx:string>Orange</fx:string>
<fx:string>Yellow</fx:string>
<fx:string>Red</fx:string>
<fx:string>Blue</fx:string>
<fx:string>Green</fx:string>
</mx:arraylist>
</s:dataprovider>
</s:combobox>
<s:label text="Spark DropDownList ">
<s:dropdownlist width="160">
<mx:arraycollection>
<fx:string>Atlanta</fx:string>
<fx:string>SpringFiled</fx:string>
<fx:string>Chicago</fx:string>
<fx:string>New York</fx:string>
<fx:string>California</fx:string>
</mx:arraycollection>
</s:dropdownlist>

</s:label></s:label></s:application>







Friday, November 18, 2011

Spark DataGrid Support for Copy selected cell

This article describes how to add support for copy  the Flex DataGrid component.  It enables one to copy the datagrid column from  applications, notably spreadsheet apps like Excel.

The implementation enables copying the selected cell value using Custom Itemrender. That itemrender is the label component.


Here is the code:


CopyDatgridCell.mxml



<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:ArrayCollection id="userColl">
<fx:Object key="1000" name="Abrasive" price="100.11" call="false"/>
<s:DataItem key="1405" name="File" price="150.05" call="true"/>
<s:DataItem key="1606" name="Gouge" price="160.06" call="false"/>
<s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
<s:DataItem key="1708" name="Ink" price="180.08" call="false"/>
<s:DataItem key="1009" name="Jack" price="190.09" call="true"/> 
<s:DataItem key="1801" name="Brush" price="110.01" call="true"/>
<s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
<s:DataItem key="1303" name="Drill" price="130.03" call="true"/>
<s:DataItem key="1604" name="Epoxy" price="140.04" call="false"/>
</s:ArrayCollection>
</fx:Declarations>
<s:Label x="71" y="24" fontFamily="Verdana" fontSize="26"
text="Adobe Flex 4.5 Spark DataGrid single cell copy"/>
<s:DataGrid id="copyCellData" x="71" y="58" width="350" dataProvider="{userColl}"
selectionMode="singleCell"> 
<s:columns> 
<s:ArrayList>
<s:GridColumn dataField="key" headerText="KEY" itemRenderer="Renders.LabelRender" />
<s:GridColumn dataField="name" headerText="NAME" itemRenderer="Renders.LabelRender"/>
<s:GridColumn dataField="price" headerText="PRICE"/>
<s:GridColumn dataField="call" headerText="CALL"/>
</s:ArrayList>
</s:columns> 
</s:DataGrid> 
</s:Application>


Here is the code for  Itemrender:

LabelRender.mxml


<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true" >
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
lblData.text = data[column.dataField]
}
]]>
</fx:Script>
<mx:Label id="lblData" left="7" top="9"  selectable="true" />
</s:GridItemRenderer>









Thursday, November 17, 2011

Spark Datagrid Itemrender

Here is the code for spark datagrid Itemrender


https://sites.google.com/site/adobeflex45/system/app/pages/admin/attachments/SparkDatagridItemrender.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
<s:ArrayList id="tourdata">
<fx:Object sno="1" TourName="Atlanta to Nashville" price="237.50"></fx:Object>
<fx:Object sno="2" TourName="Miami to Tampa" price="197.87"></fx:Object>
<fx:Object sno="3" TourName="Chicago to california" price="637.87"></fx:Object>
<fx:Object sno="4" TourName="Las vegas to New york" price="777.54"></fx:Object>
</s:ArrayList>
</fx:Declarations>
<s:DataGrid x="45" y="52" width="451" height="161" dataProvider="{tourdata}"
requestedRowCount="4">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="sno" headerText="S.No"></s:GridColumn>
<s:GridColumn dataField="TourName" headerText="Tour Name"></s:GridColumn>
<s:GridColumn dataField="price" headerText="Price" itemRenderer="Renders.PriceRender"></s:GridColumn>

</s:ArrayList>
</s:columns>


</s:DataGrid>
</s:Application>

Itemrender:
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
<!--delete script section not required-->
<!--<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
lblData.text = data[column.dataField]
}
]]>
</fx:Script>-->
<fx:Declarations>
<s:CurrencyFormatter id="priceFormatter" useCurrencySymbol="true"/>
</fx:Declarations>
<s:layout>
<s:HorizontalLayout horizontalAlign="right" verticalAlign="middle" paddingRight="7"/>
</s:layout>
<s:Label id="lblprice"  text="{priceFormatter.format(data.price)}"/>
</s:GridItemRenderer>
Spark Datagrid Itemrender
Spark Itemrender

Tuesday, November 15, 2011

Spark Label

Simple Hello World Program in Adobe Flex 4.5


HELLO FROM ADOBE FLEX 4.5

HERE IS THE CODE

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Label fontFamily="Verdana" fontSize="50" horizontalCenter="0" top="25"
text="Hello from Adobe Flex 4.5 ! "/>
</s:Application>

Monday, November 14, 2011

Spark Datagrid

Adobe Flex 4.5 has some really exciting new things in it. Among them my favorite is the new Spark DataGrid component.




The Spark DataGrid control provides the following features:
  • Interactive column width resizing
  • Control of column visibility
  • Cell and row selection
  • Single item and multiple item selection modes
  • Customizable column headers
  • Cell editing
  • Column sorting
    Adobe Flex 4.5 Spark Datagrid
    Here is the Code for Spark Datagrid

    <?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <s:layout> 
    <s:VerticalLayout/> 
    </s:layout> 
    <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
    <s:ArrayCollection id="userColl"> 
    <fx:Object  SNO="1" USERNAME="FLEX" EMAIL="flex@gmail.com"/> 
    <fx:Object  SNO="2" USERNAME="PHOTO SHOP" EMAIL="photoshop@gmail.com"/>
    <fx:Object  SNO="3" USERNAME="CSS" EMAIL="css@gmail.com"/>
    <fx:Object  SNO="4" USERNAME="JAVA" EMAIL="java@gmail.com"/>
    <fx:Object  SNO="5" USERNAME="PHP" EMAIL="php@gmail.com"/>
    <fx:Object  SNO="6" USERNAME="COLD FUSION" EMAIL="coldfusion@gmail.com"/>
    </s:ArrayCollection> 
    </fx:Declarations>
    <s:Label width="441" height="42" fontFamily="Verdana" fontSize="26"
    text="Adobe Flex 4.5 Spark DataGrid"/>
    <s:DataGrid id="mySparkDatagrid" width="350" dataProvider="{userColl}"> 
    <s:columns> 
    <s:ArrayList>
    <s:GridColumn  dataField="SNO" />
    <s:GridColumn dataField="USERNAME"/>
    <s:GridColumn dataField="EMAIL"/>
    </s:ArrayList>
    </s:columns> 
    </s:DataGrid> 
    </s:Application>








Video Player 4.5

The VideoPlayer control is a skinnable video player that supports progressive download, multi-bitrate streaming, and streaming video. The VideoPlayer control contains a full-featured UI for controlling video playback.
* Note 
 It supports playback of FLV and F4v files :)
 

VideoDisplay is the chromeless version that does not support skinning. It is useful when you do not want the user to interact with the control.


Here is the Sample code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
  xmlns:s="library://ns.adobe.com/flex/spark" 
  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:VideoPlayer horizontalCenter="0" verticalCenter="0" 
  source="http://domain-name.com/filename.flv" 
  autoPlay="true"/>

</s:Application>

Flex Interview Questions

1)    How will you remove the first element from the Array?
The elements from the Array can be removed by using splice method. splice method accepts mainly two arguments. First one tells the starting index and second one the number of elements to be retrieved. This will return an array of the spliced elements. See the code below.
Var arr:Array= new Array(“a”,”b”,”c”,”d”);
Alert.Show(arr.toString());
Arr.splice(1,arr.length-1);
Alert.Show(arr.toString());
2)    Can you share with us your experience regarding performance of the Flash 9 in a real time mode? What are your thoughts on advantages of using Flash 9 say in a real-time trading applications comparing to a tried-and-true Java Swing front end?
A.
 Flex is very capable of providing near real-time data rendering to the GUI and very high refresh rates on large data sets. Flash Player 9 is the high-performance modern virtual machine with precompiled optimized code and just-in-time (JIT) machine code compiler. And it is very possible to build the client portion of a real-time portfolio display integrated with news feeds and graphs with about 100 lines of Flex 2 code. A similar Java Swing program (even if it’s created by commercial IDEs) would be on average ten times larger.
The real selling point becomes obvious on a second or third day of the proof of concept phase. A decent Flex developer should be able to prototype (short of server processing) most of the UI for specific trading system by the end of the first week. If you are lucky and the system integration went fine, you can add the collaboration features and multimedia – with total client code base for the whole project within 1000-1500 lines.
3)    if you move from one page to another in a pure Flash Web site, can you bookmark, say page #4?

The bookmarking of the sites is still available on the browser. But in Flash-based applications you do not move from one page to another as there is no roundtrip to the server – essentially you are on the same URL all the time. What looks like a page to the user is just another screen in the either monolithic or dynamic application. The approach I would take is to make application bookmark the data the user is looking for – that provides you much richer insight into the user’s preferences and type of information he is customary searching for. That data would be associated with user and combined with regular URL bookmark upon the user re-logon/cookie retrieval.
4)    What are three ways to skin a component in flex?

Skinning is the process of changing the appearance of a component by modifying or replacing its
visual elements. These elements can be made up of images swf files or class files that contain
drawing API methods.
There are several ways that you can define skins: inline, by using the setStyle() method, and by using
Cascading Style Sheets (CSS).
5)    How do I get access to the J2EE session from my RemoteObjects?
The AMF Gateway provides access to the current HttpServletRequest instance in a thread local variable. The session can be obtained from the request, as follows:
flashgateway.Gateway.getHttpRequest().getSession();
6)    Why are my ValueObject member variables undefined in the results from my RemoteObject requests?
Flash Player deserializes objects in a special order that can confuse developers used to object serialization from other RPC systems. When a strongly typed object is returned to the player, it first creates an instance from the prototype of the registered class without calling the constructor. It then populates the object with the properties sent in the result. Finally, it calls the constructor without arguments.

If your ValueObject constructor expects arguments to initialize an instance, be sure to check whether arguments were actually sent to the constructor before overriding member variable values.
7)    What is MVC and how do you relate it to flex apps
The goal of the Model-View-Controller (MVC) architecture is that by
creating components with a well-defined and limited scope inyour application, you increase the
reusability of the components and improve the maintainability of the overall system. Using the MVC
architecture, you can partition your system into three categories of components:
* Model components Encapsulates data and behaviors related to the data.
* View components Defines your application's user interface.
* Controller components Handles the data interconnectivity in your application.
8)Explain Metadata
You insert metadata tags into your MXML and ActionScript files to provide information to the Adobe Flex compiler. Metadata tags do not get compiled into executable code, but provide information to control how portions of your code get compiled.

9)What are the channels and their types
The Channel class is the base message channel class that all channels in the messaging system must extend.
Channels are specific protocol-based conduits for messages sent between MessageAgents and remote destinations. Preconfigured channels are obtained within the framework using the ServerConfig.getChannel() method. You can create a Channel directly using the new operator and add it to a ChannelSet directly
In Flex AMFChannel is used mostly. Action Message Format
Methods
applySettings (),connect(),connectFailed(),connectSuccess(), connectTimeoutHandler()

disconnect(),disconnectFailed(),disconnectSuccess(),flexClientWaitHandler(), getMessageResponder(),internalConnect(),internalDisconnect(),internalSend(),logout()
send(),setCredentials()
Properties
reconnecting,recordMessageSizes,recordMessageTimes,reQuestionuestTimeout,uri

10)  When I set visible="false", the component still takes up space and appears in the tab order. Why is that?


You can often achieve the "display=none" effect by setting the height/width to zero when you set it invisible, and then set it back to a fixed value or to undefined when you make it visible again