Adding info Icon to Spark Label

I am trying to add a info Icon next to a Label in Flex so that when somebody hover over icon, they can see a tooltip but so far no lcuk as i dont see anything like that in spark label control. I m new to skining so do not want to goto that rout but any help with this regard will be greatly appreciated.
Thanks

Guessing that skinning is your best bet and it's really not that difficult if you take an hour or two to read carefully any one of a number of articles/introductions on the web.

Similar Messages

Embedded font not working in Spark Label control?

Hi,
I'm trying to use embedded fonts with the Spark Label (formerly SimpleText) control. I'm using SDK 4 build 10485 now, but I could not manage it in Beta 1 neither.
I'v been playing with cff: true/false, embedAsCFF:true/false but no results.
I've added my test application where it does work with the Halo <mx:Label> control, but not with the Spark <s:Label> control.
So, no compiler errors, but the Spark label control shows a serif (Helvetia?) font where it should be sans as does the Halo control.
Can anybody help me out here?
Thanks
Jan
As I get the message 'the content type of this attachment is not allowed' on uploading the MXML file, here is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    minWidth="1014" minHeight="768"
    backgroundColor="#7B7374">
    <s:layout>
        <s:VerticalLayout paddingBottom="8" paddingLeft="8" paddingRight="8" paddingTop="8" />
    </s:layout>
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
        @font-face {
            src: url("project/assets/thesans/THSP____.TTF");
            fontFamily: HaloSans;
            fontWeight: normal;
            advancedAntiAliasing: true;
            unicode-range: U+0021-U+007B;
        @font-face {
            src: url("project/assets/thesans/THSP____.TTF");
            fontFamily: SparkSans;
            fontWeight: normal;
            advancedAntiAliasing: true;
            unicode-range: U+0021-U+007B;
            embedAsCFF: true;
        .mySparkSans {
            fontFamily: SparkSans;
            fontSize: 24;
        .myHaloSans {
            fontFamily: HaloSans;
            fontSize: 24;
    </fx:Style>
    <s:SkinnableContainer>
        <s:Label styleName="mySparkSans" text="This should be TheSans but it is not...., notice the characters 'ag'"/>
        <mx:Label styleName="myHaloSans" text="This is TheSans, notice the characters 'ag'" top="100"/>
    </s:SkinnableContainer>
</s:Application>

Hi,
I'm trying to use embedded fonts with the Spark Label (formerly SimpleText) control. I'm using SDK 4 build 10485 now, but I could not manage it in Beta 1 neither.
I'v been playing with cff: true/false, embedAsCFF:true/false but no results.
I've added my test application where it does work with the Halo <mx:Label> control, but not with the Spark <s:Label> control.
So, no compiler errors, but the Spark label control shows a serif (Helvetia?) font where it should be sans as does the Halo control.
Can anybody help me out here?
Thanks
Jan
As I get the message 'the content type of this attachment is not allowed' on uploading the MXML file, here is the code:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    minWidth="1014" minHeight="768"
    backgroundColor="#7B7374">
    <s:layout>
        <s:VerticalLayout paddingBottom="8" paddingLeft="8" paddingRight="8" paddingTop="8" />
    </s:layout>
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
        @font-face {
            src: url("project/assets/thesans/THSP____.TTF");
            fontFamily: HaloSans;
            fontWeight: normal;
            advancedAntiAliasing: true;
            unicode-range: U+0021-U+007B;
        @font-face {
            src: url("project/assets/thesans/THSP____.TTF");
            fontFamily: SparkSans;
            fontWeight: normal;
            advancedAntiAliasing: true;
            unicode-range: U+0021-U+007B;
            embedAsCFF: true;
        .mySparkSans {
            fontFamily: SparkSans;
            fontSize: 24;
        .myHaloSans {
            fontFamily: HaloSans;
            fontSize: 24;
    </fx:Style>
    <s:SkinnableContainer>
        <s:Label styleName="mySparkSans" text="This should be TheSans but it is not...., notice the characters 'ag'"/>
        <mx:Label styleName="myHaloSans" text="This is TheSans, notice the characters 'ag'" top="100"/>
    </s:SkinnableContainer>
</s:Application>

Extending spark Label

I'm trying to extend a Spark Label so it always has a border with rounded corners like the code below.
<s:Graphic>
<s:filters>
<s:DropShadowFilter color="0x000000" alpha="0.5" distance="7" />
</s:filters>
<s:Group>
<s:Rect width="100%" height="100%" radiusX="5" radiusY="5">
<s:fill>
<mx:SolidColor color="#e0e9f8" />
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#e0e9f8" weight="1"/>
</s:stroke>
</s:Rect>
<s:Label color="#23295D" paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">
<s:text>This is a Spark Label control with a border drawn by a Rect.</s:text>
</s:Label>
</s:Group>
</s:Graphic>
How can I create a MyLabel.as (extending a spark Label) with the above code in it (i tried a few things but haven't quite got it right).
Or should I be using another component instead of a spark Label.
Thanks in advance
Bodrul Haque

Thanks Alex, I will take a look at SkinnableComponent.
Alternatively, this also gives the desired result (except component needs to be re-measured....still trying to figure how to do that).
The objective was to extend a spark Label and make sure MyLabel always has a border and shading .......and few extra things specific to our needs (which I haven't added yet).
I've made use of the built in graphics.
public class MyLabel extends Label
private var dropShadow:RectangularDropShadow;
public function MyLabel()
    super();
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      super.updateDisplayList(unscaledWidth, unscaledHeight);
       //background
      var backgroundColor:Number;
      var g:Graphics = graphics;
      g.clear();
      backgroundColor = getStyle("backgroundColor");
      graphics.beginFill(backgroundColor);
      graphics.drawRoundRect(-5, -5, unscaledWidth+10, unscaledHeight+10, 10);
      graphics.endFill();
      // Shadow......is their another way???
      if (!dropShadow)
             dropShadow = new RectangularDropShadow();
       dropShadow.distance = 7;
       dropShadow.angle = 45;
       dropShadow.color = 0;
       dropShadow.alpha = 0.4;
       dropShadow.tlRadius = 5;
      dropShadow.trRadius = 5; //cornerRadius;
      dropShadow.blRadius = 5; //cornerRadius;
      dropShadow.brRadius = 5;
      dropShadow.drawShadow(graphics, 0, -5, unscaledWidth+5, unscaledHeight+10);
If I add a couple of these MyLabels into a HGroup (or VGroup) they look squashed. ......so I want to do a invalidateSize() or something

Changing behaviuor of "info icon"

Hi
I have made a custom fiori app. My problem is that when entering the detail page on device the info icon needs tabbed before data is visible. Im missing how i make it present at once. please give me the hint?
br
SImon

app view
<mvc:View
controllerName="Zquota.view.App"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.m">
<SplitApp
     id="idAppControl" />
</mvc:View>
detail view
<mvc:View
    controllerName="Zquota.view.Detail"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:l="sap.ui.layout"
    xmlns:f="sap.ui.layout.form">
    <Page id="detailPage" navButtonPress="onNavBack" title="Title" showNavButton="true">
                    <IconTabBar class="iconTabBarPaddingTop" id="idIconTabBarMulti" expanded="true">
                        <items>
                            <IconTabFilter >
                                <l:Grid width="auto" defaultSpan="L1 M1 S1">
                                    <l:content>
                                        <f:SimpleForm minWidth="1024" editable="false" labelSpanL="1" labelSpanM="1" emptySpanL="1" emptySpanM="1" columnsL="2" columnsM="2">
                                            <f:content>
                                                <Label
                                         text="Quota entitled">
                                         </Label>
                                         <Text
                                         id="text5"
text="{QuotaAmtTotal} {UnitText}"
></Text>
                                         <Label
                                         text="Quota Used">
                                         </Label>
                                         <Text
                                         id="text3"
    text="{QuotaAmtUsed} {UnitText}"
                                         maxLines="0">
                                         </Text>
                                         <Label
                                         text="Quota remaining">
                                         </Label>
                                         <Text
                                         id="text1"
text="{QuotaAmtRest} {UnitText}"
                                         maxLines="0">
                                         </Text>
                                         <Label
                                         text="Validity">
                                         </Label>
                                         <Text
                                         id="text7"
                                         text="{DeductStart} to {DeductEnd}"
                                         maxLines="0"
                                         >
</Text>
                                            <core:ExtensionPoint
                       name="extIconTabFilterForm1"/>
                                            </f:content>
                                        </f:SimpleForm>
                                    </l:content>
                                </l:Grid>
                            </IconTabFilter>
                            <IconTabFilter icon="sap-icon://group">
                                <Text text="People content goes here ..." />
                            </IconTabFilter>
                        </items>
                    </IconTabBar>
                    <footer id="detailFooter">
                        <Toolbar id="detailToolbar">
                            <content>
                                <ToolbarSpacer id="toolbarSpacer">
                                </ToolbarSpacer>
                                <Button id="actionButton" press="openActionSheet" icon="sap-icon://action">
                                </Button>
                            </content>
                        </Toolbar>
                    </footer>
                </Page>
</mvc:View>
Master view
<mvc:View
    controllerName="Zquota.view.Master"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns:footerbar="sap.ushell.ui.footerbar">
    <Page
        id="masterPage"
        title="{i18n>masterTitle}">
        <content>
            
            <Button text="" icon="sap-icon://home" press="onPressHomeIcon"/>
            <List
                id="list"
                select="onSelect"
                mode="{device>/listMode}"
                noDataText="{i18n>Qoutatype}"
                text="{QuotaDesc}"
                growing="true"
                growingScrollToLoad="true"
items="{/PersonalQuotaSet}">
                <customData
                    id="customData1">
                    <core:CustomData
                        id="coreCustomData1"
                        key="sapDtResourcePath"
                        value="PersonalQuotaSet">
                    </core:CustomData>
                </customData>
                <items
                    id="masterList">
                    <ObjectListItem
                        id="mainListItem"
                        press="onSelect"
                        type="{device>/listItemType}"
                        counter="0"
title="{QuotaDesc}"
numberUnit=""
                        markFavorite="false"
                        markFlagged="false"
                        showMarkers="false">
                        <attributes>
                        </attributes>
                        <customData
                            id="customData2">
                            <core:CustomData
                                id="coreCustomData2"
                                key="sapDtResourcePath"
value="PersonalQuotaSet">
                            </core:CustomData>
                        </customData>
                        <core:ExtensionPoint
                            name="extListItemInfo"/>
                    </ObjectListItem>
                </items>
            </List>
        </content>
        <footer
            id="masterFooter">
            <Toolbar
                id="masterToolbar">
                <content>
                    <footerbar:SettingsButton
                        id="settingsButton"
                        icon="sap-icon://action-settings"
                        tooltip="Help">
                    </footerbar:SettingsButton>
                </content>
            </Toolbar>
        </footer>
    </Page>
</mvc:View>

Is there a way to increase the icon size (and the text below) without using zoom? I am trying to help out someone who has moderate visual impairment that does not want to use zoom just to see the icons and their labels.

Is there a way to increase the icon size (and the text below) without using zoom in iOS 7? I am trying to help out someone who has moderate visual impairment that does not want to use zoom just to see the icons and their labels.

Hello Apple.
It seems you have gone to great lengths to improve accessibility in many areas of the iPad. Why was this obvious problem with icon text size missed? (It's not with the Mac.). And for so long too.
Do you employ people with actual accessibility problems to help you do UI design?
I think too, that some buttons are too close for people who might have motor control problems.
I love my iPad but I fear as I age, the iPad might not keep up with me.

Document icon in Finder window differs from Get Info icon

I've been noticing unexpected document icons in Finder windows for quite some time.
This is especially true for PDF files. Since the early days of Mac OS X, I've configured my Macs to open PDF files in Adobe Reader, and I'm accustomed to seeing an Adobe PDF document icon on each PDF file. For some time, I've been seeing different PDF icons, e.g., a document with fuzzy text lines and a black ring binding on the left edge.
I thought this might be a custom icon. But when I do a Get Info on the PDF file, the conventional Adobe PDF icon appears in the Get Info window.
Is this different between the Finder icon and the Get Info icon a bug or a feature?
-- Ward

It's a feature. Any window that has the View Options set to "Show Icon Preview" will do that. It actually is rather handy in a folder that is set to icon view, with nice BIG icons, you can often see the first page (which is what is displayed) clearly enough to recognize exactly what the file is. In List view it isn't at all helpful, nor is it helpful in those cases where you have icon view set, but the icons are quite small (as is the case on my Desktop, and, I suspect, on most people's Desktops). A pdf that has multiple pages will additionally show the "binder" along the left edge. The Finder is drawing these custom icons on the fly from the contents of the file. The only way to defeat it is to turn of the Show Icon Preview for the folder(s) where you don't want an essentially useless and often counter-productive icon. Do that from the Finder's View menu item, Show View Options. Oh, and every folder has different options for each view. So you can turn it off for List view, but have it turned on for icon view, where it might actually be useful.
Francine
Francine
Schwieder

[svn:cairngorm3:] 15920: Adding the use of Spark component into ModuleC to add the scenario where a Module must be able to get its default spark skin (currently this is failing due to a bug in the Module Lib)

Revision: 15920
Revision: 15920
Author:   [email protected]
Date:     2010-05-06 02:11:21 -0700 (Thu, 06 May 2010)
Log Message:
Adding the use of Spark component into ModuleC to add the scenario where a Module must be able to get its default spark skin (currently this is failing due to a bug in the Module Lib)
Modified Paths:
    cairngorm3/trunk/libraries/ModuleTest/src/example/moduleC/ModuleC.mxml

As the server.xml is big enough, I took the minimum portion of it. Hope u can proceed with it.

<Context path="" docBase="ROOT" debug="0"/>

<Context path="/xyz" docBase="pathTo_xyz" debug="0" crossContext="true"/>
<Context path="/pqr" docBase="pathTo_pqr" debug="0" crossContext="true"/>

<Context path="/examples" docBase="examples" debug="0"
reloadable="true" crossContext="true">
You should also provide a WEB-INF folder under pqr or xyz folder.
You should also provide a web.xml file under each WEB-INF folder.
The minimal web.xml is
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/j2ee/dtd/web-app_2_3.dtd">
<web-app>
</web-app>
That's it. Try it out. Hope it is OK.
Hafizur Rahman
SCJP

How to show mandatory icon after the Label text?

Hi ,
I am using JDeveloper 11.1.1.4.
My Scenario is I have <af:inputtext> with Property required="true".
Label look like ,
"*Name but I want to show like Name* .I want to show the * icon after the label text .
How to achieve this in ADF ? ..
Thanks ...

Hi rfh,
Thanks for the updates ,
I tried with ,
.AFRequiredIconStyle
float:right;
this CSS moving the * icon to right side but not after the label ,It's moveing infront of the InputText Value the output looks like,
Label *Value
I tried with ,
AFRequiredIcon:alias
content:inhibit;
It's diabled * icon entire application .This solution is ok ...But I want to diable * icon for only particular places.
How to hide * icon for particular fields ? ......
Thanks......

Upgrade to Flex 4, Halo theme, embedded font doesn't work for Spark Label

I'm upgrading an application to Flex 4 from Flex 3.5 using the Halo theme. If I include a Spark Label in my application the Spark Label does not render the text using the font I defined in my CSS. My MX Labels render fine. Here is an example application that replicates my issue. So,
Compile and run using Spark theme. Both Labels render the text with the correct font.
Compile and run using Halo theme. Only MX Label renders the text with the correct font.
Is it not possible to do what I want?
Thanks
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 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="250" minHeight="250">
     <fx:Style>
          @namespace mx "library://ns.adobe.com/flex/mx";
          @namespace s "library://ns.adobe.com/flex/spark";
          @font-face
               fontFamily: Verdana;
               fontWeight: normal;
               fontStyle: normal;
               src: url("./style/fonts/verdana.ttf");
               embedAsCFF: false;
          @font-face
               fontFamily: VerdanaCFF;
               fontWeight: normal;
               fontStyle: normal;
               src: url("./style/fonts/verdana.ttf");
               embedAsCFF: true;
          mx|Label
               font-family: Verdana;
          s|Label
               font-family: VerdanaCFF;
     </fx:Style>
     <fx:Declarations>
          
     </fx:Declarations>
     <s:VGroup>
          <mx:Label text="My text" />
          <s:Label text="My text" />
     </s:VGroup>
</mx:Application>

I think you might need to set the fontLookup:
        s|Label
            font-family: VerdanaCFF;
            fontLookup: "embeddedCFF";

I no longer have the info icon for a manual sync.

I'm trying to do a manual sync with an iMac which I've done many times before and the "info" icon is missing from the list of syncable features. What am I missing?

Well, yes my questions were answered but of course I came to realization that Apple in their hearts-of-hearts needs to herd everyone to iClod. (Tonque in cheek). Sad. or as SJ would say, it's a total POS.....

How to dynamically resize a Spark Label?

If i set the text of a spark label at runtime, the label dont resize automatically. How can i resize the correct width of a spark label at runtime?
Thanks in advance

The sample will be helpful to you:
<fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void
                // TODO Auto-generated method stub
                lbl.text = lbl.text + " hi ";
        ]]>
    </fx:Script>
    <fx:Declarations>
        
    </fx:Declarations>
    <s:Label id="lbl" height="20" text="hello" backgroundColor="#FFcc12" x="157" y="83"/>
    <s:Button label="ok" click="button1_clickHandler(event)" x="177" y="152"/>

Spark Label event problem

Event handler for a Spark.Label control:
private function onLabelClick(e:MouseEvent):void
trace(e.target);
trace(e.target.text);
First trace returns: '[object TextLine]'
Then I get this: ReferenceError: Error #1069: Property text not found on flash.text.engine.TextLine and there is no default value.
What is going on here and how to fix it ??
And: is it just me or does anyone else have LOADS of problems dealing with all the new 'improvents' in Flex 4??
(I have to admit that I find the new spark stuff very confusing)

Hi,
Try using currentTarget.
As far as flex 'problems', flex 4 is in beta and as things change this could be considered a problem but its beta which means expect a little confusion
fundamentally the basic stuff still work the same, spark has a bit of a learning curve which is to be expected when a product becomes more powerful.
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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="955" minHeight="600">
<fx:Script>
<![CDATA[
protected function label1_clickHandler(event:MouseEvent):void
lblResult.text = event.currentTarget.text;
]]>
</fx:Script>
<fx:Declarations>

</fx:Declarations>
<s:Label x="148" y="85" text="A Label that is clickable" click="label1_clickHandler(event)"/>
<s:Label id="lblResult" x="148" y="115" text="result"/>
</s:Application>

GetPreferredBoundsWidth of a truncated Spark Label not returning right value

I am writing a custom layout that autmoatically sets the width of a component to the greater of a "remainder" of what is left for the container and the preferred width of the component, but it is failing when that component is a spark label that has been truncated (maxDisplayedLines).
I know what the remainder is, and when the Label is not truncated, it all works fine. However, once the Label is truncated, the getPreferredBoundsWidth method always returns the current size of the truncated label.
I need a way to really get the preferred width of the Label, ignoring truncation.
I see there is a measureText some folks have used, but the api docs say that shouldn't be used for the spark labels. Also, I'd prefer to try and keep this at the ILayoutElement level, but if i have to cast to a Label, I can do that.
I have already tried to set a larger width, then asking it for its preferred width, but that didn't work.
I am going to try the measureText and also trying to unset the maxDisplayedLines, but I am hoping there is a cleaner way.
Thanks in advance for any help.
Irv

quite an elaborate story, but not really clear... sorry..
this maybe?
WHERE id=9999
   AND eff_dt='4/19/2010'
   AND name NOT IN('PAD','FIN_ST','FIN_LT')
   or (ind = 'SHORT' and name = 'PAD')and with parameter:
WHERE id=9999
   AND eff_dt='4/19/2010'
   AND name NOT IN(<param>,'FIN_ST','FIN_LT')
   or (ind = 'SHORT' and name = <param>)

I drag my app.to the dock , there is no icon, just the label and it works, don't know where it went

i drag my app.to the dock , there is no icon, just the label and it works, don't know where it went

Hello, do you have a screen shot of that?
Is it possible it didn't quite make it to the dock & dropped on the Desktop?

Can I Change The "Date Added" Info -- or Other Way To Edit Order of Songs?

I recorded some music from LP. When I import into iTunes the songs come in alpha order.
Even when I go in and "get Info" and add the track numbers the songs won't sort in the same order as off the album. The next time I named the tracks starting with track # for example -- "1 happy birthday" "2 auld lang sine" ... but it still didn't work. Instead I import the songs in the right order one at a time. No big deal but it would be easier to drag a whole folder once rather than a dozen songs one at a time.
Is there a way to edit the date added info? Or some other way to trick iTunes to play the songs in the order I (and the artist) want?
Thanks

Thanks,
I didn't explain mtself very well.
Often use my whole library and find albums by sorting on dated added. Or play a bunch of albums one after the other as they sit in the library.
When I click on track # I get all the track 1 s then all the track 2 s etc.
Even if I highlight a selection of songs (like a whole album) the tracks sort first
I know I can make a playlist of the album
I just wondered if there is a way to get album tracks in order when they seem to have been created or imported in a different order.

Adding info Icon to Spark Label

Similar Messages

Maybe you are looking for