File

XBrowser uses XMLV a XML extension as its layout standard. All display elements should be included in the XMLV file. Once the resource has been retrieved the web browser will display it. A XMLV file is pretty much similar to HTML file used by normal browsers. It included a root element xmlv and title attribute, following is an example of XMLV file:

<xmlv title="Hello XMLV"/>

There are two types of xmlv elements:

Noun elements
Verb elements

Noun Elements

Noun elements are used to identify and describe page elements.

There are three types of noun elements:

JSON
Preload
CSS

JSON

JSON element describes components placed on the page.

<json>
{"type":"button","text":"i am a button"}
</json>

For more about JSON file format please refer to JSON website: http://json.org

There are only 3 types of JSON root element: JsonObject, JsonArray and null:

If the root element is a JsonObject, the page will create components based on the information provided and place at the central middle of the page.

<json>
{"type":"button","text":"i am a button"}
</json>

2) If the root element is a JsonArray, the page will create a two-dimensional space and render the components based on the JsonObject within the JsonArray, the component coordinates can be specified with x,y layout.

<json>
[{"type":"button","text":"i am a button","x":100,"y":100}]
</json>

3) If the root element is empty, the page will by default place a canvas with id:canvas.

<json/>
<script>
canvas.text("i am a canvas",100,100)
</script>

Component List

Component	type	parent	string properties	number properties	bool properties
Node	-	-	id	rotate,opacity	disable,visible
Cavans	canvas	Node	-	width,height	-
Control	-	Node	name,value	x,y,width,height	-
Chart	-	Node	title,titleside,legendside	x,y,width,height	-
View	-	Node	-	x,y,width,height	-
ImageView	img,image,imageview	View	url,image	-	-
Label	label	Control	text	-	-
Button	button	Control	text	-	-
Hyperlink	hyperlink	Control	text	-	-
TextField	textfield	Control	text	-	-

Component	type	parent	string properties	JsonArray[String] properties
ChoiceBox	choicebox	Control	value	item,items

{
"type":"choicebox",
"id":"choicebox001",
"x":100,"y":250,
"items":["USA","Japan","China"],
"value":"China"
}

Component	type	parent	string properties	JsonArray[String] properties	bool properties
TableView	table,tableview	Control	-	header,headers,column, columns,value,values	editable

{
"type":"table","id":"table001",
"x":0,"y":0,
"headers":["USA",{"Asia":["Japan","China"]}],
"values":[[1,2,3],{"USA":3,"China":2,"Japan":1}]
}

{
	"type": "table", "id": "table001",
	"x": 0,"y": 0,
	"headers": [
		"USA",
		{"Asia": [{"name": "Japan","type": "checkbox"}, 
			  {"name": "China","type": "combobox","items": ["1", "2"]},
			  {"name": "Korea","type": "choicebox","items": ["3", "4"]}]}],
	"values": [[1, true, 1, 3], 
		   {"USA": 3,"Japan": false,"Korea": 3,"China": 2}
	]
}

Component	type	parent	string properties	number properties	JsonArray[String] properties
Form	form	Control	text,action,method	-	children

<xmlv>
<json>
[
{"type":"label","id":"label001","name":"label001","x":100,"y":50,"text":"Label"},
{"type":"textfield","id":"textfield001","name":"textfield","x":200,"y":50,"text":"Textfield"},
{"type":"hyperlink","id":"hyperlink001","x":400,"y":50,"text":"Hyperlink"},
{"type":"button","id":"button001","x":500,"y":50,"text":"Button"},
{"type":"table","id":"table001","name":"table","x":600,"y":50,"header":["col"],"value":[["001"]],"width":100},
{"type":"form","id":"form001","children":["textfield001","table001"],"method":"post","action":"www.mycom.com/postform"}
]
</json>
<script type="groovy">
button001.action = { event ->
	form001.send()
}
</script>
</xmlv>

The form will be sent with following http request body in JSON format:

