Custom Component vs. States

Dear Catalyst team,
After trying to work around the 15 states limitation by converting them into custom components. I ran into the problem that the pages of those custom components have the tendency to change their apearance relatively to the first page of the custom component. As a result, moving a button element up a bit from the first page to the next will, when running, move the same element up EACH time I click it, moving it out of the screen eventually. Is there a way to anchor the elements in a custom component? Otherwise, by the complex nature of my project, I might run into a dead end. Please let me know if you know of any solution.
All the best,
Wulffrunner

ok, got it:)
so how about this:
Can I trigger action sequences outside of the custom component
using buttons that are in the custom component, and vice-versa?
Haven't found a way to do this yet...

Similar Messages

Video wont play in custom component sub-state

I can't get a video to work while in a sub-state... Basically I have links that play to each sub-state in the component, and one contains a video. When I test it the video will not play not do the buttons on the wire-frame work. Any suggestions?

Hummm....
Have you tried having the video and its controls placed at the top level of the project and see if they work there? That will make sure that the video is playable and the controls are wired up correctly. If that works then we can see if it is something else...
Chris

States in a custom component

I am having a problem getting my states to view correctly from a custom component.
I call in the custom component that has states in it, and they do not view correctly.
Here is an example:
The states from my custom component:
<mx:states>
        <mx:State name="state1">
            <mx:RemoveChild target="{formitem3}"/>
            <mx:RemoveChild target="{hbox4}"/>
            <mx:RemoveChild target="{vbox1}"/>
            <mx:RemoveChild target="{panel24}"/>
            <mx:AddChild relativeTo="{hbox3}" position="before">
                <components:SensitivityValue2 variableString="Capital Cost Multiplier" unitsString="" close="currentState=''"/>
            </mx:AddChild>
            <mx:RemoveChild target="{button31}"/>
        </mx:State>
        <mx:State name="state2">
            <mx:RemoveChild target="{formitem3}"/>
            <mx:RemoveChild target="{hbox4}"/>
            <mx:RemoveChild target="{vbox1}"/>
            <mx:RemoveChild target="{panel24}"/>
            <mx:AddChild relativeTo="{hbox5}" position="before">
                <components:SensitivityValue2 variableString="Replacement Cost Multiplier" unitsString="" close="currentState=''"/>
            </mx:AddChild>
            <mx:RemoveChild target="{button1}"/>
        </mx:State>
and here is how I am calling in the custom component to my main application:
<components:MyCustomComp id="customComp" width="100%" height="100%" label="CustomComp"/>

when you switch to a state (by click a button) it should just move some icons down and
insert a panel.
And when you switch back it should just move everything back up and remove the panel.
What does happen is nothing, or an error, or it adds the panel to a strange location.

How Do I Link to Custom Component States From Scrolling Content Buttons?

Hi there, I'm in need of some help as i've got a deadline to meet within the next few weeks and im stuck!
Basically what I've done is i've made a scrolling content lists, containing about 10 products in each one, my plan was to turn each product into a button so that users could click on that product, and take them to a new page containing more detailed information on that product; when they've finished looking at that product they can click a button to return them to the list they were on previously. However I can't just make a brand new state for each product as there is a limit to 20 states, and I will need around 50 of them.
So, from what i've read I will need to create custom components. the only trouble with doing this is that I can't link to the custom component on a different main timeline state (I dont get the option to link to the states of the custom component).
If i put the image of the detailed product into the scroll panel I am able to link to it, however, it's inside the scrolling content and it just scrolls around and stuff which isn't what I want; as it makes it look messy.
- Basically I just need to link from the buttons in the scrolling list, to a more detailed page for that product. Then be able to return to the list using a button.
If anybody has any input on how to achieve this, please help me out. Starting to panic now as this needs to be finished before september :s
Btw i'm happy to share my .fxp file it that helps.
Thanks alot, Hoping for some helpful replies on this topic
- Tom

Hi Tom,
Adding this back here to share my wireframe with the community.
Have put a quick .fxp together based on the 'product' section of your project.
Take a look at how the product lists are linking into the product detail pages within their custom components.
Using this model you should be able to expand out to infinite product detail states. If a particular product area has more than the maximum allowed states, just start a new custom component (part 2 for that product section).
Let me know if you have any questions. Hope this sets you on a path to getting your project complete. It's looking nice.
Tanya

