{"id":4016,"date":"2012-12-13T17:38:31","date_gmt":"2012-12-13T13:38:31","guid":{"rendered":"http:\/\/blog.denivip.ru\/?p=4016"},"modified":"2013-08-05T14:10:37","modified_gmt":"2013-08-05T10:10:37","slug":"multiscreen-support-in-mobile-air-applications","status":"publish","type":"post","link":"http:\/\/blog.denivip.ru\/index.php\/2012\/12\/multiscreen-support-in-mobile-air-applications\/?lang=en","title":{"rendered":"Multiscreen Support in Mobile AIR Applications"},"content":{"rendered":"

\"\"<\/p>\n

As AIR applications can run on multiple platforms and devices, AIR based developers have to take into account a vast diversity of screens, their resolutions and DPIs. Despite a broad diversity of supported platforms, in this post we will focus on multiscreen development for mobile AIR applications based on the Flex framework. <\/p>\n

Let’s now agree upon the basic terminology that we are going to use here. For convenience, in parentheses we will indicate the property containing a numerical value of a given parameter.<\/p>\n

    \n
  1. Screen resolution<\/strong> means the number of pixels on the screen in horizontal and vertical dimensions (Capabilities.screenResolutionX<\/span><\/code> and Capabilities.screenResolutionY<\/span><\/code>)<\/li>\n
  2. Display space resolution<\/strong> means both horizontal and vertical pixels of the display space. It may differ much from screen resolution<\/strong> as it does not include the status bar at the top, the button bar at the bottom, and also due to auto-scaling (systemManager.screen.width<\/span><\/code> and systemManager.screen.height<\/span><\/code>).<\/li>\n
  3. Screen DPI <\/strong> means the physical number of dots per inch on the device screen running the application (Capabilities.screenDPI<\/span><\/code>).<\/li>\n
  4. Runtime DPI <\/strong> returns Screen DPI<\/strong> rounded up to the value of one of the constants defined in the class called DPIClassification<\/span><\/code> (runtimeDPI<\/span><\/code> property) in the main class of the Flex application. The value of this property can be retrieved using FlexGlobals.topLevelApplication.runtimeDPI<\/span><\/code>). This property can only take three values: 160, 240, 320<\/span><\/code>. These are the basic values to which DPI screen<\/strong> is rounded. You have to use fixed values to have a limited set of graphics for three different DPIs. Using the runtimeDPIProvider<\/span><\/code> property, you can specify, for the main application, a class inherited from RuntimeDPIProvider<\/span><\/code>. In this class, you can override the runtimeDPI<\/span><\/code> method and set your own logic to round up Screen DPI<\/strong> to the desired value of DPI runtime.<\/strong> This might be useful, for example, in the event in the addition to screen DPI you need to define its resolution or any other options.<\/li>\n
  5. Application DPI<\/strong> means a numeric DPI value for which the application is developed (property — applicationDPI<\/span><\/code>) in the main class of the Flex application. The value of this property can be accessed via FlexGlobals.topLevelApplication.applicationDPI<\/span><\/code>). This is the key property used during automatic scaling performed by the Flex framework. You can set this value can using MXML in the main application class, and can change it at runtime. If applicationDPI<\/span><\/code> is not specified, automatic scaling will not be performed by the Flex framework. This property can only take three values: 160, 240, 320<\/span><\/code>.<\/li>\n<\/ol>\n

    Automatic Scaling<\/h3>\n

    Auto-scaling using the Flex framework can be enabled by setting Application DPI<\/strong>. If the developer has specified applicationDPI<\/span><\/code>, then Flex begins to apply a scaling factor to the main application by changing scaleX<\/span><\/code> and scaleY<\/span><\/code> for systemManager<\/span><\/code>. This facilitates development of multi-platform and multi-screen applications.<\/p>\n

    When developing applications with auto-scaling enabled, it is essential to define the size of display space. To do this, use systemManager.screen.width<\/span><\/code> and systemManager.screen.height<\/span><\/code> only, rather than stage.width<\/span><\/code> and stage.height<\/span><\/code>.<\/p>\n

    For instance, let’s take a device and an application run by it with the following parameters:<\/p>\n

      \n
    • runtimeDPI of the device is set to 320;<\/li>\n
    • applicationDPI is set to 240;<\/li>\n
    • screen resolution is 1280 x 720;<\/li>\n<\/ul>\n

      Having launched the application on a device, we can see the following values of properties:<\/p>\n

      stage.stageWidth: 720
      \nstage.stageHeight: 1230
      \nstage.fullScreenWidth: 720
      \nstage.fullScreenHeight: 1280
      \nCapabilities.screenDPI: 320
      \nCapabilities.screenResolutionX: 720
      \nCapabilities.screenResolutionY: 1280
      \nsystemManager.screen.width: 540
      \nsystemManager.screen.height: 922.5
      \nsystemManager.scaleX: 1.333333333333333
      \nsystemManager.scaleY: 1.333333333333333<\/div><\/div>\n

      You can see that the display space size is smaller than the stage size, because automatic scaling results in change of scaleX<\/span><\/code> and scaleY<\/span><\/code> in the application’s systemManager<\/span><\/code>. So, for instance, when centering pop-ups and other functional elements that have to know exact display space sizes, you can find the sizes in systemManager.screen.width<\/span><\/code> and systemManager.screen.height<\/span><\/code>.<\/p>\n

      Automatic scaling can result in content distortion. To avoid this, please adhere to the following rules:<\/p>\n

        \n
      1. Use vector images. In case of automatic scaling, Flex will display them similarly on all types of screens. Fonts also present no problem, as they are also scalable without distortion.<\/li>\n
      2. For bitmaps, icons or skins you need to have images for three different DPIs. Flex has a number of in-built tools to use a needed image for a particular Runtime DPI.<\/strong><\/li>\n<\/ol>\n

        Customization of Bitmap Resources for Different DPIs<\/h3>\n

        To ensure that bitmaps have no distortions and artifacts associated with automatic scaling of the application, you should define in Flex, which image should be used for a given DPI. To do this, when setting an image source, use an instance of MultiDPIBitmapSource<\/span><\/code>, whose properties contain image resources for three different DPI.<\/p>\n

        Let’s consider several examples of bitmap customization.
        \nHere is the class of component displaying a bell icon in a normal and selected state, respectively:<\/p>\n

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        36
        37
        38
        39
        40
        41
        42
        43
        44
        45
        46
        47
        48
        <\/div><\/td>
        package<\/span> ru.<\/span>denivip.<\/span>europa.<\/span>views.<\/span>schedule
        \n{<\/span>
        \nimport<\/span> spark.<\/span>components.<\/span>Group;<\/span>
        \nimport<\/span> spark.<\/span>primitives.<\/span>BitmapImage;<\/span>
        \nimport<\/span> spark.<\/span>utils.<\/span>MultiDPIBitmapSource;<\/span>
        \n
        \npublic<\/span> class<\/span> BellSwitcher extends<\/span> Group
        \n{<\/span>
        \n    private<\/span> var<\/span> bellIcon:<\/span>BitmapImage = new<\/span> BitmapImage(<\/span>)<\/span>;<\/span>
        \n
        \n    \/\/ Source for the icon in a normal state <\/span>
        \n    private<\/span> var<\/span> multiSource:<\/span>MultiDPIBitmapSource;<\/span>
        \n
        \n    \/\/ Source for the icon in a selected state <\/span>
        \n    private<\/span> var<\/span> multiSourceSelected:<\/span>MultiDPIBitmapSource;<\/span>
        \n
        \n    public<\/span> function<\/span> BellSwitcher(<\/span>)<\/span>
        \n    {<\/span>
        \n        super<\/span>(<\/span>)<\/span>;<\/span>
        \n
        \n        \/\/ For each of sources, set bitmap images <\/span>
        \n        \/\/ for three different DPIs<\/span>
        \n        multiSource = new<\/span> MultiDPIBitmapSource(<\/span>)<\/span>;<\/span>
        \n        multiSource.<\/span>source160dpi = "\/assets\/icon_bell@160.png"<\/span>;<\/span>
        \n        multiSource.<\/span>source240dpi = "\/assets\/icon_bell@240.png"<\/span>;<\/span>
        \n        multiSource.<\/span>source320dpi = "\/assets\/icon_bell@320.png"<\/span>;<\/span>
        \n
        \n        multiSourceSelected = new<\/span> MultiDPIBitmapSource(<\/span>)<\/span>;<\/span>
        \n        multiSourceSelected.<\/span>source160dpi = "\/assets\/icon_bell_selected@160.png"<\/span>;<\/span>
        \n        multiSourceSelected.<\/span>source240dpi = "\/assets\/icon_bell_selected@240.png"<\/span>;<\/span>
        \n        multiSourceSelected.<\/span>source320dpi = "\/assets\/icon_bell_selected@320.png"<\/span>;<\/span>
        \n
        \n        addElement(<\/span>bellIcon)<\/span>;<\/span>
        \n        commitSelected(<\/span>)<\/span>;<\/span>
        \n    }<\/span>
        \n    private<\/span> var<\/span> _selected:<\/span>Boolean<\/span> = false<\/span>;<\/span>
        \n    public<\/span> function<\/span> set<\/span> selected(<\/span>value<\/span>:<\/span>Boolean<\/span>)<\/span>:<\/span>void<\/span>
        \n    {<\/span>
        \n        _selected = value<\/span>;<\/span>
        \n        commitSelected(<\/span>)<\/span>;<\/span>
        \n    }<\/span>
        \n    protected<\/span> function<\/span> commitSelected(<\/span>)<\/span>:<\/span>void<\/span>
        \n    {<\/span>
        \n        \/\/ The icon source is determined based on the element state<\/span>
        \n        bellIcon.<\/span>source<\/span> = _selected ?<\/span> multiSourceSelected :<\/span> multiSource;<\/span>
        \n    }<\/span>
        \n}<\/span>
        \n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

        An example of using MultiDPIBitmapSource<\/span><\/code> for bitmaps embedded in the application at compile time. Skin class for a CheckBox component:<\/p>\n

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
        32
        33
        34
        35
        <\/div><\/td>
        <!--?xml version="1.0" encoding="utf-8"?--><\/span><\/span>
        \n<s:SparkSkin<\/span> xmlns:fx="http:\/\/ns.adobe.com\/mxml\/2009"<\/span> xmlns:s="library:\/\/ns.adobe.com\/flex\/spark"<\/span> xmlns:fb="http:\/\/ns.adobe.com\/flashbuilder\/2009"<\/span> alpha.disabledStates="0.5"<\/span>><\/span><\/span>
        \n
        \n    <fx:Metadata<\/span>><\/span><\/span>
        \n        \/** * @copy spark.skins.spark.ApplicationSkin#hostComponent *\/ [HostComponent("spark.components.CheckBox")]
        \n    <\/fx:Metadata<\/span>><\/span><\/span>
        \n   
        \n    <s:states<\/span>><\/span><\/span>
        \n        <s:State<\/span> name="up"<\/span> \/><\/span><\/span>
        \n        <s:State<\/span> name="over"<\/span> stateGroups="overStates"<\/span> \/><\/span><\/span>
        \n        <s:State<\/span> name="down"<\/span> stateGroups="downStates"<\/span> \/><\/span><\/span>
        \n        <s:State<\/span> name="disabled"<\/span> stateGroups="disabledStates"<\/span> \/><\/span><\/span>
        \n        <s:State<\/span> name="upAndSelected"<\/span> stateGroups="selectedStates"<\/span> \/><\/span><\/span>
        \n        <s:State<\/span> name="overAndSelected"<\/span> stateGroups="overStates, selectedStates"<\/span> \/><\/span><\/span>
        \n        <s:State<\/span> name="downAndSelected"<\/span> stateGroups="downStates, selectedStates"<\/span> \/><\/span><\/span>
        \n        <s:State<\/span> name="disabledAndSelected"<\/span> stateGroups="disabledStates, selectedStates"<\/span> \/><\/span><\/span>
        \n    <\/s:states<\/span>><\/span><\/span>
        \n
        \n    <s:BitmapImage<\/span> excludeFrom="selectedStates"<\/span>><\/span><\/span>
        \n        <s:source<\/span>><\/span><\/span>
        \n            <s:MultiDPIBitmapSource<\/span><\/span>
        \n                source160dpi="@Embed(source='assets\/images\/ui\/check_box@160.png')"<\/span><\/span>
        \n                source240dpi="@Embed(source='assets\/images\/ui\/check_box@240.png')"<\/span><\/span>
        \n                source320dpi="@Embed(source='assets\/images\/ui\/check_box@320.png')"<\/span>\/><\/span><\/span>
        \n        <\/s:source<\/span>><\/span><\/span>
        \n    <\/s:BitmapImage<\/span>><\/span><\/span>
        \n    <s:BitmapImage<\/span> includeIn="selectedStates"<\/span>><\/span><\/span>
        \n        <s:source<\/span>><\/span><\/span>
        \n            <s:MultiDPIBitmapSource<\/span><\/span>
        \n                source160dpi="@Embed(source='assets\/images\/ui\/check_box_checked@160.png')"<\/span><\/span>
        \n                source240dpi="@Embed(source='assets\/images\/ui\/check_box_checked@240.png')"<\/span><\/span>
        \n                source320dpi="@Embed(source='assets\/images\/ui\/check_box_checked@320.png')"<\/span>\/><\/span><\/span>
        \n        <\/s:source<\/span>><\/span><\/span>
        \n    <\/s:BitmapImage<\/span>><\/span><\/span>
        \n<\/s:SparkSkin<\/span>><\/span><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

        Use of Style Sheets Linked to DPI<\/h3>\n

        Flex also lets you customize style sheets depending on the runtime DPI<\/strong> and operating system type. If you need, for instance, to set font size for a particular DPI or operating system, you can explicitly specify it in the style sheet, using the @media<\/span><\/code> rule. This rule can have two properties: os-platform<\/span><\/code> specifying the type of the Operating System and application-dpi<\/span><\/code> allowing you to specify styles for the needed DPI.<\/p>\n

        The os-platform<\/span><\/code> property can have the following values:<\/p>\n

          \n
        • Android<\/span><\/code><\/li>\n
        • iOS<\/span><\/code><\/li>\n
        • Macintosh<\/span><\/code><\/li>\n
        • Linux<\/span><\/code><\/li>\n
        • QNX<\/span><\/code><\/li>\n
        • Windows<\/span><\/code><\/li>\n<\/ul>\n

          The syntax of @media<\/span><\/code> can be quite complex and list different features and their combinations separated by commas.<\/p>\n

          Here are several examples of @media<\/span><\/code> rules and its properties os-platform<\/span><\/code> and application-dpi<\/span><\/code>:<\/p>\n

          1
          2
          3
          4
          5
          6
          7
          8
          9
          10
          11
          12
          13
          14
          15
          16
          17
          18
          19
          20
          21
          22
          23
          24
          25
          26
          27
          28
          29
          30
          31
          32
          33
          34
          <\/div><\/td>
          \/* Any operating system and 160 DPI *\/<\/span>
          \n@media (<\/span>application-<\/span>dpi:<\/span> 160<\/span>)<\/span> {<\/span>
          \n    s|<\/span>Button {<\/span>
          \n        fontSize<\/span>:<\/span> 10<\/span>;<\/span>
          \n    }<\/span>
          \n}<\/span>
          \n
          \n\/* Only iOS and 240 DPI *\/<\/span>
          \n@media (<\/span>application-<\/span>dpi:<\/span> 240<\/span>)<\/span> and (<\/span>os-<\/span>platform:<\/span> "IOS"<\/span>)<\/span> {<\/span>
          \n    s|<\/span>Button {<\/span>
          \n        fontSize<\/span>:<\/span> 11<\/span>;<\/span>
          \n    }<\/span>
          \n}<\/span>
          \n
          \n\/* iOS at 160 DPI or Android at 160 DPI *\/<\/span>
          \n@media (<\/span>os-<\/span>platform:<\/span> "IOS"<\/span>)<\/span> and (<\/span>application-<\/span>dpi:<\/span> 160<\/span>)<\/span>,<\/span> (<\/span>os-<\/span>platform:<\/span> "ANDROID"<\/span>)<\/span> and (<\/span>application-<\/span>dpi:<\/span> 160<\/span>)<\/span> {<\/span>
          \n    s |<\/span> Button {<\/span>
          \n        fontSize<\/span>:<\/span> 13<\/span>;<\/span>
          \n    }<\/span>
          \n}<\/span>
          \n
          \n\/<\/span> *<\/span> Any OS except Android at 240<\/span> DPI *\/<\/span>
          \n@media not all and (<\/span>application-<\/span>dpi:<\/span> 240<\/span>)<\/span> and (<\/span>os-<\/span>platform:<\/span> "Android"<\/span>)<\/span> {<\/span>
          \n    s|<\/span>Button {<\/span>
          \n        fontSize<\/span>:<\/span> 12<\/span>;<\/span>
          \n    }<\/span>
          \n}<\/span>
          \n
          \n\/* Any OS except iOS at any DPI *\/<\/span>
          \n@media not all and (<\/span>os-<\/span>platform:<\/span> "IOS"<\/span>)<\/span> {<\/span>
          \n    s|<\/span>Button {<\/span>
          \n        fontSize<\/span>:<\/span> 14<\/span>;<\/span>
          \n    }<\/span>
          \n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

          Automatic Scaling<\/h3>\n

          To disable auto-scaling (or rather not to enable it), please do not specify Application DPI<\/strong> in property applicationDPI<\/span><\/code> in the main class.<\/p>\n

          When Automatic Scaling is disabled in Flex, you have to re-size interface and design elements yourself. For images, you can use customization of bitmap resources that we have already mentioned above. <\/p>\n

          Using style sheets for each DPI value, you can customize font size, icon types and other parameters depending on the device screen. If auto-scaling is disabled, applicationDPI<\/span><\/code> will be set to runtimeDPI<\/span><\/code>. Therefore, when using styles with auto-scaling disabled, Runtime DPI<\/strong> will be linked.<\/p>\n

          Flex has a fairly extensive toolkit to develop multi-platform and multi-screen applications, almost eliminating development routine. Auto-scaling offers great benefits and allows you to develop applications faster and be sure that they will look perfect on various devices.<\/p>\n","protected":false},"excerpt":{"rendered":"

          As AIR applications can run on multiple platforms and devices, AIR based developers have to take into account a vast diversity of screens, their resolutions and DPIs. Despite a broad diversity of supported platforms, in this post we will focus on multiscreen development for mobile AIR applications based on the Flex framework.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[455,451,355,20,407],"tags":[198,523,408,521,474,522,448,484],"_links":{"self":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts\/4016"}],"collection":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/comments?post=4016"}],"version-history":[{"count":18,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts\/4016\/revisions"}],"predecessor-version":[{"id":4838,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/posts\/4016\/revisions\/4838"}],"wp:attachment":[{"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/media?parent=4016"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/categories?post=4016"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.denivip.ru\/index.php\/wp-json\/wp\/v2\/tags?post=4016"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}