phonegap-plugin-wizViewManager
version : 1.9
last update : 06/11/2012
- First pull request from [maxogden](https://github.com/maxogden) - Thanks Max!
- an outstanding issue where animation options do not work as they throw EXC_BAD_ACCESS errors on Simulator only.
PhoneGap plugin for;
creating,
removing,
showing,
hiding,
messaging (cross communication of strings to each and every view),
animating,
resizing,
loading source into views.
Project tree
project
/ www
/ phonegap
/ plugin
/ wizViewManager
/ wizViewManager.js
/ wizViewMessenger.js
/ ios
/ project
/ Plugins
/ wizViewManager
/ wizViewManager.h
/ wizViewManager.m
1 ) Arrange files to structure seen above.
2 ) Add to Cordova.plist in the plugins array;
Key : wizViewManager
Type : String
Value : wizViewManager
3 ) Add <script> tag to your index.html
<script type="text/javascript" charset="utf-8" src="phonegap/plugin/wizViewManager/wizViewManager.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap/plugin/wizViewManager/wizViewMessenger.js"></script>
(assuming your index.html is setup like tree above)
4 ) Follow example code below.
# EXAMPLE CODE : #
Creating a view
wizViewManager.create(String viewName, JSONObject options, Function success, Function fail);
* Example options object;
{
"height": "300", [pixels - default : fills height] "width": "300", [pixels - default : fills width] "x": "0", [pixels - default : 0] "y": "0", [pixels - default : 0] "src": "http://google.com" [URL/URI to load]
};
Load source into view
wizViewManager.load(String viewName, String URI or URL, Function success, Function fail);
Change or set the Layout of a view
wizViewManager.setLayout(String viewName, JSONObject options, Function success, Function fail);
* Height overrides top and bottom. Width overrides left and right.
* Top, bottom,left,right,width,height all take floats (0.25) or string "25%" as percents, int (25) as pixcels.
* Example options object;
{
"height": "300", [pixels - default : fills height]
"width": "300", [pixels - default : fills width]
"x": "0", [pixels - default : 0]
"y": "0", [pixels - default : 0]
"top": "0", [pixels or percent - default : 0]
"bottom": "0", [pixels or percent - default : 0]
"left": "0", [pixels or percent - default : 0]
"right": "0", [pixels or percent - default : 0]
};
Remove a view
wizViewManager.remove(String viewName, Function success, Function fail);
Show a view
wizViewManager.show(String viewName, JSONObject animOptions, Function success, Function fail);
* Animation Types;
slideInFromLeft - iOS
slideInFromRight - iOS
slideInFromTop - iOS
slideInFromBottom - iOS
fadeIn - iOS/Android
zoomIn - iOS/Android
* Example animOptions object;
animation : {
"type": "fadeIn", [string - default : fadeIn]
"duration": "300", [int - default : 500]
};
Hide a view
wizViewManager.hide(String viewName, JSONObject animOptions, Function success, Function fail);
* Animation Types;
slideOutFromLeft - iOS
slideOutFromRight - iOS
slideOutFromTop - iOS
slideOutFromBottom - iOS
fadeOut - iOS/Android
zoomOut - iOS/Android
* Example animOptions object;
animation : {
"type": "fadeOut", [string - default : fadeOut]
"duration": "300", [int - default : 500]
};
Message a view
To send a messsage to a view, add this to the html you wish to send from use...
wizViewMessenger.message(targetView, message);
* targetView is the string name of the target view.
* message is the message string
* To send a JSON object as the message, stringify it before sending using: message = JSON.stringify(myObject)
add a receiver to your html that gets the message...
function wizMessageReceiver(message)
{
// your data comes in here
console.log('i got :' + message);
}
* message is the message string
* To receive a JSON object as the message, parse the object after receiving using: myObject = JSON.parse(message)