Resolving custom component skins

In a stylesheet, namespace declarations exist for spark and mx components that allow a flex component name to resolve to a type selector that binds that component with its skin.
e.g.
@namespace s "library://ns.adobe.com/flex/spark";
s|Button { skinClass: ClassReference(" ...ButtonSkin"); }
I want to use the same method for my custom components and skins, but what namespace declaration do I use?
e.g.
mxml file:
<myc:CustomComponent ... />
stylesheet file:
@namespace ? "?"
?|CustomComponent {
  skinClass: ClassReference("com...skins.CustomComponentSkin");

In your MXML file, look at the very top, you should have something like
<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"
           xmlns:myc="something.something.something">
Try using the same namespace in the CSS as in above, eg
@namespace myc "something.something.something";

Similar Messages

  • Can you dispatch events from a custom component skin?

    If so, how?
    Thanks~Benny

    I'm curious to know if this is possible as well (or really the question should be, is there a non-hackish way to get a reference to the skin instance)?
    When I've needed to do something like this, I've always just dispatched an event off a skin part from within my skin. IE.
    this.contentGroup.dispatchEvent(...)
    Then I would just listen for the event on the skin part.
    This is a bit hackish, so it would be nice if someone could share a better solution. I've been meaning to look into it, just never have been able to justify the time looking for a better solution.

  • How to code spark custom component with variable number of (skin)parts?

    Hello. I'm trying to code a complex Spark custom component that may have a variable number of parts. To help you understand the requirements, the component can be visualized as an HSlider with a unlimited number of thumbs (as opposed to one).
    How do I, in general, represent these thumbs in the host component as well as the skin? If I had a fixed number of thumbs, say 5, I could easily represent them as 5 button SkinParts declaratively. However, it's not immediately clear to me how to deal with a variable number of them.
    I've studied the HSlider implementation as well as other components and can't find an example that fits this pattern. The closest thing that I can think of is to represent the thumbs as a DataGroup and provide a custom item renderer to render them. Couple that with the general HSlider behaviors that I need to preserve, such as the fairly involved local/global coordinate translations, I don't know whether the approach will work.
    Any better ideas? Thanks.

    #2 sounds utterly strange to me. How would I utilize the phase id?The code below shows my idea whereas I never validate it in any real projects:
    public class MyPhaseListener implements PhaseListener {
         private static final String IDKEY = "PHASEID";
         public static PhaseId getCurrentPhaseId() {
              return (PhaseId) FacesContext.getCurrentInstance().getExternalContext().getRequestMap().get(IDKEY);
         public void beforePhase(PhaseEvent event) {
    event.getFacesContext().getExternalContext().getRequestMap().put(IDKEY,event.getPhaseId());
         public PhaseId getPhaseId() {
              return PhaseId.ANY_PHASE;
    }You can write your constructor like as:
    if (MyPhaseListener.getCurrentPhaseId().equals(PhaseId.RENDER_RESPONSE ) {
         /* create children because this is the first time to create the component */
    }

  • Nesting JSF components in a  custom component

    I'm creating a new JSF custom component. my component needs to include an input text and a list box. my question is : how do I add these components to my JSF component ? I want to use to JSF component to render them rather then encoding the HTML myself. how can I do it ?
    I was told I need to use encodeChildren method somehow but I don't know how ?

    I finally found how to set a default skin to a custom component so that users of my component will not have to set again the skinClass value of my component.
    You have to create a defaults.css file at the root of your library and tell the compiler to take it into account.
    The remaining problem is about the compiler. There are some steps before success and they are a bit mysterious/unclear....
    I found 2 or 3 blog articles explaining those steps but the compiler arguments to use are all differents in each article...
    Here are the links I found:
    http://www.unitedmindset.com/jonbcampos/2010/05/12/creating-custom-spark-components/
    http://www.betadesigns.co.uk/Blog/2010/05/14/default-skin-for-custom-flashbuilder-componen ts/
    http://flexdevtips.blogspot.com/2009/06/default-stylesheet-in-swc-flex-library.html
    Following the first article guidelines has been successful for me but I'm not marking this topic as Resolved because I'd like some answers about this whole thing...

  • Nest array in a custom component

    Hello and thanks in advance,
    I am building a custom datagrid component name custDG. It is a canvas containing the DG and some other visuals. So the actual component is based on canvas and has a DataGrid nested.
    I have also build a custom class name config based on Array to hold the DG column information
    AND a custom object class name col to hold each column information inside the config array class...
    My question is how to make it possible for user to nest the array and columns inside the custom component when adds it to an application. For example:
    <mike:custDG... >
         <mike:config>
              <mike:col.../>
              <mike:col.../>
              <mike:col.../>
         </mike:config>
    </mike:custDG... >
    Want to make something similar to the columns-datagridcolumn thingie but with custom classes in a custom component.
    Anyone plz?
    Thanks

    I finally found how to set a default skin to a custom component so that users of my component will not have to set again the skinClass value of my component.
    You have to create a defaults.css file at the root of your library and tell the compiler to take it into account.
    The remaining problem is about the compiler. There are some steps before success and they are a bit mysterious/unclear....
    I found 2 or 3 blog articles explaining those steps but the compiler arguments to use are all differents in each article...
    Here are the links I found:
    http://www.unitedmindset.com/jonbcampos/2010/05/12/creating-custom-spark-components/
    http://www.betadesigns.co.uk/Blog/2010/05/14/default-skin-for-custom-flashbuilder-componen ts/
    http://flexdevtips.blogspot.com/2009/06/default-stylesheet-in-swc-flex-library.html
    Following the first article guidelines has been successful for me but I'm not marking this topic as Resolved because I'd like some answers about this whole thing...

  • Importing a custom component from Flash Catalyst with Assets

    I am experimenting with Flash Catalyst to see if it would work well for us to create components for Flash Builder to use. As a test I created a very simple component with a Pie Chart and a button and exported it as a fxpl file. In Flash Builder I created a Flex library project and imported the component to it. When I tried to use the component in a trivial test app it gave me an error, saying 'Could not resolve <graphics:fc_pie> to a component implementation', presumably because it had not put the component files in the right place of the library tree - by default they were put in a folder at the same level as components but with the name of the component, below which it had a components folder and an assets folder. If I move the files in these folders to the corresponding folders under src then it works fine.
    The question is, how do I get Flash Builder to do this correctly? I assume I'm missing something obvious but I am a real Flash Builder Novice and this process is about evaluating which tools to use. Sorry if I'm being a numpty. I'm using Flash builder 4.5 and Flash Catalyst CS5.5.
    Any help much appreciated.

    If you look in the library panel, there should be an entry for your custom component - probably something like CustomComponent1.mxml. Drag this out onto the artboard to create a new instance of the component.
    In the case of a custom component, you can't change much on the second instance. If you have something like a text input skin though, you can change the text it is displaying for each instance.
    We are working on making this sort of thing easier in the future, so stay tuned

  • Unable to Edit the View in Custom Component

    Hi Experts,
    Please help me to resolve this issue !
    I am unable to lock the BOL Entity in my custom component using BTAdminH. I have written the below code in the Edit event Handler for Edit Button. The lr_entity->lock( ) condition statement is getting false and it is skipping the "set_view_editable( me )." code statement. Why??
    This is code excerpt that I have taken from edit button of the BP_HEAD/AccountViewSet and altered to my component/View
    DATA: lr_entity     TYPE REF TO cl_crm_bol_entity,
            lr_controller TYPE REF TO cl_ZVKH8_bspwdcomponent_impl.
      TRY.
          lr_controller ?= me->comp_controller.
          lr_entity ?= lr_controller->typed_context->btadminh->collection_wrapper->get_current( ).
    IF lr_entity IS BOUND.
      IF lr_entity->IS_LOCKED EQ abap_false.
        IF le_entity->IS_CHANGEABLE EQ abap_true.
           IF lr_entity->lock( ) EQ abap_true.
            me->view_group_context->set_view_editable( me ).
           ENDIF.
        ENDIF.
      ENDIF.
    ENDIF.
    and when I directly executed the below code in the Edit event Handler for Edit Button I am receiving the dereferencing NULL value exception. Why in my custom component in many places this happening??
      me->view_group_context->set_view_editable( me ).
    Exception Details
    CX_SY_REF_IS_INITIAL - Dereferencing of the NULL reference
    Method: ZL_ZVKH8_DETAILSEF_IMPL=>EH_ONBACK
    Thanks,
    Bujji

    Hi Summit & NishaNC,
    Thanks for your responses !
    As suggested, I have debugged the code for ->lock( ) method and there are exceptions raised from some methods.
    Method GET_LOCK () -> Method GET_ROOT () ->Method GET_PARENT ()
    At GET_ROOT( ) method i have received an exception
    "Root entity BTAdminH could not be determined" and one more "Entity BTAdminH could not be locked"
    Later when I have checked in MODEL Browser, I found that the BOL object "BTAdminH" for my view is an Access object and not the Root Object.
    Hence, I have a question? Does the locking can be done only for ROOT Objects?
    If this is TRUE then I think this is the major problem with my custom component where even the cross component navigation is also not happening and in many places I am receiving "Dereferencing NULL Value" information.
    Also I have gone through some of the Threads and one information that I found from Sumit Mittal
    1. An access object is an independent entity, has primary keys of its own.
    2. A root object is a special access object that is at the top of the hierarchy based on business rules.
    3. A dependent object's primary keys are supplied by access objects and it's lifetime is bound to them. If the parent object is destroyed, the dependent object is also destroyed.
    4. Search objects are query objects useful for querying root objects
    5. Search result objects - Search objects return the results in the form of a result object together with a relation pointing to the root object.
    6. View objects - ?
    7. Dynamic search objects - Used in advanced search, supports ranges and operators
    Could you please specify in which scenarios we have to go for Access Objects and Root Objects
    Thanks,
    Bujji

  • How do I tie a custom-component to a class?

    In flash there's this great way of seperating code from
    content: In the properties menu of a movieclip in your library, you
    can assign a class name to the movie. So something I very regularly
    do is:
    class MyMovieClip extends MovieClip{
    //etc..
    so I'd have all the code that manages my movies nicely tucked
    away in some .as files, no code in the fla. That's the way I like
    it.
    So I was wondering if you can do a similar thing in Flex. I
    most definitely don't want the code for my application in the .mxml
    file, I actually want to inherit the Application class. Similarly,
    I'd like to inherit the Canvas class, yet have the nice gui for
    dragging all the visuall elements in place. Is there a way?
    Regard, and thanks in advance,
    Karel

    If you look in the library panel, there should be an entry for your custom component - probably something like CustomComponent1.mxml. Drag this out onto the artboard to create a new instance of the component.
    In the case of a custom component, you can't change much on the second instance. If you have something like a text input skin though, you can change the text it is displaying for each instance.
    We are working on making this sort of thing easier in the future, so stay tuned

  • How do I reuse a custom component in Flash Catalyst?

    All-
    I'm sure this is easy, I simply can't figure it out.  I've created a custom component in Flash Catalyst with two states, open and closed.  I'd like to reuse this component in my app with different text assest.  How is this done?  Duplicating the component isn't available in this version...do I need to recreate the whole thing with different text?
    Cheers,
    `me

    If you look in the library panel, there should be an entry for your custom component - probably something like CustomComponent1.mxml. Drag this out onto the artboard to create a new instance of the component.
    In the case of a custom component, you can't change much on the second instance. If you have something like a text input skin though, you can change the text it is displaying for each instance.
    We are working on making this sort of thing easier in the future, so stay tuned

  • PPR on custom component

    I have a custom component for calendar. When invoking PPR on the component it refreshes the entire contents of the page and the custom component doesn't work properly after that.
    If I manually do full a page refresh then the component works properly.
    There is a thread with a similar problem was resolved Re: PPR on custom component?
    In above thread the solution was to add below in the custom component class.
    @Override
    protected FacesBean.Type getBeanType()
    return TYPE;
    I do have this code in my custom component class but may be I am missing something else. Does anyone have a suggestion of how to make this work? I'd appreciate your help a lot.

    Yes, I've seen that page on Trinidad. It was helpful, but it seems it was mostly about using PPR, not about building it into a custom component. The one part that did talk about custom components was this, near the end:
    "Finally, if you're implementing a custom component, you aren't extending the Trinidad UIXComponentBase base class or one of its subclasses, and you want to support partialTriggers, you'll need to use addPartialTriggerListeners(). If you deliver events, and you want to support being the target of partialTriggers, you'll need to use partialUpdateNotify(). "
    Then it gives code snippets for each of those. In my case, I am extending UIXComponentBase, and I am including this code, and I know addPartialTriggerListeners gets called, but my component still doesn't get the updated data. If I right-click the page and select Refresh, it redraws correctly, and other components that have partial-triggers on the same component I do, do get the update properly. So I must be missing something.
    Also, where can I get the open source of the components from? I haven't found anywhere to download them from. Can you point me at them?

  • Custom button skin with scaleGrid 9 slice image does not appear in Design Mode

    So in a custom button skin I have a nine sliced image, and then throw that onto an MXML page. In design view, I cannot get the component to show the image that I've thrown on it. Unless I do a hack on the MXML page by adding the image in it's scaleGrid form to the page somewhere. Then it seems to act as like a preloader for the image so it actually displays. But I don't want to do this hack on every page that uses this component. Is there a work around?
    Here's the button skin:
    <?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"
                        width.disabled="296" height.disabled="73">
    <!-- host component -->
    <fx:Metadata>
                        [HostComponent("spark.components.Button")]
                        [Embed('assets/art/shared/[email protected]', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)]
    </fx:Metadata>
    <!-- states -->
    <s:states>
                        <s:State name="disabled" />
                        <s:State name="down" />
                        <s:State name="over" />
                        <s:State name="up" />
    </s:states>
              <s:Group width="100%" height="100%" >
      <s:Image width="100%" height="100%" smooth="true" source="@Embed('assets/art/shared/[email protected]', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)"/>
    </s:Group>
    <!-- text -->
              <s:Label id="labelDisplay" left="10" right="10" top="2" bottom="2" horizontalCenter="0"
                                   maxDisplayedLines="1" textAlign="center" verticalAlign="middle" verticalCenter="1"
                                   color="#FFFFFF" >
      <s:filters>
                                  <s:DropShadowFilter distance="0" angle="90" color="0x000000" alpha="1" blurX="2" blurY="2" strength="16" quality="3" />
      </s:filters>
    </s:Label>
    </s:Skin>
    And then I throw that button into an MXML page. The image doesn't show up in design view.
    <s:Button x="330" y="94" width="134" height="57" label="Button" skinClass="features.shared.NineSliceButtonSkin" />
    This hack, fixes the button! And all other buttons that use that skin.
    <s:Image width="100%" height="100%" smooth="true" source="@Embed('assets/art/shared/[email protected]', scaleGridTop=20, scaleGridBottom=85, scaleGridLeft=40, scaleGridRight=60)"/>
    <s:Button x="330" y="94" width="134" height="57" label="Button" skinClass="features.shared.NineSliceButtonSkin" />

    Looking for an answer too!

  • Can I import a custom component from Flash 8 into Flex?

    'm creating a custom Flash Video Playback component in Flash
    8 using AS2. I understand that I cannot import this to Flex as
    stated in Livedocs: "You can use SWC files created in Flash 8 only
    for skinning, not as components. Until the next version of Flash is
    released, you can only use SWC files created in Flex 2 as
    components."
    But now that Flash 8 supports AS3 with the new Adobe Labs
    add-on, if I create the custom component using AS3 in Flash 8, can
    I then import it and use it in Flex 2.0.1?
    Any help is appreciated,
    Thanks!

    I was going through my libraries trying to find the quick test I did when I was dabbling with the kit and I can't find it anywhere at all.
    If I recall this was the pdf that I read to get it to work properly with CS3 and Flex 3 I don't know if you have read it already or if it will help, but it is the only thing I know for sure helped with the process.
    http://download.macromedia.com/pub/labs/flex/3/flexbuilder3_componentkit_docs_121207.pdf

  • Dynamic datatable in custom component

    hi all,
    i'm working on a custom jsf component and this component will create a datatable dynamically. (you can see component details from http://www.jroller.com/page/hasant?entry=creating_dynamic_datatable_inside_of AND http://www.jroller.com/page/hasant?entry=jsf_question_for_community_what)
    the question is; when i want to add a selection column(dynamically), how can i handle its selected values?
    i mean, if i have created this datatable in a page with designer, i would bind an Integer[] to that selection column's checkboxes. But i have to add this selection column dynamically from my component. So, how can i GET and SET the selection columns values. Since this is a custom component, there is no backing bean for value binding to this component.
    when i resolve the request param string to get the selected rows, it's working(=i can see the selected rows somehow..) but, i can not set that values again while encoding that column after a submit.
    here is my row selection column encoding code;
         private void addSelectionColumnToTable(FacesContext context, UIData table) {
              UIColumn column = new UIColumn();
              HtmlInputRowSelect rowSelect = new HtmlInputRowSelect();
              rowSelect.setId("rowSelect1");
              rowSelect.setStyleClass("inputRowSelect");
              rowSelect.setValue(m_selectedRows);
              column.getChildren().add(rowSelect);
              table.getChildren().add(column);
         }In the code above, rowSelect.setValue(m_selectedRows); part not effecting anyhing. m_selectedRows variable includes row numbers(in an Integer array) that i want to see as selected.
    any solution/recommendation?

    Well if you are still interested in using a text component
    instead of a Button the way you would go about this is using
    textWidth. Here's how I've done it before using a text / label
    whatever you want that shows text.
    // => Set our text we got from database
    myText.text = "This is the text I got from the DB";
    // => Validate it so that way we make sure we get right
    numbers
    myText.validateNow();
    // => Find out how wide our text really is.
    var textWidth:Number = myText.textWidth
    // => Reset the width of our text component and add 20 for
    a little buffer
    myText.width = textWidth + 20;
    Now my suggestion is if your going to be dynamically creating
    these on the fly from a database call you throw it into a method /
    class and have that do all the work for you so all you have to do
    is pass the text to it and it resizes itself based on the example
    above.

  • Can't receive events with a custom component

    I am using the MDIPanel created by Christophe Coenraets in
    the Sales Builder demo code in Flex 2. However, this custom
    component (MDIPanel) doesn't seem to receive regular events other
    than the custom events. The MDI Panel source code is included as
    entails. Since it extends Panel, I assume that it would get all
    regular events coming in but it is not. For example, I can't use
    resource bundle to change the label text or I can't seem to get
    dataprovider to work within a datagrid inside the MDIPanel. Any
    ideas on what's happening here?
    package
    import mx.core.UIComponent;
    import flash.events.MouseEvent;
    import flash.events.Event;
    import mx.controls.Button;
    import mx.events.ResizeEvent;
    import flash.display.Graphics;
    import mx.managers.CursorManager;
    import mx.containers.Panel;
    import mx.controls.Image;
    import mx.controls.Label;
    import mx.states.SetStyle;
    public class MDIPanel extends Panel
    // Constants for MDI panel event names
    public static var MINIMIZE:String = "minimize";
    public static var MAXIMIZE:String = "maximize";
    public static var CLOSE:String = "close";
    public static var RESTORE:String = "restore";

    I'm curious to know if this is possible as well (or really the question should be, is there a non-hackish way to get a reference to the skin instance)?
    When I've needed to do something like this, I've always just dispatched an event off a skin part from within my skin. IE.
    this.contentGroup.dispatchEvent(...)
    Then I would just listen for the event on the skin part.
    This is a bit hackish, so it would be nice if someone could share a better solution. I've been meaning to look into it, just never have been able to justify the time looking for a better solution.

  • How do I automate a custom component not implementing UIComponent?

    I have tried using Adobe's instructions for automating custom components by creating a delegate class to use as a mixin, but
    1)  the super() statement in the delegate of the constructor is not recognized by the compiler,
    2) I am not able to use a DisplayObject as an argument to init(),
    3) I am not able to return the custom component as a IAutomationObject from the parent component's getAutomationChildAt method.
    Is it simply not possible to automate a custom component not implementing UIComponent?

    If you look in the library panel, there should be an entry for your custom component - probably something like CustomComponent1.mxml. Drag this out onto the artboard to create a new instance of the component.
    In the case of a custom component, you can't change much on the second instance. If you have something like a text input skin though, you can change the text it is displaying for each instance.
    We are working on making this sort of thing easier in the future, so stay tuned

Maybe you are looking for