-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
6 additions
and
83 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,90 +1,13 @@ | ||
# App Store Widget Boilerplate | ||
# List View AutoLoadMore Widget | ||
|
||
This boilerplate gives you all you need to start a new custom widget for Mendix | ||
5.6.0 and up. | ||
|
||
The boilerplate contains: | ||
- Directory structure | ||
- Readme.md | ||
- License | ||
- JavaScript source | ||
- XSD for package.xml, to configure properties of the widget, visible inside the | ||
Mendix business modeler | ||
|
||
## Contributing | ||
|
||
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)! | ||
|
||
## Typical usage scenario | ||
|
||
Use this template to start building a widget for Mendix 5. | ||
Alter this README.md file and describe what your widget does. | ||
|
||
## Description | ||
|
||
The javascript inside the widget has examples of: | ||
- Using CSS within a widget | ||
- Using templating | ||
- Loading external library's | ||
- DOM manipulation | ||
- Event attaching | ||
- Loading data | ||
- Executing microflow and sending data | ||
- Working with the context object, which is an object in the current context | ||
(e.g. the one displayed in a DataView). | ||
|
||
### Dojo AMD module list | ||
|
||
The JavaScript contains an extensive list of modules that may be used to build a | ||
widget. It is best to reduce this list to what is actually used. Use JSHint to | ||
help identify errors and problems. | ||
|
||
** Be sure to keep the module name array and the parameter list of the anonymous | ||
function below the module list in sync! ** | ||
|
||
The following modules are necessary for all widgets: | ||
- dojo/_base/declare | ||
- mxui/widget/_WidgetBase | ||
- dijit/_Widget | ||
|
||
If your widget does not use an HTML template: | ||
- Remove dijit/_TemplatedMixin from the module list | ||
- Remove _Templated from the parameter list of the anonymous function below the module list | ||
- Remove _Templated from the parameter list of the declare call | ||
- Remove the templates folder | ||
|
||
If your widget does not need jQuery: | ||
- Remove WidgetName/widget/lib/jquery from the module list | ||
- Remove _jQuery from the parameter list of the anonymous function below the module list | ||
- Remove _jQuery from the parameter list of the declare call | ||
- Remove jquery.js from src\WidgetName\widget\lib\ Or remove the lib folder if you don't include external libraries in the widget. | ||
|
||
### AMD caveats | ||
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. | ||
|
||
## Migrating a widget to Dojo AMD | ||
|
||
A widget that uses Dojo AMD may not refer to functions like *dojo.forEach* etc. | ||
All necessary modules must be declared on the module list at the top of the source. | ||
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. | ||
|
||
Replacing all 'old' Dojo calls in an existing source can be a bit of a pain. | ||
## Use | ||
|
||
Here is a list of commonly used functions and their new counterpart: | ||
Simply place this widget directly below a List View, then configure the settings: | ||
|
||
Old | New | ||
---------- |---------- | ||
mxui.dom | domMx | ||
dojo.byId | dom.byId | ||
dojo.query | document.querySelector | ||
dojo.forEach | dojoArray.forEach | ||
dojo.hitch | lang.hitch | ||
dojo.addClass | domClass.add | ||
dojo.removeClass | domClass.remove | ||
dojo.hasClass | domClass.contains | ||
dojo.replaceClass | domClass.replace | ||
dojo.empty | domConstruct.empty | ||
dojo.place | domConstruct.place | ||
dojo.on | on | ||
dojo.window | win | ||
|
||
The referenced modules are in the module list of the boilerplate JavaScript. | ||
- Interval - Choose the interval to run the check to see if we should load more. Default: 250ms | ||
- 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. |