Flex: Applications de résolution croisée

Question

 
What is the best way to create applications in Flex/AIR, 
which look and feel the same irrespective of the screen 
resolution? 

Answer 1

Lors de la création de la mise en page dans votre application Flex, vous pouvez obtenir une résolution d'écran cohérente regard indépendant et se sentir d'utiliser mise à l'échelle relative.

Cela ressemble beaucoup à la création d'une mise en page liquide avec HTML. Par exemple, pour créer une application simple à deux colonnes (navigation de gauche et contenu), vous n'avez besoin que de deux conteneurs, l'un prédéfini et l'autre laissé à l'échelle indéfiniment.

comme suit:

<mx:HBox width="225"> 
    <mx:Button label="Menu 1"/> 
    <mx:Button label="Menu 2"/> 
    <mx:Button label="Menu 3"/> 
</mx:HBox> 
<mx:HBox width="100%"> 
    Any content here will flow fluidly across the entire screen regardless of window size/screen resolution. 
</mx:HBox> 

En utilisant les bases ci-dessus, vous pouvez créer une mise en page d'application qui se forme à un écran.

---

Cependant, parfois, vous devez créer un schéma de mise en page plus élaborée avec de nombreux composants interchangeant dynamiquement redimensionnement pour adapter à la fenêtre.

Pour cela, vous pouvez faire Positionnement absolu. substitue la fonction updateDisplayList() des composants et crée vos propres règles de dimensionnement/positionnement. Cela nécessite bien entendu que vous soyez dans un conteneur Canvas ou que le conteneur d'application principal soit défini sur disposition absolue.

Un exemple simple:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
    <mx:Script> 
     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void 
     { 
      //find out how big we are 
      var stageWidth:int = this.width; 
      //center the box in the middle of the page. 
      centeredBox.x = stageWidth - (centeredBox/2); 
     } 
    </mx:Script> 
    <mx:HBox id="centeredBox" width="500"/> 
</mx:Application> 

En redéfinissant updateDisplayList(), vous pouvez créer des moyens sans fin afin de mieux positionner de manière dynamique et la taille de vos composants pour mieux utiliser l'écran realestate.

Answer 2

Vous pouvez créer une application avec hauteur et largeur par rapport au conteneur de sorte que tous les composants s'harmonisent correctement à toutes les résolutions d'écran.

Answer 3

Généralement, nous créons un MainFrame.mxml qui agit comme notre composant principal et qui a une mise à l'échelle relative de mise en page comme mentionné par les autres. Ensuite, nous créons l'application AIR qui intègre simplement un MainFrame.mxml et une autre application Flex qui l'intègre également. De cette façon, nous pouvons garder l'application entière dans MainFrame et ne pas s'inquiéter si elle est en Flex ou Air. Cela étant dit, vous devrez vous assurer que vous n'utilisez pas des appels spécifiques AIR ou spécifiques à Flex qui ne se traduisent pas par l'autre.