HackerDan.com

In addition to the printer issue i am also working on making the flex with flare interface more dynamic in that it can be heavily changed from the Moodle back end with out the need for touching the actionscript code.

As Moodle is a PHP project there may be few developers willing to update the flex side of the application i am making, so in an effort to making the project maintainable in the future i am try to keep as many settings in the Moodle side as possible. The way i am accomplishing this in an elegent manner is to have a dynamically generated XML file with each setting for the current visualizations being displayed to the user, witch will be read in by the flex application and determine how and what visualization is being displayed.

This XML settings file will have everything needed to define a
visualization (except the raw data) including the language strings, the flare layout type to use, what encoders to use, the legends to be displayed, what data is on the axes, and even the fonts and colors to be used. This XML file will be generated based on a visualization class for each visualization witch will be dynamically loaded in. In theory this should allow for new visualizations to be added in with no need to change the actionscript code that makes up the flex application or to change any code in the plug-in (just drop the new class in the visualization dir).

The parsing of the XML in to the flex application is made impressively easy in Flex 3 with the XML class. As can be seen from this relay cool example provided by adobe, XML code can be read in (in this example hard coded) in about one line and then be tread like a class but with some additional tricks and abilities to share. To make things even easier this XML functionality can be used with the URLLoader and URLRequest classes witch my application already uses to load tab formated data for flare such as in this example (also from adobe).

On the Moodle side of things there is also some functions for dealing with XML however they are apparently a bit out of date. Moodle includes an XML library in it’s framework (/lib/phpxml/xml.php) witch has a function for converting a PHP array into an XML string. Unfortunately this library seems to have been made for an older version of PHP and now spits out:

Notice: Only variable references should be returned by reference in /var/www/localhost/htdocs/moodle/lib/phpxml/xml.php on line 50

when used due to it returning a reference to a string rather then the value of it when debugging is on. This normally would not be a big problem but it breaks the XML format and makes the loading of the settings from the flex application fail. As a temporary fix i have added the fallowing to turn off the reporting of any error messages in the generated XML file as no human would be reading it:

error_reporting(0);


It’s nice when there are APIs and library’s so you can constraint on the problem and making the solution and not messing around formating XML

One of the popular requests relating to the grade statics project from the Moodle community was a printer versions of the statics and visualizations. This is rather trivial to do for the report/stats plug-in as all the content is text based however it becomes some what more complicated for report/visual as the content is flash based and more dynamic.

Some browsers play nice when printing a page with flash content on it and will treat it like an image (as shown in scan below of a print out of the demo site in fire fox).

This would allow for a printer friendly page to be made that would work with browsers that print flash content by creating a page with just the visualizations on it and a slightly modified interface. However there is another method that i have started looking in to that might give even better results.

Flash it’s self has support for printing witch can be some what controlled from the flash (or flex in this case) application running in the browser, allowing for better resolution prints (as flash graphics are vector based) and allows for printing with in the application rather then having to load a new page.

A simple example of this can be seen in the right click menu over a flash application witch gives a print option.

Unfortunately, currently my application dose not quite print an accurate representation of the visualization using this method as can be seen below in a scan of the printed page.

So the next step in the goal for a printer friendly flash/flex application is research the printing functions and abilities of action script and flex and then to try implementing a solution witch will ideally hide the visualization’s controls (buttons) and then print the visualization at the correct size to match that of the paper it is being printed on.

After many hours of trying to get Moodle and Flex with Flare to play nice, i finally have been able to get a simple visualization working using the grade book data from Moodle.

The first visual is a scatter plot of Normalized Grades vs Students. The different colors represent different items that have grades associated with them and the different shapes are the groups/sections the students are in. It’s not much to show for UI or labeling of the chart yet but provides a starting point to make the report/visual plug-in and has gotten me on my way learning the Flare API.

Hopefully i will have some more polished visuals and UI to show off in the coming weeks.

I am currently in the process of getting grade data to be shared between Moodle and Adobe Flex with Flare in a secure and elegent way.

Flare has some nice built in functions for loading data from a url that is either in a tab or json format, witch would normally work great except the data in question consists of students grades and statistics relating to them witch can not be publicly shown and is protected by Moodle’s capability system. This means that Flare can not simply load a page that outputs the data in tab or JSON format as it would not have the session or cookie that the browser does to let Moodle know that you have the capability to access the data so it just gets the HTML for an error page.

Passing a user name and password (or hash there of) between the Flash Player and the web server are out of the question for security reasons and embedding all the data needed to generate the visualizations in the Flash variables or JavaScript becomes ugly fast and could break down in the cases of very large sets of data (there is a limit to the length of a Flash variable passed from HTML). There also is no way i know of to share a browsers cookies with Flash and then the sites it calls on (and if there is it would mean recoding how the Flare DataSource class works).

