www.seipub.

org/ijc

International Journal on Communications (IJC) Volume 2 Issue 4, December 2013

Dynamic Services Mashup and Visualization

Zhao Liqin, Cheng Bo, Chen Junliang
State Key Laboratory of Networking and Switching Technology
Beijing University of Posts & Telecommunications
Beijing 100876, China
zhaoliqin.bupt@gmail.com
Abstract
As the evolution of the social software and Web 2.0, mashup
has become one of the key technologies to provide a
completely new service using content from APIs, web pages
and other web sources. In this paper, a mashup pattern has
been proposed that can easily make a dynamic services
mashup and provide a customizable user interface. First of
all, the design of the mashup pattern will be introduced,
which mainly contains mashup resource, dynamic service
mashup and service mashup visualization. Then, the
dynamic services mashup will be discussed in detail,
including service mashup definition using extensional
JavaScript, mashup engine, hot-deployment of the mashup.
The third part of the paper covered the service mashup
visualization for both web users and mobile users. Finally, a
mashup web application is made to give a contrast between
the popular mashup tools. The comparative analysis showed
that the new mashup pattern has an advantage over service
performance and visualization.
Keywords
Mashup; Service; Visualization

Introduction
With the development of the social software and web
2.0, more and more web resources, such as open API,
open web protocol, web page, continually appear.
How to take full advantage of the existing web data
has become an important issue. Mashup is one of the
essential technologies that can reuse the existing web
resources and rapidly generate a completely new web
service. There are many successful mashup
applications, such as soufang.com that based on
Google Maps API and web data. These applications
present a new vision of the data and the huge potential
of reusing the existing web resources. However, the
productive process of the mashup application is as
long as the common application. This paper aimed to
provide a mashup pattern and platform to increase
productivity and shorten development cycles and
exhaustive automation across the board.
ETL, a tool used for extract, transform and load data,
which could support some certain web resources, such
116

as RSS, database, file etc, enables users to migrate

different data formats into the standard format. But the
ETL cannot be used for invoking web service and the
mashup result can only be loaded into files or a
database. SOA is short for Service-oriented architecture.
It can provide web service invoking, web service
publishing etc. A service is a self-contained unit of
functionality, which can be combined by other service.
SOA makes it easy to reuse different web resources
and provide the invoking interface for a new web
service. However, SOA platform is commonly based
on object-oriented language, which can hardly
customize user interface for both web user and mobile
user. In order to provide dynamical service mashup
and visualization, the mashup pattern should provide
different web services access interface and
management console, mashup logic described using
extended language, and a way to show the mashup
result on different platform.
A mashup pattern was proposed in this paper that
provides dynamical service mashup and visualization.
The service mashup part can mashup web resources
from web page, web service, open API, FTP, database
etc. These resources are managed through OSGI. The
mashup result can be published as web service too. On
the other hand, the mashup pattern uses JavaScript to
describe mashup logic and presents the customized
service visualization.
In this paper, section 2 introduced the mashup pattern.
And section 3 described dynamically service mashup
in detail. Section 4 presented how to implement
mashup service visualization. Section 5 showed the
performance and comparative analysis. Conclusion
and future work were illustrated at last.
Mashup Pattern
As shown in figure 1, Mashup Pattern can be divided
into three interdependent parts: Mashup Resource,
Dynamical Service Mashup and Mashup Visualization.
These parts are interdependent. Request from user will
be received by the Bridge Servlet, which can determine

International Journal on Communications (IJC) Volume 2 Issue 4, December 2013

whether the request is a web or a service request. Then

it will call the corresponding interface and return a
respond.

www.seipub.org/ijc

Dynamic Service Mashup

Mashup Framework
The whole mashup framework is shown in the figure 2.
Mashup platform is built on OSGi, which can provide
dynamical component management for web resources.
The basic resource layer is combined with web
resources that are encapsulated as OSGi components.
They interact with other components by providing and
consuming services.

FIGURE 1 MASHUP PATTERN

Mashup resource is the basic layer that provides different

kinds of web resource components based on OSGi.
There are web service, web page, open API, IM and email
and data resource. Since it is provided as OSGi component,
the user can invoke these resources dynamically.
Dynamic services mashup, the kernel layer of the
mashup pattern, contains four different subsystems.
Resource Access Subsystem is used to access the
resources from the mashup resource layer. Service
Mashup Logic Subsystem can define a new mashup
script using extended JavaScript. Service Mashup
Runtime Subsystem can analyse the mashup script and
present the result using XML. Mashup Access
Subsystem is used to manage the existing mashup
scripts and provide the accessing interface.
The last layer is the Mashup visualization, used to
design the user interface for mashup. This layer can
provide cross-platform customized UI. For the web
users, it can provide a web page to invoke the mashup
result. For the mobile users, it can present a gadget
filled with the mashup.

