Skip to content

Commit 5a01d9d

Browse files
joelvdgraafjoelvdgraaf
committed
Version 3.0.0
Ew widget added: DataLoader widget. A simple UI component to replace the loading function of Microflow calls
1 parent 3dc7788 commit 5a01d9d

File tree

415 files changed

+369
-31935
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

415 files changed

+369
-31935
lines changed

‎src/DataviewLoader/DataLoader.xml‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<widget id="DataviewLoader.widget.DataLoader" needsEntityContext="true" xmlns="http://www.mendix.com/widget/1.0/">
3+
<name>DataLoader</name>
4+
<description>Change the loading experience to the user to just load parts of the page with the usage of this widget.</description>
5+
<icon>iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACN0lEQVRYR+3Xy6tOURjH8c9hQDF0nchESAxcBpS/wTXXMnGdG2As/gS5DJQTRXKNv0BJSCFkIjOOCckI0aN3a7Vae7/r7DdlcNZ0PZfvftZaz+/ZY/qvLTiLMRzE7T6hwrnv+oh5A+cJzO8TaBSAX1nCXrF6OQ0S/zOA1TiPWTiBWy2lrQXYiZP4gv14nsYrVeAJ1gyMfmIvrhYgagD24SKmDfwfYsMwgNdYlhi1QXxILl5cyAUZZJ48tl9g1TCAzbiO6RnE9uw4NmXP8G5ivwuXky+Pre+I2PeHAcT+boxnEG+wvPKpvceixPYHduBm7t/1CvbgUgIRd2NdJcCrBDaSx0W8UfId9gy34RS+4gieVgKsxxnMxDHcafMbBlCZr7/ZFEBUoFG1RliaesbbPtxX5ZJD2YpzmJMd1KdQ0QBIVS0/zGg2C/uf8B/PSJQnb0JOBEBI6dyWJKUON1mezvgBEB0txKd0BDFopB1ussnDvjP+1Cv47ysQqnYa33AAjyovwUZcwAwcbdOBiNVVgVzPnyGmpZoVyrl0YNg11LQClIaJULgVNdnxDosT21aIUgVCOq8UhonomPcKHS5Gs/y/ILrftYqhpliBt1iSJIpJJqDyYSLtcKX/gvCJqSidrF5iZVrFUgUeY+3AqC15bNcMpTnEA8QF/btKADE0xi/XbBzPZ7jEtwYgzGMOjLH8Mw4hht5OgMp7VlWBobFGaUS1FeiEGAUgVbneqjkKQKNyzTPspZq/AZS8dI6xqepWAAAAAElFTkSuQmCC</icon>
6+
<properties>
7+
<property key="fadeContent" type="boolean" defaultValue="false">
8+
<caption>Fade in content</caption>
9+
<category>Behavior</category>
10+
<description>When the content has been loaded, must there be a fade in executed?</description>
11+
</property>
12+
<property key="visibilityCheck" type="boolean" defaultValue="false">
13+
<caption>Visibility handling</caption>
14+
<category>Behavior</category>
15+
<description>Is the widget placed in conditional visibility part (example: Tabpage)? This check will prevent for loading the content before the widget is visible.</description>
16+
</property>
17+
<property key="loadingMF" type="microflow" required="false">
18+
<caption>Microflow</caption>
19+
<category>Datasource</category>
20+
<description>Microflow that will do the hard work and open the result page as well.</description>
21+
<returnType type="Void" />
22+
</property>
23+
<property key="asyncCall" type="boolean" defaultValue="false">
24+
<caption>Asynchronous call</caption>
25+
<category>Datasource</category>
26+
<description>Must the microflow be executed asynchronous?</description>
27+
</property>
28+
<property key="loadingText" type="translatableString" required="false">
29+
<caption>Loading text</caption>
30+
<category>Behavior</category>
31+
<description>Like a microflow call a progress message can be set, now the Dataview loader supports this too!</description>
32+
</property>
33+
<property key="errorText" type="translatableString" required="false">
34+
<caption>Error text</caption>
35+
<category>Behavior</category>
36+
<description>Text that is visible when the microflow fails in execution.</description>
37+
</property>
38+
</properties>
39+
</widget>

