In my demo, I create main component TopLevelComp, sub components ArtistComp and GunfighterComp. Both of the sub components have an image UI element. In the PersonView of main component I added 2 radio button, 1 button and 1 view container UI Element as I show you below
I bind selectedKey of both of the radio buttons to the same attribute of the context node. I set value artist and gunfighter to KeyToSelect of the radio button.
I bind the context node of PersonView to main component. I also created 2 outbound plugs: ShowArtist and ShowGunFighter.
I add the events onAction ShowPerson to button and created related handle method onActionShowPerson.
I add the Sub components to the main component as used components. I created the empty view in TopLevelCompWindow which is for View container UI element of PersonView, and embedded the sub components in the TopLevelComWindow. I bind the outbound plug showGunFighter and showArtist with these default inbound plugs of 2 sub component.
I created related Jave source code for the event handler method onActionShowPerson, I deploy and run the application.
As you see when I select the different radio button and click the button Show person, I trigger the different sub component.
Sub component can be reused in different application and it’s easy to maintain at design time, and consume the less memory at run time, it’s good for the performance. These concepts are the same for Web Dynpro ABAP and Java, the only difference is using the different language to implement the method.