{"textfield":"Textfield","table":[{"col":"001"}]}

Component	type	parent	string properties	number properties	JsonArray[{String:Number}] properties
PieChart	piechart	Chart	-	-	data

{
	"type":"piechart","id":"piechart001",
	"title":"Pie Chart","titleside":"Bottom","legendside":"top",
	"data":{"USA":10,"Japan":10,"China":10}
}

Component	type	parent	string properties	JsonArray[String/Number] properties	JsonObject{String:[Number]} properties
XYChart	-	Chart	xlabel,ylabel	xaxis	data
LineChart	linechart	XYChart	-	-	-
BarChart	barchart	XYChart	-	-	-
ScatterChart	scatterchart	XYChart	-	-	-
AreaChart	areachart	XYChart	-	-	-

{
	"type":"linechart","id":"linechart001",
	"title":"Line Chart","titleside":"left","legendside":"right",
	"xaxis":["Jan","Feb","Mar","Apr","May"],
	"data":{"USA":[10,20,30,40,50],"Japan":[50,40,30,20,10],"China":[30,20,10,20,30]}
}

Component	type	parent	JsonObject{String:[{"x":Number,"y":Number,"z":Number}]} properties
BubbleChart	bubblechart	XYChart	data

{
	"type":"bubblechart","id":"bubblechart001",
	"title":"Bubble Chart","titleside":"left","legendside":"right",
	"data":{"USA":[{"x":10,"y":10,"z":3}],
		"Japan":[{"x":20,"y":10,"z":1},{"x":15,"y":15,"z":2}],
		"China":[{"x":10,"y":20,"z":2},{"x":20,"y":20,"z":1}]}
}

Preload

Preload element describes resources to be loaded before renderring the page. Only three types of resources are supported:

wav	mp3,mp4	png,jpg,gif,bmp etc
AudioClip	Media	Image

The element content is defined as several key=value pairs separated by semicolon;

<preload>
image001=http://w2v4.com/static/image001.png;
image002=http://w2v4.com/static/image002.png;
</preload>

The browser will download and cache resources beforehand.

The resources could be retrieved in the verb elements by its key.

<script type="groovy">
Image image = image001
//or
Image image = preload.get('image001')
</script>

By default the resources is cached, users could set new:/renew:/New:/Renew: prefix to force the browser download the resources no mather the resources is cached or not.

<preload>
renew:image001=http://w2v4.com/static/image001.png;Renew:image002=http://w2v4.com/static/image002.png
</preload>

CSS

CSS is a style sheet language used for describing the presentation of a page elements usually written in JSON, but also apply to page elements placed by the browser.

    <css>
.progress-bar > .bar {
    -fx-background-color: linear-gradient(
        from 0px .75em to .75em 0px,
        repeat,
        -fx-accent 0%,
        -fx-accent 49%,
        derive(-fx-accent, 30%) 50%,
        derive(-fx-accent, 30%) 99%
    );
}
    </css>

If a component is associated with an id then it could be easily styled in css with the same id name:

    <json>
    [{
        "id":"button001",
        "type":"button",
	"text":"button001",
	"x":100,"y":100
     },{
        "id":"button002",
        "type":"button",
        "text":"button002",
	"x":200,"y":100
    }]
    </json>
    <css>
        #button001 {-fx-background-color : red}
        #button002 {-fx-background-color : green}
    </css>

For more about CSS file format please refer to JavaFX CSS Reference Guide.

Verb Elements

Verb elements are used to describe page element actions.

There are two types of verb elements:

Script
Class

Script

Text in script element is an interpreted(rather than compiled) piece of programming language that supports scripts: programs written for XBrowser run-time environment that automate the execution of tasks. It is used to make pages interactive and provide online programs, including animations and video games. XBrowser currently four scripting languages: Javascript, Ruby, Groovy and Latte. The script lanugae type could be specified in the type attribute.

