asp.net pdf viewer component : View pdf thumbnails application control tool html azure windows online HTML5_QML_Comparison_redist3-part1332

2.4 JavaScript
#include <QtDeclarative>
QML_DECLARE_TYPE(CustomElement);
class CustomElementExtensionPlugin : public QDeclarativeExtensionPlugin
{
Q_OBJECT
public:
void registerTypes(const char *uri)
{
qmlRegisterType<CustomElement>(uri, 01"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 specied 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 dened
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
View pdf thumbnails - application control tool:C# PDF Thumbnail Create SDK: Draw thumbnail images for PDF in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Support Thumbnail Generation with Various Options for Quick PDF Navigation
www.rasteredge.com
View pdf thumbnails - application control tool:VB.NET PDF Thumbnail Create SDK: Draw thumbnail images for PDF in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Support Thumbnail Generation with Various Options for Quick PDF Navigation
www.rasteredge.com
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 specied for the variables. All variables in JavaScript are
casted automatically. The JavaScript engine veries 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 dene 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 dened 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
application control tool:C# HTML5 PDF Viewer SDK to view PDF document online in C#.NET
Ability to show PDF page thumbnails for quick navigation. Easy to search PDF text in whole PDF document. C# HTML5 PDF Viewer: View PDF Online.
www.rasteredge.com
application control tool:VB.NET PDF- View PDF Online with VB.NET HTML5 PDF Viewer
Ability to show PDF page thumbnails for quick navigation. Easy to search PDF text in whole PDF document. VB.NET HTML5 PDF Viewer: View PDF Online.
www.rasteredge.com
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 modication 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 texteld 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
application control tool:VB.NET PDF - View PDF with WPF PDF Viewer for VB.NET
Easy to search PDF text in whole PDF document in VB.NET WPF program. PDF thumbnails for navigation in .NET project. VB.NET WPF PDF Viewer: View PDF Document.
www.rasteredge.com
application control tool:C# WPF PDF Viewer SDK to view PDF document in C#.NET
Users can view any page by using view page button. Easy to search PDF text in whole PDF document. PDF thumbnails for navigation in .NET WPF Console application.
www.rasteredge.com
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 dened
within a QML element can be used to add methods to this specic 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(12))
}
}
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’ identier 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(12))
}
}
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 modication 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
application control tool:C# PDF Convert to Jpeg SDK: Convert PDF to JPEG images in C#.net
Support of converting from any single one PDF page and multiple pages. Thumbnails can be created from PDF pages. Support for customizing image size.
www.rasteredge.com
application control tool:VB.NET PDF File Compress Library: Compress reduce PDF size in vb.
Reduce image resources: Since images are usually or large size, images size reducing can help to reduce PDF file size effectively. Embedded page thumbnails.
www.rasteredge.com
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 dierences, dierences in amounts of code
needed and dierences in performance. An added advantage is decreasing the risk of failure.
If certain requirements are not met for a specic version an eort can be made to develop
alater version.
The applications are compared using the ‘qml’-runtime application for QML and a simple
17
application control tool:C# PDF File Compress Library: Compress reduce PDF size in C#.net
by large enterprises and organizations to distribute and view documents. size, images size reducing can help to reduce PDF file size Embedded page thumbnails.
www.rasteredge.com
application control tool:C# PDF Convert to Images SDK: Convert PDF to png, gif images in C#
Converter control easy to create thumbnails from PDF pages. Selection for compressing to multiple image formats. Cut and paste any areas in PDF pages to images.
www.rasteredge.com
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
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
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
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 dierent ways to specify animations. The rst method species 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
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 specied. 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 specied. 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 specic
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