In previous posts I've explained
how to install WSO2 cApp into eclipse and
how to start creating a WSO2 product artefact.
So as I promised in the earlier posts, here is how you create an artefact. In this post I will explain how to create a gadget which can be deployed in WSO2 Gadget Server and viewed from Gadgets' portal.
1. Create a cApp project as in here.
2. Create a gadget artefact.
Click on 'Create New artefact' button in root-artifact.xml in your cApp project and Select "Gadget" OR Right click on the cApp project you created and Select "Gadget". You will get 'New Gadget" creation wizard.
At the 'Name' prompt, give your gadget artifact a name and proceed.
In the next screen, specify a name for the folder containing you gadget specific artifacts and finish the wizard.
NOTE: The project that you will be creating the artifact in will appear selected in this window. If you want you can change it here.
So after this initial step you should have your project structure like this:
3. Develope the gadget code.
WSO2 cApp loads open social development environment (OSDE) in Eclipse. This is one of the plugins that is getting installed with cApp. So if you double click on your .xml file (maps.xml in my case) you will have the OSDE opened up on the right side of the IDE.
Now lets fill in the gadget code. The code that I am going to put in is a sample taken from googles gadget docs (http://code.google.com/apis/gadgets/docs/fundamentals.html#location).
In the proceeding steps I will show you how easy it is to create and deploy this using cApps.
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Map of __UP_loc__" height="300"
author="Jane Smith"
author_email="xxx@google.com" />
<UserPref name="loc"
display_name="Location"
required="true" />
<Content type="html">
<![CDATA[
<script src="http://maps.google.com/maps?file=js" type="text/javascript"></script>
<div id="map" style="width: 100%; height: 100%;"></div>
<script type="text/javascript">
var prefs = new gadgets.Prefs();
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var geocoder = new GClientGeocoder();
geocoder.getLatLng(prefs.getString('loc'), showMap)
function showMap(point) {
if (point!=null) {
map.centerAndZoom(point, 6);
}
};
</script>
]]>
</Content>
</Module>
And it is as simple as filling the tabs that you find at the bottom your IDE (see the image below).
ModulePrefs such as title, author, author_email can be filled in
Basic tab - '
Attributes' section, fetures can be put in '
Features' section of the same.
I have a
UserPref, 'loc' in my gadget which I created in 'UserPref' tab and yes I made it a required parameter. Since it doesn't have a default value I kept that option empty and I stick to default 'String' data type.
Then in the '
Content tab', I added my content. Click 'Add' button in 'Content' tab and say its an 'html' content (as you see in above code it is Content type="html"), and since I go by default view I can leave 'view' type empty.
After you do that, you will have an entry created for the view that you added just now and now you need to fill in the 'Content' to it. So fill in 'Content'; This includes all things you put within CDATA tags.
NOTE: You DON'T need to type in <