Change base view state from a custom component

I'm pretty new to flex and I'm having a small issue in change the view state from a component.
My Application have 2 custom components called userlogin and main menu. In the main application page I have userlogin component in one state and the main menu component in another. I'm trying to change the state if the login in successful from user login to main menu. I have the following function written inside the login component.
private function IsUserLoggedIn(evt:ResultEvent):void
                if (evt.result.islogin.toString() == "true")
                    currentState = "MainMenu";
                else
                    Alert.show("Login failed, please try again.", "Login Failed");
This code worked when I had all the controls in the main page. But then I created components and included them in to components and now when the login is success, its giving the following error.
ArgumentError: Undefined state 'MainMenu'.
    at mx.core::UIComponent/getState()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UI Component.as:9908]
    at mx.core::UIComponent/findCommonBaseState()[E:\dev\4.0.0\frameworks\projects\framework\src \mx\core\UIComponent.as:9928]
    at mx.core::UIComponent/commitCurrentState()[E:\dev\4.0.0\frameworks\projects\framework\src\ mx\core\UIComponent.as:9750]
    at mx.core::UIComponent/setCurrentState()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\ core\UIComponent.as:9701]
    at mx.core::UIComponent/set currentState()[E:\dev\4.0.0\frameworks\projects\framework\src\mx\core\UIComponent.as:6087 ]
    at components::UserLoginForm/__btnSubmit_click()[C:\Projects\WarrantyAutomation\src\componen ts\UserLoginForm.mxml:60]
I'm sure this has something to do with accessing the states from a custom component, but I do not know how to change the state to the main menu. Please help me with this. Any help is greatly appriciated.

Hi dasun1981,
private function IsUserLoggedIn(evt:ResultEvent):void
                if (evt.result.islogin.toString() == "true")
                    currentState = "MainMenu";
                else
                    Alert.show("Login failed, please try again.", "Login Failed");
If I am right the above function is in your userlogin component and the two components "userlogincomponent" and "maincomponent" are in main application file and the states were also defined in main application file.
But in the function above the currentState refers to the state of the userlogin component and not the main application ...but the states are defined in main application file...that's the reason why the exception was thrown...
Instead you replace the line in the above function with the below line:
Application.application.currentState = "MainMenu";
Please mark it as answer if it helped you.
Thanks,
Bhasker Chari

Changing state of application from within a custom component

Hello, I have several custom components all of which are included in the parent application.
When I try to change state from a custom component, I get an error saying "undefined state: state name". How do I change the state of the application from within a custom component ? All the states are defined in the parent application.

@linrsvp,
If you are using Flex3 try Application.application.currentState = "somestate";
If you are using Flex4 try FlexGlobas.topLevelApplication.currentState = "somestate";
Don't forget to import the corresponding namespaces for the above.
Thanks,
Bhasker

Revert custom component to default state?

I am building a website which has multiple pages, and within those pages are image galleries. I have used custom components for the galleries so i dont end up with an unmanagable amount of main pages. (15 pages containg galleries of up to 7 images) The problem is when you navigate away from a page and then back to that page the custom component remains in the state it was left in, obviously you would want an image gallery to always revert to the first image. (this is also the case with flvs) Is it possible to make a component revert to a particular state? I dont realy have to skills to do it in builder or anything unless it was very simple.
thanks!

Hi lucky_p,
There is a great post on the FlashCats blog that explains how to get components to reset after a state change; I think this may answer your question:
How do I get Flash Catalyst components to reset after changing states?
Hope that helps.
Regards,
Kim

Creating a button that leads back into the main Pages/States from a custom component

Hello Y'all! isnt F.C. awesome!
BUT... just cant get a button that leads from a custom component ive made back into the main bulk of pages and states ive created to work.
it runs a bit like this:
Main title page...
                        Photography...
                                             Nature (on which theres a Custom Component which when clicked leads to...)
                                                        20 different custom component states each with different pics, linked via buttons
from each of which id love a button that led back to Photography, exiting the custom component
ive tried the basics:      Add interaction.. when clicked.. play transition to.. state: Photography
but to no avail
any ideas? im at a loss!
thanks in advance,
Tom

