39
2.4 JavaScript
#include <QtDeclarative>
QML_DECLARE_TYPE(CustomElement);
class CustomElementExtensionPlugin : public c QDeclarativeExtensionPlugin
{
Q_OBJECT
public:
void registerTypes(const char *uri)
{
qmlRegisterType<CustomElement>(uri, 0, 1, , "CustomElement");
}
};
Q_EXPORT_PLUGIN(CustomElementExtensionPlugin);
This class registers the type CustomElement in the QDeclarativeEngine who calls this plugin
method.
QML C++ plugins are not loaded automatically. The plugin has to be specied in a ‘qmldir’
le. a ‘qmldir’ le is a le containing all external resources which the QML runtime should
load. If the qmldir le is located in the same directory as the QML le which is loaded an
import statement is not needed within the loaded QML le. To be able to use our plugin
we should add a line to the qmldir le:
plugin customelementextensionplugin
This will cause our extension to be loaded and automatically make the QML types dened
using the qmlRegisterType(...) macro available.
2.4 JavaScript
JavaScript is the scripting technology used in both HTML and QML. The rst two subsec-
tions deal with the history and structure of JavaScript. Continuing there are two subsections
describing the way JavaScript interacts with HTML and QML respectively.
2.4.1 History of JavaScript
At the start of the common internet webpages were completely static. There was a need
to be able to interact with a webpage. To be able to handle this interaction immediately
there would need to be an embedded programming language within the browser. To this
end JavaScript was developed [19].
JavaScript was developed by Netscape in 1995. At rst it was called Mocha, later renamed
to LiveScript and, due to a licensing deal where Netscape would integrate Java in its web
browser, JavaScript [36].
Over the next years JavaScript has become the dominant web scripting technology gaining
even greater dominance after the creation of the \AJAX" combination of dynamic web
page creation technologies and the evolving of Web 2.0.
13
41
2. TECHNOLOGIES
2.4.2 Basic structure
JavaScript was developed to be used by non-programmers. Because of this it was de-
cided that some features used in multiple other languages would not become available in
JavaScript to be able to decrease the learning curve.
JavaScript consists of methods called functions which can be called from functions. A
simple function that adds two variables and returns the result would look like this:
function adder(one, two)
{
return one + + two;
}
Notice there is no variable type specied for the variables. All variables in JavaScript are
casted automatically. The JavaScript engine veries the validity of an operation and returns
‘Not a Number’ (NaN) in case of a numeric operation failing and ‘null’ in other cases.
JavaScript does not contain explicit classes. The developer can dene JavaScript functions
which have other functions as prototypes, making them essentially member functions. For
instance:
function addContact(firstName, lastName, , phoneNumber)
{
this.firstName = firstName;
this.lastName = = lastName;
this.phoneNumber = phoneNumber;
}
function showName()
{
alert("Name of contact: : " + this.firstName + + " " + + this.lastName);
}
addContact.prototype.showName = showName;
In this example showName() is a function of the addContact() class. When a variable is
now dened to be of the addContact type you can call variable.showName():
function display()
{
var contact = new addContact("John", "Doe", "+123456789");
contact.showName();
}
In this last example an alert box will pop-up with the content: \Name of contact: John
Doe".
2.4.3 JavaScript-HTML connection
JavaScript objects can be instantiated in an HTML page in two ways. Either through
external les in the head of the document:
14
43
2.4 JavaScript
<head>
<script type="text/javascript" src="pagescript.js"></script>
</head>
Or by embedding the JavaScript content within the body of the document:
<body>
<script type="text/javascript">
document.write("JavaScript text");
</script>
</body>
The actual modication of the HTML le is done through the internal representation of
HTML objects, which is called the DOM (Document Object Model) tree. In the above
example the text \JavaScript text" is inserted at the position of the codeblock.
JavaScript can also be used to insert content at arbitrary positions. To do this JavaScript
contains the document.getElementById method which uses the same ID’s as CSS (see
section 2.2.3).
<script type="text/javascript">
function notEmpty(){
var myTextField = document.getElementById(’myText’);
if(myTextField.value != "")
{
alert(myTextField.value);
}
else
{
alert("The textfield d is s still empty.");
}
}
</script>
<input type=’text’ id=’myText’ />
<input type=’button’ onclick=’notEmpty()’ value=’Form Checker’ />
In this example the ID of the text eld is ‘myText’ which is assigned to the myTextField
variable in JavaScript. When the user clicks on the button JavaScript checks the contents
of this text eld and shows a pop-up containing either the text in the text eld or the string
\The texteld is still empty.".
2.4.4 JavaScript-QML connection
JavaScript is a core component of QML. All operations written within a QML le are
basically JavaScript operations. Let’s demonstrate this behaviour:
width: parent.width - 5
In this example the width of the current QML element is the width of its parent decreased
by ve. The change of the width property is calculated by evaluating the expression using
the JavaScript parser. In this example the property binding makes sure that the width of
15
41
2. TECHNOLOGIES
the current item is always ve pixels smaller than its parent’s with (see subsection 2.3.2).
In QML the developer can also declare and use JavaScript functions. functions dened
within a QML element can be used to add methods to this specic QML element, these
functions are not available to other elements:
Rectangle
{
function adder(one, two)
{
return one + two;
}
MouseRegion
{
anchors.fill: parent
onClicked: print(adder(1, 2))
}
}
The developer can also choose to have the JavaScript code in an external le, which makes
all functions in this JavaScript le available to all QML elements in the QML le which
imports the JavaScript le.
Using an external le with JavaScript code requires this JavaScript le to be imported:
import "code.js" as Code
The keyword following the ‘as’ identier is now to be used to access functions within this
JavaScript le. The following example behaves exactly the same as the above example,
except for that the code is now in an external le.
import "code.js" as Code
Rectangle
{
MouseRegion
{
anchors.fill: parent
onClicked: print(Code.adder(1, , 2))
}
}
QML exposes all functions in the JavaScript global object and adds some extra functionality
to this global object. Added functionality includes generating MD5 hashes, converting date
and times and the modication of colors by applying a tint to the color. The more important
added functionalities however are the addition of a mechanism to dynamically generate QML
elements, access a local SQLite database and the addition of methods to query external
data using XmlHttpRequest.
16
30
3
Comparison
3.1 Application design
In section 1.3 the conclusion was: Users expect several basic applications to be available on
every phone. This is the reason for the decision to only develop simple applications which
everybody expects on a mobile phone. These applications should however still contain most
use cases a mobile application developer would encounter:
Navigation between application phases - A game developer would want to go from
the main menu to the game.
Loading and saving content - This would be usable for a Twitter application which
stores tweets locally.
Scrolling
Animations
Media playback
Orientation changes - Most mobile phones use a rectangular screen and widescreen
media content. Users would want to display their media content as big as possible.
Three applications will be developed:
A main menu to get to the other applications. This application will be used to test
switching between application phases.
A contacts application where it should be possible to add and remove contacts. This
application will be used to test scrolling and storage functionality.
A media player which should be able to play back an audio le. This application is
used to test animations, media playback and orientation changes.
Each application will have several versions which will add new features. The usage of
versions will make it easier to compare feature dierences, dierences in amounts of code
needed and dierences in performance. An added advantage is decreasing the risk of failure.
If certain requirements are not met for a specic version an eort can be made to develop
alater version.
The applications are compared using the ‘qml’-runtime application for QML and a simple
17
24
3. COMPARISON
QtWebKit browser (sourcecode in appendices A and B) for HTML. All applications will be
developed to use the least amount of lines of code while retaining all necessary features.
3.1.1 Main menu application
The main menu application is the simplest application of the three. The main goal of the
main menu application is to get to the other applications. This application is used to test
the ability to easily load other applications within the same environment.
The main menu application has the lowest priority. Version 1 is the must-have version to
be usable. All other versions have ‘would like to have’ priority.
Contacts
Media player
Figure 3.1: Main menu v. 1 - Version 1 of the main menu contains two clickable items which
are plain text.
Image
Image
Figure 3.2: Main menu v. 2 - Version 2 replaces the text from version 1 by images.
Image
Image
Contacts
Media player
Figure 3.3: Main menu v. 3 - Version 3 moves the images from version 2 to the center and
adds the name of the application.
Version 4 of the main menu application will look exactly the same as version 3, except that
18
24
3.1 Application design
the menu content is now dynamically loaded and not explicitly typed anymore. This means
that the content of the folder containing the applications should be automatically read and
image buttons should be placed at their respective places automatically.
3.1.2 Contacts application
The contacts application is the most data intensive application. The main goal of the
contacts application is allowing for data manipulation. The contacts application is used to
test scrolling and storage functionalities.
The contacts application has ve versions. Of which version 1, 2, 3 and 4 have ‘must-have’
priority. Version 5 would be nice to have, but is not mandatory.
Contact A: +31612345678
Contact B: +4712345678
Return...
Figure 3.4: Contacts v. 1 - Version 1 of the contacts application contains a hard-coded text
list of contacts and a text-link to return to the menu.
Version 2 of the contacts application looks the same as version 1. The hard-coded list will
be replaced by a static database. This database should be cross-platform and preferably
the same database should be used by both the QtWebKit and QML application.
Contact A: +31612345678
Contact B: +4712345678
Add Contact
Figure 3.5: Contacts v. 3 - Version 3 of the contacts application allows for adding contacts
to the database and replaces the return-text by an icon.
19
25
3. COMPARISON
Contact A: +31612345678
Contact B: +4712345678
Add Contact
Figure 3.6: Contacts v. 4 - Version 4 of the contacts application places the contacts in boxes
and allows for scrolling the content.
Contact A: +31612345678
Contact B: +4712345678
Add Contact
Remove Contact
Figure 3.7: Contacts v. 5 - Version 5 of the contacts application adds a ‘remove contact’
button. To be able to remove a contact the user should also be able to select the contact to
delete.
3.1.3 Media player application
The media player application focuses on playback of local les and device orientation
changes. This application is used to compare screen orientation capabilities, media playback
and animation functionality and performance.
All three versions of this application have to be developed to compare all of these function-
alities.
Return...
Play-
Pause
Figure 3.8: Player v. 1 - Version 1 of the media player application only contains a button
which changes from play to pause and causes an audio le to play or pause.
20
45
3.2 Functional comparison
Play-
Pause
Seek
back
Seek
forward
Artist - Title
01:23
Figure 3.9: Player v. 2 - Version 2 of the media player application adds capabilites for
navigating through the audio le, displays meta-information about the current le and shows
the current time.
Play-
Pause
Seek
back
Seek
forward
Artist - Title
Play-
Pause
Seek
back
Seek
forward
Artist - Title
01:23
01:23
Figure 3.10: Player v. 3 - Version 3 of the media player application adds support for arbitrary
screen orientation changes (Landscape to Portrait). When the screen orientation changes all
objects within the visible area have to animate to their new positions.
3.2 Functional comparison
3.2.1 Animations
QML provides three dierent ways to specify animations. The rst method species an
animation following an action. This method uses elements like PropertyAnimation and
ParallelAnimation. To animate a rectangle moving right 50 pixels when it is clicked the
following could be used:
Rectangle
{
color: "black"
height: 150
id: rectangle
width: 150
PropertyAnimation
21
53
3. COMPARISON
{
duration: 200
id: animation
property: "x"
target: rectangle
to: rectangle.x + 50
}
MouseArea
{
anchors.fill: rectangle
onClicked:
{
animation.start()
}
}
}
The animation that is used here is exactly the same every time. Therefore a default
animation can also be specied. The Behavior element can be used to specify these default
animations for property changes. Using the Behaviour element is the second method for
QML animations. To automatically animate the rectangle moving to its new position when
the x-property changes using a behavior looks like this:
Rectangle
{
color: "black"
height: 150
id: rectangle
width: 150
Behavior on x
{
NumberAnimation
{
easing.type: "Linear"
duration: 200
}
}
MouseArea
{
anchors.fill: rectangle
onClicked:
{
rectangle.x = rectangle.x + 50;
}
}
}
In this example the Linear easing type is specied. QML contains more than 40 easing
types by default, ranging from the standard linear and parabolic functions to elastic and
bouncy curves like InElastic and OutBounce.
The third and nal method for animations in QML is the use of states and transitions. A
QML State elementdescribes the propertiesfor elements when the application is in a specic
state. States can be used to specify the look and feel of an application between portrait and
landscape orientations. To have an animated switch between states the Transition element
22
Documents you may be interested
Documents you may be interested
