Spark Button Label with mixed font styles

I have a spark button, with a custom skin.
I would like to use italicised text mixed with normal text for the label.
Is there any way to do that?
A crucial aspect of my problem is that I am extending the Button component because I want to keep its accessibility features. I'm finding it very hard to find any info on how I might consider customising the button text.
I have got as far as setting the text component in my button skin to be a RichText component. But how could I assign rich text to it within the button?

Thanks for your reply, I'll check that out and see if I can get
it working.

Similar Messages

[Solved] Keep the last button pressed with a custom style

Hello,
I have a VBox with 20 buttons and I have this style applied (menu.css) (only for VBox wrapper):
.button:focused {
    -fx-background-color: #0768A9;
    -fx-text-fill: #FFFFFF;
But when I pressed other button outside the VBox the style disappears, because the other button get the focus.
I'm afraid I'm taking the wrong way.
How I can do to keep the last button pressed with a custom style? (Only for buttons containing the VBox).
Best regards

I created a simple method to change background colors in buttons:
    private void setSelectedBtnStyle(Button bboat) {
// Change style oldSelectedBoat
    selectedBoat.setStyle("-fx-background-color: white;-fx-text-fill: black;");
    // oldSelectedBoat var change to newSelectedBoat
    this.selectedBoat = bboat;
// Change style newSelectedBoat
    selectedBoat.setStyle("-fx-background-color: #0768A9;-fx-text-fill: #FFFFFF;");;
Surely not the best solution, but it works for me.
Best regards.

Issue with Smartform Font Style/Size

Hi All,
I have created some paragraph formats with font style "Times" & size such as 8,9,12 pt.
Used the same in some smartforms, which is working fine in my testing server. When I transported the same to my quality server the output of Smartforms are displayed in font style " Courier " .
I checked all the objects in Quality server, it's as t is in Testing server.
Times font is also available in Quality server/
Could anyone of you can suggest anu solution for it ?
Thanks,
SA

hey smita,
you have to transport that particular smartstyle in which you have creted paragraph formats and char formats.. so transport the styles too to quality.
hope this will help you out..
ramu

Creating a Textlayout with multiple font styles

I am trying to build a textlayout with different fonts. I know how to build a textlayout with 1 font, but after that i can't find a way to add styled text to it.
Please help

Use html-text.
e.g.
JLabel label = new JLabel();
String html = "<html><font size=+1 face=\"sans-serif\"> xxxxxx </font></html>";
label.setText(html);

Rotating text label with complex fonts (arabic)

i got the next problem:
rotating dynamically created TextField with any angle (using
embedded fonts of course). if i use standard fonts, latin sybmols -
everything works excellent. but if i use arabic fonts - text labels
behave very strange - complex arabic symbols are not shown.
for example, 2 symbols "lj" give 1 complex arabian symbol to
show. but when using in rotating mode with embedded fonts those
"lj" are just shown separately, not as one.
did anyone have such experience? how this could be solved?
maybe the same behavior with japan?
thanks in advance
p.s. i used different modes and arabic fonts. everything
works fine in usual way until the text label starts being
rotated...

shimontornia,
> I'm trying to rotate a dynamic text field that is using
> system font.
> Any ideas ?
The only idea possible is to omit one of those
characteristics: either
the text field must not be rotated, or it must not use a
system font.
David Stiller
Adobe Community Expert
Dev blog,
http://www.quip.net/blog/
"Luck is the residue of good design."

Mixed fonts when exporting ePub file from InDesign

I am an ePubs newbie and have been watching some of the training videos on Lynda.com and tried creating my first ePub document today.
I am having problems with mixed fonts when exporting the file and viewing on iBooks on an iPhone.
I have a document with paragraphs of text to be in a regular weight and certain words within the paragraphs are to be picked out in bold. So I've used a Paragraph Style for the main text and then used a Character Style to pick out the bold words. Simple enough!!
On export I am not embedding any fonts as I have unchecked that option on the export dailaogue. I have used the same font family in InDesign, but I cannot work out why I am getting both Serif and Sans Serif fonts displaying when viewing it on the iPhone. The main body appears in the Sans Serif font, but I have the bold character styles, subheads and even the numbers in the numbered lists are all displaying in a Serif Font.
In iBooks I can change the display font (I have the choices: Georgia, Iowan, Palatino, Seravek and Times New Roman) and this affects the fonts which are displaying as Serif, but the main body font remains constant as a Sans Serif (looks like Helvetica).
I would ideally like all the fonts in the document to display as Sans Serif with certain words, plus the headings and subheadings to be in the bold weight version of the same font family.
I've tried this in CS5.5 and CS6 with the same results.
Can anyone offer any suggestions please.

Hi Steve,
Yes, you are correct. It is Anne-Marie Concepcion's videos that I've been watching.
I understand what you are saying about testing in other readers and I will be looking into that further. However our main task is to get some of our client's manuals and documents into a digital version that can be read on Apple devices, as these are what are being used by their sales force.
We have already produced some documents for use on the iPad and have used iBooks Author for that with some success. They have now asked about getting something onto iPhones, so we are now looking into the ePub format to do that. I realise that ePubs can also be used on iPads, but we would still be pushing the iBooks Author files for use on iPads as there is more interactive widgets that can be included. But the main ePub reader that will be used is going to be iBooks, so we are looking to get something to work in that App. Other formats may follow, but we are starting with getting something to work on iBooks first.
I have tried viewing the file in Adobe Digital Editions as you have suggested and have to say that this displays the file in a way that is certainly more appealing, as the fonts are at least consistent. However, I understand from Anne-Marie's videos that ADE is rather basic and is only intended as a rough proofing device. Which is why I transferred my ePub to my iPhone and iPad to view in iBooks.
As I have mentioned, I am a total ePub newbie. I come from a mainly print background and my knowledge of CSS and HTML is very basic. I have an understanding of the concepts, but I would always rely on developers to produce websites that I may have designed.
You seem to be implying that it may be in iBooks where the issues lie and from viewing the file in ADE this would certainly look that way. So I am simply trying to establish what I would need to do to make it work in iBooks in a more satisfactory way.
I have included some screen grabs below to illustrate my problems...
ePub viewing in ADE
If it looked like this on the iPhone I would be relatively happy!!!
ePub on iPhone
The main body copy is displaying in a sans serif font (Helvetica?) yet the heading, subheadings, numbers of the numbered lists, address, URL and legal line are all displaying as a serif font. All the style sheets are assigned to the same font family in InDesign (Helvetica). I have managed to get the bold text to appear in the sans serif font, by mapping the character style to the "strong" tag in the Export Tagging dialogue. All other paragraph styles are left as "Automatic".
I can change the font in iBooks and this affects the displaying of all styles apart from the main body, which stays consistently in the "Helvetica" font.
iPhone Fonts
iPad Fonts
On the iPad I'm also getting some elements coming in justified which looks awfull (see the main heading above). This image also shows how changing to an alternative font changes the heading and subheadings, but does not affect the main body!!!
Any suggestions???
Thanks

Font style changes when making a book in iphoto

I am trying to make a book and the inner cover I wrote a little about our vacation. I wanted to make the font size larger so I clicked on the settings button below and this window popped up with "cover title:" "Cover Subtitle:" etc with the font style/Plain/and font size. When I went to change the "Flap Body" font size to make it larger to a size 14 and then clicked ok everyone of those options went from Helvetica Neue to the next font in the list which is ugly. I try to set it to Helvetica Neue and then they all change to another font??????? I ended up just doing open apple z to undo to the original. I use iphoto 7.1.4 and I use the 10.4.11 operating system. I have an imac g5 powerpc. It's not a life or death situation but it is annoying that I cannot change the font size of one thing without having it change the font style of all the options. Any suggestion would be great!!

I once overshot the limit by marking too many photos to fit within 99 pages, but I could never figure out how to fool the application and had to give up trying to add those 14 extra photos.
I asked a friend (who practically lives in Terminal) if he had any way of modifying that limit, but he reminded me that if their printing services are set up to bind books and bill for only 99 pages, fooling the application might be useless if the service only prints me a 99 page book and discards the additional pages.
I can understand that you wouldn't want to let people print 1000 page books, but I sent feedback anyway to allow me to increase the limit. Anyone know of any service that lets you print beyond iPhoto's limits?

Check Printing With MICR font

Hi
I am working on check printing.I have downloaded MICR font from IDAutomation.
In my template i added few labels with MICR font but when i preview it, the font in the pdf is not displaying MICR instead its showing in arial.This is just from the template preview and not in apps preview.I tried to do the font mapping in XML admin and still no luck.Can any one help me with this.
Thanks,
Harsha

Hi all,
I followed all the steps to create a font file and then font mappings.Still when i click the priview button, the font is not MICR in pdf output.I downloaded GnuMICR and still no luck.Can any one please tell me if you have got the pdf output in MICR font either in rtf template preview or in apps preview if so can you guide me.
Thanks
Harsha

How to find a word written with two fonts...?

Hi,
I have a 200+ pages document that contains some words with the first letter in Times regular and the rest in Times italic. Is there any way to find those words in the document?
Thanks

Ooooo, Dave ....
Annabelle, a non scripting solution is the following.
You cannot search for words with multiple fonts. However, since you can search for words in one font, you can exclude 'good' ones.
I will be assuming you have a regular document, with just black text ...
In Search & Replace, GREP, search for "\b\w+\b" with a font style of "Regular" and replace with formatting: text color red. Be sure not to accidentally put anything in the replace text field -- it should be entirely empty. Now all entirely Regular words are red.
Repeat with the font style "Italic". Now all words that are entirely Regular or Italic are in red.
Search for "\b\w+\b" with a text color of Black. This will find all words that are neither entirely in Italic nor entirely in Regular.
In case you never used it before, the GREP expression means "a word boundary -- one or more word characters -- a word boundary". Essentially, it does a 'Find entire word' for any length of words.
Note that if you have words in, say, bold, bold italic, or 46 Light Italic, you will have to mark these as well with the check colour, or else you'll also find them 'bad'.
You might want to create a new swatch for marking, so you can delete it afterwards, replacing with Black again.
... Are you familiar with how to use scripts? It might be a bit easier if I wrote a tiny script, although my method will find all rogue formatted text.

How to align label text to the left in Spark Button (no "textAlign" style)?

Hi all,
"textAlign" style is excluded for Spark Button, and probably for a good reason.
[Exclude(name="textAlign", kind="style")]
If I want to align Spark Button text label to the left, should I create custom skin to accomplish that?
Something e.g:
<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
<s:Label
        id="labelDisplay"
        textAlign="left"
        left="2" right="2" top="2" bottom="2"/>
</s:Skin>

    Right, I though about this approach vith setStyle too, but this is not that convenient.
    I looked into source code and find out that spark.components.Button class adds to the spark.components.supportClasses.ButtonBase only one public property "emphasized".
Because I do not need this property in my project, I've extended my custom LinkButton component from ButtonBase to allow setting "textAlign" style in MXML for this component.
import spark.components.supportClasses.ButtonBase;
public class LinkButton extends ButtonBase {
   Also, inside custom Skin from my Button component I do not set explicitly "textAlign" style value to the button label, I let button label to inherit style value specified in MXML for the style textAlign of my ListButton component.
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <fx:Metadata>
        [HostComponent("component.LinkButton")]
    </fx:Metadata>
<s:Label
        id="labelDisplay"
        textDecoration="underline"
        maxDisplayedLines="1"
        verticalAlign="middle"
        color="{getStyle('color')}"
        color.over="{getStyle('textRollOverColor')}"
        color.down="{getStyle('textSelectedColor')}"
        left="10" right="10" top="2" bottom="2"/>
</s:Skin>

How to change header font style in Spark DataGrid?

I'm looking since last week for a way how to change the font style of the header in a Spark DataGrid. It drive me nuts that I can't find a way to do this. Have anyone one an idea how to achieve it? Any help is appreciated.
Thanks,
- Artur

Hi,
Some styles won't work because some text styles got hardcoded into the DefaultGridHeaderRenderer's Label. You'll run into this issue not just with the DataGrid headers but also things like the Panel's title and other places where we have text. One way to get around this issue is to create your own custom headerRenderer based on the default one and then redefine the headerRenderer skin part in the skin.
First, create a subclass of the DefaultGridHeaderRenderer and tweak the "labelDisplay" to your liking (or even just take out all the styles and style it on your own as you had earlier using your custom header renderer's name). Example below (I named it "CustomHeaderRenderer"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DefaultGridHeaderRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                 xmlns:s="library://ns.adobe.com/flex/spark"
                                 xmlns:mx="library://ns.adobe.com/flex/mx"
                                 xmlns:skins="spark.skins.spark.*"
                                 xmlns:comps="comps.*">
    <fx:Declarations>
        
        <s:Label id="labelDisplay"
                 verticalCenter="1" left="0" right="0" top="0" bottom="0"
                 textAlign="start"
                 verticalAlign="middle"
                 maxDisplayedLines="1"
                 showTruncationTip="true" />
    </fx:Declarations>
</skins:DefaultGridHeaderRenderer>
Next, create a simple DataGrid skin by creating a subclass of the spark.skins.spark.DataGridSkin in MXML and defining a new headerRenderer component in the fx:Declarations section. Example below (I named it "CustomDataGridSkin"):
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:skins="spark.skins.spark.*"
                xmlns:comps="comps.*">
    <fx:Declarations>
        
        <fx:Component id="headerRenderer">
            <comps:CustomHeaderRenderer />
        </fx:Component>
    </fx:Declarations>
</skins:DataGridSkin>
Last, assign your new skin as the skinClass of your DataGrid (either in MXML or as a style):
<s:DataGrid skinClass="comps.CustomDataGridSkin">
I know it's not pretty, but it's the result of trading off between having completely custom skinning vs. having knobs to tweak every style. Hope this helps.
-Kevin

Pages Copy & Paste Style Buttons don't change font size and style?

Shouldn't the font size and style also be copied and pasted when I use the buttons to copy & paste the style within a page?

Hello
It seems that the description of these buttons in the Help is not clear.
After several attempts, one may understand that they don't apply to attributes inserted "by hand" with cmd + B for instance but to "styles" defined in the Styles drawer.
Yvan KOENIG (from FRANCE dimanche 30 mars 2008 20:34:35)

Embedded font on Spark Button

I am using an embedded font for all spark labels. It works fine.
However, the font is not applied to the button label. If I switch the font to Comic Sans MS then the font is used on the button.
I can't figure out why this particular embedded font works in all labels, except the button label.
Any help would be greatly appreciated.
gkx

I'm seconding Robs reply here... I had a very similar issue and ended up having to set the fontWeight and fontStyle to match the embedded font. In my case it was normal and normal using a Futura family font.
So, my overall embed was:
@font-face {
                              src: url("assets/fonts/Futura_Book_BT.ttf");
                              fontFamily: "FuturaCFF";
                              embedAsCFF: true;
                    @font-face {
                              src: url("assets/fonts/Futura_Book_BT.ttf");
                              fontFamily: "Futura";
                              embedAsCFF: false;
Then my buttons looked like
<s:Button fontFamily="Futura" fontWeight="normal" label="Select" click="hubSelectionHandler(event)" />

Questions about Spark DataGrid (Header Font Styles, Header Gradient)

Just starting out in 4.5 SDK, and just a tad confused on the Spark DataGrid.
1) Trying to set the font style for just the header, but don't see those properties in the designer....as they appear to apply to every part of the DataGrid.
2) Want to set a linear gradient for the header utilizing two specific colors, alphas and ratios. Not sure where to set them now.
I think that is it for now. From what I have done with it so far, I love it....just obviously not as much user documentation as the MX DataGrid.
Thanks in advance!
Bill

You can do per column header renderers by setting the headerRenderer property on the column. But if you want to swap out all the headers, the header renderer has to be specified in the skin. One neat trick you can do is subclass the DataGridSkin and replace the "headerRenderer" declaration. This also works with the other skin parts.
<?xml version="1.0" encoding="utf-8"?>
<skins:DataGridSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                xmlns:skins="spark.skins.spark.*">
    <fx:Declarations>
        
        <fx:Component id="headerRenderer">
            <s:CustomGridHeaderRenderer />
        </fx:Component>
    </fx:Declarations>
</skins:DataGridSkin>
-Kevin

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

How can I add more than one same spry menu (eg. collapsible menu) with in different styles (font size, color, background, etc) on current page?

Hi Nancy,
This screenshot was only for imagination. A part of the code (not all) is below. In the code there are some background images but they are not seem in live mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/my_site.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css"/>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style>
#CollapsiblePanel1 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #003366;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel1 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel1 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/international.jpg);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel2 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel2 .CollapsiblePanelContent {
    background-color: blue;
#CollapsiblePanel3 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel3 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel3 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel4 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel4 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelOpen .CollapsiblePanelTab {
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    font-size: 18px;
    line-height: 52px;
    color: #FFF;
#CollapsiblePanel5 .CollapsiblePanelTabHover .CollapsiblePanelTab {
    background-color: #003366;
    color: #FFF;
    text-shadow: 1px 1px #000;
    font-weight: bold;
    background-image: url(images/TR_Col-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
#CollapsiblePanel5 .CollapsiblePanelClosed .CollapsiblePanelTab {
    background-color: #C3CFDF;
    border-radius: 5px 5px 0px 0px;
    color: #999
    text-shadow: 1px 1px #000;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    background-image: url(images/TR_Gray2-WEB.png);
    background-repeat: no-repeat;
    line-height: 52px;
</style>

Spark Button Label with mixed font styles

Similar Messages

Maybe you are looking for