THE ONE OF IoT,YOUR ONLY CHOICE!
List and List item
 

Lite and List item


Infairy platform define different layout object to let users interactive with bundle by graphic usere interface, each bundle can be put into many layout tag, each layout tag can design many layout object.

This chapter will show you how to ceate the layout List object:
First, you have to import Layout class:
      import com.infairy.cocina.SDK.Layout.Layout;
      import com.infairy.cocina.SDK.Layout.LayoutList;
      import com.infairy.cocina.SDK.Layout.LayoutListItem;
      
Then, get Layout service
        Layout layout=(Layout)Tools.getService(context, Layout.class.getName(), "(FUNCTION=LAYOUT)");
      
Next, create layout tag and get LayoutID for other layout object used purpose:
            LayoutTag ltag=new LayoutTag();

            ltag.backgroundImage="img/background.png";
            ltag.bundleID=BundleID;
            ltag.LayoutHeight=450;
            ltag.LayoutWidth=800;
            ltag.title="My App";
            /*
             * Create layout tag and get layout id for other layout object use
             */
            LayoutID=layout.createUI(this, ltag);
      
We have to prepare the List item:

            LayoutListItem[] LI=new LayoutListItem[3];
              LI[0]=layout.getLayoutListItem(); 
              LI[0].Alias="Name1";
              LI[0].ImageHeight=10;
              LI[0].ImageWidth=10;
              LI[0].Value="John"; 
              LI[0].Index="28"; 
              LI[0].ImageSource="Man";

              LI[1]=layout.getLayoutListItem(); 
              LI[1].Alias="Name2";
              LI[1].ImageHeight=10;
              LI[1].ImageWidth=10;
              LI[1].Value="Bill";
              LI[1].Index="28";  
              LI[1].ImageSource="Man";

              LI[2]=layout.getLayoutListItem(); 
              LI[2].Alias="Name3";
              LI[2].ImageHeight=10;
              LI[2].ImageWidth=10;
              LI[2].Value="Mary"; 
              LI[2].Index="22"; 
              LI[2].ImageSource="Woman";


      
Create List layout object:
          LayoutList ll=new LayoutList();
          ll.LayoutID=LayoutID;
          ll.left=356;
          ll.top=42;
          ll.width=421;
          ll.height=400;
          ll.fontSize=15;
          ll.fontColor="#ffffff";
          ll.gauge=1;
          ll.listItem=LI;  //List Item array
          layout.createUI(this, ll);
      
Please note that, each list item have different value and index, these two properties can be distingruish which icon was clicked.
          ll.key=device.DEVICE_OPERATION_USER_DEFINED_0;
      
"DEVICE_OPERATION_USER_DEFINED_0" is defined by com.infairy.cocina.SDK.device.DevicePool#DEVICE_OPERATION_xxx
then defined the Operation object( refer to Operation):
        public class myFirstBundle implements BundleActivator, Runnable{
            ...
           
           /*
            * Bundle ID
            */
           String BundleID="";
           
           /*
            * Layout ID
            */
           String LayoutID="";
           
           Thread me;

           /*
            * Layout object 
            */
           Layout layout;
           
          /*
           * entry point
           */
          public void start(BundleContext context) throws Exception {
              ...
              /*
               * get layout service
               */
              layout=(Layout)Tools.getService(context, Layout.class.getName(), "(FUNCTION=LAYOUT)");

              .....

              /*
               * define operation for layout key mapping
               */
              Vector Operation=new Vector();
              OperationDNA oobj=new OperationDNA();
              
              //when user click the image layout object, this operation object will trigger to run the Funtoin:Go()
              oobj.KEY=device.DEVICE_OPERATION_USER_DEFINED_0;   
              oobj.Function="Go";
              Operation.addElement(oobj);
              
              dict.put(InfairyInterface.DeviceOperation, Operation);

              ...
              
              BundleID=device.addDevice(this, dict);
            
You have also implemnt Go() function to catch up the action.
Because of the Gridview have two properties was assigned, value & index, so you Go() fucntion also have to implement two parameter:
              public void Go(String value, String index){
                ....
              }
            
The parameter "value" is mapping to the gridview item's value property and the parameter "index" is mapping to the gridview item's idnex property.

The List layout object properties show as below:
          /**
           * layout id of bundle
           */
          public String LayoutID="";
          /**
           * Layout key defined, please refer to {@link com.infairy.cocina.SDK.device.DevicePool#DEVICE_OPERATION_DIMMER}, {@link com.infairy.cocina.SDK.device.DevicePool#DEVICE_OPERATION_xxx}...
           */
          public String key="";
          /**
           * layout width in pixel, default is 10
           */
          public int width=10;
          /**
           * layout height in pixel, default is 10
           */
          public int height=10;
          /**
           * layout axis of left, default is 0
           */
          public int left=0;
          /**
           * layout axis of top, default is 0
           */
          public int top=0;
          /**
           * list item array
           */
          public LayoutListItem[] listItem=null;
          /**
           * font color
           */
          public String fontColor="";
          /**
           * font size, default is 10
           */
          public int fontSize=10;
          /**
           * background color
           */
          public String backgroundColor="";
          /**
           * selected index, default is -1
           */
          public int selectedIndex=-1;
          /**
           * selected color
           */
          public String selectedColor="";
          /**
           * item gauge in pixel, default is 5
           */
          public int gauge=5; //default is 5
          
          /**
           * the list item are the bundle or not, default is false
           */
          public boolean isBundle=false; //設定裡面是不是放Bundle
          /**
           * visibility, default is true
           */
          public boolean visible=true;
      
The Gridview item properties show as below:
        public String Alias="";
        public String ImageSource="";
        public String Value="";
        public String BackgroundColor="";
        public int ImageWidth=0, ImageHeight=0;
        public String LineColor="#ffffff";
        public int LineWidth=0;
        public String Index="";