saorfm: first visible results
The first visible project using SaorFM is a jQuery file-selection widget:
Here is the source of that page:
<html>
<head>
</head>
<body>
<p>Select a file</p>
<input id="file-select" />
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/css" />
<link rel="stylesheet" href="/saorfm/jquery-widgets/jquery.saorfm/jquery.saorfm.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<script src="/saorfm/jquery-widgets/jquery.saorfm/jquery.saorfm.js"></script>
<script>
$(function(){
$('#file-select').saorfm({
"rpc":"/saorfm/core/rpc.php"
});
});
</script>
</body>
</html>
In the above demo, we link in the jQuery and jQuery-UI scripts, and load up the widget’s script.
The only content elements are a <p> telling the user to choose a file, and a normal text <input> box which the user can use as a combobox.
The magic happens with this little bit of JavaScript:
$(function(){
$('#file-select').saorfm({
"rpc":"/saorfm/core/rpc.php"
});
});
That tells jQuery to convert the #file-select input box into a saorfm widget. The only parameter in this demo is rpc, which tells the widget where the SaorFM server is to be found online.
To install this on your own server, all you need to do is download the SaorFM engine from Google Code, and add a config.php file to the core directory. Here’s mine:
<?php
$SaorFM_config='{"user_files_directory":"\/home\/verens\/domains\/demo.verens.com\/saorfm","language":"en","json_errors":false}';
In that, a JSON-encoded hash object contains the configuration. Change the user_files_directory parameter to your own files directory, and you are done with the configuration!
I’ll be adding this to my WebME project next week, after I’ve finished writing the tests (Selenium and PHPUnit).
