I am a bit silent in the blog these days because I am very busy building an easy installer for FatPhone.
In the process I am learning a lot of new stuff. Well, not exactly new stuff, it is actually old stuff in a new dress. Anyway I am excited to discover how using jQuery it is possible to implement in simple JavaScript what previously has to be done in complex Java.
Basically the biggest challenge of the FatPhone installer is to implement the creation of new asset, not just loading Elements. I want to use Javascript instead of CatalogMover, and I am having some success in this process.
In this post I am talking about one of the "secrets" of the upcoming FatPhone installer. I mean, asset creation using jQuery.
It is not all jQuery. Fatwire side, I am using the entry point for the XMLPost. You usually use XMLPost with the XMLPost utility.
Since it is not so easy to use it, I decided to keep the XMLPost on Fatwire side but write in jQuery the client side. Let's see how.
Let's assume we want to create a new asset, for example a Page, with name "Home" and description "HomePage".
You can describe this stuff in json, so this is the body of the Home.json file:
{
"AssetType": "Page",
"publication": "FatPhone",
"name": "Home",
"description": "HomePage"
}
"AssetType" is there because we are going to use the XMLPost entry point to create the Asset, and it requires a field "AssetType" to decide which type of asset is going to create.
Also "publication" is required to define to which site the new asset will belong.
The other fields are just fields of the asset.
The HTML containing the jquery script is:
1. In the header load jquery
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>
2. Define the url to access the XMLPost entry point:
<script type="text/javascript"> var csUrl = "/cs/ContentServer" + "?pagename=OpenMarket/Xcelerate/Actions/RemoteContentPost" + "&authusername=fwadmin&authpassword=xceladmin" </script>
Note that here I am assuming that the script will be called from the same host where is ContentServer. Also as username and password are the standard ones. Of course this should be true only if you are in a local installation... So remember to change username and password.
3. Now let's write a new function:
<script type="text/javascript">
function createAsset(fromFile, toUrl) {
$.getJSON(fromFile, function(data) {
$.post(toUrl, data, function(result) {
alert(result)
})
})
}
</script>
What this script does:
a) it reads the Home.js (containing json data) and stores the data in a local javascript variable.
b) it performs a post with the read data, using as target the XMLPost entry point (the url we have already defined before).
c) finally it displays the result with an alert window.
4. It is now time to create a button that will trigger the execution of the function; we put the button in the HTML body:
<body>
<input type="button" value="Create Home Page"
onClick="createAsset('Home.js',csUrl)"/>
</body>
That's all. Let's test it.
If everything is fine, clicking on "Create Home Page" button you will receive a messagge announcing that the asset has been created sucessfully:
If you inspect the backend you should be able to see the page in the site plan as well:
If things don't work I recommend checking carefully urls, username and password, and inspect execution with FireBug.