Steps to create a custom UI control in mobile 7.1 ?

[Former Member]

I'm trying to create a "Signature pad" UI control in mobile 7.1. Where to start with for creating a custom UI control in netweaver mobile 7.1 ?

Referred this blog on creating custom control: [https://www.sdn.sap.com/irj/scn/weblogs?blog=/pub/wlg/10185] [original link is broken] [original link is broken] [original link is broken]; But as i'm new to netweaver stuff i find it hard to follow that one.

Any help on this is appreciated.

Thanks.

[former_member206242]

Hi,

In addition please check this blog on signature control used in SAP NW Mobile client 7.1. It should be helpful.

https://www.sdn.sap.com/irj/scn/wiki?path=/display/community/using%2bsignature%2bcapture%2beswt%2bco...

Regards,

Nipun

[Former Member]

Hi Arvind

I could not get your requirement completely. Why do you want to build a custom control?

Ok...If you want to build, try to first build an SWT control in NWDS which matches your requirements.

That will be the first step of your custom control building....

Regards

Vidyadhar

[Former Member]

Hi Vidyadhar,

Thanks for the post. The UI controls available for mobile application development(occasionally connected scenario, mobile netweaver 7.1) are very few, which fullfills only the basic needs.

For ex, the table ui control that is available for mobile always displays an option button in every row,i don't need that option button, there is no property bound to it to disable that option button hence i thought of creating a customized table control which could fullfill my needs. I've many other similar requirements and so finally decided to go for custom UI control.

Creating a SWT and eSWT custom control follows the same prodcedure? And how to use that custom control inside the mobile 7.1 application?

Thanks & Regards,

Arvind

[Former Member]

Hi Arvind

Lakshmi gave the overall view of creating and integrating a custom control in your application. There is a small workaround to add a custon java DC to your application. You should add it as a dependency to Application component and then add this to UI component by editing the MCD.

eSWT is just a subset of SWT, so if you build a control and test it using eSWT, half the job is done.

Next is integrating it with the framework so that you can use it in your application. The custom control you developed will be displayed using the interactive form control. In Webdynpro perspective this interactive form is used for displaying Adobe forms, but in mobile applications it is used to display custom control.

Regards

Vidyadhar

[Former Member]

Vidyadhar,

I have created a custom control DC and added added as dependency to a Application component("testapp").Created a new UI component("test_ui) and added "testapp" as depedency in Dev. Infra. view. when i add the "testapp" as depedency to "test_ui" MCD file(<dependency><dependency_name>testapp</dependency_name><dependency_version>1.0</dependency_version></dependency>) , build fails(COMPONENT NOT FOUND) with the following error:(from build.log)

Dependencies in mcd.xml:
		MCD name: testapp MCD version: 1.0

Comparing data in MCD and DPI files.
Error: com.sap.tc.mobile.dt.oca.bp.exception.OCABuildPluginException: Validation of MCD file failed. Component 'testapp' version '1.0' not found.  Please check version of used components.
	at com.sap.tc.mobile.dt.oca.bp.impl.cfs.provider.MCDDescription.checkDependencies(MCDDescription.java:139)
	at com.sap.tc.mobile.dt.oca.bp.impl.cfs.provider.CFSDataContextProvider.checkMCDDependencies(CFSDataContextProvider.java:156)
	at com.sap.tc.mobile.dt.oca.bp.impl.cfs.provider.CFSDataContextProvider.execute(CFSDataContextProvider.java:126)
	at com.sap.tc.buildplugin.PrepareContextBuildStep.prepareTechnologySpecificData(PrepareContextBuildStep.java:186)
	. . . . .. . .
               
                . . . . . . .
                at org.eclipse.core.internal.resources.Workspace.run(Workspace.java:1779)
	at com.sap.ide.dii05.util.internal.job.InternalJdiJob$3.run(InternalJdiJob.java:233)
	at com.sap.ide.dii05.util.internal.job.BusyBackgroundIndicator.showWhile(BusyBackgroundIndicator.java:74)
	at com.sap.ide.dii05.util.internal.job.InternalJdiJob.internalRun(InternalJdiJob.java:214)
	at com.sap.ide.dii05.util.internal.job.InternalDiiJob.run(InternalDiiJob.java:275)
	at org.eclipse.core.internal.jobs.Worker.run(Worker.java:55)
Error: Build stopped due to an error: Validation of MCD file failed. Component 'testapp' version '1.0' not found.  Please check version of used components.
Error: Build stopped due to an error: Validation of MCD file failed. Component 'testapp' version '1.0' not found.  Please check version of used components.

Also, when i add "interactive form" to the view, the properties bounded to interactive form control are for configuring adobe forms. Can i ignore those properties which are not related to my custom control , for which i'll be setting the properties in the code?

Thanks & Regards,

Arvind

[Former Member]

Hi Arvind

I think you may have added at the wrong place in MCD. You can ignore the properties of interactive form control for now.

Thanks and Regards

Vidyadhar

[Former Member]

Here is the MCD file::

<?xml version="1.0" encoding="utf-8" ?>
 <mobile_component>
  <mcd_name>test_ui</mcd_name>
  <mcd_version>1.0</mcd_version>
  <mcd_create_date>20090525</mcd_create_date>
  <mcd_create_time>204757</mcd_create_time>
  <mcd_created_by>sap.com</mcd_created_by>
  <mcd_properties>
	<property>
		<property_type>CLIENT_BUILDNUMBER</property_type>
		<property_value></property_value>
	</property>
	<property>
		<property_type>HOMEPAGE_VISIBLE</property_type>
		<property_value>X</property_value>
	</property>
	<property>
		<property_type>OS</property_type>
		<property_value></property_value>
	</property>
	<property>
		<property_type>PROCESSOR</property_type>
		<property_value></property_value>
	</property>
	<property>
		<property_type>TYPE</property_type>
		<property_value>APPLICATION</property_value>
	</property>
	<property>
		<property_type>RUNTIME</property_type>
		<property_value>WDLITE</property_value>
	</property>
	<property>
		<property_type>COMPONENT_FILE</property_type>
		<property_value>demo.sap.com~test_ui~implementation.sda</property_value>
	</property>
	<property>
		<property_type>VERSION</property_type>
		<property_value>1.0</property_value>
	</property>
  </mcd_properties>
  <authorization_dependencies>
	 <dependency />
  </authorization_dependencies>
	<mcd_dependencies>
<!--@@begin generation mcd_dependencies (do not edit)-->		   
                               <dependency>
			<dependency_name>testapp</dependency_name>
			<dependency_version>1.0</dependency_version>
		</dependency>
<!--@@end generation mcd_dependencies-->
	</mcd_dependencies>
<!--@@begin generation mbo_dependencies (do not edit)-->
<!--@@end generation  mbo_dependencies-->
 </mobile_component>

Thanks & Regards,

Arvind

[Former Member]

Hi Arvind

Add this after <mcd_dependencies> and before <!@@begin generation mcd_dependencies (do not edit)>

<mcd_dependencies>

<dependency>

<dependency_name>testapp</dependency_name>

<dependency_version>1.0</dependency_version>

</dependency>

<!@@begin generation mcd_dependencies (do not edit)>

<!@@end generation mcd_dependencies>

</mcd_dependencies>

Now build the component.

Regards

Vidyadhar

[Former Member]

Hi Vidyadhar,

That helped me to remove that error and finally i was able to build and deploy.But when i try to run it, the application fails to launch in the client due to class not found error.

Caused by: java.lang.ClassNotFoundException: test.SampleFlatButtonCustomWidgetFactory 
	at java.net.URLClassLoader$1.run(URLClassLoader.java:200)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.net.URLClassLoader.findClass(URLClassLoader.java:188)
	at java.lang.ClassLoader.loadClass(ClassLoader.java:306)
	at java.lang.ClassLoader.loadClass(ClassLoader.java:251)
	at com.sap.tc.mobile.wdlite.customcontrols.detector.CustomControlsPropertiesLoader.loadAndRegisterCustomControlFactory(CustomControlsPropertiesLoader.java:203)
	... 36 more

"SampleFlatButtonCustomWidgetFactory" is the name of the IUIElementFactory class. I could see the class files available inside "testapp" application in the "MobileApps" folder(this confirms the class files are been deployed to the client)

Regards,

Arvind

[Former Member]

Hi Arvind

Did you add the custom control properties file to the UI component?

Regards

Vidyadhar

[Former Member]

Actually I was not able to add that file in Mobile perpective , so tried adding that file to "src" under java perspective. But the file was not deployed to the client. I was getting "Unknown UI Element type: -1" error. So i manually added the file to deployed application folder(MobileApps\test_ui). Now the previous error has gone and it throws "class not found" error .

Here is the content of the custom_controls.properties file

Wdlite-custom-control-factory-class-1=test.SampleFlatButtonCustomWidgetFactory
Wdlite-custom-control-factory-ids-1=FlatButton

Thanks & Regards,

Arvind

[Former Member]

Hi Arvind

Add the custom control properties file under src/packages folder of ui component in java perspective.

Regards

Vidyadhar

[Former Member]

Looks like the path mentioned "test.SampleFlatButtonCustomWidgetFactory" is wrong.

Path can be found in java perspective of your customcontroldc.(where this file is present in the folder structure something like..com.sap.test.......)

Regards,

Lakshmi

[Former Member]

Well, this solved the problem of manually adding the properties file to the deployed application. But class not found error is still present.

Thanks & Regards,

Arvind

[Former Member]

Hi Arvind

Is the id FlatButton same as the id you had given for interactive form property id? and as lakshmi said it could be the path problem.

Regards

Vidyadhar

[Former Member]

Lakshmi,

I created a package called "test" and test package has the class "SampleFlatButtonCustomWidgetFactory"(this is the folder structure in java perspective). Even in the deployed application folder(MobileApps\testapp,which is the wrapper application for the custom control) there is folder "test" inside which the class "SampleFlatButtonCustomWidgetFactory" is available.

I doubt there is some problem in setting depedency with the UI component and application(which wraps the custom control).

To mention, i have added an empty INFRASTUCTURE type public part to the application(which wraps the custom control).

Thanks & Regards,

Arvind

[Former Member]

Yes, the ID's are same. But I guess this can't be a problem because i get the class not found error even when i tried without adding a interactive form to the view. The UI component is not recognizing the class path since it's in another application component(even after manually adding dependency in the MDC file).

And to mention, I don't find any respective MDC files inside the deployed application(which wraps the custom control).But i find the respective MDC file inside main application with the manualy added depency in it.

Thanks & Regards,

Arvind

[Former Member]

Add the dependecny of type "ASSEMBLY" while adding a public part.

where is ur test folder : under..."com.sap..." ?then u need to mention the whole path

Regards,

Lakshmi

[Former Member]

Hi Lakshmi,

Thanks for ur help. Somehow i tried and fixed all the problems by trial and error and finally developed my first custom control

Regards,

Bala

[Former Member]

Could you please share your signature pad UI Control..& Custom Control DC's with us too.

Regards,

Lakshmi

[Former Member]

Hello Arvind ,

What exactly you mean by signature pad here?

I understood that you want many custom controls in your view.

For this , to start off , you need to create one custom control dc first.

And then you can re use the same for any number of custom controls in the view.

Steps will be :

1) Take a fresh IDE with new workspace

2) Create a new DC (for custom control) of type JAVA .The lik which you gave also speaks about this only

3) Create an application component , bind it with custom control dc.

4) Create a ui component and go ahead with your design of view. Rest all will be the same as simple oca application creation.

For elobarate steps on step-2 (custom control DC creation ), there is a very good document with screen shots which explains everything in detail.

I am not sure if the document is released, will just check that out and provide you the link.

Regards,

Lakshmi

Edited by: Lakshmi Reddi on May 25, 2009 12:22 PM

[Former Member]

Hi Lakshmi,

Thanks for the post. I'm very clear with step 1,2, & 4. Can u elaborate step 3.

I've created a custom control DC.Created a new "Mobile Application" & a "Mobile UI component".When i tried to add dependecy for the created custom control DC in the Mobile UI component , the DC is not listed in the "add dependency" dialog. Am i doing it in the right way?

And one more thing, i can see the "interactive form" in the "integration" folder in "Insert child" dialog(in views) but its under "adobe" library. Is this the one which has been mentioned in the link which i have provided in my first post?

Thanks & Regards,

Arvind