<xmlv>
    	<json/>
	<script type="javascript">
		x = 0
		timer = app.timer
		timer.action = function (now) {
			canvas.clear()
			x++
			canvas.text('hello world',x,x)
		}
		timer.start()
	</script>
</xmlv>

URL Link Support

Script element supports hyperlink attribute, specify the target in the <script href=" ">

<xmlv>
	<json/>
	<script href="www.abc.com/test.javascript" type="javascript"/>
</xmlv>

Using pre-defined elements

By using scripts, developers could manipulate the components defined in the JSON tag element.

<xmlv>
    	<json>
		[{"type":"button","id":"button001","x":10,"y":10,"text":"i am a button"}]
	</json>
	<script type="javascript">
		button001.action = function(event){//button001 is the component id, which would be used as the object reference in scripts
			button001.x = button001.x + 10
		}
	</script>
</xmlv>

On clicking, the button moves right for 10 points.

Binding Properties

The component properties could be bound to other component properties.

<xmlv>
    	<json>
		[{"type":"button","id":"button001","x":10,"y":10,"text":"i am a button"},
		{"type":"button","id":"button002","x":10,"y":50,"text":"i am a bound button"}]
	</json>
	<script type="javascript">
		button002.xproperty().bind(button001.xproperty())

		button001.action = function(event){
			button001.x = button001.x + 10
		}
	</script>
</xmlv>

The x property of 'i am a bound button' button is bound to the x property of 'i am a button' button, thus if the 'i am a button' button moves right, the bound button moves too.

Execution

By default, the script execution thread will be interrupted in 10 seconds, and will be brutally stopped in 12 seconds. The script is suggested to finish execution in 10 seconds. But some times, the user wants to enjoy the program animation for more than 10 seconds e.g. video games. In this case, the developers should use animation timer to run the grogram.

<xmlv>
    	<json/>
	<script type="javascript">
		x = 0
 		timer = app.timer
		timer.action = function (now) {
			canvas.clear()
			x++
			canvas.text('hello world',x,10)
		}
		timer.start()
	</script>
</xmlv>

