Qt 5.0 Programming IV : QML + Javascript อะไรจะขนาดนั้น !!!

          วันนี้จะมาแนะนำการใช้งาน javascript ร่วมกับ QML นะครับ ซึ่งตัว QML นั้นสามารถแทรก source code ของ javascript ลงไปด้วยได้ (อะไรจะขนาดนั้น !!!) สำหรับคนที่เขียน javascript คล่องๆ คงสบายมากๆ ลองมาดูตัวอย่างง่ายๆ ดูซัก 1 ตัวอย่างนะครับ

	/*
	Using QML and Javascript
	Author : MaIII Themd
	Website : http://miiniq.blogspot.com
	FB : http://www.facebook.com/PiShared
	Env : Qt 5.0.2 clang 64 bit OSX 10.8.4
	*/
	import QtQuick 2.0
	Rectangle {
	width: 500
	height:200
	color: "black"
	function js_test(loop)
	{
	var var_str = "http://miiniq.blogspot.com ";
	for(var i = 0; i < loop; i++)
	var_str = var_str + "!";
	return var_str;
	}
	Text {
	text: parent.js_test(10);
	anchors.centerIn: parent
	color: "pink"
	font.pixelSize: 20;
	}
	}

view raw QMLandJavascript hosted with ❤ by GitHub

          จาก source code ข้างบนจะเห็นว่ามี element Rectangle ซึ่งภายในนั้นจะประกอบไปด้วย element Text และ javascript function  ที่ทำหน้าที่สร้างคำว่า http://miiniq.blogspot.com ที่ต่อท้ายด้วย ! ตามจำนวน argument ที่ใส่เข้าไปตอนเรียกใช้งาน function และ function ถูกเรียกนี้ด้วย properties text ของ element Text  เมื่อทดลองรันโปรแกรมก็จะได้ผลตามภาพแรก ใช้ง่ายเขียนง่าย QML ครับ :)



<< Qt 5.0 Programming III : Element Hierarchies
>> Qt 5.0 Programming V : Element ID and Navigating the Objects Tree