‎src/DataviewLoader/widget/DataLoader.js‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
/*global logger*/
2+
/*
3+
DataviewLoader
4+
========================
5+
6+
@file : DataviewLoader.js
7+
@version : 2.2.1
8+
@author : JvdGraaf
9+
@date : Mon, 24 Apr 2017 15:02:42 GMT
10+
@copyright : Appronto
11+
@license : Apache2
12+
13+
*/
14+
define([
15+
"dojo/_base/declare",
16+
"mxui/widget/_WidgetBase",
17+
"dijit/_TemplatedMixin",
18+
"dojo/dom-style",
19+
"dojo/dom-class",
20+
"dojo/_base/lang",
21+
"dojo/_base/event",
22+
"dojo/text!DataviewLoader/widget/template/DataviewLoader.html"
23+
], function (declare, _WidgetBase, _TemplatedMixin, dojoStyle, dojoClass, dojoLang, dojoEvent, widgetTemplate) {
24+
"use strict";
25+
26+
return declare("DataviewLoader.widget.DataLoader", [_WidgetBase, _TemplatedMixin], {
27+
templateString: widgetTemplate,
28+
29+
// DOM elements
30+
divContent: null,
31+
divLoader: null,
32+
33+
// Internal variables. Non-primitives created in the prototype are shared between all widget instances.
34+
_contextObj: null,
35+
36+
postCreate: function () {
37+
logger.debug(this.id + ".postCreate");
38+
this._updateRendering();
39+
this._setupEvents();
40+
},
41+
42+
update: function (obj, callback) {
43+
console.log(this.id + ".update on new object");
44+
this._contextObj = obj;
45+
this._resetSubscriptions();
46+
this._updateRendering();
47+
if (callback) {
48+
callback();
49+
}
50+
},
51+
52+
resize: function (box) {
53+
console.log(this.id + ".resize");
54+
// TODO: How to handle tabs and conditional visibility
55+
if (this.domNode.offsetParent !== null && this.visibilityCheck) {
56+
this._loadAndShowContent();
57+
}
58+
},
59+
60+
uninitialize: function () {
61+
logger.debug(this.id + ".uninitialize");
62+
},
63+
64+
_setupEvents: function () {
65+
if (this.fadeContent) {
66+
dojoClass.add(this.divContent, "loaderfade");
67+
}
68+
},
69+
70+
_updateRendering: function () {
71+
logger.debug(this.id + "._updateRendering");
72+
try{
73+
if (this._contextObj) {
74+
if (this.loadingText && this.divLoader.innerHTML.indexOf(this.loadingText) === -1) {
75+
var text = "<div class=\"text-center\"><h3 class=\"loaderheader\">" + this.loadingText + "</h3></div>";
76+
this.divLoader.innerHTML = text + this.divLoader.innerHTML;
77+
}
78+
79+
dojoStyle.set(this.divContent, "display", "none");
80+
dojoStyle.set(this.divLoader, "display", "block");
81+
82+
if (this.domNode.offsetParent !== null || !this.visibilityCheck) {
83+
this._loadAndShowContent();
84+
}
85+
}
86+
} catch(error){
87+
console.log(this.id + "._updateRendering error occurred: " + JSON.stringify(error));
88+
}
89+
},
90+
91+
_loadAndShowContent: function () {
92+
logger.debug(this.id + "._loadAndShowContent");
93+
if (this._contextObj) {
94+
this._execMf(this.loadingMF, this._contextObj.getGuid(), this._processMicroflowCallback, this._processMicroflowFailure);
95+
}
96+
},
97+
98+
_processMicroflowCallback: function (objs) {
99+
logger.debug(this.id + "._processMicroflowCallback");
100+
},
101+
102+
_processMicroflowFailure: function () {
103+
if (this.errorText) {
104+
this.divContent.innerHTML = "<div class=\"text-center\"><h3 class=\"loaderheader\">" + this.errorText + "</h3></div>";
105+
}
106+
},
107+
108+
_resetSubscriptions: function () {
109+
logger.debug(this.id + "._resetSubscriptions");
110+
this.unsubscribeAll();
111+
112+
// if (this._contextObj && (this.refreshAction === "Object" || this.refreshAction === "Attribute")) {
113+
// console.log(this.id + "._resetSubscriptions setup refresh handler: " + this.refreshAction);
114+
// this.subscribe({
115+
// guid: this._contextObj.getGuid(),
116+
// callback: dojoLang.hitch(this, function (guid) {
117+
// if (this._loadingStarted == false) {
118+
// if (this.pageMF) {
119+
// this._pageInitiated = false;
120+
// }
121+
// if (this.refreshAction == "Attribute" && this.refreshtAttr && this._contextObj.get(this.refreshtAttr)) {
122+
// console.log(this.id + ".Refresh triggered on attribute change.");
123+
// this._updateRendering();
124+
// } else if (this.refreshAction == "Object") {
125+
// console.log(this.id + ".Refresh triggered on object change.");
126+
// this._updateRendering();
127+
// }
128+
// } else {
129+
// console.log(this.id + ".Refresh skip because of loading started.");
130+
// }
131+
// })
132+
// });
133+
// }
134+
},
135+
136+
_execMf: function (mf, guid, cb, cbfailure) {
137+
logger.debug(this.id + "._execMf" + (mf ? ": " + mf : ""));
138+
if (mf && guid) {
139+
mx.data.action({
140+
params: {
141+
applyto: "selection",
142+
actionname: mf,
143+
guids: [guid]
144+
},
145+
async: this.asyncCall,
146+
origin: this.mxform,
147+
callback: (cb && typeof cb === "function" ? dojoLang.hitch(this, cb) : null),
148+
error: (cbfailure && typeof cbfailure === "function" ? dojoLang.hitch(this, cbfailure) : null)
149+
});
150+
}
151+
}
152+
});
153+
});
154+
155+
require(["DataviewLoader/widget/DataLoader"]);