The solution? Well the method i am country working on is passing the session name and id from Moodle to Adobe Flex/Flash (threw the Flash variables embedded in the HTML generated by PHP) and then using the Flare DataSource class to load the URI of the JSON formated data with the course id, session name, session id and graph/visualization type appended to it. Hopefully this method will work like how cookieless sessions do in Moodle where the session information is appended to the URI and Moodle will see the request as if it came from the user them self, with the correct capabilities.

My only concern with this method is if a teacher or student where to save the HTML of the page and send it to some one it would contain there session information. In theory this information could be used to access the account that is tied to the session and the attacker could then change the password for the account to take it over. However this would only be possible for the period of time when the session is valid and would be just as insure as Cookieless sessions all ready are in Moodle (in terms of a user copy and pasting there URI with the session id in it) and a user would have to willingly give a copy of the HTML to the attacker.

If all goes well i will have a simple demo of this before the end of the week that can show a simple graph of grades using Flare.

As i have been working with Flex and the Flare library to make a test program to send data from Moodle’s Grade Book to Flash i have ran in to a problem running the Flash debug player.

When i trying to “Debug as Flex Application”, the application would come up in Firefox but in the debug console in Eclipse i would get something along the lines of “Waiting for Flash Player to connect to debugger” and then eventually an error about it failing to connect. If the debugger was working it would provide needed information from the running flash application including text you send back using the trace command.

The problem it seems is that when installing Adobe Flex Builder for Linux, a flash player for Mozilla Firefox is also installed. However the player that was installed was not the debugging version but a normal copy of Flash 9. So it could play compleid Flex applications but not connect to Flex Builder to display needed debugging information. Lucky, although the debugging version for Firefox was not installed a copy of the stand alone debugger was but had not been set up in the path environment variable.

For me the stand alone player was copied to /home/dan/Adobe_Flex_Builder_Linux/Player/linux/flashplayer and all i had to do was add the path /home/dan/Adobe_Flex_Builder_Linux/Player/linux/ to the global path variable and restart the computer (for some reason the path will not update in Eclipse in till you at least log out and back in again). Then to make the “Debug As” command open the application in the stand alone player rather then in Firefox, the path to launch has to be changed from launching the html file to launching the swf file (for me this was a change from /home/dan/workspace/flare_test/bin-debug/flare_test.html to /home/dan/workspace/flare_test/bin-debug/flare_test.swf). This change must be made in Debug Dialog witch you can get to threw the “Debug As” menu. Now when running “Debug As Flex Application” the Flex Application will open in the stand alone player with debugging working and “Run As Flex Application” will open in Firefox using the normal Flash 9 player.

Also it seems that Adobe accepted by application for a educational licenses for Flex Builder, so i no longer have to worry about the time running out or it deactivating witch is nice.

Now that the report/stats plug-in has a release out i have started geting Adobe Flex and Flare set up for the report/visual plug-in.

The first issue i ran into is that i could not find a copy of Adobe Flex Builder or the Eclipse plug-in for a Unix/Linux based operating system witch i am using for development. There site seems to only list versions for Mac and Window even tho flex is sposted to be cross platform. After some time searching tho i was able to find an alpha version of Adobe Flex Builder for Linux from Adobe Labs.

Another issue that may come up for students is the cost of Adobe Flex Builder, normally it is priced at $249 for the standard version and $699 for the professional version but there is a time base trial version that can be used for 60 days. luckily for students and other persons in education institutions, Adobe offerers a free educational version with proof of enrollment. I have applied for the educational license but i can take up to two weeks for them to e-mail you with the key so in till then i will be using the trial version. There is a stand alone Flex SDK that is free and lets you use any IDE you like witch would also solve both theses issues but is apparently more complexed to use and has less features.

The next step in setting up Flex was the installing process. For Linux the installer comes in the forum of a bin file witch you can execute by typing “sh filename.bin” in the console. If done correctly a GUI based installer will pop up and guide you threw the install process. Unfortunately this step was not totally strait foreword as one of the requirements is Eclipse 3.3 when the package system i am using still lists 3.3 as unstable. So i had to remove the mask on version 3.3 and all a bunch of it’s dependency to updated to the new version.

Now to add in flare, i had to download the prefuse flare libraries and unzip them in to my workspace directory and with that Adobe Flex and Flare should be installed on my Linux laptop and ready for development. In my next post i hope to talk about getting started with flare and talk about the start of the report/visual plug-in.

As for report/stats, i have added a printer friendly version and option to invert the statistics table to report/stats witch can be seen on the demo site, this lets users have the table extend downwards rather then width wise so the report will fix on there screens and be easier to print.