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

This guide explains about the Smartface User Interface native design objects.

Page

Page is the main User Interface(UI) container object. Only a single page can be shown simultaneously. See also: SMF.UI.Page in the docs.

var page1 = Pages.page1 = new SMF.UI.Page({
		fillColor : "#FFFFFF",
		showStatusBar : false
	});
Label

Label is a UI object to display a text on the screen. A Label can contain only a single type font. See also: SMF.UI.Label in the docs.

var label1 = new SMF.UI.Label({
		top : "10%",
		left : "10%",
		text : "Smartface",
		multipleLine : false
	});
page1.add(label1);
Image

Image object displays a picture inside a given rectangle area of the image object. The display of aspect ratio, positioning of the picture might vary inside the image object. Image component can easily display local (depending on the screen size) and remote images. See also: SMF.UI.Image in the docs. 

var image1 = new SMF.UI.Image({
		left : '10%',
		top : '10%',
		width : '50%',
		height : '50%',
		image : 'images://myimage.png'
	});
page1.add(image1);
ImageButton

ImageButton is a button object that contains images of three states of the button. See also: SMF.UI.ImageButton in the docs. 

var imageButton1 = new SMF.UI.ImageButton({
		left : "5%",
		top : "84.62%",
		width : "9.38%",
		height : "10.38%",
		touchEnabled : false,
		imageFillType : SMF.UI.ImageFillType.AUTOSIZE,
		defaultImage : "images://content0.png",
		highlightedImage : "images://content1.png",
		inactiveImage : "images://content2.png",
		text : "",
		onPressed : imageButton1_onPressed
	});
page1.add(imageButton1);
TextButton

TextButton is a simple button object which can contain text valueSee also: SMF.UI.TextButton in the docs.  

var textButton1 = new SMF.UI.TextButton({
		left : "10%",
		top : "10%",
		text : "Dynamic Button",
		onPressed : function (e) {
			this.visible = false;
		}
	});
page1.add(textButton1);
TextBox

TextBox is a user text input control, which can be customized for specific types of text input. See also: SMF.UI.TextBox in the docs.  

var textBox1 = new SMF.UI.TextBox({
		left : "10%",
		top : "10%",
		returnKey : SMF.UI.ReturnKeyType.DONE,
		onReturnKey : function (e) {
			//action
		}
	});
page1.add(textBox1);
RepeatBox

RepeatBox is a data repeating row container object. Row templates can be customized depending on the desired row behaviorSee also: SMF.UI.RepeatBox in the docs.   

var repeatBox1 = new SMF.UI.RepeatBox({
		left : "0",
		top : "0",
		width : "80%",
		height : "100%",
		dataSource : dataArray,
		showScrollbar : true,
		fillColor : "#3B3B3B"
	});
page1.add(repeatBox1);
Video

Video is a video display control object which uses a native video player. A Video object can display both an embedded, and also a full-screen representation of the video. See also: SMF.UI.Video in the docs.

var video1 = new SMF.UI.Video({
		left : "10%",
		top : "10%",
		contentUrl : "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" //an example url
	});
page1.add(video1);
WebView


WebView object is used to display HTML content. Both local and remote content is supported. Additionally WebView supports a basic JavaScript interaction with its document object model. See also: SMF.UI.WebView in the docs.

var webView1 = new SMF.UI.WebView({
		left : "10%",
		top : "10%",
		height : "50%",
		width : "80%",
		url : "https://www.smartface.io"
	});
page1.add(webView1);
Container

Container contains other UI objects. All enclosed objects are positioned relative to their owner Container.. See also: SMF.UI.Container in the docs.  

var container1 = new SMF.UI.Container({
		left : "10%",
		top : "10%",
		width : "80%",
		height : "80%"
	});
page1.add(container1);
ScrollView

ScrollView is a special type of container which supports scrolling to a direction and paging. See also: SMF.UI.ScrollView in the docs. 

var scrollView1 = new SMF.UI.ScrollView({
		left : "10%",
		top : "10%",
		width : "80%",
		height : "80%",
		contentHeight : "200%",
		contentWidth : "100%"
	});
page1.add(scrollView1);
SwitchButton

SwitchButton is a simple switch button to enter true/false inputs. See also: SMF.UI.SwitchButton in the docs.  

var switchButton1 = new SMF.UI.SwitchButton({
		left : "34.53%",
		top : "37.76%",
		width : "51dp",
		height : "31dp",
		touchEnabled : true,
		onTintColor : "#7FEA00",
		tintColor : "#FFFFFF",
		thumbTintColor : "#DDDDDDD"
	});
page1.add(switchButton1);
MapView

MapView is a native map object, which supports displaying pins and information on the map. See also: SMF.UI.MapView in the docs. 

var mapView = new SMF.UI.MapView({
		left : "10%",
		top : "10%",
		showUserLocation : false,
		routeLineColor : "blue",
		routeLineWidth : 10
	});
page1.add(mapView);
ActivityIndicator

ActivityIndicator is a native progress display control. See also: SMF.UI.ActivityIndicator in the docs. 

var activityIndicator1 = new SMF.UI.ActivityIndicator({
		left : "10%",
		top : "10%",
		style : SMF.UI.ActivityIndicatorStyle.WHITE // sets gray
	});
page1.add(activityIndicator1);
Slider


The Slider is a user interface component that can be used to select a value from a continuous or discrete range of values by moving the slider thumb along the track. See also: SMF.UI.Slider in the docs. 

var slider1 = new SMF.UI.Slider({
		left : "10%",		
		top : "10%",
		valueRangeMin : 0,
		valueRangeMax : 100,
		value : 50, //gives initial value
		stepSize : 5,
		showThumbnail : false
	});
page1.add(slider1);
Rectangle

Rectangle is a simple rectangle shaped object. See also: SMF.UI.Rectangle in the docs. 

var rectangle1 = new SMF.UI.Rectangle({
		left : "10%",		
		top : "10%",
		width : "50%",
		height : "10dp",
		fillColor : "#FF00FF"
	});
page1.add(rectangle1);
Line


Line is a simple line-shaped object. See also: SMF.UI.Line in the docs. 

var line1 = new SMF.UI.Line({
		left : "10%",		
		top : "10%",
		width : "50%",
		height : "10dp",
		dashed : false,
		lineRotationAngle : SMF.UI.LineRotationAngle.HORIZONTAL
	});
page1.add(line1);


 

1 Comment

  1. var textBox1 = new SMF.UI.TextBox({ left : "10%", top : "10%", returnKey : SMF.UI.ReturnKeyType.DONE, onReturnKey : function (e) { //action } });page1.add(textButton1);

    page1.add(textBox1);