‎src/DataviewLoader/widget/ui/DataLoader.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/* CSS3 for loading spinner */
2+
.dataviewloader .loadergif{
3+
min-height: 120px;
4+
}
5+
6+
.dataviewloader .loader {
7+
margin: auto;
8+
border: 16px solid #f3f3f3;
9+
border-radius: 50%;
10+
border-top: 16px solid #3498db;
11+
width: 120px;
12+
height: 120px;
13+
-webkit-animation: spin 2s linear infinite;
14+
animation: spin 2s linear infinite;
15+
}
16+
17+
@-webkit-keyframes spin {
18+
0% { -webkit-transform: rotate(0deg); }
19+
100% { -webkit-transform: rotate(360deg); }
20+
}
21+
22+
@keyframes spin {
23+
0% { transform: rotate(0deg); }
24+
100% { transform: rotate(360deg); }
25+
}
26+
27+
/* Fade in content */
28+
.dataviewloader .loadercontent.loaderfade{
29+
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
30+
-moz-animation: fadein 2s; /* Firefox < 16 */
31+
-ms-animation: fadein 2s; /* Internet Explorer */
32+
-o-animation: fadein 2s; /* Opera < 12.1 */
33+
animation: fadein 2s;
34+
}
35+
36+
@keyframes fadein {
37+
from { opacity: 0; }
38+
to { opacity: 1; }
39+
}
40+
/* Firefox < 16 */
41+
@-moz-keyframes fadein {
42+
from { opacity: 0; }
43+
to { opacity: 1; }
44+
}
45+
/* Safari, Chrome and Opera > 12.1 */
46+
@-webkit-keyframes fadein {
47+
from { opacity: 0; }
48+
to { opacity: 1; }
49+
}
50+
/* Internet Explorer */
51+
@-ms-keyframes fadein {
52+
from { opacity: 0; }
53+
to { opacity: 1; }
54+
}

‎src/package.xml‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<?xml version="1.0" encoding="utf-8" ?>
22
<package xmlns="http://www.mendix.com/package/1.0/">
3-
<clientModule name="DataviewLoader" version="2.2.1" xmlns="http://www.mendix.com/clientModule/1.0/">
3+
<clientModule name="DataviewLoader" version="3.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
44
<widgetFiles>
55
<widgetFile path="DataviewLoader/DataviewLoader.xml" />
6+
<widgetFile path="DataviewLoader/DataLoader.xml" />
67
</widgetFiles>
78
<files>
89
<file path="DataviewLoader/widget/" />

‎test/DataviewLoader.mpr‎

7.41 MB
Binary file not shown.

test8/package.xml renamed to test/package.xml

File renamed without changes.

test8/theme/LICENSE renamed to test/theme/LICENSE

File renamed without changes.

‎test/theme/favicon.ico‎

-1.12 KB
Binary file not shown.

‎test/theme/index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,8 @@
66
<title>Mendix</title>
77
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
88
<meta name="apple-mobile-web-app-capable" content="yes">
9-
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css?{{cachebust}}">
10-
<link rel="stylesheet" href="mxclientsystem/mxui/ui/mxui.css?{{cachebust}}">
11-
12-
<link rel="stylesheet" href="styles/css/lib/lib.css?{{cachebust}}">
13-
<link rel="stylesheet" href="styles/css/custom/custom.css?{{cachebust}}">
14-
<!--<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">-->
9+
10+
{{themecss}}
1511

1612
<!-- ICONS EXAMPLE -->
1713

0 commit comments

Comments
 (0)