Cross component communications are an issue in Flash Catalyst 1.0. Thankfully, in Flash Catalyst 5.5 the team addressed some of those issues.
The only idea I have for remove the 'return' button from within the component, then it should be able to get you back to the home state.
Or, you might be able to wait a few weeks for the new version of Flash Catalyst to ship (or you can play with the older preview release on labs.adobe.com)
Chris

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 to construct the component tree in my custom component?Help!

Hi, i am writing a custom component like this:
public class HtmlCategory extends HtmlPanelGrid
     public void processRestoreState(javax.faces.context.FacesContext context,
            java.lang.Object state)
          setColumns(1);
          HtmlCommandLink link=new HtmlCommandLink();
          link.setValue("Let's Bingo");
          MyUtil.setActionListener(context,link,"#{temp.mytest}");
          UIParameter param=new UIParameter();
          param.setName("name");
          param.setValue("Robin!");
          link.getChildren().add(param);
          param.setParent(link);
          getChildren().add(link);
          link.setParent(this);
          super.processRestoreState(context,state);
}         you see, i want to construct the compont tree at Restore View phase this way,because the structure of the component tree will always be the same, so i don't the user to write extra code.
But the children of the component are not rendered,the renderer of the HtmlCategory component just extends the HtmlGridRenderer(myfaces) directly,and always calls the "super" methods in the encode methods of the renderer.
I got a message from the console:
Wrong columns attribute for PanelGrid id0:id4: -2147483648
but i have set the columns attribute in the code above, so what's happening? or please give some advice about how to render the component tree by myself in Restore View with the tree constructing code in the custom component class code,just lke the code above.
Best Regards:)
Robin

Well, i don't know if i have got my question clear.
usually, according to the tags you use in the jsf page, a component tree will be created at the Restore View phase,for example:
<f:form>
<h:panelGrid ...........>
          <h:dataTable ................>
          </h:dataTable>
   </h:panelGrid>
</f:form>but because i am writing a component for my web app, all the child components and their attributes are not likely to change. so i want to reduce the tags into one custom tag, and construct the component tree internally by myself.But it is not the case of backing bean.So i wrote the the code in the method:
public void processRestoreState(javax.faces.context.FacesContext context,java.lang.Object state)as it is shown in my orginal message.But it seems that it is not right way to construct my component tree.So where should i put the code that construct the component tree?Overriding the method :
public void processRestoreState(javax.faces.context.FacesContext context,java.lang.Object state)is not the right way?
Best Regards:)
Robin

Using itemCreationPolicy with a custom component

I'm working on a project where the users need to be able to have a 'filtered' view of one of the edit dialogs. I'm using view states to control which of the input fields show up for each view. The 'save' logic is the same for both states, so I still need to be able to pull data for the inputs even if they are not currently displayed. I tried setting itemCreationPolicy to immediate with no success. Some of the inputs were getting created but the initial values were not being set. The issue seems to be that the input component (an extended version of DropDownList) defers setting the selected value until the commitProperties() method. Since the inpit isn't actually being shown, the commitProperties() method is never getting called and the value is never being set.
Can anyone suggest a workaround for this issue? The only thing I can think of would be to use includeInLayout and visible to show/hide the inputs, but that is going to get really messy since I would have to apply it to every input and the FormItem components that enclose them.

Jasmin,
Is your class included in the custom component?
Yes, It is a annotated entity class,
When creating sessionFactory it is not loading the class.
i'm using flowing code block for creating sessionFactory,
factory =
new AnnotationConfiguration().addAnnotatedClass(dao.entity.UserEntity.
class).setProperty(
"hibernate.dialect",m_dialect ).setProperty(
"hibernate.connection.driver_class", m_driverClass).setProperty(
"hibernate.connection.url", m_connectionUrl ).setProperty(
"hibernate.connection.username",m_userName).setProperty(
"hibernate.connection.password", m_password).setProperty(
"hibernate.hbm2ddl.auto", m_hbmTodll ).setProperty(
"current_session_context_class",m_contextClass ).configure(resource).buildSessionFactory();
Is the jar referenced in the class patch section of the component.xml?
Yes , I have tried for this approch too , but class is entity class is not loaded.

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

Component property declaration in a Custom Component

Hello everyone,
I have a question related to a custom component. I will define a use case and how I want to define a property.
e.g.: I develop a custom component using Flex Library Project, with all manifest.xml, design.xml, locale etc. My component name is CustomList, now in this component, I define a property with following getter/setter.
// defaultState
private var _defaultState:CustomState;
[Bindable( "defaultStateChange" )]
//I have tried defining type property as CustomState, doesn't works
[Inspectable( category="General", name="Default State" )]
public function get defaultState():CustomState
     return _defaultState
