Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Flexible UI component development demystified

thilo_brandt
Employee
Employee
‎02-08-2007 5:07 AM
0 Kudos

A set of useful UI components bundled together.


Since months I was ask more and more often about how to get started with Flexible UI component development in the SAP NetWeaver Developer Studio. Since there are no wizards or plugins for Flexible UI components available, developers often struggle with the project setup and the required XML configuration file. I have put together a sample SAP NetWeaver Developer Studio project, including the most requested UI components I was faced the last few months. Beside the java soruce code, also the XML file configuration is plugged in.

Components in details...


You will find the following components in the sample ZIP archive:

  1. Layout Controller: The sample implements a simple layout plus an own neutral control, which is required to place the sub-elements (ResourceRenderer and CollectionRenderer) in the corresponding area.

  2. Collection Renderer: This sample renders just some resource information in a grid layout.

  3. Resource Renderer: This sample renders the display name propertiy in a grid layout

  4. Property Renderer: This sample renders the VersionHistrory size in a property

  5. External UI Command: This sample renders a UI command which launches an ecternet URL.

  6. Screenflow Command: This sample renders a action on a resource with a confirmation dialogue and event handling.


The configuration is stored in the src.config path in the PAR file. You will find a single configurable instance file (*.co.xml) for each component.

I want develop my own component – and now ?


Of course you simply can copy the whole project and rename the relevant folder and files on the file system. Import the renamed project to SAP NetWeaver Developer Studio.

  1. Rename the folder of the project in the filesystem

  2. Rename the project name in the .project file if you want to import it in parallel to the sample project.

  3. Adjust the project variable KMC_LIBS and possibly others you have set.

  4. Make sure you have the latest KMC library in the path of the variable KMC_LIBS

  5. Adjust the java package structure

  6. Remove all UI component samples you do not want to use

  7. Remove all configuration files of the deleted components

  8. Adjust the XML files for the new package structure

  9. Adjust the application key in IRFServiceWrapper interface

  10. Adjust ca.name and cma.name property in configArchive.properties


So far it should work, to have the project ready for compilation and build. At the end I should not miss to mention, where the download of the sample is stored: Of course in the SDN !! Download Flexible UI components samples...

Additional information


Further information on Flexible UI development can be found in the following code samples:

Also keep in mind the checklist we offer on http://help.sap.com and the information in the SAP NetWeaver Developer Guide. Have a good luck with the samples and let me know, if you are looking for additional information...

6 Comments
Labels in this area
Popular Blog Posts