|
1 |
| -# App Store Widget Boilerplate |
| 1 | +# List View AutoLoadMore Widget |
2 | 2 |
|
3 |
| -This boilerplate gives you all you need to start a new custom widget for Mendix |
4 |
| -5.6.0 and up. |
5 |
| - |
6 |
| -The boilerplate contains: |
7 |
| -- Directory structure |
8 |
| -- Readme.md |
9 |
| -- License |
10 |
| -- JavaScript source |
11 |
| -- XSD for package.xml, to configure properties of the widget, visible inside the |
12 |
| - Mendix business modeler |
13 |
| - |
14 |
| -## Contributing |
15 |
| - |
16 |
| -For more information on contributing to this repository visit [Contributing to a GitHub repository](https://world.mendix.com/display/howto50/Contributing+to+a+GitHub+repository)! |
17 |
| - |
18 |
| -## Typical usage scenario |
19 |
| - |
20 |
| -Use this template to start building a widget for Mendix 5. |
21 |
| -Alter this README.md file and describe what your widget does. |
22 | 3 |
|
23 | 4 | ## Description
|
24 | 5 |
|
25 |
| -The javascript inside the widget has examples of: |
26 |
| -- Using CSS within a widget |
27 |
| -- Using templating |
28 |
| -- Loading external library's |
29 |
| -- DOM manipulation |
30 |
| -- Event attaching |
31 |
| -- Loading data |
32 |
| -- Executing microflow and sending data |
33 |
| -- Working with the context object, which is an object in the current context |
34 |
| -(e.g. the one displayed in a DataView). |
35 |
| - |
36 |
| -### Dojo AMD module list |
37 |
| - |
38 |
| -The JavaScript contains an extensive list of modules that may be used to build a |
39 |
| -widget. It is best to reduce this list to what is actually used. Use JSHint to |
40 |
| -help identify errors and problems. |
41 |
| - |
42 |
| -** Be sure to keep the module name array and the parameter list of the anonymous |
43 |
| -function below the module list in sync! ** |
44 |
| - |
45 |
| -The following modules are necessary for all widgets: |
46 |
| -- dojo/_base/declare |
47 |
| -- mxui/widget/_WidgetBase |
48 |
| -- dijit/_Widget |
49 |
| - |
50 |
| -If your widget does not use an HTML template: |
51 |
| -- Remove dijit/_TemplatedMixin from the module list |
52 |
| -- Remove _Templated from the parameter list of the anonymous function below the module list |
53 |
| -- Remove _Templated from the parameter list of the declare call |
54 |
| -- Remove the templates folder |
55 |
| - |
56 |
| -If your widget does not need jQuery: |
57 |
| -- Remove WidgetName/widget/lib/jquery from the module list |
58 |
| -- Remove _jQuery from the parameter list of the anonymous function below the module list |
59 |
| -- Remove _jQuery from the parameter list of the declare call |
60 |
| -- Remove jquery.js from src\WidgetName\widget\lib\ Or remove the lib folder if you don't include external libraries in the widget. |
61 |
| - |
62 |
| -### AMD caveats |
63 |
| -Working with jQuery can be difficult due to the fact that jquery does not adhere to the AMD standard correctly. Check out [Pull Request #13](https://github.com/mendix/AppStoreWidgetBoilerplate/pull/13) or the [Dojo AMD documentation](http://dojotoolkit.org/documentation/tutorials/1.10/modules/index.html) for details. |
64 |
| - |
65 |
| -## Migrating a widget to Dojo AMD |
66 |
| - |
67 |
| -A widget that uses Dojo AMD may not refer to functions like *dojo.forEach* etc. |
68 |
| -All necessary modules must be declared on the module list at the top of the source. |
| 6 | +This widget extends the functionality of the Mendix standard List View widget. It enables a List View to automatically load more content as you scroll down a page. |
69 | 7 |
|
70 |
| -Replacing all 'old' Dojo calls in an existing source can be a bit of a pain. |
| 8 | +## Use |
71 | 9 |
|
72 |
| -Here is a list of commonly used functions and their new counterpart: |
| 10 | +Simply place this widget directly below a List View, then configure the settings: |
73 | 11 |
|
74 |
| -Old | New |
75 |
| ----------- |---------- |
76 |
| -mxui.dom | domMx |
77 |
| -dojo.byId | dom.byId |
78 |
| -dojo.query | document.querySelector |
79 |
| -dojo.forEach | dojoArray.forEach |
80 |
| -dojo.hitch | lang.hitch |
81 |
| -dojo.addClass | domClass.add |
82 |
| -dojo.removeClass | domClass.remove |
83 |
| -dojo.hasClass | domClass.contains |
84 |
| -dojo.replaceClass | domClass.replace |
85 |
| -dojo.empty | domConstruct.empty |
86 |
| -dojo.place | domConstruct.place |
87 |
| -dojo.on | on |
88 |
| -dojo.window | win |
89 |
| - |
90 |
| -The referenced modules are in the module list of the boilerplate JavaScript. |
| 12 | +- Interval - Choose the interval to run the check to see if we should load more. Default: 250ms |
| 13 | +- Preload Factor - A factor to adjust how early content is loaded. A value of 1 means the load more button is clicked when first visible. 1.5 means it starts half a screen height earlier. 2 means it loads one full screen height early. |
0 commit comments