9 Replies Latest reply on Apr 23, 2009 10:21 AM by Mariush T.

    application position on screen

    Starlover_jacob Level 1
      hi there,
      i have an application(air) i want to load in the center of my desktop.
      the application has a fixed size.
      If i start my application it is not loaded in the center of my screen, the bottom of my application runs out of the screen.

      so my question; How to calculate the desktop sizes and set the application on a specific point?
      for example top right or bottom left.

      Greetz, jacob
        • 2. Re: application position on screen
          Gregory Lafrance Level 6

          In your AIR application app.xml file:

           

          <visible>false</visible>

          In your AIR app mxml file:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml"
              creationComplete="init()">
              <mx:Script>
                  <![CDATA[
                      import flash.system.Capabilities;

                      // Determine if app is running on Win or Mac.
                      private var isWin:Boolean = (Capabilities.os.indexOf("Windows") >= 0);
                      private var isMac:Boolean = (Capabilities.os.indexOf("Mac OS") >= 0);

                      // Set the app width and height based on the screen width / height.     
                      private function init():void{
                          this.width = Capabilities.screenResolutionX - 20;
                          this.height = Capabilities.screenResolutionY - (Capabilities.screenResolutionY / 8);
                          this.x = 0;
                          this.y = 0;
                          this.visible = true;  
                      }
          ...

          • 3. Re: application position on screen
            Starlover_jacob Level 1

            Hi,

            thanx for the quick reply,

            but this solution is stretching my application window and not position it.

            (i use an application window with custom chrome and a fixed size)

            And my app is loading lets say 30% to low.


            Greets, J.

            • 4. Re: application position on screen
              Gregory Lafrance Level 6

              In that case you might need to do something different, and my code may or may not be of use.

              • 5. Re: application position on screen
                new_to_flex

                This might do the job (didn't try it though):

                 

                        this.x=Capabilities.screenResolutionX-(this.width/2);
                        this.y=Capabilities.screenResolutionY-(this.height/2);
                        this.visible=true;

                • 6. Re: application position on screen
                  Starlover_jacob Level 1

                  Yes, i did try that, and i still get the same result.

                  It seems that "this" is not the this i expect it to be.

                  But Application.application doesn't do the trick either.

                   

                  Greets, Jacob

                   

                  This is the code i use:

                   

                  centerapp.mxml

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                      creationComplete="initApp()"
                      layout="absolute"
                      width="1024"
                      height="768"
                      paddingRight="0"
                      paddingLeft="0"
                      visible="false"
                      backgroundImage="@Embed('img/decoratieframe.png')"
                      applicationComplete="onApplicationComplete();"
                      xmlns:localcanvas="*">
                   
                      <mx:Style>
                          Application 
                          {
                              /* make app window transparent */
                              background-color:""; 
                              background-image:""; 
                              padding: 0px;
                          }                    
                      </mx:Style>     
                       
                       
                       <mx:Script>
                            <![CDATA[
                                 import mx.containers.Canvas;
                                 import flash.display.Screen;
                            
                            // stuff for the application dragg
                                 public var shadowFilter:DropShadowFilter;
                              private var baseBgColor:Number = 0x888888;
                  
                     
                              private function initApp():void 
                              {
                                  // adds mouseDown listeners so a click and drag on the background or the
                                  // display area lets you move the window
                                  this.bgBox.addEventListener(MouseEvent.MOUSE_DOWN, onMouseOmlaag);
                   
                                  // creates a generic drop shadow to use on components that don't accept CSS shadow styles
                                  shadowFilter = new DropShadowFilter();
                                  shadowFilter.color = 0x000000;
                                  shadowFilter.alpha = 0.4;
                                  shadowFilter.blurX = 5;
                                  shadowFilter.blurY = 5;
                                  shadowFilter.distance = 5;
                                  
                                  // 'external' shadows
                                  addShadow(this.bgBox);
                  
                                  // retrieves the current background color to use as a base for 
                                  // color calculations; this way you could use a CSS stylesheet
                                  // to change the base background color in the future.
                                  var baseColor:* = this.bgBox.getStyle("backgroundColor");
                                  if(!isNaN(baseColor) && baseColor != null)
                                  {
                                      this.baseBgColor = baseColor as Number;
                                  }
                              }
                              
                              /**
                               * Adds a standard drop shadow to a display object.
                               */
                              public function addShadow(comp:DisplayObject):void
                              {
                                  comp.filters = [this.shadowFilter];
                              }
                  
                  
                              
                              /**
                               * Responds to a mouseDown event by starting an operating-system move sequence.
                               */
                              private function onMouseOmlaag(evt:MouseEvent):void
                              {
                                  stage.nativeWindow.startMove();
                              }
                  
                              /**
                               * Responds to a move event. (Currently not in use)
                               */         
                              public function onWindowMove(event:Event):void
                              {
                                  trace("Window is moving...");
                              }
                  
                              /**
                               * Responds to a window close event after the window's close button has been clicked.
                               */                 
                              private function onClose(evt:MouseEvent):void
                              {
                                  stage.nativeWindow.close();
                              }
                  
                              /**
                               * Responds to a window minimize event, after the minimize button has been clicked
                               */             
                              private function onMinimize(evt:MouseEvent):void
                              {
                                  stage.nativeWindow.minimize();
                              }          
                                 
                                 private function onApplicationComplete():void
                                 {
                                 var screenwidth:Number=Capabilities.screenResolutionX;
                                 var screenheight:Number=Capabilities.screenResolutionY; 
                                 
                                 // 2 lines beneath give different result than
                                 this.x=(screenwidth-this.width)/2;
                                 this.y=(screenheight-this.height)/2;
                                 //this 2 lines.     
                                 //this.x=Capabilities.screenResolutionX-(this.width/2);
                               //this.y=Capabilities.screenResolutionY-(this.height/2);
                               
                              
                              //var mainScreen:Screen = Screen.mainScreen;
                                 //var screenBounds:Rectangle = mainScreen.bounds;
                                  //this.x =(screenBounds.width - this.width)/2;
                                 //this.y =(screenBounds.height - this.height)/2;             
                                 this.visible=true;
                                 }
                            ]]>
                       </mx:Script>
                          <mx:HBox width="908" horizontalGap="0" height="35" id="bgBox" x="58" y="51">      
                               <mx:Canvas width="908" height="34">
                               <mx:Button id="minimizeBtn" 
                                   icon="@Embed('img/minimize_icon.png')" 
                                   horizontalGap="0"
                                   width="23.5" 
                                   height="23.5" 
                                   click="onMinimize(event)" x="841.5" y="5"/>
                               <mx:Button id="closeBtn" 
                                   icon="@Embed('img/close_icon.png')" 
                                   width="23.5" 
                                   height="23.5" 
                                   click="onClose(event)"  x="869.5" y="5"/>
                               </mx:Canvas>
                          </mx:HBox>     
                  </mx:Application>
                  

                  and the file that goes with that:

                  centerapp-app.xml

                  <?xml version="1.0" encoding="UTF-8"?>
                  <application xmlns="http://ns.adobe.com/air/application/1.0">
                       <id>centerapp</id>
                       <version>1.0</version>
                       <filename>centerapp</filename>
                       <name>centerapp</name>
                       <installFolder>centerapp</installFolder>
                       <programMenuFolder>centerapp</programMenuFolder>
                       <description>centerapp</description>
                      <copyright>centerapp</copyright>
                       <initialWindow>
                            <title></title>
                            <content>centerapp.swf</content>
                            <systemChrome>none</systemChrome>
                            <transparent>true</transparent>
                            <visible>true</visible>
                           <minimizable>true</minimizable>
                           <maximizable>false</maximizable>
                           <resizable>false</resizable>    
                       </initialWindow>
                       
                      <fileTypes>
                          <fileType>
                              <name>adobe.VideoFile</name>
                              <extension>avf</extension>
                              <description>Adobe Video File</description>
                              <contentType>application/vnd.adobe.video-file</contentType>
                  
                          </fileType>
                      </fileTypes>
                  </application>
                  

                  The images are set in a folder caled; img

                  • 7. Re: application position on screen
                    Starlover_jacob Level 1

                    Hi,  i found a solution.

                     

                    Sinse i use a custom chrome i could not use:

                    this.x=Capabilities.screenResolutionX-(this.width/2);

                    this.y=Capabilities.screenResolutionY-(this.height/2);

                    or

                    this.nativeWindow.x=(Capabilities.screenResolutionX - this.width)/2;

                    this.nativeWindow.y=(Capabilities.screenResolutionY - this.height)/2;

                    (This will work when u use <mx:WindowedApplication> instead of <mx:Application>)

                     

                    That shifted the container on the stage, not the position of the window on the screen.

                     

                    I was almost going to use the window's initial x and y position with a value of 0 in the centerapp-app.xml

                    between the <initialWindow> tags, so my application is at least fully shown on my 1280x800 screen.

                     

                     

                    The solution i used:

                    stage.nativeWindow.x=(Capabilities.screenResolutionX - this.width)/2;
                    stage.nativeWindow.y=0;

                     

                    y is set to 0 because when i use (Capabilities.screenResolutionY - this.height)/2

                    the application is running out of my screen at the bottom.

                    Perhaps this is a MS Windows thing, cause I've seen checks of the operating system.

                     

                    It could be possible that there has to be a check on operating system first, and when its Windows, you need to subtract another 50 pix or so from they position.

                     

                    Greets, Jacob.. and thanks for the reply's.

                    • 8. Re: application position on screen
                      wvxvw Level 1

                      Yes, you can get info on OS before deciding on App dimensions (from Capabilities.os), but, what you cannot know is where the user had positioned the Taskbar and if it is set to "autohide" or what width it is...

                      • 9. Re: application position on screen
                        Mariush T.

                        You might want to check out my post center AIR window on the screen.

                         

                        My blog: http://mariusht.com/blog/