Wednesday, December 28, 2011

ADF Train - Apply Custom Train Stop Icons

This post is based on ADF Code Corner article from Frank Nimphius - 93. Put a different Look to your Train Stop. Frank describes how we can control and customize ADF Train rendering. Recently I had similar requirement, additionally it was required to change standard ADF Train Stop icons with custom ones. In order to implement this requirement, I was following steps from ADF Code Corner sample #93, plus few minor additions.

I didn't wanted to use ADF Skin to customize ADF Train look and feel, but control rendered icons directly. Download sample application with applied custom icons for each stop - ADFTrainApp.zip.

Sample ADF Train contains three stops:


ADF Train UI component is implemented inside ADF Fragment UI template - no need to duplicate ADF Train UI inside each fragment. Comparing to ADF Code Corner sample #93, one more property is declared - icon. This property points to managed bean method, where based on currently rendered train stop we return icon to be assigned for current stop:


Method retrieves activity ID for currently rendered ADF Train Stop and returns associated icon:


Here is how our customized ADF Train looks - first stop is for General:


Second stop is for Details:


Third stop is for Payment:


at

10 comments:

  1. Frank NimphiusDecember 28, 2011 at 5:11 PM

    Nice addition!

    ReplyDelete
  2. rathnamFebruary 29, 2012 at 1:45 PM

    Hi Andrejus

    I have downloaded the application but I am not able to find how/where are you using "getTrainStopImage" method from TrainStop.java class.

    Also it looks like the jdev workspace sample in this article is same as the one you posted in http://andrejusb-samples.blogspot.in/2011/12/jdevadf-sample-adf-train-apply-custom.html

    Please let me know how to use/call this method to add custom icons to train stops.

    Thanks
    Rathnam

    ReplyDelete
  3. Andrej BaranovskijFebruary 29, 2012 at 1:52 PM

    Hi,

    Yes, its same sample - andrejusb-samples.com is a short list of sample apps.

    "getTrainStopImage" is invoked directly from the page, check second screenshot, you will see highlighted - trainstopBean.trainStopImage

    Andrejus

    ReplyDelete
  4. rathnamMarch 2, 2012 at 2:18 PM

    Hi Andrejus

    I am now able to implement train-stops with icons! Also added navigation bar with over flow support. Thanks for the post! :-)

    I am now looking to implement icons on trainButtonBar. Can you please point me to any relevant posts/articles?

    -Rathnam

    ReplyDelete
  5. ADF OAF TechAugust 14, 2012 at 1:05 AM

    Hi Andrejus,

    I want to develop a train component with 2 Train stops.
    However data entry (CreateInsert) would be based on same Entity Object. I have few mandatory attributes on stop1 and few mandatory attributes on Stop2. However when I am trying to navigate from Train Stop1 to Train Stop2 it is throwing error that XX_attr must not be null which is on TRain stop2. How to overcome this error.

    Thanks,
    Jit

    ReplyDelete
  6. Andrej BaranovskijAugust 14, 2012 at 5:58 AM

    Hi,

    This is expected behavior - validation is executed. You may try to set Immediate propety to True. This would allow to skip validation errors.

    Andrejus

    ReplyDelete
  7. ADF OAF TechAugust 15, 2012 at 4:08 AM

    Hi Andrejus,

    Thanks a lot for reply. Can you tell me which component Immediate Property needs to change to true and try ?

    Appreciate your help.

    Thanks,
    Jit

    ReplyDelete
  8. UnknownDecember 10, 2014 at 3:49 PM

    Hi Andrejus,

    Thanks a lot for your interesting posts, they really are a great help in our development! We also used your post here to include custom train stop icons in our application. This works, however our customer would also want an actual train line beneath all train stop images. So the train looks more like an actual train with visual train stops, rather than some links with images next to each other. Is this possible because I couldn't get that part up and running?

    Thanks a lot in advance!
    Rob Lefebvre

    ReplyDelete
  9. RajaJanuary 5, 2016 at 7:26 PM

    Hi Andrejus

    Implemented custom train stop icons in our application as you mentioned in this article. However customer would like to have actual train line beneath between all train stop images. Could you please tell me how to achieve it.

    Regards
    Raja

    ReplyDelete
  10. Gyanendra AwasthiOctober 12, 2016 at 2:51 PM

    Hi Andrejus,


    My requirement is also quite similar with the component.but my problem is
    if there are are three tabs and if i visited the first one. it should come
    with different image and second one should come with the label and 3rd one should come with the number.

    ReplyDelete