Bizzyness.net

Xamarin Android PinView

I was wondering how to set up a custom iOS like pinview component, to enable users to login using a pin code. while i know the solution i came up with is not the most flexible, it does seem to doe its job well.

First i created a layout to show 5 input boxes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:id="@+id/RootViewTrackList"
   android:background="@drawable/bg_grad"
   android:layout_height="match_parent"
   android:orientation="vertical">
    <TextView
       android:id="@+id/titleBox"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_alignParentTop="true"
       android:text="Enter PIN"
       android:gravity="center"
       android:textColor="#000"
       android:textSize="30sp"
       android:padding="10dip" />
    <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_centerVertical="true"
       android:orientation="vertical">
        <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:orientation="horizontal">
            <TextView
               android:id="@+id/pinBox0"
               android:inputType="numberPassword"
               android:password="true"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:text="8"
               android:layout_margin="5dip"
               android:textSize="40sp"
               android:textColor="@android:color/background_dark"
               android:gravity="center"
               android:background="@android:drawable/editbox_background"
               android:maxLength="1"
               android:numeric="integer"
               android:editable="true"
               android:enabled="true" />
            <TextView
               android:id="@+id/pinBox1"
               android:inputType="numberPassword"
               android:password="true"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:text="8"
               android:layout_margin="5dip"
               android:textSize="40sp"
               android:textColor="@android:color/background_dark"
               android:gravity="center"
               android:background="@android:drawable/editbox_background"
               android:maxLength="1"
               android:numeric="integer"
               android:editable="true"
               android:enabled="true" />
            <TextView
               android:id="@+id/pinBox2"
               android:inputType="numberPassword"
               android:password="true"
               android:text="8"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:layout_margin="5dip"
               android:textSize="40sp"
               android:textColor="@android:color/background_dark"
               android:gravity="center"
               android:background="@android:drawable/editbox_background"
               android:maxLength="1"
               android:numeric="integer"
               android:editable="true"
               android:enabled="true" />
            <TextView
               android:id="@+id/pinBox3"
               android:inputType="numberPassword"
               android:password="true"
               android:text="8"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:layout_margin="5dip"
               android:textSize="40sp"
               android:textColor="@android:color/background_dark"
               android:gravity="center"
               android:background="@android:drawable/editbox_background"
               android:maxLength="1"
               android:numeric="integer"
               android:editable="true"
               android:enabled="true" />
            <TextView
               android:id="@+id/pinBox4"
               android:inputType="numberPassword"
               android:password="true"
               android:layout_width="50dip"
               android:layout_height="50dip"
               android:text="8"
               android:layout_margin="5dip"
               android:textSize="40sp"
               android:textColor="@android:color/background_dark"
               android:gravity="center"
               android:background="@android:drawable/editbox_background"
               android:maxLength="1"
               android:numeric="integer"
               android:editable="true"
               android:enabled="true" />
        </LinearLayout>
        <TextView
           android:id="@+id/statusMessage"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:text=""
           android:gravity="center"
           android:textColor="#ff0000"
           android:textSize="20sp"
           android:padding="5dip" />
    </LinearLayout>
</LinearLayout>

