×
Namespaces

Variants
Actions
Revision as of 17:56, 1 June 2013 by pavan.pareta (Talk | contribs)

Interactive buttons with onfocus event

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to highlight buttons when they are pressed. It uses onfocs and onblur events.

Article Metadata
Tested with
SDK: Web Developer Toolkit 3.0 Beta
Devices(s): Nokia Asha 311, Nokia Asha 303
Compatibility
Platform(s): Series40 Touch&Type, Series40 FullTouch
Series 40
Series 40 DP 2.0
Series 40 DP 1.1
Article
Created: internetlabor (31 May 2013)
Last edited: pavan.pareta (01 Jun 2013)

Contents

Introduction

We want to instant feedback when the user presses a button. This makes our web app feels more responsive.

Problem

In normal web pages, we can use css-pseudo-classes ":hover" or ":active". But the css-pseudo-classes are not working in the current web app broswer.

Solution

We let the button-element handle the focus and blur events.

Asha-webapps-button-onfocus-onblur.png

Because we want instant feedback without a server roundtrip, we can use only the mwl-functions. We can use the mwl.switchclass() function to give the button a different css class. In the css class we can define a different background-color or a different backgroud-image.

<button id ="btnN" class="ui-button unpressed" name="buttonN" 
onfocus="mwl.switchClass('#btnN', 'unpressed', 'pressed');"
onblur="mwl.switchClass('#btnN', 'pressed', 'unpressed');"
onclick="doMyAction();">A Button-Element #btn2</button>

In the css file we need to define pressed and unpressed style in addition to the normal button style:

.unpressed {
background-image: url(../images/button_background.png);
background-repeat: repeat;
background-position: left top;
}
.pressed {
background-image: url(../images/buttonpr_background.png);
background-repeat: repeat;
background-position: left top;
}
.ui-button {
height: 35px;
padding-right: 8px;
padding-left: 8px;
color: #FFF;
text-decoration: none;
margin: 5px;
}

Caveats

This works differently in emulators and on devices. On a FullTouch and Touch&Type device, it works with button, a , img and div elements. In the cloud preview, it does work only with “button” and “a” elements. Events aon div or img tags are ignored by the simulator.

Furthermore, the blur event occurs at different times in the emulator and on the device. On the fulltouch-and touch&type device, the onblur event is happen when the user releases the finger. On the emulator, the onblur event is happen only after the user clicked another element.

139 page views in the last 30 days.