Skip to content

PhoneGap plugin for creating/showing/hiding/messaging/animating additional views outside of the main window.

License

Notifications You must be signed in to change notification settings

maronk/phonegap-plugin-wizViewManager

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

PLUGIN:

phonegap-plugin-wizViewManager
version : 1.9
last update : 06/11/2012

CHANGELOG:


- First pull request from [maxogden](https://github.com/maxogden) - Thanks Max!

KNOWN ISSUES:


- an outstanding issue where animation options do not work as they throw EXC_BAD_ACCESS errors on Simulator only.

DESCRIPTION :

PhoneGap plugin for;

creating,
removing,
showing,
hiding,
messaging (cross communication of strings to each and every view),
animating,
resizing,
loading source into views.

INSTALL (iOS):

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)

About

PhoneGap plugin for creating/showing/hiding/messaging/animating additional views outside of the main window.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Objective-C 83.8%
  • HTML 12.3%
  • JavaScript 2.4%
  • Shell 1.5%