in my activity it a simple matter of getting the views, reading their contents and change the focus to the appropriate view when needed:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
[Activity (Label = "pinviewActivity")]
    public class pinviewActivity : Activity
    {
        string userEntered;
        string userPin="88888";

        const int PIN_LENGTH = 5;
        Context appContext;

        TextView pinBox0;
        TextView pinBox1;
        TextView pinBox2;
        TextView pinBox3;
        TextView pinBox4;

        TextView [] pinBoxArray;

        TextView statusView;

        protected override void OnCreate (Bundle bundle)
        {
            base.OnCreate (bundle);
            SetContentView(Resource.Layout.passcode);
            appContext = this;
            userEntered = "";

            pinBox0 = (TextView)FindViewById(Resource.Id.pinBox0);
            pinBox1 = (TextView)FindViewById(Resource.Id.pinBox1);
            pinBox2 = (TextView)FindViewById(Resource.Id.pinBox2);
            pinBox3 = (TextView)FindViewById(Resource.Id.pinBox3);
            pinBox4 = (TextView)FindViewById(Resource.Id.pinBox4);

            statusView = (TextView) FindViewById(Resource.Id.statusMessage);

            pinBoxArray = new TextView[PIN_LENGTH];
            pinBoxArray[0] = pinBox0;
            pinBoxArray[1] = pinBox1;
            pinBoxArray[2] = pinBox2;
            pinBoxArray[3] = pinBox3;
            pinBoxArray[4] = pinBox4;

            pinBox0.FocusableInTouchMode = true;
            pinBox1.FocusableInTouchMode = true;
            pinBox2.FocusableInTouchMode = true;
            pinBox3.FocusableInTouchMode = true;
            pinBox4.FocusableInTouchMode = true;

            pinBox0.RequestFocusFromTouch ();
            int i = 0;
            foreach (TextView t in pinBoxArray) {
                t.AfterTextChanged += delegate(object sender, Android.Text.AfterTextChangedEventArgs e) {
                    // read the input values and construct the entire
                    userEntered = "";
                    foreach (TextView tr in pinBoxArray) {
                        userEntered = userEntered+tr.Text;
                    }
                    Log.Info ("PinView", userEntered);
                    i++;
                    if(pinBoxArray.Length > i){
                        pinBoxArray[i].RequestFocusFromTouch();
                    }
                };

            }
            pinBox4.AfterTextChanged += delegate(object sender, Android.Text.AfterTextChangedEventArgs e) {
                if (userEntered.Length == PIN_LENGTH) {
                    //Check if entered PIN is correct
                    if (userEntered.Equals (userPin)) {
                        statusView.SetTextColor (Android.Graphics.Color.Green);
                        statusView.Text = "Correct";
                    } else {
                        statusView.SetTextColor (Android.Graphics.Color.Red);
                        statusView.Text = "Wrong PIN. Keypad Locked";
                        Log.Info ("PinView", "Wrong PIN");
                    }
                }
            };
        }
    }

PHP/MySQL Prepared statements

Since a lot of developers of PHP/MySQL based application are not familiar with prepared statements I decided to dedicate my first post to this subject.

For those of you who are still using the good ol’ php mysql extension, please read the following. Even the php developer discourage the use of the functions.

A prepared statement is basically the definition of a database query in template form, which is send (and prepared) to the database server before execution. When executed parameters can be bound to the query to have variables in the query.

In this post i will be showing some examples of how to use the php PDO-mysql extension on how to use prepared statements

Before i jump to some code samples, i hear some of you thinking “why the f%$* would i use those”.
Well the answer to that is pretty simple; the main reason to use prepared statements is safety, because it eliminates the risk of SQL injection in your page. A second advantage is speed, overall one can state that the execution of a prepared statement is generally faster than ‘regular’ queries, since it eliminates the overhead of sending the query text to the database server, and the database server parsing the query. (this is done once when the statement is prepared, after which it will be cached on the server).

In the following example i will show the way a prepared statement can be used to execute an update statements:

First we create a new instance of the PDO object and create a new connection to the database:

1
2
3
4
5
6
7
8
$dsn = sprintf('mysql:dbname=%s;host=%s', $cfg['db']['database'], $cfg['db']['hostname']);
try {
    $conn = new PDO($dsn, $cfg['db']['username'], $cfg['db']['password']);
    $conn->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_OBJ);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    throw $e;
}

first we define and prepare the query:

1
2
$uSQL= 'UPDATE `schedule` SET done = :done, response = :response, timestamp = :timestamp WHERE id = :id';
$update = $conn->prepare($usql, array(PDO::ATTR_CURSOR => PDO::CURSOR_FWDONLY));

Then, later in the script (wherever you want to execute the statement), you can bind the variables to the query and execute it:

1
2
3
4
5
$update->bindParam(':response', $response, PDO::PARAM_STR);
$update->bindParam(':id', $row->id, PDO::PARAM_INT);
$update->bindValue(':done', 1, PDO::PARAM_INT);
$update->bindValue(':timestamp', date('Y-m-d H:i:s'), PDO::PARAM_INT);
$update->execute();

Besides having, in my humble opinion, cleaner code, the $update statement can be used several times per request and only has to be prepared once.

 

Baby steps

Taking my first steps in the blog-o-sphere.

I currently have no idea yet what i will be writing about, but you can expect me to share my findings in the programming world.