Hey,
So its been some time after the previous post and we have made some serious progress after that :-)
The work undertaken and done are as follows :
1. Improving upon on the codebase for cli
2. Making the basic layer for cordova for sugar to add plugins upon it
3. Making cli work on the windows platform
4. Completing accelerometer
5. Working on camera
So to discuss what we have got through this time ,I would like to take you through an example of a simple Hello World app , telling you how you can generate your own .xo from any web app and deploy it to your sugar environment.
To be precise, a web app signifies a bundle of files written in html,js and css and having some backend logic to perform a concrete task.Now the point concerning here is to get that web app to your sugar environment. The steps involved would be :
1. Setup your development environment - follow the instruction mentioned here
2. Issue the following command to to create a new cordova app :
cordova create <app_directory> <app_package_name> <app_name>
3. Now insert all your web app stuff to the www directory of the newly created project
4. To convert this web app to the .xo isa two step process :
(i) first add the sugar platform to your newly created cordova project by using command :
cordova platform add sugar
(ii) Then you build the project after making changes to web app if you wish to make any; by the command:
cordova build sugar
cordova build sugar
(iii) Find your newly create .xo in app_directory/platforms/sugar/
5. Now we can copy and paste the .xo in our sugar environment and issue the following command to install the xo :
sugar-install-bundle <name>.xo
FEW IMPORTANT NOTES :
1.As an added feature we have provided a --noframe option to the users who already know about sugar web. In that case we shall add no sugar -web feature in the index.html, that means the app_directory/www/index.html must contains all the toolbar and sugar ui related stuff like the index.html in the sugar-web-template. If you give no option in the build command, it is by default assumed that you dont know about sugar web and your web page is added in an iframe in the final index.html along with the sugar ui which is added around it. So you gotto decidie whether to leave the option of adding the sugar ui to the cordova-cli or do it on own. For the former you dont need any option and its activated by default while the later can be acheived by issuing the --noiframe option along.
2.In the windows environment the zip command that is used to create the .xo by the cordova build command doesn't work. So we provide an alternative for that. All the windows users are expected to set an environment variable name ZIPCOMMAND to something similar to the "zip -r" for windows. That is, it should be able to create a zip file recursively, as an option , people can use 7zip which gives an excellent command line tool for creating zips. So install 7zip and issue the following command before issuing cordova build command on windows :
set ZIPCOMMAND="c:\Program Files\7-Zip\7z.exe" a -r -tzip -aoa
Apart from this, we are currently working on providing you with various plugins for cordova which shall make the communication with the device capabilities easier. You can find the plugins here : https://github.com/
Have a look at the sample web app we used :
Screenshot of the web app in the browser :
The web app as in the sugar shell :
Source of the sample web app :
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="msapplication-tap-highlight" content="no" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
We'll hope to be back with a lot of cool developments on the plugin development front, so till then enjoy experimenting with sugary cordova ;-)
No comments:
Post a Comment