Uploaded image for project: 'Apache Flex'
  1. Apache Flex
  2. FLEX-34115

Displaying Chinese in spark List does not work in Android 4.4.2

    Details

    • Type: Bug
    • Status: In Progress
    • Priority: Major
    • Resolution: Unresolved
    • Affects Version/s: Apache Flex 4.11.0
    • Fix Version/s: None
    • Component/s: Spark: List
    • Environment:
      Windows 7 64 bit, Flash Builder 4.6, HTC One Android 4.4.2/ Galaxy Note 3 Android 4.4.2

      Description

      I have come to this bug where localization does not work in Android 4.4.2. Oddly, this problem only occurs in the spark list component. The dataProvider is showing blank items.

      The following is my code:
      <s:List id="list" width="100%" height="100%" locale="zh_CN">
      <s:itemRenderer>
      <fx:Component>
      <renderers:RoundedListItemRenderer decorator="

      {data.icon}

      " labelField="label" styleName="roundedListStyle" alternatingItemColors="0xdcdcdc" color="0x444444" downColor="0xb0b0b0" width="100%" height="100%"/>
      </fx:Component>
      </s:itemRenderer>
      <s:ArrayCollection>
      <fx:Object type="current" label="

      {resourceManager.getString('resources','str1')}

      " icon="@Embed('images/ico_next_grey.png')"/>
      <fx:Object type="statement" label="

      {resourceManager.getString('resources','str2')}

      " icon="@Embed('images/ico_next_grey.png')"/>
      <fx:Object type="history" label="

      {resourceManager.getString('resources','str3')}

      " icon="@Embed('images/ico_next_grey.png')"/>
      <fx:Object type="deposit" label="

      {resourceManager.getString('resources','str4')}

      " icon="@Embed('images/ico_next_grey.png')"/>
      <fx:Object type="withdrawal" label="

      {resourceManager.getString('resources','str5')}

      " icon="@Embed('images/ico_next_grey.png')"/>
      </s:ArrayCollection>
      </s:List>

      [Edit]
      I have tried on button. The same thing happens when I removed the skinClass.
      Here is my button code:
      <s:Button id="logoutBtn" label="

      {resourceManager.getString('resources','accountview.button.signout')}

      "
      width="100%" height="60" skinClass="skins.LoginButtonSkin"/>

      1. LocaleTest.fxp
        18 kB
        victor yew
      2. LocaleTest.fxp
        19 kB
        victor yew

        Issue Links

          Activity

          Hide
          mamsellem Maurice Amsellem added a comment -

          Please attache a full project (include the properties files) so that we can test

          Show
          mamsellem Maurice Amsellem added a comment - Please attache a full project (include the properties files) so that we can test
          Hide
          victoryew99 victor yew added a comment -

          Please import this project file into Flash Builder 4.6.

          Show
          victoryew99 victor yew added a comment - Please import this project file into Flash Builder 4.6.
          Hide
          victoryew99 victor yew added a comment -

          Maurice Amsellem You can try this project I have attached. When you debug this project in the debugger, the chinese wordings do appear. But, when you run the app in the device running the latest Android which is 4.4.2, the chinese wordings gone missing. Or you can try running the app in a much lower OS, the wordings are there.

          Show
          victoryew99 victor yew added a comment - Maurice Amsellem You can try this project I have attached. When you debug this project in the debugger, the chinese wordings do appear. But, when you run the app in the device running the latest Android which is 4.4.2, the chinese wordings gone missing. Or you can try running the app in a much lower OS, the wordings are there.
          Hide
          mamsellem Maurice Amsellem added a comment -

          Ah, ok so that may be a different meaning.
          To me, "localization does not work in And" means the localization API has issues (eg resourceManager.getString('resources','str5')).
          In your project, it may as well be a problem of font.
          Can you try displaying chinese text directly (non localized, see below) and see if it displays on the device.

          <fx:Object type="current" label="你好世界" icon="@Embed('images/ico_next_grey.png')"/>

          Show
          mamsellem Maurice Amsellem added a comment - Ah, ok so that may be a different meaning. To me, "localization does not work in And" means the localization API has issues (eg resourceManager.getString('resources','str5')). In your project, it may as well be a problem of font. Can you try displaying chinese text directly (non localized, see below) and see if it displays on the device. <fx:Object type="current" label="你好世界" icon="@Embed('images/ico_next_grey.png')"/>
          Hide
          victoryew99 victor yew added a comment -

          Nope. It doesn't show as well. But, when you pay attention to the button in the project I have attached, the button actually showing the chinese character in the mobile device. BUT, it ONLY works when skinClass is applied to it. Alternatively, you can try debug the project and you will be able to see the chinese wordings that are traced. Thanks

          Show
          victoryew99 victor yew added a comment - Nope. It doesn't show as well. But, when you pay attention to the button in the project I have attached, the button actually showing the chinese character in the mobile device. BUT, it ONLY works when skinClass is applied to it. Alternatively, you can try debug the project and you will be able to see the chinese wordings that are traced. Thanks
          Hide
          mamsellem Maurice Amsellem added a comment -

          it seems to be a known issue ( see related ticket: https://issues.apache.org/jira/browse/FLEX-34037)

          Show
          mamsellem Maurice Amsellem added a comment - it seems to be a known issue ( see related ticket: https://issues.apache.org/jira/browse/FLEX-34037 )
          Hide
          mamsellem Maurice Amsellem added a comment -

          I have just tested you project on ALD and few devices:

          • Galaxy Tab 3 with Android 4.1.2 (Jelly Bean) => OK
          • iPad 3 retina with iOS 6 => OK

          Unfortunately, I cannot test with Android 4.4.2 (no device), so I will try some "blind" things.

          What version of AIR are you compiling with ( from the app descriptro, it seems to be AIR 3.9).
          Can you try recompiling with AIR 4.0?

          Show
          mamsellem Maurice Amsellem added a comment - I have just tested you project on ALD and few devices: Galaxy Tab 3 with Android 4.1.2 (Jelly Bean) => OK iPad 3 retina with iOS 6 => OK Unfortunately, I cannot test with Android 4.4.2 (no device), so I will try some "blind" things. What version of AIR are you compiling with ( from the app descriptro, it seems to be AIR 3.9). Can you try recompiling with AIR 4.0?
          Hide
          victoryew99 victor yew added a comment -

          how do i compile with AIR 4.0? is there a latest installer?

          Show
          victoryew99 victor yew added a comment - how do i compile with AIR 4.0? is there a latest installer?
          Hide
          victoryew99 victor yew added a comment -

          when I change the chinese character in the zh_CN bundle to english character, it will display.

          Show
          victoryew99 victor yew added a comment - when I change the chinese character in the zh_CN bundle to english character, it will display.
          Hide
          victoryew99 victor yew added a comment -

          Hi Maurice Amsellem any luck with the testing? I am still having trouble with this...

          Show
          victoryew99 victor yew added a comment - Hi Maurice Amsellem any luck with the testing? I am still having trouble with this...
          Hide
          aharui Alex Harui added a comment -

          Can you display the chinese characters in a native app on that device?

          I just saw this: http://www.pinyinjoe.com/faq/add-chinese-to-android-phone.htm

          Show
          aharui Alex Harui added a comment - Can you display the chinese characters in a native app on that device? I just saw this: http://www.pinyinjoe.com/faq/add-chinese-to-android-phone.htm
          Hide
          victoryew99 victor yew added a comment -

          yes i can. This problem only occurs in spark list component as mentioned above. Other components are working fine.

          Show
          victoryew99 victor yew added a comment - yes i can. This problem only occurs in spark list component as mentioned above. Other components are working fine.
          Hide
          mamsellem Maurice Amsellem added a comment -

          victor, as I said above, I tested on iOS and And 4.1 and it's working fine.
          The issue occurs on And 4.4, that I don't have.
          So I can't help on the testing.

          It "may" be an AIR issue.
          Try compiling with AIR 4.0.
          You can get with the Apache Installer:

          • get the installer from http://flex.apache.org/installer.html if you don't have it already
          • run the installer, select Flex SDK 4.11, AIR 4.0 and FP 12.0
          • recompile your app using this SDK
          Show
          mamsellem Maurice Amsellem added a comment - victor, as I said above, I tested on iOS and And 4.1 and it's working fine. The issue occurs on And 4.4, that I don't have. So I can't help on the testing. It "may" be an AIR issue. Try compiling with AIR 4.0. You can get with the Apache Installer: get the installer from http://flex.apache.org/installer.html if you don't have it already run the installer, select Flex SDK 4.11, AIR 4.0 and FP 12.0 recompile your app using this SDK
          Hide
          victoryew99 victor yew added a comment -

          I tried compiling with Air4.0, the problem still there.

          Show
          victoryew99 victor yew added a comment - I tried compiling with Air4.0, the problem still there.
          Hide
          mamsellem Maurice Amsellem added a comment -

          Ok, sorry no more ideas.

          Show
          mamsellem Maurice Amsellem added a comment - Ok, sorry no more ideas.
          Hide
          aharui Alex Harui added a comment -

          Can one of you build the "simple test"? Don't use Flex, create a TextField and a TextLine and see if they work on the device? My recollection from a previous thread was that TextLine was not able to handle it.

          Show
          aharui Alex Harui added a comment - Can one of you build the "simple test"? Don't use Flex, create a TextField and a TextLine and see if they work on the device? My recollection from a previous thread was that TextLine was not able to handle it.
          Hide
          victoryew99 victor yew added a comment -

          I am not sure this is a good idea. I embeded the chinese character font family in some of the components and it works well so far.

          Show
          victoryew99 victor yew added a comment - I am not sure this is a good idea. I embeded the chinese character font family in some of the components and it works well so far.
          Hide
          aharui Alex Harui added a comment -

          Embedding a full chinese font will make for a pretty big app.

          But your finding indicates that the issue may be about device font lookups. IIRC, the player asks the OS for whatever font family you have specified. If the font family doesn't exist, most OS's return some other font that approximates what you are looking for. I'm not quite sure how that works, but there seems to be information about whether serifs are needed, monospacing, etc.

          Anyway, it may be that the TextLine subsystem is asking differently than the TextField subsystem, and the TextLine is being given a font that doesn't have chinese characters in it. The article I pointed out indicates that some fonts do not have all of the chinese characters in them.

          So, there may be some other things to try, but having a simple test case that takes any Flex logic out is probably a good idea. First thing to prove is that TextLine doesn't work and TextField does, or vice versa. Then you can use the APIs for whatever one doesn't work to try to figure out why. One simple reason may be that you are asking for a font like Verdana or Arial. I think Android may only have "Droid" fonts. If you actually set fontFamily to a "Droid" font that you know has chinese characters in it, it might solve the problem.

          Show
          aharui Alex Harui added a comment - Embedding a full chinese font will make for a pretty big app. But your finding indicates that the issue may be about device font lookups. IIRC, the player asks the OS for whatever font family you have specified. If the font family doesn't exist, most OS's return some other font that approximates what you are looking for. I'm not quite sure how that works, but there seems to be information about whether serifs are needed, monospacing, etc. Anyway, it may be that the TextLine subsystem is asking differently than the TextField subsystem, and the TextLine is being given a font that doesn't have chinese characters in it. The article I pointed out indicates that some fonts do not have all of the chinese characters in them. So, there may be some other things to try, but having a simple test case that takes any Flex logic out is probably a good idea. First thing to prove is that TextLine doesn't work and TextField does, or vice versa. Then you can use the APIs for whatever one doesn't work to try to figure out why. One simple reason may be that you are asking for a font like Verdana or Arial. I think Android may only have "Droid" fonts. If you actually set fontFamily to a "Droid" font that you know has chinese characters in it, it might solve the problem.
          Hide
          victoryew99 victor yew added a comment -

          Can you fill me in with more information on TextLine? Or the article you have come across with?

          Show
          victoryew99 victor yew added a comment - Can you fill me in with more information on TextLine? Or the article you have come across with?
          Hide
          aharui Alex Harui added a comment -

          The article is the PinyinJoe post about 9 replies above this one.

          There are two text rendering subsystems in Flash/AIR: one uses flash.text.TextFIeld, the other uses flash.text.engine.TextLine. Some controls in Flex use TextField, others use TextLine. In a mobile app, most components use TextField, but Label uses TextLine.

          Show
          aharui Alex Harui added a comment - The article is the PinyinJoe post about 9 replies above this one. There are two text rendering subsystems in Flash/AIR: one uses flash.text.TextFIeld, the other uses flash.text.engine.TextLine. Some controls in Flex use TextField, others use TextLine. In a mobile app, most components use TextField, but Label uses TextLine.
          Hide
          victoryew99 victor yew added a comment -

          After much tinkering, I can confirm that this component StyleableTextField does not support chinese characters in the new Android OS.

          Show
          victoryew99 victor yew added a comment - After much tinkering, I can confirm that this component StyleableTextField does not support chinese characters in the new Android OS.
          Hide
          aharui Alex Harui added a comment -

          Thank you for investigating. Do you have a more recent test case you can provide that confirmed your conclusion?

          Show
          aharui Alex Harui added a comment - Thank you for investigating. Do you have a more recent test case you can provide that confirmed your conclusion?
          Hide
          victoryew99 victor yew added a comment -

          This project shows the use of two list components. One with the use of default LabelItemRenderer which is extending the StyleableTextField, the other one which is using a custom item renderer with a label. Please run the project in your device which is running the latest OS (4.4.x).

          Show
          victoryew99 victor yew added a comment - This project shows the use of two list components. One with the use of default LabelItemRenderer which is extending the StyleableTextField, the other one which is using a custom item renderer with a label. Please run the project in your device which is running the latest OS (4.4.x).
          Hide
          victoryew99 victor yew added a comment -

          hi Alex Harui , I have uploaded a project file which would probably explain the problem. Please take a look. Thanks.

          Show
          victoryew99 victor yew added a comment - hi Alex Harui , I have uploaded a project file which would probably explain the problem. Please take a look. Thanks.

            People

            • Assignee:
              Unassigned
              Reporter:
              victoryew99 victor yew
            • Votes:
              0 Vote for this issue
              Watchers:
              3 Start watching this issue

              Dates

              • Created:
                Updated:

                Time Tracking

                Estimated:
                Original Estimate - 1h
                1h
                Remaining:
                Remaining Estimate - 1h
                1h
                Logged:
                Time Spent - Not Specified
                Not Specified

                  Development