FIGURE 2 MASHUP FRAMEWORK

Since the resource is written in Java language and the

mashup script is written in JavaScript to provide user
interface, a mashup engine is very necessary to
interpret the mashup script and invoking the Java
objects. It is the kernel part for the whole framework
and should provide support for the resource layer and
web service part.
Web service subsystem is embedded in the mashup
platform to provide web service support. In the
mashup framework, web service subsystem is not only
acted as one of the web resources but also used as the
mashup service provider. It should provide both SOAP
and REST protocol invoking.
Mashup Resource Layer
Mashup resource layer is the basic layer providing all
kinds of web resources, including web service, web
page, open API, IM and Email, data service etc. They
are capsulated as components built on Equinox, an
open-source OSGi, to load at the runtime.
<plugin>
<groupId>org.apache.felix</groupId>
<artifactId>maven-bundle-plugin</artifactId>
<extensions>true</extensions>
<configuration>
<instructions>
<BundleSymbolicName>
${pom.artifactId}
</Bundle-SymbolicName>
<Bundle-Name>
${pom.artifactId}
</Bundle-Name>
<Export-Package>
Package name,
</Export-Package>
<Import-Package>
Package name
</Import-Package>
<JavaScript-HostObject>
Package name
</JavaScript-HostObject>
</instructions>
</configuration>
</plugin>

OSGi is a flexible tool allowed to build a powerful

module system on top of it. OSGi defines a way to
create true modules and a way for those modules to
117

www.seipub.org/ijc

International Journal on Communications (IJC) Volume 2 Issue 4, December 2013

interact at runtime. Modules are usually called Bundles

in OSGi, which can be installed, updated and
uninstalled without restarting the JVM.
In the framework, all the different web resources are
encapsulated as OSGi modules using Felix. Felix is a
Maven plug in that can export OSGi module through
the configuration file. Figure 3 is a simple configuration
file sample.

and search for the mashup resource writing in

scriptable format. After loading the rhino and mashup
resources, it will wait until the mashup script coming.
The second phase is to run the mashup script. First of
all, it will check the mashup script logic. If the mashup
logic is right, it will step into the mashup script
execution. During this process, it will invoke the
mashup resource when necessary.

The configure file must contains Bundle-Name, ExportPackage, Import-Package. The last label JavaScriptHost Object is defined to tell the web resource modules
from the common OSGi module. By this way, OSGi
can provide management for the whole web resource
modules. The web resource module also needs to
expose the scriptable object to provide API for mashup
invoking, which will be introduced in the next section.
In the framework, we capsulated the corresponding java
package to provide web resource access. Below is a list:
1.

Web service: An object that is used to access the

SOAP and REST web service. It is based on the
Axis2.

2.

Web page: An object that can get the web page

content, which plays an important role during
mashup procedure, whose main dependency is
the Web Harvest package.

3.

Open API: It refers to RSS protocol, HTTP

protocol, FTP protocol and so on.

4.

IM and EMAIL: It is used for communication or

saving the mashup result.

5.

Data service: It covers the common files with

different format, database etc.

Mashup Engine
JavaScript is an interpreted programming language
that is designed as client-side scripts to interact with
the user. Most UI developers are familiar with the
JavaScript. In the paper, JavaScript is also the language
used to design and write the mashup logic for
customizing the user interface for different platform.
Since the web resources described before are written in
Java language, a Mashup engine is needed to run
mashup scripts and call Java objects. Rhino is an opensource implementation of JavaScript written entirely in
Java. It is typically embedded into Java applications to
provide scripting to end-users. In the mashup
framework, it is used as mashup script engine.
Figure 3 contains two phases, mashup engine loading
phase and mashup script executing phase. For the first
phase, the program should load the rhino runtime first
118

FIGURE 3 MASHUP ENGINE LOADING PROCESS AND

EXECUTING FLOW

Mashup resource is not only encapsulated as OSGi