public function set defaultState( v:CustomState ):void
     if ( _defaultState!= v)
          _defaultState = v
          dispatchEvent(new Event("defaultStateChange"))
Here, CustomState extends MXMLObjectAdapter and defines a id property and few other property. and In mxml I can define it like this,
<CustomList ....>
     <defaultState>
          <CustomState label="" icon="" />
     </defaultState>
</CustomList>
Now, what I want to achieve is, I want to define property something like this:
<CustomList ....>
     <defaultState label="" icon=""/>
</CustomList>
Can someone tell me how to achieve this and point me to some description about it.
Thanks in advance.
Chetan Sachdev

@Ryan:
Thanks for your reply. For type property in Inspectable metadata tag: http://livedocs.adobe.com/flex/gumbo/html/WS2db454920e96a9e51e63e3d11c0bf680e1-7ffe.html#W S2db454920e96a9e51e63e3d11c0bf69084-7a21
It can have values like Boolean, Array, String etc. I am trying to have a custom one. But I notice that I have to close the property tag, even if it is a string or html for e.g. text property in TextInput, I have to write something like this:
<mx:TextInput>
        <mx:htmlText>
            <![CDATA[
            ]]>
        </mx:htmlText>
    </mx:TextInput>
and
<mx:TextInput>
        <mx:text>something</mx:text>
    </mx:TextInput>
But I still think, it should be there. Not sure
Chetan

Scroll bar, buttons and a Custom Component - help

Thanks to another forum I was able to create a scroll panel and add a scroll bar to it. That works fine. Inside the scroll panel I have thumbnails of the product that I'm highlighting. I want to be able to click on the thumbnail and have a full size photo of the product come up in the window next to the scroll panel. I created a custom component that has a stage showing each full size product individually. This worked fine when I simply had buttons and no scroll bar. I could convert the thumbnail to a button and then add interaction so that it would go to the proper state of the custom component. Where I'm having problems is now that I've imbedded the buttons in a scroll panel I'm no longer given the custom component as an option to pick from. I can add interaction, but it only gives me the option of picking one of the pages, and not a component.
I've attached a screen grab to help show what I'm describing.
Any ideas?
Doug

Doug, thanks for asking this question.
Hi ADAM...
It seems that a lot of us are asking the same question: Scrollbar Navigation-Make Actionable
(I created a low-fidelity proof-of-concept to test—using a datalist as you suggested. See link in my posting).
I have reviewed the video you refer to here, but you example still does not allow for individual items in the datalist (scrollbar) to be assigned individual actionable events.
Can you expain your thinking in Option 1, as a workaround? Do you have any other suggestions?
BOTTOM LINE
We are all looking to do the same thing... something we are going to see A LOT MORE of after Uncle Steve's TABLET presentation next week:
A scrolling menu, with selected items in the menu causing "navigation" to a certain point in a scroll panel. (imitating the flick or slide effect of iPhone).
Suggestion: Can you add a field to thedatalist so that when the "repeated item" (in edit mode) is configuredto do an action (i.e., On-Click, Transition to State), we can then assign the state you'd like for each item in thetable itself?
Now the issue is making it change the "State" within another component (i.e. scrolling panel). Can that be done?
Thanks,
- Rick

Unselecting Data List in custom component

Hi,
I am trying to make a dropdown menu. I've followed instructions here: http://cookbooks.adobe.com/post_Creating_a_custom_combobox_component_using_Flash_C-17234.h tml and it works well but there is a problem.
Here's what I did.
Created a custom component with 2 parts. Toggle Button and Datalist. then I set up the states appropriately. When I select a specific item on the datalist, I go to a different screen state but I share that button across the states (it's basically a menu option). That part works great.
Here's my problem:
On my datalist, I have a "on select" event which takes me to the right screen state. However, When I come back to that component, the datalist still has that item selected.
Is there a way to "deselect" something on the datalist when I move from one state to another? Or to force the selectedIndex to be -1 whenever the datalist appears?
Thanks!
- Jana

In which part of the timeline did you add this action? Inside the datalist? I don't see the property "selected index"

Custom Component vs. States

Similar Messages

Maybe you are looking for