MashZone NextGen 10.2 | Appendix | Legacy Presto components | Apps and Workspaces | Custom Apps | Create Fully Custom Apps in the App Editor | Enable User-Initiated or Automatic Refreshes | User-Initiated App Refreshes
 
User-Initiated App Refreshes
To include the Refresh button in the default app Title Bar for user-initiated refreshes, a custom app must implement the onRefresh method from the MashZone NextGenApp API. See The Structure of a MashZone NextGen App for more information on the default app Title Bar.
The JavaScript class for this custom app that enables the Refresh button and handle refresh events is discussed in Initial Render and Refresh Methods.
The additional resource files for this user-initiated example include: HTML and CSS Source, the App Specification for User-Initiated refreshTest and the Mashup EMML that returns the current date and time.
Initial Render and Refresh Methods
The class for the refreshTest example app does most of the basics to declare a namespace, define a constructor for the class and invoke the refreshDateTime mashup to get the current date and time as components.
The requirements of rendering the current date and time, both initially and later when users click the Refresh button are found in the onRefresh and getNow methods:
Presto.namespace("Sample");

Sample.RefreshTest = function( app ) {
this.rootDiv = jQuery(app.getRootElement);
this.app = app;
var connection = app.getConnection();
var self = this;

//define markup to render date and time as jQuery template
var timeMarkup = "<p>Click the Refresh button in the toolbar to update the date and time. </p>" +
"<p>The current date is <span class='thismonth'>${month}</span>/<span class='thisday'>${day}</span>/<span class='thisyear'>${year}</span>.</p>" +
"<p>The time is now <span class='thishour'>${hour}</span>:<span class='thisminute'>${minute}</span>:<span class='thissec'>${second}</span>.</p>";
jQuery.template("timeTemplate", timeMarkup);

//clear all exceptions and get current date and time
this.onRefresh = function() {
app.hideInfoMessage();
jQuery(".curtime").empty();
self.getNow();
};

//get current date and time
this.getNow = function() {
connection.request({
url: "/mashzone/edge/api/rest/refreshDateTime/Invoke?x-presto-resultFormat=json",
type: "get",
contentType: "application/x-www-form-urlencoded",
data: ""
},
{ onSuccess: function(response, responseHeaders) {
if (response.result) {
var now = response.result;
jQuery.tmpl("timeTemplate", now).appendTo(".curtime");
} else {
self.rootDiv.html("no date or time to find!");
}
},
onFailure: function(e) {
app.handleException(e);
}

});
};

this.getNow();
};
The getNow method handles the task of invoking the mashup to get the current date and time and using those results to render appropriate content in the app. This method is called at the end of the class to render data when the app is first loaded.
The onRefresh method clears any error messages that may have displayed, removes any existing data and then calls getNow to get update date and time information and render that.
HTML and CSS Source
The HTML and CSS source for this example are:
<div
></div>
and
div.curtime { display: block; padding: 5 10 8 10;}
div.curtime p {margin-top: 5; margin-bottom: 5;}
.thismonth, .thisyear, .thisday, .thishour, .thisminute, .thissec {
font-style: italic;
}
App Specification for User-Initiated refreshTest
The properties that were updated specifically for user-initiated refreshes in this example are shown in bold:
<app id="refreshTest" jsclass="Sample.RefreshTest" name="refreshTest"
minimizable="false" draggable="false" height="auto" width="auto">
<title>Testing Refresh Toolbar</title>
<description>Custom App to test enabling the Refresh button.</description>

<properties/>

<presto-meta name="presto.desktopCompatible" type="text">true</presto-meta>
<presto-meta name="presto.phoneCompatible" type="text">false</presto-meta>
<presto-meta name="presto.tabletCompatible" type="text">false</presto-meta>

<requires>
<require name="jquery-tmpl" type="library" version="1.0"/>
<require src="js/app.js" type="script"/>
<require src="css/app.css" type="css"/>
<require src="html/app.html" type="html"/>
</requires>
</app>
Mashup EMML
This mashup uses the standard XPath function, current-dateTime(), to get the current date and time and then parse this into individual components that are returned as a complex document. This result is then used in the example app to illustrate the implementation requirements for the app Refresh toolbar button.
<mashup name = "refreshDateTime"
xmlns:xsi= "http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.openmashup.org/schemas/v1.0/EMML/
../schemas/EMMLPrestoSpec.xsd"
xmlns="http://www.openmashup.org/schemas/v1.0/EMML"
xmlns:macro="http://www.openmashup.org/schemas/v1.0/EMMLMacro">

<output name="result" type="document"/>

<variable name="nowString" type="string" />
<assign fromexpr="current-dateTime()" outputvariable="$nowString"/>

<variable name="year" type="string"/>
<assign fromexpr="substring($nowString,1,4)" outputvariable="$year"/>
<variable name="month" type="string"/>
<assign fromexpr="substring($nowString,6,2)" outputvariable="$month"/>
<variable name="day" type="string"/>
<assign fromexpr="substring($nowString,9,2)" outputvariable="$day"/>
<variable name="hour" type="string"/>
<assign fromexpr="substring($nowString,12,2)" outputvariable="$hour"/>
<variable name="minute" type="string"/>
<assign fromexpr="substring($nowString,15,2)" outputvariable="$minute"/>
<variable name="second" type="string"/>
<assign fromexpr="substring($nowString,18,2)" outputvariable="$second"/>
<constructor outputvariable="result">
<result>
<year>{$year}</year>
<month>{$month}</month>
<day>{$day}</day>
<hour>{$hour}</hour>
<minute>{$minute}</minute>
<second>{$second}</second>
</result>
</constructor>
</mashup>
Copyright © 2013-2018 | Software AG, Darmstadt, Germany and/or Software AG USA, Inc., Reston, VA, USA, and/or its subsidiaries and/or its affiliates and/or their licensors.
Innovation Release