components to implement the dynamic but also a
scriptable object to be invoked by Rhino. Below is the
code that can give a brief introduction on how to
provide a scriptable object.
public class FtpClientHostObject extends ScriptableObject
{
privateFTPClientftpClient;
privateFTPClientConfigconfig;
publicFtpClientHostObject()
{
//constructor body
}
public String getClassName()
{
return "FTPClient";
}
public static Scriptable jsConstructor(Context cx, Object[]
args, Function ctorObj, booleaninNewExpr) throws Exception
{
return new FtpClientHostObject();
}
public String jsFunction_connect(String hostname, int port)
throws IOException
{
// function body
}
public void jsSet_config(FtpClientConigconfig)
{
this.config = config;
}
publicFtpClientConfigjsGet_config()
{

International Journal on Communications (IJC) Volume 2 Issue 4, December 2013

The ScriptableObject is provided by Rhino and used

as the parent class for all the web resource class. The
subclass can define its own properties and methods in
the same way with the java class. However, it must
also provide the JavaScript API.
As shown in the document, there are four different
kinds of API for Scriptable instance.
1.

jsConstructor: it is used to initiate the JavaScript

instance, which will return the instance of the
subclass.

2.

jsSet_Name: Name is the property name of the

scriptable instance. It is used to provide the API
to set the value of the certain property.

3.

jsGet_Name: Name is the property name of the

scriptable instance. It is used to provide the API
to get the value of the certain property.

4.

jsFunction_Name. It can be called by the

instance returned by the jsConstructor using
the name.

www.seipub.org/ijc

name, which is realized by the message receiver. If the

service meets the general requirement, a new mashup
engine will be created and the parameters will be
forwarded to the corresponding engine. The service
result will be presented to users by the transport
package.

Deploy MashupScript as Web Service

The mashup script is written with the JavaScript
grammar and extended web resource API. Once the
mashup script is executed successfully, it should be
deployed under the mashup framework to access
through the web service. There are two steps to
publish the mashup script as the web service, and the
whole process is based on Axis2.
The first step is to listen to the repository and deploy
the mashup script. There is a fixed directory that is
used to store mashup scripts. Once the mashup script
is put or deleted under that directory, the listener will
prompt the change. This is called hot deploy. It is
implemented using multi-thread technology. The
detailed process is described below.
1.

Init the context, containing the directory place

and filename suffix, which is .js defaultly;

2.

Get a repository listener and invoke the start

Listener() method;

3.

Once a mashup script is changed, deleted or

added, the listener will catch the change and
inform the deployment.

4.

The deployment would generate/delete the

corresponding mashup script in the management
console for the message receiver.

The second step is to listen to the request and provide

the engine and transport for invoking the web service.
Once the request is coming, it should check whether
the system provides this service by checking the server

FIGURE 4 SERVICE EXECUTION PROCESS

Mashup Visualization
How to customize the user interface for different
service on different platforms is always a tough
problem for mashup. As mentioned before in the paper,
a new way to describe the mashup logic in JavaScript
has been provided. Since JavaScript is a popular
programming language for writing front-end logic, this
mashup pattern enhances the effective of writing the
user interface and processing the mashup result on
different platforms.

FIGURE 5 MASHUP USER INTERFACE FOR WEB USERS

119

www.seipub.org/ijc

International Journal on Communications (IJC) Volume 2 Issue 4, December 2013

Different Solutions for Web User And Mobile User

There are two completely different kinds of users who
need to access the mashup, namely web users and
mobile users. Different solutions are taken for different
platforms.
For the web users, the web page is a general way to
provide the user interface. The web page would invoke
the mashup and show the mashup result on the page.
Below is the user interface figure for web page
invoking mashup.
Gadget refers to the computer programs that provide
services without requiring an independent application
to be launched for each one. Gadget is provided for the
mobile users, which is a lightweight tool to show the
mashup.

XSLT document for web users would be taken as an

example to describe the detail technology below.
XSLTs Output Method
XSLT can be used as a template to generate different
type of document. In order to generate the user
interface for the web users, the output variable should
be defined as one of the types used as web pages.
<xsl:stylesheetversion="1.0">
<xsl:output method="html"/>
</xsl:stylesheet>

Define Style for the Web Page

This part can be used to define the web style for the
whole html that would be generated. The styles
defined in the template can be changed easily to
generate different styles for the html.
<xsl:template match="/">
<html>
<head>
<style type="text/css">
//define style here
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>

Template for ATtribute

FIGURE 6 MASHUP USER INTERFACE FOR MOBILE USERS

To support the user interface for both web users and

mobile users, the mashup server must be Internet
accessible to provide the mashup invoking.
Automatically Generate UI Code for Mashup
As discussed above, we have designed and
implemented different solutions for different platforms
to invoke and show the mashup. We can write the user
interface easily since it is same with the common frontend development. In the paper, we also provided a
template to generate the user interface automatic. It is
very convenient for the users who have the demand to
focus on the mashup development, since the mashup
only need service-specific codes before it can begin to
work.
In the paper, XSLT is a tool that commonly used to
transform the XML document to a document that can
be recognized by the browser. In the paper, Different
XSLT documents have been defined for different
platforms to generate the template user interface. The
120

The class values have already defined in the style part

of the template. Template is defined here to present a
sample for the attribute name and value.
<xsl:template match="@*">
<span class="fx-atnm">
<xsl:text></xsl:text>
<xsl:value-of select="name()"/>
</span>
<xsl:text>="</xsl:text>
<span class="fx-att">
<xsl:value-of select="."/>
</span>
<xsl:text>"</xsl:text>
</xsl:template>

Performance and Comparative Analysis

This paper proposed a new mashup pattern that
provides dynamic services mashup and common user
interface. Since the mashup script is written in
JavaScript logic, not only the development cycle of the
mashup is shortened, but also the performance of the
mashup is enhanced observably.
The table below is the service response time for the
mashup. It is executed under a Pentium(R) Dual-Core
CPU E5800 @ 3.20GHz 3.20 GHz 2.00GB machine to
show the response time for the different parallelism.

International Journal on Communications (IJC) Volume 2 Issue 4, December 2013

TABLE 1 SERVICE RESPONSE TIME

Platform
Name

Parallelism

Mashup

20
40
60

Min.
(ms)
9
9
9

Max.
(ms)
845
951
1159

Avg.
Tps
Fault
(ms) (tran/s)
30.42
25.71
0
61.92
49.63
0
105.89 69.98
0

As seen from the table, the response time seems to be

linear with the parallelism growth, and the average of
time continues steady growth.
In order to give a perceptual intuition about the new
pattern, a comparative analysis between mashup, ETL
and SOA is given below.
TABLE 2 PLATFORM COMPARISON

Platform
Mashup
ETL
SOA

Create
New
Services
Yes
Yes
Yes

Web
Service
Invoking
Yes
No
Yes

Support
Dynamic
Service
Yes
No
Yes

Mash
Service
Up
Yes
Yes
No

Provide
UI
Yes
Yes
No

As shown in Table 2, ETL and SOA are two common

tools that can be used to create new services, which
have a big difference from mashing services up. The
ETL tool cannot invoke the web service and doesnt
support the dynamic services. While the SOA platform
costs a lot to mash the services up and it fails to
provide user interface. The mashup platform
implemented in the paper can support all the features
above.
Conclusion and Futrue Work
This paper provided a mashup pattern that can be
used to mash dynamical services up and the user
interface for cross-platform. The whole mashup
framework based on the mashup pattern contains
three different layers to support the resource access,
mashup logic and user interface. By taking this pattern,
we get a great performance when executing the
mashup concurrently.
In the future, we will continue to increase the mashup
resources, improve the mashup performance and
research on applying JavaScript on mashup logic.
Besides, scalability tests and comparative analysis may
be conducted with data flow in larger scales. Further
improvements are expected.
ACKNOWLEDGMENT

This research was supported by the National Grand

Fundamental Research 973 Program of China under
Grant No. 2011CB302506, 2011CB302704; National Key

www.seipub.org/ijc

Technology Research and Development Program of

China Research on the mobile community cultural
service aggregation supporting technology" (Grant No.
2012BAH94F02); National High-tech R&D Program of
China (863 Program) under Grant No. 2013AA102301;
National Natural Science Foundation of China under
Grant No. 61001118, 61132001); Program for New
Century Excellent Talents in University (Grant No.
NCET-11-0592); Project of New Generation Broad band
Wireless Network under Grant No. 2011ZX03002-00201
REFERENCES

