You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Sebastian Mohr <fl...@gmail.com> on 2013/04/10 11:45:41 UTC
Prompt bug with custom font in TextInput component?
Hi there,
Just a quick question in regards to the TextInput component. Do
you know how to change the font of the prompt in the TextInput
component? The code example below [1] does not show the prompt
with the correct font. I also tried to create a custom TextInputSkin
with a customised promptDisplay [2], but, this didn't work either.
This strange behaviour seems to be solid throughout the latest
Adobe Flex SDK 4.6 and and the latest Apache Flex SDK 4.9.1,
even though this bug seems to be known and fixed:
https://issues.apache.org/jira/browse/FLEX-27991
Any ideas from your side how to fix that?
-
Sebastian (PPMC)
Interaction Designer
Looking for a Login Example with Apache Flex? Please check out this code:
http://code.google.com/p/masuland/wiki/LoginExample
[1] Example Application
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@font-face {
src:url("/assets/fonts/MyriadWebPro-Bold.ttf");
fontFamily: myFontMyriadBold;
embedAsCFF: true;
}
global
{
fontSize: 16;
}
</fx:Style>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:Label
width="100%"
text="Text Prompt 12345"
/>
<s:TextInput
width="100%"
prompt="TextInput Prompt 12345"
/>
<s:Label
width="100%"
text="Text Prompt 12345"
fontFamily="Times New Roman"
/>
<s:TextInput
width="100%"
prompt="TextInput Prompt 12345"
fontFamily="Times New Roman"
/>
<s:Label
width="100%"
text="Text Prompt 12345"
fontFamily="myFontMyriadBold"
/>
<s:TextInput
width="100%"
prompt="TextInput Prompt 12345"
fontFamily="myFontMyriadBold"
/>
</s:WindowedApplication>
[2] Example TextInputSkin:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
blendMode="normal"
alpha.disabledStates="0.5"
>
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.spark.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.TextInput")]
]]>
</fx:Metadata>
<!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
<s:RichText
id="promptDisplay" includeIn="normalWithPrompt,disabledWithPrompt" color="#5e6a70"
fontFamily="myFontMyriadBold" fontSize="16" includeInLayout="false"
maxDisplayedLines="1" mouseChildren="false" mouseEnabled="false"
verticalAlign="middle"
/>
</s:SparkSkin>
Re: Prompt bug with custom font in TextInput component?
Posted by Sebastian Mohr <fl...@gmail.com>.
Thanks Jude,
And sorry for the delay. Your link solved it. The reason was: the font
hasn't had an italic font and therefore Flex took the italic font of Times
New Roman in the TextInput prompt. This solved it [1] ... so it's not a
bug. Thanks!
[1] *Prompt font bug solution:*
@font-face
{
src: url("/assets/fonts/MyriadWebPro.ttf");
fontFamily: myFontMyriad;
embedAsCFF: true;
fontStyle: normal;
}
@font-face
{
src: url("/assets/fonts/MyriadWebPro.ttf");
fontFamily: myFontMyriad;
embedAsCFF: true;
fontStyle: italic;
}
@font-face
{
src: url("/assets/fonts/MyriadWebPro-Bold.ttf");
fontFamily: myFontMyriad;
embedAsCFF: true;
fontWeight: bold;
fontStyle: normal;
}
@font-face
{
src: url("/assets/fonts/MyriadWebPro-Bold.ttf");
fontFamily: myFontMyriad;
embedAsCFF: true;
fontWeight: bold;
fontStyle: italic;
}
--
Sebastian (PPMC)
Interaction Designer
Looking for a Login Example with Apache Flex? Please check out this code:
http://code.google.com/p/masuland/wiki/LoginExample
On Fri, Apr 12, 2013 at 11:03 PM, jude <fl...@gmail.com> wrote:
> FYI it's not unusual for a font to be broken up into several different font
> files or that it supports a certain font face. Some don't have bold or
> italic. They may have a version 2 that is slightly bolder "strong".
>
> But in this case you have "fontStyle:bold". The fontStyle style only
> supports, "italic" or "normal'. For bold fonts use "fontWeight:bold". That
> could be causing it. More likely you still need to set the pseudo selectors
> for the prompt state.
>
> See this post for an example, http://goo.gl/0oJ1O.
>
>
> On Fri, Apr 12, 2013 at 11:26 AM, Alex Harui <ah...@adobe.com> wrote:
>
> > I still haven't tried your test case. Is it for mobile or
> desktop/browser?
> >
> > In the snippet below, you are using different font families for different
> > font-weights. That is not the recommended practice. And you are using
> > fontStyle instead of fontWeight which is not correct.
> >
> >
> > On 4/12/13 3:58 AM, "Sebastian Mohr" <fl...@gmail.com> wrote:
> >
> > > Hi Alex,
> > >
> > > I tried different combinations guided by this
> > > documentation [1]. This is a screenshot of the
> > > application [2]. None of font-face attributes show
> > > the MyriadWebPro font in the promptDisplay
> > > SkinPart Š whereas in the textDisplay SkinPart
> > > of the TextInput shows it correctly
> > >
> > >
> > > @font-face {
> > > src:url("/assets/fonts/MyriadWebPro-Bold.ttf");
> > > fontFamily: myFontMyriadBold;
> > > fontStyle: bold;
> > > embedAsCFF:true;
> > > advancedAntiAliasing:true;
> > > }
> > >
> > > @font-face {
> > > src:url("/assets/fonts/MyriadWebPro.ttf");
> > > fontFamily: myFontMyriadRegular;
> > > fontStyle: normal;
> > > embedAsCFF:true;
> > > advancedAntiAliasing:true;
> > > }
> > >
> > > Any ideas?
> > >
> > >
> > > [1]
> > >
> >
> http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f
> > > 5f.html
> > > [2]
> > >
> >
> https://dl.dropboxusercontent.com/u/352808/bug/Apache_Flex-TextInput_Prompt_Bu
> > > g.png
> > >
> > >
> > > -
> > > Sebastian (PPMC)
> > > Interaction Designer
> > >
> > > Looking for a Login Example with Apache Flex? Please check out this
> code:
> > > http://code.google.com/p/masuland/wiki/LoginExample
> > >
> > >
> > >
> > >
> > > On Apr 10, 2013, at 6:03 PM, Alex Harui <ah...@adobe.com> wrote:
> > >
> > >> I didn't run it, but it looks like you are using a bold font without
> > setting
> > >> fontWeight.
> > >>
> > >>
> > >> On 4/10/13 2:45 AM, "Sebastian Mohr" <fl...@gmail.com> wrote:
> > >>
> > >>> Hi there,
> > >>>
> > >>> Just a quick question in regards to the TextInput component. Do
> > >>> you know how to change the font of the prompt in the TextInput
> > >>> component? The code example below [1] does not show the prompt
> > >>> with the correct font. I also tried to create a custom TextInputSkin
> > >>> with a customised promptDisplay [2], but, this didn't work either.
> > >>>
> > >>> This strange behaviour seems to be solid throughout the latest
> > >>> Adobe Flex SDK 4.6 and and the latest Apache Flex SDK 4.9.1,
> > >>> even though this bug seems to be known and fixed:
> > >>>
> > >>> https://issues.apache.org/jira/browse/FLEX-27991
> > >>>
> > >>> Any ideas from your side how to fix that?
> > >>>
> > >>>
> > >>> -
> > >>> Sebastian (PPMC)
> > >>> Interaction Designer
> > >>>
> > >>> Looking for a Login Example with Apache Flex? Please check out this
> > code:
> > >>> http://code.google.com/p/masuland/wiki/LoginExample
> > >>>
> > >>>
> > >>>
> > >>> [1] Example Application
> > >>>
> > >>> <?xml version="1.0" encoding="utf-8"?>
> > >>> <s:WindowedApplication
> > >>> xmlns:fx="http://ns.adobe.com/mxml/2009"
> > >>> xmlns:s="library://ns.adobe.com/flex/spark"
> > >>> xmlns:mx="library://ns.adobe.com/flex/mx"
> > >>>>
> > >>>
> > >>> <fx:Style>
> > >>> @namespace s "library://ns.adobe.com/flex/spark";
> > >>> @namespace mx "library://ns.adobe.com/flex/mx";
> > >>>
> > >>> @font-face {
> > >>> src:url("/assets/fonts/MyriadWebPro-Bold.ttf");
> > >>> fontFamily: myFontMyriadBold;
> > >>> embedAsCFF: true;
> > >>> }
> > >>>
> > >>> global
> > >>> {
> > >>> fontSize: 16;
> > >>> }
> > >>> </fx:Style>
> > >>>
> > >>> <s:layout>
> > >>> <s:VerticalLayout />
> > >>> </s:layout>
> > >>>
> > >>> <s:Label
> > >>> width="100%"
> > >>> text="Text Prompt 12345"
> > >>> />
> > >>>
> > >>> <s:TextInput
> > >>> width="100%"
> > >>> prompt="TextInput Prompt 12345"
> > >>> />
> > >>>
> > >>> <s:Label
> > >>> width="100%"
> > >>> text="Text Prompt 12345"
> > >>> fontFamily="Times New Roman"
> > >>> />
> > >>>
> > >>> <s:TextInput
> > >>> width="100%"
> > >>> prompt="TextInput Prompt 12345"
> > >>> fontFamily="Times New Roman"
> > >>> />
> > >>>
> > >>> <s:Label
> > >>> width="100%"
> > >>> text="Text Prompt 12345"
> > >>> fontFamily="myFontMyriadBold"
> > >>> />
> > >>>
> > >>> <s:TextInput
> > >>> width="100%"
> > >>> prompt="TextInput Prompt 12345"
> > >>> fontFamily="myFontMyriadBold"
> > >>> />
> > >>>
> > >>> </s:WindowedApplication>
> > >>>
> > >>>
> > >>>
> > >>>
> > >>> [2] Example TextInputSkin:
> > >>>
> > >>> <?xml version="1.0" encoding="utf-8"?>
> > >>> <s:SparkSkin
> > >>> xmlns:fx="http://ns.adobe.com/mxml/2009"
> > >>> xmlns:s="library://ns.adobe.com/flex/spark"
> > >>> xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
> > >>> blendMode="normal"
> > >>> alpha.disabledStates="0.5"
> > >>>>
> > >>>
> > >>> <fx:Metadata>
> > >>> <![CDATA[
> > >>> /**
> > >>> * @copy spark.skins.spark.ApplicationSkin#hostComponent
> > >>> */
> > >>> [HostComponent("spark.components.TextInput")]
> > >>> ]]>
> > >>> </fx:Metadata>
> > >>>
> > >>> <!--- Defines the Label that is used for prompt text. The
> > includeInLayout
> > >>> property is false so the prompt text does not affect measurement. -->
> > >>> <s:RichText
> > >>> id="promptDisplay" includeIn="normalWithPrompt,disabledWithPrompt"
> > >>> color="#5e6a70"
> > >>> fontFamily="myFontMyriadBold" fontSize="16" includeInLayout="false"
> > >>> maxDisplayedLines="1" mouseChildren="false" mouseEnabled="false"
> > >>> verticalAlign="middle"
> > >>> />
> > >>>
> > >>> </s:SparkSkin>
> > >>>
> > >>>
> > >>>
> > >>
> > >> --
> > >> Alex Harui
> > >> Flex SDK Team
> > >> Adobe Systems, Inc.
> > >> http://blogs.adobe.com/aharui
> > >>
> > >
> >
> > --
> > Alex Harui
> > Flex SDK Team
> > Adobe Systems, Inc.
> > http://blogs.adobe.com/aharui
> >
> >
>
Re: Prompt bug with custom font in TextInput component?
Posted by jude <fl...@gmail.com>.
FYI it's not unusual for a font to be broken up into several different font
files or that it supports a certain font face. Some don't have bold or
italic. They may have a version 2 that is slightly bolder "strong".
But in this case you have "fontStyle:bold". The fontStyle style only
supports, "italic" or "normal'. For bold fonts use "fontWeight:bold". That
could be causing it. More likely you still need to set the pseudo selectors
for the prompt state.
See this post for an example, http://goo.gl/0oJ1O.
On Fri, Apr 12, 2013 at 11:26 AM, Alex Harui <ah...@adobe.com> wrote:
> I still haven't tried your test case. Is it for mobile or desktop/browser?
>
> In the snippet below, you are using different font families for different
> font-weights. That is not the recommended practice. And you are using
> fontStyle instead of fontWeight which is not correct.
>
>
> On 4/12/13 3:58 AM, "Sebastian Mohr" <fl...@gmail.com> wrote:
>
> > Hi Alex,
> >
> > I tried different combinations guided by this
> > documentation [1]. This is a screenshot of the
> > application [2]. None of font-face attributes show
> > the MyriadWebPro font in the promptDisplay
> > SkinPart Š whereas in the textDisplay SkinPart
> > of the TextInput shows it correctly
> >
> >
> > @font-face {
> > src:url("/assets/fonts/MyriadWebPro-Bold.ttf");
> > fontFamily: myFontMyriadBold;
> > fontStyle: bold;
> > embedAsCFF:true;
> > advancedAntiAliasing:true;
> > }
> >
> > @font-face {
> > src:url("/assets/fonts/MyriadWebPro.ttf");
> > fontFamily: myFontMyriadRegular;
> > fontStyle: normal;
> > embedAsCFF:true;
> > advancedAntiAliasing:true;
> > }
> >
> > Any ideas?
> >
> >
> > [1]
> >
> http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f
> > 5f.html
> > [2]
> >
> https://dl.dropboxusercontent.com/u/352808/bug/Apache_Flex-TextInput_Prompt_Bu
> > g.png
> >
> >
> > -
> > Sebastian (PPMC)
> > Interaction Designer
> >
> > Looking for a Login Example with Apache Flex? Please check out this code:
> > http://code.google.com/p/masuland/wiki/LoginExample
> >
> >
> >
> >
> > On Apr 10, 2013, at 6:03 PM, Alex Harui <ah...@adobe.com> wrote:
> >
> >> I didn't run it, but it looks like you are using a bold font without
> setting
> >> fontWeight.
> >>
> >>
> >> On 4/10/13 2:45 AM, "Sebastian Mohr" <fl...@gmail.com> wrote:
> >>
> >>> Hi there,
> >>>
> >>> Just a quick question in regards to the TextInput component. Do
> >>> you know how to change the font of the prompt in the TextInput
> >>> component? The code example below [1] does not show the prompt
> >>> with the correct font. I also tried to create a custom TextInputSkin
> >>> with a customised promptDisplay [2], but, this didn't work either.
> >>>
> >>> This strange behaviour seems to be solid throughout the latest
> >>> Adobe Flex SDK 4.6 and and the latest Apache Flex SDK 4.9.1,
> >>> even though this bug seems to be known and fixed:
> >>>
> >>> https://issues.apache.org/jira/browse/FLEX-27991
> >>>
> >>> Any ideas from your side how to fix that?
> >>>
> >>>
> >>> -
> >>> Sebastian (PPMC)
> >>> Interaction Designer
> >>>
> >>> Looking for a Login Example with Apache Flex? Please check out this
> code:
> >>> http://code.google.com/p/masuland/wiki/LoginExample
> >>>
> >>>
> >>>
> >>> [1] Example Application
> >>>
> >>> <?xml version="1.0" encoding="utf-8"?>
> >>> <s:WindowedApplication
> >>> xmlns:fx="http://ns.adobe.com/mxml/2009"
> >>> xmlns:s="library://ns.adobe.com/flex/spark"
> >>> xmlns:mx="library://ns.adobe.com/flex/mx"
> >>>>
> >>>
> >>> <fx:Style>
> >>> @namespace s "library://ns.adobe.com/flex/spark";
> >>> @namespace mx "library://ns.adobe.com/flex/mx";
> >>>
> >>> @font-face {
> >>> src:url("/assets/fonts/MyriadWebPro-Bold.ttf");
> >>> fontFamily: myFontMyriadBold;
> >>> embedAsCFF: true;
> >>> }
> >>>
> >>> global
> >>> {
> >>> fontSize: 16;
> >>> }
> >>> </fx:Style>
> >>>
> >>> <s:layout>
> >>> <s:VerticalLayout />
> >>> </s:layout>
> >>>
> >>> <s:Label
> >>> width="100%"
> >>> text="Text Prompt 12345"
> >>> />
> >>>
> >>> <s:TextInput
> >>> width="100%"
> >>> prompt="TextInput Prompt 12345"
> >>> />
> >>>
> >>> <s:Label
> >>> width="100%"
> >>> text="Text Prompt 12345"
> >>> fontFamily="Times New Roman"
> >>> />
> >>>
> >>> <s:TextInput
> >>> width="100%"
> >>> prompt="TextInput Prompt 12345"
> >>> fontFamily="Times New Roman"
> >>> />
> >>>
> >>> <s:Label
> >>> width="100%"
> >>> text="Text Prompt 12345"
> >>> fontFamily="myFontMyriadBold"
> >>> />
> >>>
> >>> <s:TextInput
> >>> width="100%"
> >>> prompt="TextInput Prompt 12345"
> >>> fontFamily="myFontMyriadBold"
> >>> />
> >>>
> >>> </s:WindowedApplication>
> >>>
> >>>
> >>>
> >>>
> >>> [2] Example TextInputSkin:
> >>>
> >>> <?xml version="1.0" encoding="utf-8"?>
> >>> <s:SparkSkin
> >>> xmlns:fx="http://ns.adobe.com/mxml/2009"
> >>> xmlns:s="library://ns.adobe.com/flex/spark"
> >>> xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
> >>> blendMode="normal"
> >>> alpha.disabledStates="0.5"
> >>>>
> >>>
> >>> <fx:Metadata>
> >>> <![CDATA[
> >>> /**
> >>> * @copy spark.skins.spark.ApplicationSkin#hostComponent
> >>> */
> >>> [HostComponent("spark.components.TextInput")]
> >>> ]]>
> >>> </fx:Metadata>
> >>>
> >>> <!--- Defines the Label that is used for prompt text. The
> includeInLayout
> >>> property is false so the prompt text does not affect measurement. -->
> >>> <s:RichText
> >>> id="promptDisplay" includeIn="normalWithPrompt,disabledWithPrompt"
> >>> color="#5e6a70"
> >>> fontFamily="myFontMyriadBold" fontSize="16" includeInLayout="false"
> >>> maxDisplayedLines="1" mouseChildren="false" mouseEnabled="false"
> >>> verticalAlign="middle"
> >>> />
> >>>
> >>> </s:SparkSkin>
> >>>
> >>>
> >>>
> >>
> >> --
> >> Alex Harui
> >> Flex SDK Team
> >> Adobe Systems, Inc.
> >> http://blogs.adobe.com/aharui
> >>
> >
>
> --
> Alex Harui
> Flex SDK Team
> Adobe Systems, Inc.
> http://blogs.adobe.com/aharui
>
>
Re: Prompt bug with custom font in TextInput component?
Posted by Alex Harui <ah...@adobe.com>.
I still haven't tried your test case. Is it for mobile or desktop/browser?
In the snippet below, you are using different font families for different
font-weights. That is not the recommended practice. And you are using
fontStyle instead of fontWeight which is not correct.
On 4/12/13 3:58 AM, "Sebastian Mohr" <fl...@gmail.com> wrote:
> Hi Alex,
>
> I tried different combinations guided by this
> documentation [1]. This is a screenshot of the
> application [2]. None of font-face attributes show
> the MyriadWebPro font in the promptDisplay
> SkinPart Š whereas in the textDisplay SkinPart
> of the TextInput shows it correctly
>
>
> @font-face {
> src:url("/assets/fonts/MyriadWebPro-Bold.ttf");
> fontFamily: myFontMyriadBold;
> fontStyle: bold;
> embedAsCFF:true;
> advancedAntiAliasing:true;
> }
>
> @font-face {
> src:url("/assets/fonts/MyriadWebPro.ttf");
> fontFamily: myFontMyriadRegular;
> fontStyle: normal;
> embedAsCFF:true;
> advancedAntiAliasing:true;
> }
>
> Any ideas?
>
>
> [1]
> http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f
> 5f.html
> [2]
> https://dl.dropboxusercontent.com/u/352808/bug/Apache_Flex-TextInput_Prompt_Bu
> g.png
>
>
> -
> Sebastian (PPMC)
> Interaction Designer
>
> Looking for a Login Example with Apache Flex? Please check out this code:
> http://code.google.com/p/masuland/wiki/LoginExample
>
>
>
>
> On Apr 10, 2013, at 6:03 PM, Alex Harui <ah...@adobe.com> wrote:
>
>> I didn't run it, but it looks like you are using a bold font without setting
>> fontWeight.
>>
>>
>> On 4/10/13 2:45 AM, "Sebastian Mohr" <fl...@gmail.com> wrote:
>>
>>> Hi there,
>>>
>>> Just a quick question in regards to the TextInput component. Do
>>> you know how to change the font of the prompt in the TextInput
>>> component? The code example below [1] does not show the prompt
>>> with the correct font. I also tried to create a custom TextInputSkin
>>> with a customised promptDisplay [2], but, this didn't work either.
>>>
>>> This strange behaviour seems to be solid throughout the latest
>>> Adobe Flex SDK 4.6 and and the latest Apache Flex SDK 4.9.1,
>>> even though this bug seems to be known and fixed:
>>>
>>> https://issues.apache.org/jira/browse/FLEX-27991
>>>
>>> Any ideas from your side how to fix that?
>>>
>>>
>>> -
>>> Sebastian (PPMC)
>>> Interaction Designer
>>>
>>> Looking for a Login Example with Apache Flex? Please check out this code:
>>> http://code.google.com/p/masuland/wiki/LoginExample
>>>
>>>
>>>
>>> [1] Example Application
>>>
>>> <?xml version="1.0" encoding="utf-8"?>
>>> <s:WindowedApplication
>>> xmlns:fx="http://ns.adobe.com/mxml/2009"
>>> xmlns:s="library://ns.adobe.com/flex/spark"
>>> xmlns:mx="library://ns.adobe.com/flex/mx"
>>>>
>>>
>>> <fx:Style>
>>> @namespace s "library://ns.adobe.com/flex/spark";
>>> @namespace mx "library://ns.adobe.com/flex/mx";
>>>
>>> @font-face {
>>> src:url("/assets/fonts/MyriadWebPro-Bold.ttf");
>>> fontFamily: myFontMyriadBold;
>>> embedAsCFF: true;
>>> }
>>>
>>> global
>>> {
>>> fontSize: 16;
>>> }
>>> </fx:Style>
>>>
>>> <s:layout>
>>> <s:VerticalLayout />
>>> </s:layout>
>>>
>>> <s:Label
>>> width="100%"
>>> text="Text Prompt 12345"
>>> />
>>>
>>> <s:TextInput
>>> width="100%"
>>> prompt="TextInput Prompt 12345"
>>> />
>>>
>>> <s:Label
>>> width="100%"
>>> text="Text Prompt 12345"
>>> fontFamily="Times New Roman"
>>> />
>>>
>>> <s:TextInput
>>> width="100%"
>>> prompt="TextInput Prompt 12345"
>>> fontFamily="Times New Roman"
>>> />
>>>
>>> <s:Label
>>> width="100%"
>>> text="Text Prompt 12345"
>>> fontFamily="myFontMyriadBold"
>>> />
>>>
>>> <s:TextInput
>>> width="100%"
>>> prompt="TextInput Prompt 12345"
>>> fontFamily="myFontMyriadBold"
>>> />
>>>
>>> </s:WindowedApplication>
>>>
>>>
>>>
>>>
>>> [2] Example TextInputSkin:
>>>
>>> <?xml version="1.0" encoding="utf-8"?>
>>> <s:SparkSkin
>>> xmlns:fx="http://ns.adobe.com/mxml/2009"
>>> xmlns:s="library://ns.adobe.com/flex/spark"
>>> xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
>>> blendMode="normal"
>>> alpha.disabledStates="0.5"
>>>>
>>>
>>> <fx:Metadata>
>>> <![CDATA[
>>> /**
>>> * @copy spark.skins.spark.ApplicationSkin#hostComponent
>>> */
>>> [HostComponent("spark.components.TextInput")]
>>> ]]>
>>> </fx:Metadata>
>>>
>>> <!--- Defines the Label that is used for prompt text. The includeInLayout
>>> property is false so the prompt text does not affect measurement. -->
>>> <s:RichText
>>> id="promptDisplay" includeIn="normalWithPrompt,disabledWithPrompt"
>>> color="#5e6a70"
>>> fontFamily="myFontMyriadBold" fontSize="16" includeInLayout="false"
>>> maxDisplayedLines="1" mouseChildren="false" mouseEnabled="false"
>>> verticalAlign="middle"
>>> />
>>>
>>> </s:SparkSkin>
>>>
>>>
>>>
>>
>> --
>> Alex Harui
>> Flex SDK Team
>> Adobe Systems, Inc.
>> http://blogs.adobe.com/aharui
>>
>
--
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui
Re: Prompt bug with custom font in TextInput component?
Posted by Sebastian Mohr <fl...@gmail.com>.
Hi Alex,
I tried different combinations guided by this
documentation [1]. This is a screenshot of the
application [2]. None of font-face attributes show
the MyriadWebPro font in the promptDisplay
SkinPart … whereas in the textDisplay SkinPart
of the TextInput shows it correctly
@font-face {
src:url("/assets/fonts/MyriadWebPro-Bold.ttf");
fontFamily: myFontMyriadBold;
fontStyle: bold;
embedAsCFF:true;
advancedAntiAliasing:true;
}
@font-face {
src:url("/assets/fonts/MyriadWebPro.ttf");
fontFamily: myFontMyriadRegular;
fontStyle: normal;
embedAsCFF:true;
advancedAntiAliasing:true;
}
Any ideas?
[1] http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f5f.html
[2] https://dl.dropboxusercontent.com/u/352808/bug/Apache_Flex-TextInput_Prompt_Bug.png
-
Sebastian (PPMC)
Interaction Designer
Looking for a Login Example with Apache Flex? Please check out this code:
http://code.google.com/p/masuland/wiki/LoginExample
On Apr 10, 2013, at 6:03 PM, Alex Harui <ah...@adobe.com> wrote:
> I didn't run it, but it looks like you are using a bold font without setting
> fontWeight.
>
>
> On 4/10/13 2:45 AM, "Sebastian Mohr" <fl...@gmail.com> wrote:
>
>> Hi there,
>>
>> Just a quick question in regards to the TextInput component. Do
>> you know how to change the font of the prompt in the TextInput
>> component? The code example below [1] does not show the prompt
>> with the correct font. I also tried to create a custom TextInputSkin
>> with a customised promptDisplay [2], but, this didn't work either.
>>
>> This strange behaviour seems to be solid throughout the latest
>> Adobe Flex SDK 4.6 and and the latest Apache Flex SDK 4.9.1,
>> even though this bug seems to be known and fixed:
>>
>> https://issues.apache.org/jira/browse/FLEX-27991
>>
>> Any ideas from your side how to fix that?
>>
>>
>> -
>> Sebastian (PPMC)
>> Interaction Designer
>>
>> Looking for a Login Example with Apache Flex? Please check out this code:
>> http://code.google.com/p/masuland/wiki/LoginExample
>>
>>
>>
>> [1] Example Application
>>
>> <?xml version="1.0" encoding="utf-8"?>
>> <s:WindowedApplication
>> xmlns:fx="http://ns.adobe.com/mxml/2009"
>> xmlns:s="library://ns.adobe.com/flex/spark"
>> xmlns:mx="library://ns.adobe.com/flex/mx"
>>>
>>
>> <fx:Style>
>> @namespace s "library://ns.adobe.com/flex/spark";
>> @namespace mx "library://ns.adobe.com/flex/mx";
>>
>> @font-face {
>> src:url("/assets/fonts/MyriadWebPro-Bold.ttf");
>> fontFamily: myFontMyriadBold;
>> embedAsCFF: true;
>> }
>>
>> global
>> {
>> fontSize: 16;
>> }
>> </fx:Style>
>>
>> <s:layout>
>> <s:VerticalLayout />
>> </s:layout>
>>
>> <s:Label
>> width="100%"
>> text="Text Prompt 12345"
>> />
>>
>> <s:TextInput
>> width="100%"
>> prompt="TextInput Prompt 12345"
>> />
>>
>> <s:Label
>> width="100%"
>> text="Text Prompt 12345"
>> fontFamily="Times New Roman"
>> />
>>
>> <s:TextInput
>> width="100%"
>> prompt="TextInput Prompt 12345"
>> fontFamily="Times New Roman"
>> />
>>
>> <s:Label
>> width="100%"
>> text="Text Prompt 12345"
>> fontFamily="myFontMyriadBold"
>> />
>>
>> <s:TextInput
>> width="100%"
>> prompt="TextInput Prompt 12345"
>> fontFamily="myFontMyriadBold"
>> />
>>
>> </s:WindowedApplication>
>>
>>
>>
>>
>> [2] Example TextInputSkin:
>>
>> <?xml version="1.0" encoding="utf-8"?>
>> <s:SparkSkin
>> xmlns:fx="http://ns.adobe.com/mxml/2009"
>> xmlns:s="library://ns.adobe.com/flex/spark"
>> xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
>> blendMode="normal"
>> alpha.disabledStates="0.5"
>>>
>>
>> <fx:Metadata>
>> <![CDATA[
>> /**
>> * @copy spark.skins.spark.ApplicationSkin#hostComponent
>> */
>> [HostComponent("spark.components.TextInput")]
>> ]]>
>> </fx:Metadata>
>>
>> <!--- Defines the Label that is used for prompt text. The includeInLayout
>> property is false so the prompt text does not affect measurement. -->
>> <s:RichText
>> id="promptDisplay" includeIn="normalWithPrompt,disabledWithPrompt"
>> color="#5e6a70"
>> fontFamily="myFontMyriadBold" fontSize="16" includeInLayout="false"
>> maxDisplayedLines="1" mouseChildren="false" mouseEnabled="false"
>> verticalAlign="middle"
>> />
>>
>> </s:SparkSkin>
>>
>>
>>
>
> --
> Alex Harui
> Flex SDK Team
> Adobe Systems, Inc.
> http://blogs.adobe.com/aharui
>
Re: Prompt bug with custom font in TextInput component?
Posted by Alex Harui <ah...@adobe.com>.
I didn't run it, but it looks like you are using a bold font without setting
fontWeight.
On 4/10/13 2:45 AM, "Sebastian Mohr" <fl...@gmail.com> wrote:
> Hi there,
>
> Just a quick question in regards to the TextInput component. Do
> you know how to change the font of the prompt in the TextInput
> component? The code example below [1] does not show the prompt
> with the correct font. I also tried to create a custom TextInputSkin
> with a customised promptDisplay [2], but, this didn't work either.
>
> This strange behaviour seems to be solid throughout the latest
> Adobe Flex SDK 4.6 and and the latest Apache Flex SDK 4.9.1,
> even though this bug seems to be known and fixed:
>
> https://issues.apache.org/jira/browse/FLEX-27991
>
> Any ideas from your side how to fix that?
>
>
> -
> Sebastian (PPMC)
> Interaction Designer
>
> Looking for a Login Example with Apache Flex? Please check out this code:
> http://code.google.com/p/masuland/wiki/LoginExample
>
>
>
> [1] Example Application
>
> <?xml version="1.0" encoding="utf-8"?>
> <s:WindowedApplication
> xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:s="library://ns.adobe.com/flex/spark"
> xmlns:mx="library://ns.adobe.com/flex/mx"
>>
>
> <fx:Style>
> @namespace s "library://ns.adobe.com/flex/spark";
> @namespace mx "library://ns.adobe.com/flex/mx";
>
> @font-face {
> src:url("/assets/fonts/MyriadWebPro-Bold.ttf");
> fontFamily: myFontMyriadBold;
> embedAsCFF: true;
> }
>
> global
> {
> fontSize: 16;
> }
> </fx:Style>
>
> <s:layout>
> <s:VerticalLayout />
> </s:layout>
>
> <s:Label
> width="100%"
> text="Text Prompt 12345"
> />
>
> <s:TextInput
> width="100%"
> prompt="TextInput Prompt 12345"
> />
>
> <s:Label
> width="100%"
> text="Text Prompt 12345"
> fontFamily="Times New Roman"
> />
>
> <s:TextInput
> width="100%"
> prompt="TextInput Prompt 12345"
> fontFamily="Times New Roman"
> />
>
> <s:Label
> width="100%"
> text="Text Prompt 12345"
> fontFamily="myFontMyriadBold"
> />
>
> <s:TextInput
> width="100%"
> prompt="TextInput Prompt 12345"
> fontFamily="myFontMyriadBold"
> />
>
> </s:WindowedApplication>
>
>
>
>
> [2] Example TextInputSkin:
>
> <?xml version="1.0" encoding="utf-8"?>
> <s:SparkSkin
> xmlns:fx="http://ns.adobe.com/mxml/2009"
> xmlns:s="library://ns.adobe.com/flex/spark"
> xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
> blendMode="normal"
> alpha.disabledStates="0.5"
>>
>
> <fx:Metadata>
> <![CDATA[
> /**
> * @copy spark.skins.spark.ApplicationSkin#hostComponent
> */
> [HostComponent("spark.components.TextInput")]
> ]]>
> </fx:Metadata>
>
> <!--- Defines the Label that is used for prompt text. The includeInLayout
> property is false so the prompt text does not affect measurement. -->
> <s:RichText
> id="promptDisplay" includeIn="normalWithPrompt,disabledWithPrompt"
> color="#5e6a70"
> fontFamily="myFontMyriadBold" fontSize="16" includeInLayout="false"
> maxDisplayedLines="1" mouseChildren="false" mouseEnabled="false"
> verticalAlign="middle"
> />
>
> </s:SparkSkin>
>
>
>
--
Alex Harui
Flex SDK Team
Adobe Systems, Inc.
http://blogs.adobe.com/aharui