• Enter email to sit in the first row

What is JSON and how to use it to build Android App


Before reading this article we recommend to see BBMobile – how to start

What is JSON

JSON (JavaScript Object Notation) is an open standard file and data interchange format, that uses human-readable text to store and transmit data.
JSON objects consist of ”attribute”:”value” pairs and array data types.
Every object starts with { bracket and ends with } bracket.
But the most important things for using JSON with BBMobile are:

  1. JSON objects are closed in {…} brackets,
  2. inside object data is organized in pairs: ”attribute”:”value”,
  3. objects and ”attribute”:”value” pairs are separated by commas,
  4. layout objects can be nested,
  5. array data types are closed in […]” brackets,
  6. JSON is not case sensitive and spaces and tabs does not matters.

How to define TextView, Button or other controls in JSON

Every user interface on the screen needs to show information and have buttons. They are called UI (user interface) controls. Lets define UI in JSON and see how it looks on the screen.
Start with defining TextView control.

BBMobile TextView
{
	"ty":"TextView",
	"n":"t1",
	"te":"HELLO BBMobile WORLD",
	"ts":"40",
	"tl":"bold",
	"tc":"255,255,255",
	"bg":"0,0,0",
	"w":"1"
}

Object is closed within brackets { and }. And ”attribute”:”value” pairs are separated with commas. What is the meaning of this data?

  • ”ty”:”TextView” – defines object type, here it is TextView,
  • ”n”:”t1″ – sets unique object name,
  • ”ts”:”40″ – defines font size,
  • ”tl”:”bold” – defines font style,
  • ”te”:”HELLO BBMobile WORLD” – sets string showing on the screen,
  • ”tc”:”255,255,255″ – defines font color red-green-blue components. Here is white: R=255, G=255, B=255,
  • ”bg”:”0,0,0″ – defines background color red-green-blue components. Here is black: R=0, G=0, B=0,
  • ”w”:”1″ – sets TextView object size as fraction of whole interface size.

How to arrange controls on the screen

All screen objects (TextViews, Buttons, Spinners, ProgBars, etc.) are closed in main layout. Take a look at the layout JSON code below.

1	{
2	"ty": "lout",
3	"or":"v",
4	"bg":"255,255,255",
5	"cs”:[{O_1}, {O_2}, {O_3}]
6	}

Line 2 defines this object as layout. So it can contain controls and other layouts inside. Here we have three symbolic objects inside: {O_1}, {O_2}, {O_3}.
Next code line number 3 defines objects arrangement inside the layout. There are two arrangement possibilities:

  1. ”or”:”v” – vertical arrangement – objects one below other,
  2. ”or”:”h” – horizontal arrangement – objects one next to other.

Line 4 sets layout background color (red-green-blue). Line 5 contains objects array.

User interface JSON code example

Here below is the complete user interface JSON code of COUNTER project. It contains five controls inside two layouts.

Counter App BBMobile
{
"ty":"lout",
"or":"V",
"img":"4",
"cs":[
	{
	"ty":"TextView",
	"te":"\nLICZNIK",
	"tc":"174,174,174",
	"ts":"30",
	"w":"2"
    },
	{
	"ty":"TextView",
	"n":"cnt",
	"te":"0000",
	"tl":"bold",
	"ts":"60",
	"tc":"255,255,255",
	"w":"2"
    },
	{
	"ty":"lout",
	"or":"H",
	"cs":[
	    {
		"ty":"Button",
		"n":"b1",
		"te":"RESET",
		"tc":"255,255,255",
		"bg":"0,62,120",
		"ts":"25"
	    },
	    {
		"ty":"TogButton",
		"n":"b2",
		"ton":"STOP",
		"toff":"GO",
		"tc":"255,255,255",
		"bg":"3,96,164",
		"ts":"25"
	    }]
	},
	{
	"ty":"TextView",
	"w":"3"
	}]
}
  1. TextView – shows app title. LICZNIK means COUNTER in Polish,
  2. TextView – shows actual counter value,
  3. Button RESET – for counter zeroing,
  4. TogButton STOP/GO – switch for turning counter ON and OFF,
  5. TextView – it does not show any information but improves the interface aesthetics.

Events from application

Tapping TogButton ‘GO’ causes sending UART message $by,b2″1″ and button text change to ‘STOP’. ‘b2’ is name of TogButton object defined in JSON code and 1 is the actual TogButton state.
BBMobile Counter App Ready
Next TogButton tapping causes sending UART message $by,b2″0″ and button text change to ‘GO’ again.
Tapping ‘RESET’ button causes sending UART message containing both object state $by,b1″1″,b2″0″.
Counter App UART messages

Playing with app

Sending commands through UART allows object parameters modification: $set,object_name:parameter=”new_value”\r\n. For example:

$set,cnt:te="42'259"

causes screen looks like below. TextView object named ‘cnt’ shows new text value: 42’259:
BBMobile Counter counts

Tagged , , , . Bookmark the permalink.

Comments are closed.