Erl T. Karmarkar A[M],Web Service Contract Design and

Versioning for SOA, Pearson Education,First printing,
September 2008.
Gerald Bader, Amin Anjomshoaa and A Min Tjoa, Privacy
Aspects

of

Mashup

Architecture,

in

Proc.

IEEE

International Conference on Social Computing/IEEE

International Conference on Privacy, Security, Risk and
Trust, p 1141-1146, 2010.
Kent Ka. Iok Tong[M], Developing Web Services with
Apache Axis2, TipTec Development, Second edition
March 2008, 2005-2008.
Kirk

Knoernschild.

Prentice

Hall,Java

Application

Architecture Modularity Patterns with Examples Using

OSGi, 15 March 2012.
Kunjian Sun, SETL: A scalable and high performance ETL
system, System Science, Engineering Design and
Manufacturing

Informatization

(ICSEM),

2012

3rd

International Conference on (Volume:1 ).

Ling Jin, Meina Song and Junde Song, Mobile Mashup
Architecture

Solution,

in

Proc.

2010

IEEE

2nd

Symposium on Web Society, SWS 2010, p 698-704, 2010.

Mozilla Rhino. (Sep 2012). Mozilla Developer Network,
Available: https://developer.mozilla.org/en-US/docs/.
Paul Fremantle and Srinath Perera, Carbon: Towards a
Server Building Framework for SOAPlatform,in Proc.
5th Workshop on Middleware for Service Oriented
Computing, MW4SOC 2010, Held at the ACM/IFIP/
USENIX International Middleware Conference, p 7-12,
2010.
Wso2, http://wso2.com/, Sep. 2013.
XSLT,http://www.w3.org/TR/xslt/, Sep,2013

121