Author Topic: Android - Creating custom controls.  (Read 733 times)

Offline Denisse

  • Administrator
  • Sr. Member
  • *****
  • Posts: 264
    • View Profile
Android - Creating custom controls.
« on: September 30, 2016, 11:40:51 PM »
HOW TO CREATE A CUSTOM CONTROL FOR ANDROID IN PLURIBASIC.

First... It is a good idea to download the latest version of PluriBASIC to make sure you are up to date with this tutorial. Also, i recommend to delete your createCustomControl.bin definition so that PluriBASIC creates a fresh new one, otherwise you may run into compile-time errors. The following is just the
explanation, because, if you download the newest version of PluriBASIC and delete your createCustomControl.bin definition, all this will come already
implemented.

Then, add the code to add the control to a dialog to your BASIC script, like this:

Code: [Select]
CONTROL ADD "DatePicker", hDlg, "date", "", 10, 10, 250, 250, %DP_SOMESTYLE
 You can use custom styles, of course you will need to implement the functionality. I will show you how.

In the createCustomControl.bin module you add a case for your control to the createCustomControl module, like this:

Code: [Select]
            case "datepicker" :
                #IMPORTS : android.widget.DatePicker
                #IMPORTS : android.view.LayoutInflater                 
                #IMPORTS : android.view.ViewGroup                 
                #STYLES  : %DP_SOMETHING = 1
                #LAYOUT  : datepick = <?xml version="1.0" encoding="utf-8"?><DatePicker xmlns:android="http://schemas.android.com/apk/res/android" android:background="#0B0B0B" android:layout_width="fill_parent" android:layout_height="fill_parent" android:calendarViewShown="false" android:datePickerMode="spinner"/>               
           
                // This is an example of how to add a control:
                LayoutInflater dpinflater = LayoutInflater.from(AppContext);
                DatePicker dp = (DatePicker)dpinflater.inflate(R.layout.datepick, null);
               
                if ((s & 1) == 1) // was %DP_SOMETHING style included?
                  {
                    // Yes, it was included, do something here.
                    dp.init(2016, 9, 30, null);
                  }
                rl.addView(dp, params);

                return dp;


 The code above, imports the android libraries that the controll will use, then defines an equate that can be used as a control style.

 Normally controls can be created programatically, but in this case, i used a layout and an inflater, this way we can define the initial styles of the control in XML code (metacommands are handled at compile-time, not at run time!).

 Then, we check if the CONTROL ADD statement contained a reference to %DP_SOMETHING, if so, then we do something. Set whatever styles you need in there.

 Then we add the datepicker to the Android's relative layout... and finally we return the created object, in this case: dp, which contains a DatePicker control.

 We can also implement funtionality for CONTROL GET TEXT, CONTROL SET TEXT and CONTROL SET COLOR.

 Since i am not very familiar with DatePicker control's color setting, i will just implement CONTROL GET TEXT and CONTROL SET TEXT.

 Since it is a Date control, i will make the CONTROL SET TEXT set the date of the DatePicker control. For this we just add this code to the switch statement in the customControlSetText module:

Code: [Select]
         case "datepicker" :
                DatePicker dp = (DatePicker) view;
               
                try
                 {               
                   String pts[] = {null};
                   pts = newtext.split("[-]", -1);                   
                   dp.updateDate(Integer.parseInt(pts[2]), (Integer.parseInt(pts[0])-1), Integer.parseInt(pts[1]));
                   return -1; // Important: return -1 on success.
                 }
                catch (Exception e)
                 {
                   return 0; 
                 }

This will set the date when we invoke CONTROL SET TEXT in the following manner:

Code: [Select]
CONTROL SET TEXT cb.hwnd, "date", DATE$
Next, in order to make CONTROL GET TEXT return the dateselected, we add the following code to the switch statement in customControlSetText module:

Code: [Select]
         case "datepicker" :
                DatePicker dp = (DatePicker) view;
                return String.valueOf(dp.getMonth()+1) + "-" + String.valueOf(dp.getDayOfMonth()) + "-" + String.valueOf(dp.getYear());

This will return the selected date when we invoke CONTROL GET TEXT in the following manner:

Code: [Select]

LOCAL sDate AS STRING

CONTROL GET TEXT cb.hwnd, "date" TO sDate

If you edited your code correcly, the following BASIC example should be compilable:

Code: [Select]
#COMPILE APK
#DIM ALL
#REPORT NONE
#ENCODE NO
#PROJECT "generic"
#VERSION AUTO
#DATABASE closed

CALLBACK FUNCTION CustomProc() AS LONG

SELECT CASE Cb.msg
    CASE %WM_CLICK
        SELECT CASE CB.CTLID
            CASE "test"
                LOCAL Buffer AS STRING
                CONTROL SET TEXT cb.hwnd, "date", date$
                CONTROL GET TEXT cb.hwnd, "date" TO Buffer               
                msgbox Buffer
        END SELECT
END SELECT

END FUNCTION


FUNCTION MAIN AS LONG

LOCAL hDlg AS LONG

DIALOG NEW 0, "Custom control", 0, 0, 0, 0, 0 TO hDlg

CONTROL ADD "DatePicker", hDlg, "date", "", 10, 10, 250, 250, %DP_SOMETHING
CONTROL ADD BUTTON,       hDlg, "test", "Test Get and Set", 10, 270, 250, 30, 0

DIALOG SHOW MODAL hDlg call CustomProc()           

END FUNCTION

And finally... here is a screenshot:



« Last Edit: January 26, 2017, 11:49:29 AM by Denisse »