Component	method name	parameters	return value	comment
App	load	String url	void	Redirect page to the address:url.
App	send	Number port,String address, String message	void	Redirect page to the address:url.
App	listen	Number port	void	Listen on a UDP port, the result will be store in the buffer(byte[]) object.
App	listen	Number port, Number length	void	Listen on a UDP port with maximum buffer length.
App	buffer, getBuffer, get_buffer, getbuffer	-	Buffer	Get buffer object.
App	received	-	String	Get received buffer string.
App	received	String encoding	String	Get received buffer string with specific encoding.
App	flush	-	void	Create a new buffer.
App	play	Media media	Mediaplayer	Play the media, which is loaded and defined in the preload.
App	play	Media media, Number cycle	Mediaplayer	Play the media with cycle times.
App	play	Media media, Number cycle, Number[0,1] volume	Mediaplayer	Play the media with cycle times and the specific volume.
App	timer, getTimer, get_timer, gettimer	void	AnimationTimer	Get animation timer.
App	key, getKey, get_key, getkey	void	KeyEventHandler	Get key event handler.
App	mouse, getMouse, get_mouse, getmouse	void	MouseEventHandler	Get mouse event handler.
Canvas	clear	-	void	Clear whole canvas.
Canvas	text	String text	void	Draws a text at 0, 0 position.
Canvas	text	String text, Number x, y	void	Draws a text at x, y position.
Canvas	text	String text, Number x, y, maxwidth	void	Draws a text at x, y position with maxwidth.
Canvas	image	Image image, Number x, y	void	Draws an image at the given x, y position for the upper left of the image.
Canvas	image	Image image, Number x, y, width, height	void	Draws an image into the given destination rectangle of the canvas.
Canvas	image	Image image, Number sx, sy, swidth, sheight, dx, dy, dwidth, dheight	void	Draws the specified source rectangle of the given image to the given destination rectangle of the Canvas.
Canvas	line	Number sx,sy,ex,ey	void	Draws a line from sx,sy to ex,dy.
Canvas	reset	-	void	Reset paint.
Canvas	alpha	Number[0,1] alpha	void	Sets the alpha of paint.
Canvas	color	String color	void	Sets paint color with web color string.
Canvas	rgb	Number[0,255] red, green, blue	void	Sets the color of paint with rgb value.
Canvas	argb	Number[0,1] alpha, Number[0,255] red, green, blue	void	Sets the color of paint with argb value.
Canvas	hsb	Number[0,360] hue, Number[0,1] saturation, brightness	void	Sets the color of paint with hsb value.
Canvas	rect	Number x, y, width, height	void	Strokes a rectangle with current paint.
Canvas	rect	Number x, y, width, height, Bool filled	void	Fills or strokes a rectangle with current paint.
Canvas	oval	Number x, y, width, height	void	Strokes an oval with current paint.
Canvas	oval	Number x, y, width, height, Bool filled	void	Fills or strokes an oval with current paint.
Canvas	square	Number topleftx, toplefty, side	void	Strokes a square with current paint.
Canvas	square	Number topleftx, toplefty, side, Bool filled	void	Fills or strokes a square with current paint.
Canvas	circle	Number centrex, centrey, radius	void	Strokes a circle with current paint.
Canvas	circle	Number centrex, centrey, radius, Bool filled	void	Fills or strokes a circle with current paint.
Canvas	rotateImage, rotate_image, rotateimage	Image image, Number tlx, tly, width, height, angle, px, py	void	Draws an image on a graphics context. The image is drawn at (tlx, tly) rotated by angle pivoted around the point (px, py).
Timer	action	lambda(now->)	void	Defines an action with current time parameter which is invoked in each frame.
Timer	start	-	void	Starts the timer action.
Timer	stop	-	void	Stops the timer action.
Key	press	lambda(keycode->)	void	Defines an action which is invoked when key is pressed.
Key	release	lambda(keycode->)	void	Defines an action which is invoked when key is released.
Mouse	press	lambda(x,y->)	void	Defines an action which is invoked when mouse left key is pressed.
Mouse	release	lambda(x,y->)	void	Defines an action which is invoked when mouse left key is released.
Mouse	move	lambda(x,y->)	void	Defines an action which is invoked when mouse is moved.
Mouse	rightPress, right_press, rightpress	lambda(x,y->)	void	Defines an action which is invoked when mouse right key is pressed.
Mouse	rightRelease, right_release, rightrelease	lambda(x,y->)	void	Defines an action which is invoked when mouse right key is released.
Button	action	lambda(event->)	void	Defines an action when button is clicked.
Hyperlink	action	lambda(event->)	void	Defines an action when hyperlink is clicked.
Form	send	-	void	Sends a HTTP request with JSON body to the action address. The JSON body includes all children page elements.
Form	submit	-	void	Submits a HTTP request with Form body to the action address. The Form body includes all children page elements.

Class

XBrowser also supports compiled code in bytecode format. Using class element and its url, name and method attributes to define a remote function.

<xmlv>
	<class url="http://www.abc.com/" name="com.whitewoodcity.MyClass1" function="test"/>
	<class url="http://www.abc.com/" name="com.whitewoodcity.MyClass2" function="test"/>
</xmlv>

The remote class file address should be: www.abc.com/com/whitewoodcity/MyClass1.class and in this class should include a function similar to:

	public Object void test(){...}

Developers could use compiling languages e.g. Java, Ceylon, Kotlin or Scala to compile source code and generate class files.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

documentation.md

documentation.md

File

Noun Elements

JSON

Preload

CSS

Verb Elements

Script

URL Link Support

Using pre-defined elements

Binding Properties

Execution

Class

Files

documentation.md

Latest commit

History

documentation.md

File metadata and controls

File

Noun Elements

JSON

Preload

CSS

Verb Elements

Script

URL Link Support

Using pre-defined elements

Binding Properties

Execution

Class