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:


10 comments:

Frank Nimphius said...

Nice addition!

rathnam said...

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

Andrejus Baranovskis said...

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

rathnam said...

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

Sagar ADF OAF said...

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

Andrejus Baranovskis said...

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

Sagar ADF OAF said...

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

Rob Lefebvre said...

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

Raja said...

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

Gyan Awasthi said...

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.