Information Technology Reference
In-Depth Information
#imageUrl
. When a user inputs some keywords to slot
#query
, the image search
object retrieves the corresponding pictures using the Bing Search API and sets
the title and the url of the first candidate of retrieved results to slot
#title
and
slot
#imageUrl
respectively.
Each object is defined straightforwardly just by adding a few code for extended
functionalities. For example, to define the image object, we needed the following
JavaScript code to define new slot
#url
:
function ImageController($scope, $injector)
{
$injector.invoke(WebbleController, this, {$scope: $scope});
$scope.publicSlotList.push('url');
$scope.slots.url = 'http://www.idmt.fraunhofer.de/.../idmt-logo.gif';
};
ImageController.prototype = Object.create(WebbleController.prototype);
The
ImageController
derives the basic setup from the
WebbleController
,sets
#url
as a public slot (which means an accessible slot form other objects), and
defines the default value of the slot. The view of the image object can be defined
declaratively:
<div class="webble" ng-controller="ImageController">
<img ng-src="{{slots.url}}">
</div>
Here, the directive 'webble' is used as the CSS class of the
<div>
element, and
the attribute directive
ng-controller
associates the controller of this media
object with the
<div>
. Inside of the
<div>
,thereisan
<img>
element used to
display a picture. It has a directive
ng-src
to bind the image source to the value
of slot
#url
.
Figure 5 shows an example composition of above three objects. With the drag-
and-drop operation of objects, users can paste an object into another object.
Here, the text input object, the label object, and the image object are pasted
on the image object as its children. Moreover, these objects are connected to
slot
#url
,
#title
,and
#imageUrl
of the image search object, respectively. The
slot connections are customizable through the basic connection-setting dialog
on demand. When a user enters a keyword into the text box, the image search
object retrieves the corresponding picture and updates the value of slot
#title
and
#imageUrl
, finally the label object and the image object display the corre-
sponding title and the picture.
We tested the developed platform with multiple Web browsers on multiple
devices on demand. We used the latest stable version of Google Chrome, Fire-
fox, Safari, and Opera both on Windows and Mac OS. As mobile devices, we
used Google Chrome and Firefox both on Android and iOS. On all the Web
browsers on Windows and Mac OS, the platform worked as intended. However,
on the mobile devices, although the functionality of each object worked cor-
rectly, the drag-and-drop operation of object did not work. The reason is that, for
