Ads

Thursday, October 17, 2013

Android Module Development - Part 3

This is the follow up post from Android Module Development series. Toady I am going to continue with next topic which is Converting native control into Titanium view.
  1. Understanding methods, properties, constants and module life cycle
  2. Using event listeners and callbacks in Module
  3. Converting native control into Titanium view
  4. Accessing module and app resources
  5. Using XML layouts in modules

In Titanium module we can convert native controls into Titanium view using  setNativeView method. setNativeView sets the nativeView to view.

For example, here I am going to convert Android native RatingBar extension to titanium view. Add below code in your ExampleProxy.java file

RatingBar rb;

private class ExampleView extends TiUIView {
 public ExampleView(TiViewProxy proxy) {
  super(proxy);

  // layoutParams for holder view
  LayoutParams lp = new LayoutParams(LayoutParams.WRAP_CONTENT,
    LayoutParams.WRAP_CONTENT);
  // holder view
  LinearLayout holder = new LinearLayout(proxy.getActivity());
  holder.setLayoutParams(lp);

  // ratingbar widget
  rb = new RatingBar(proxy.getActivity());
  rb.setNumStars(5);
  rb.setStepSize(1);
  rb.setRating(2);

  // adding ratingbar to holder view
  holder.addView(rb);
  // setNativeView sets the nativeView to ratingbar view
  setNativeView(holder);
 }

 @Override
 public void processProperties(KrollDict d) {
  super.processProperties(d);
 }
}
In Javascript
var demo2 = require('titutorial.demo2');

var proxy = demo2.createExample({
 height : '65dp',
 top: '50dp',
 backgroundColor:'orange'
});
win.add(proxy);

Here createExample method will accept following properties height, width, left, top and bottom. Similar to RatingBar extension, we can also convert other native controls into titanium view using setNativeView method.

Output Screen:
Module Output Screen

Source Code:
You can download entire module source code here https://github.com/TiTutorial/demo-android-module-2  

Continue with part 4

No comments:

Post a Comment