You are viewing a plain text version of this content. The canonical link for it is here.
Posted to users@flex.apache.org by OK <OK...@edscha.com> on 2016/03/10 13:45:54 UTC
Re: Flatspark - Issues with ButtonIcon component on a mobile device
> On my mobile application I am using the Flatspark ButtonIcon, the IconFont
> does not display, shows a cross.
>
> Code :
> <components:ButtonIcon iconFont="{AwesomeUtils.fa_info_circle} "
> height="{ButtonSizeEnum.Large}" label="Icon Button"/>
> Any suggestions?
Are you sure that you doesn't left accidentally some styles like "fontStyle"
or "fontWeight"?
Olaf
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Flatspark-Issues-with-ButtonIcon-component-on-a-mobile-device-tp12173p12175.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
AW: Flatspark - Issues with ButtonIcon component on a mobile device
Posted by Krüger,
Olaf <OK...@edscha.com>.
Hi,
> I think there may be subtle differences in the styles for Button between desktop and mobile themes, such has fontWeight="bold" or using TextField instead of TextLine so the embedded font lookup will fail.
I was sure that I've tried to apply fontWeight="normal" using a custom ButtonIconSkin without success yesterday.
Encouraged by your hint I tried it again and now it works :-)
This is the modified ButtonIconSkin that simply adds fontWeight="normal" to the iconFont Label
https://gist.github.com/ok-at-github/976409e8bec4e5d05461
I'll create a Jira ticket...
Olaf
________________________________
Edscha Holding GmbH
Sitz der Gesellschaft: Remscheid
Registergericht: Wuppertal, HRB 22889
Geschäftsführung: Francisco J. Riberas Mera, Francisco López Peña, David Vázquez Pascual, Torsten Greiner, Markus Kirchner, Hans-Peter Schulz und Volker Weiss
Vertretungsberechtigt sind nur Geschäftsführer und schriftlich Bevollmächtigte.
Solely Managing Directors or employees with a written proxy have got power of representation.
Der Inhalt dieser E-Mail einschließlich etwaiger beigefügter Dateien ist vertraulich und nur für den Empfänger bestimmt. Sollten Sie nicht der bestimmungsgemäße Empfänger sein, ist Ihnen jegliche Offenlegung, Vervielfältigung, Weitergabe oder Nutzung des Inhalts untersagt. Bitte informieren Sie in diesem Fall unverzüglich den Absender und löschen Sie die E-Mail einschließlich etwaiger beigefügter Dateien von Ihrem System. Vielen Dank.
The contents of this e-mail including any attachments are confidential and may be legally privileged. If you are not the intended recipient, any disclosure, copying, distribution or use of its contents is strictly prohibited, and you should please notify the sender immediately and then delete this e-mail including any attachments from your system. Thank you.
Re: Flatspark - Issues with ButtonIcon component on a mobile device
Posted by Alex Harui <ah...@adobe.com>.
I think there may be subtle differences in the styles for Button between
desktop and mobile themes, such has fontWeight="bold" or using TextField
instead of TextLine so the embedded font lookup will fail.
-Alex
On 3/10/16, 10:19 AM, "Sugan Naicker" <Su...@dev-x.co.za> wrote:
>Hi Olaf,
>
>Thanks for the feedback and the time and effort to reproduce the error.
>
>I am getting the same results. On Desktop works fine, but on mobile
>project
>it does not.
>
>Rgs,
>
>Sugan
>
>-----Original Message-----
>From: OK [mailto:OKrueger@edscha.com]
>Sent: Thursday, March 10, 2016 4:54 PM
>To: users@flex.apache.org
>Subject: Re: Flatspark - Issues with ButtonIcon component on a mobile
>device
>
>I'd only like to tell you that I can reproduce this issue:
>I've created a Flex Mobile project within the flatspark button icon
>inside.
>Instead of the icon a cross is displayed. (Using the AIR Simulator).
>I've played a bit with a custom ButtonIconSkin without any success :-( It
>seems that the iconFont is not applied...
>
>The Label standalone is working (The ButtonIconSkin uses a Label to
>display
>the icon):
><s:Label fontFamily="FontAwesome" text="{AwesomeUtils.fa_info_circle}" />
>
>With a desktop project it all works like a charme.
>
>?
>
>Olaf
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/Flatspark-Issues-with-Butto
>nI
>con-component-on-a-mobile-device-tp12173p12178.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.
>
>
RE: Flatspark - Issues with ButtonIcon component on a mobile device
Posted by Sugan Naicker <Su...@dev-x.co.za>.
Hi Olaf,
Perfect. Will go with your alternative, appreciate the assistance.
Thanks!
Rgs,
Sugan
-----Original Message-----
From: OK [mailto:OKrueger@edscha.com]
Sent: Friday, March 11, 2016 12:35 PM
To: users@flex.apache.org
Subject: RE: Flatspark - Issues with ButtonIcon component on a mobile device
Sugan Naicker wrote
> I applied the fontWeight=bold to the font-face and it worked!
Great!
Only if you overlook my previous post:
An alternative is to use a custom skin:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace components "flatspark.components.*";
components|ButtonIcon {
skinClass: ClassReference("ButtonIconSkinMobile");
}
</fx:Style>
Here you could find the fixed skin:
https://gist.github.com/ok-at-github/976409e8bec4e5d05461
Olaf
--
View this message in context:
http://apache-flex-users.2333346.n4.nabble.com/Flatspark-Issues-with-ButtonI
con-component-on-a-mobile-device-tp12173p12198.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
RE: Flatspark - Issues with ButtonIcon component on a mobile device
Posted by OK <OK...@edscha.com>.
Sugan Naicker wrote
> I applied the fontWeight=bold to the font-face and it worked!
Great!
Only if you overlook my previous post:
An alternative is to use a custom skin:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace components "flatspark.components.*";
components|ButtonIcon {
skinClass: ClassReference("ButtonIconSkinMobile");
}
</fx:Style>
Here you could find the fixed skin:
https://gist.github.com/ok-at-github/976409e8bec4e5d05461
Olaf
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Flatspark-Issues-with-ButtonIcon-component-on-a-mobile-device-tp12173p12198.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
RE: Flatspark - Issues with ButtonIcon component on a mobile device
Posted by Sugan Naicker <Su...@dev-x.co.za>.
Hi,
Solution found :
Came across an older post from Alex & Andy.
>> 1) In mobile apps, Labels use CFF fonts, but everything else doesn't.
>> 2) In many themes, Buttons use Bold fonts and Labels don't.
>> If you don't have the right font embedded (CFF vs non-CFF, bold vs
regular), you won't get the expected result.
I applied the fontWeight=bold to the font-face and it worked! I tried adding
to the fontWeight directly to the ButtonIcon directly and this did not work.
Code below worked.
@font-face {
fontFamily: FontAwesome;
embed-as-cff: true;
fontWeight: bold;
src:
url("/assets/fonts/FontAwesome.otf");
}
<components:ButtonIcon iconFont="{AwesomeUtils.fa_info_circle}"
height="{ButtonSizeEnum.Large}" label="Icon Button"/>
Thanks.
Sugan
-----Original Message-----
From: Sugan Naicker [mailto:Sugan@dev-x.co.za]
Sent: Thursday, March 10, 2016 8:20 PM
To: users@flex.apache.org
Subject: RE: Flatspark - Issues with ButtonIcon component on a mobile device
Hi Olaf,
Thanks for the feedback and the time and effort to reproduce the error.
I am getting the same results. On Desktop works fine, but on mobile project
it does not.
Rgs,
Sugan
-----Original Message-----
From: OK [mailto:OKrueger@edscha.com]
Sent: Thursday, March 10, 2016 4:54 PM
To: users@flex.apache.org
Subject: Re: Flatspark - Issues with ButtonIcon component on a mobile device
I'd only like to tell you that I can reproduce this issue:
I've created a Flex Mobile project within the flatspark button icon inside.
Instead of the icon a cross is displayed. (Using the AIR Simulator).
I've played a bit with a custom ButtonIconSkin without any success :-( It
seems that the iconFont is not applied...
The Label standalone is working (The ButtonIconSkin uses a Label to display
the icon):
<s:Label fontFamily="FontAwesome" text="{AwesomeUtils.fa_info_circle}" />
With a desktop project it all works like a charme.
?
Olaf
--
View this message in context:
http://apache-flex-users.2333346.n4.nabble.com/Flatspark-Issues-with-ButtonI
con-component-on-a-mobile-device-tp12173p12178.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
RE: Flatspark - Issues with ButtonIcon component on a mobile device
Posted by Sugan Naicker <Su...@dev-x.co.za>.
Hi Olaf,
Thanks for the feedback and the time and effort to reproduce the error.
I am getting the same results. On Desktop works fine, but on mobile project
it does not.
Rgs,
Sugan
-----Original Message-----
From: OK [mailto:OKrueger@edscha.com]
Sent: Thursday, March 10, 2016 4:54 PM
To: users@flex.apache.org
Subject: Re: Flatspark - Issues with ButtonIcon component on a mobile device
I'd only like to tell you that I can reproduce this issue:
I've created a Flex Mobile project within the flatspark button icon inside.
Instead of the icon a cross is displayed. (Using the AIR Simulator).
I've played a bit with a custom ButtonIconSkin without any success :-( It
seems that the iconFont is not applied...
The Label standalone is working (The ButtonIconSkin uses a Label to display
the icon):
<s:Label fontFamily="FontAwesome" text="{AwesomeUtils.fa_info_circle}" />
With a desktop project it all works like a charme.
?
Olaf
--
View this message in context:
http://apache-flex-users.2333346.n4.nabble.com/Flatspark-Issues-with-ButtonI
con-component-on-a-mobile-device-tp12173p12178.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.
Re: Flatspark - Issues with ButtonIcon component on a mobile device
Posted by OK <OK...@edscha.com>.
I'd only like to tell you that I can reproduce this issue:
I've created a Flex Mobile project within the flatspark button icon inside.
Instead of the icon a cross is displayed. (Using the AIR Simulator).
I've played a bit with a custom ButtonIconSkin without any success :-(
It seems that the iconFont is not applied...
The Label standalone is working (The ButtonIconSkin uses a Label to display
the icon):
<s:Label fontFamily="FontAwesome" text="{AwesomeUtils.fa_info_circle}" />
With a desktop project it all works like a charme.
?
Olaf
--
View this message in context: http://apache-flex-users.2333346.n4.nabble.com/Flatspark-Issues-with-ButtonIcon-component-on-a-mobile-device-tp12173p12178.html
Sent from the Apache Flex Users mailing list archive at Nabble.com.