Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use the ImageButton and the TextButton in a project.

Basics

The ImageButton and the TextButton are pressable buttons to be interacted by users.
The ImageButton Example:

var myImgBtn = new SMF.UI.ImageButton({
		left : '10%',
		top : '10%',
		width : '50%',
		height : '50%',
		text : "Click Me!"
	});
page1.add(myImgBtn);

The TextButton Example:

var myTextBtn = new SMF.UI.TextButton({
		left : '10%',
		top : '10%',
		width : '50%',
		height : '50%',
		text : "Click Me!"
	});
page1.add(myTextBtn);

Differences

The main differences between ImageButton and TextButton is the data binding. TextButton can only bind text data. However, ImageButton can bind both text and image data. Additionally, the color property has some differences in the ImageButton and the TextButton. The TextButton has fillColor and pressedFillColor properties whereas ImageButton has only alpha property.

 Status Images

The ImageButton has three image statuses on data binding.

  • Default State: This image is shown when the user has not interacted.
  • HighLighted State: This image is shown when the user has pressed image button.
  • Inactive State: This image is shown when the image button is not enabled.
var myImgBtn = new SMF.UI.ImageButton({
		left : '10%',
		top : '10%',
		width : '50%',
		height : '50%',
		defaultImage : 'buttondefault.png',
		highlightedImage : 'buttonhighlighted.png',
		inactiveImage : 'buttoninactive.png',
		text : 'My Image Button'
	});
page1.add(myImgBtn);

Events

Most common used event of Button type object is onPressed event. Here is  an example ;

var btn = new SMF.UI.TextButton({
			name : "btn",
			text : "Press me",
			onPressed : page1_btn_onPressed,
			left : "15%",
			top : "60%"
			width : "70%",
			height : "10%",
		});
page1.add(btn);
function page1_btn_onPressed(e) {
		alert("Hello Button");
	}