Tag Archives: events

Adding click events to a ListView in Android with Xamarin

This tutorial explains how to add click events to items on a list using an Android ListView in Xamarin. In this example, we have a list containing cities in Australia which was made in the previous tutorial. When individual list items are clicked/touched you can have a click event which might take the user to another screen or change the value of a variable, for example.

lv1

Step 1

Open the MainActivity.cs code from the previous tutorial (Creating a Simple ListView in Android with Xamarin) and after the myListView.Adapter = adapter; line start typing in myListView.ItemClick+= and press the spacebar. You will see a list of items to select. Double-click on the MyListView_ItemClick to create a new method of this name.

lvc1
Click the image for a larger version.

You will now have a new method called MyListView_ItemClick. This method will be called when any item on the list is clicked.

Click the image for a larger version.
Click the image for a larger version.

Step 2

Now add an if statement to check which item on the list was clicked/touched. For example, we could check if the ‘Sydney’ list item was clicked or touched. If it was, we can the run the appropriate code for that item. For example, we could take the user to another screen with information about Sydney.

Here is an example. You can just add if statements for each item if it is a small list. If it is a large list, you might like to find a more efficient way of doing it.

if (myListItems [e.Position] == "Sydney") {
                //  code to run when list item clicked goes here
            }

The code that you need to add is highlighted below.

lvc3
Click the image for a larger version.

And that’s it! Now go and try it yourself.

Keyboard events in JavaScript

In earlier JavaScript tutorials we looked at using onclick and onmouseover events to call a function when a user clicked or rolled their mouse over a button, and also the onload event to start an animation when a page had loaded. We can also use keyboard events such as when a key has been pressed on the keyboard.

Watch the video below which demonstrates how to use keyboard events, and then scroll down to see the sample code.

There are three different types of keyboard events we are using:

  • keydown
  • keypress
  • keyup

A keydown event is triggered when a button on the keyboard has been pressed down. A keyup event is triggered when a button that has been pressed on the keyboard is released. These events use keycodes to represent the many letters, numbers and other keys available. A keycode is returned to the program when a button has been pressed. You can find a list of keycodes here.

A keypress event is only triggered when you click on a key that represents a character such as a letter or number. A keypress event will tell the program what character the key represents, while the keydown and keyup events only tell the program what key has been pressed or released.

Keydown and keyup events will not tell the program if a letter key that was pressed is uppercase or lowercase. However, if you use the keypress event, then a program could detect when the Shift button and a character key were pressed to make an uppercase letter or another character (eg. Shift + p = P key, and Shift + 5 = % key).

The keydown and keyup events only trigger once when a key is pressed. Another thing to note is that keycodes return a number which represents a key pressed, and they work with keydown and keyup events, while ASCII codes return an ASCII code and work with keypress events. This link shows both the keycodes and ASCII codes that represent different keys.

The code below shows how to use a keydown event and a keycode of 65 to detect when the ‘a’ letter key is pressed on the keyboard. If the ‘a’ key is pressed, then an alert message is displayed.

<html>
 
<head>
<title>Key press events</title>
<script>
 
window.addEventListener("keydown", checkKeyPress, false);
// The parameters of the event listener are event, function to run, useCapture (optional).
// This event listener runs checkKeyPress function when a key is pressed down
// You can use keydown or keyup to check what key has been pressed or released
 
 
// this function checks to see if the letter 'a' key has been pressed
function checkKeyPress(key) {
 if (key.keyCode == "65") {
 alert("The 'a' letter key has been pressed.");
 // 65 is the keycode that is returned when the 'a' letter key is pressed
 // if you use keypress event instead of keydown/up then you must use ASCII code instead of keycode
 }
}
 
</script>
</head>
 
<body>
 <p>Press the 'a' key to see the alert message<p>
</body>
 
</html>

Try it yourself

Try the above code and then use the keyup event instead to see what happens. Change the keycode in the ‘if’ statement to test other key presses, and then try using the keypress event with ASCII codes. Also try using canvas.addEventListener in a canvas instead of window.AddEventListener.

Hints

As an example, the letter ‘a‘ key is represented by the keycode of 65 using a keydown or keyup event and does not distinguish between upper and lowercase. If you use a keypress event, then you will need to use the ASCII code of 65 to check for uppercase A and 97 for lowercase a. For more information about the different keyboard events and how key codes work, click here. Note that some keys are not compatible with keyboard events in certain browsers. You can check out compatibility of browsers here.

A note about the addEventListener method

The useCapture parameter in the addEventListener method is optional. If used, it must be a boolean value. The boolean value will specify whether the event being used should be executed during the bubbling or capturing phase. A boolean value of true  means the event handler is executed during the capturing phase, while false (default option) means that the event handler is executed during the bubbling phase. To find out more about bubbling and capturing, click here.

Events

This sample code snippet shows how to work with events (eg. onclick and onmouseover). It also shows how to use those annoying alert messages…but please, only use them for good! You will also be introduced to HTML form elements such as buttons.

Make sure you also check out the video here which explains how to use some of the other event types.

<!DOCTYPE html>
<html lang="en"
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Events</title>
 <script type="text/javascript">
 
 // alert("Welcome to my web page"); would bring up an alert whenever the page loads
 // However, we will use a click event to load an alert message instead, and this will be in the body section of the html page
 
 </script>
 
</head>
<body>
 <form>
 <input type="button" value="click me" onclick="alert('You clicked me');"/>
 <input type="button" value="hover me" onmouseover="alert('You hovered over me');"/>
 
 </form>
 
 
</body>
</html>

JavaScript and HTML Events

This video tutorial explains how to use buttons use buttons and events such as clicking on a button or moving the mouse over or away from a button. Click here to watch the video on YouTube or view it below.

This sample code snippet shows how to work with events (eg. onclick and onmouseover). It also shows how to use those annoying alert messages…but please, only use them for good! You will also be introduced to HTML form elements such as buttons, mentioned in the video above.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8"/>
 <title>JavaScript - Events</title>
 <script type="text/javascript">
 
 // alert("Welcome to my web page"); would bring up an alert whenever the page loads
 // However, we will use a click event to load an alert message instead, and this will be in the body section of the html page
 
 </script>
 
</head>
<body>
 <form>
 <input type="button" value="click me" onclick="alert('You clicked me');"/>
 <input type="button" value="hover me" onmouseover="alert('You hovered over me');"/>
 
 </form>
 
 
</body>
</html>

JavaScript can also use an event listener to ‘listen’ for other events such as the page loading, a user scrolling down the page or the user pressing a keyboard or mouse button.

Next tutorial: Functions