Hello there!
So here is the first post of actual work of the year, although most of it was done last year. So, the last time I post here the status of the protein-protein interaction viewer looked like this: http://biosual.cbio.uct.ac.za/interactions/, and my efforts since november have been focused in making it look like this: http://biosual.cbio.uct.ac.za/biosual/tests/pinv/pinv.html Notice the difference?
No, I am not talking about the logo and new name. So try again, check both pages and see the difference! If you didn't notice a change its because I did my job well, in case you notice let me know and I will try to correct that.
Warning: I am going to start being quite technical so if you are not into web development you might get lost. Badly lost!
The thing is what i did was to change the way Ajax-Solr (the library I'm using to get the data) includes its widgets so they can be loaded from a config file, I also make sure all those widgets are now completely agnostic of the other widgets, and I also create some PHP scripting in order to generate a single javascript that contains all the Ajax-Solr files, all the widgets and its dependencies, so pretty much I change hell of a lot in the background with the goal of having a single config file indicating which visual components should be included in the page. It is still in a work on progress stage, but the fact that I'm getting something as close to the application with the original version of AjaxSolr, makes me thing I'm in a good path!
You may be asking why to change so many things if at the end it is going to look almost the same. Well that has to be with the big picture of my project. The viewer has to be dynamic enough to display different setups that users can configure, so what im doing here is been able to create a runnable javascript that include all the required code to show the different graphic components by just passing few parameters.
The key is the configuration file, which is saved in the installation of biosual, then retrieved identifying it by its id. this separation allows me to in future develop a tool to create that configuration file. I'm sure there are lots of requirements i have to go through to get that authoring tool, however the process of this development help me to identify lots of them.
So lets explain some details of this whole thing. I'll start for the PHP script, mainly because it kind of works as the controller of the whole thing and in that way it gives me the chance to have some sort of order in the descriptions. The idea is to have a single point to ask for the resources of a viewer instance. A html page that wants to include an instance of the viewer requires to have an empty [div] component that will be the container of it, and to include as a javascript the path to the PHP script sending as parameters: (i)the id of the instance to create, (ii)the target id, and (iii) the type of data.
There are 3 types of data so far: json returns the MDC configuration file,that indicates which widgets/components are part of this viewer instance; js to get a bundle of all the java scripts files associated with the given id; the third option is css to get a single file with all the css files from the different widgets, dependencies etc.
So the basic HTML file that includes a viewer instance is like follows:
So here is the first post of actual work of the year, although most of it was done last year. So, the last time I post here the status of the protein-protein interaction viewer looked like this: http://biosual.cbio.uct.ac.za/interactions/, and my efforts since november have been focused in making it look like this: http://biosual.cbio.uct.ac.za/biosual/tests/pinv/pinv.html Notice the difference?
No, I am not talking about the logo and new name. So try again, check both pages and see the difference! If you didn't notice a change its because I did my job well, in case you notice let me know and I will try to correct that.
Warning: I am going to start being quite technical so if you are not into web development you might get lost. Badly lost!
The thing is what i did was to change the way Ajax-Solr (the library I'm using to get the data) includes its widgets so they can be loaded from a config file, I also make sure all those widgets are now completely agnostic of the other widgets, and I also create some PHP scripting in order to generate a single javascript that contains all the Ajax-Solr files, all the widgets and its dependencies, so pretty much I change hell of a lot in the background with the goal of having a single config file indicating which visual components should be included in the page. It is still in a work on progress stage, but the fact that I'm getting something as close to the application with the original version of AjaxSolr, makes me thing I'm in a good path!
You may be asking why to change so many things if at the end it is going to look almost the same. Well that has to be with the big picture of my project. The viewer has to be dynamic enough to display different setups that users can configure, so what im doing here is been able to create a runnable javascript that include all the required code to show the different graphic components by just passing few parameters.
The key is the configuration file, which is saved in the installation of biosual, then retrieved identifying it by its id. this separation allows me to in future develop a tool to create that configuration file. I'm sure there are lots of requirements i have to go through to get that authoring tool, however the process of this development help me to identify lots of them.
So lets explain some details of this whole thing. I'll start for the PHP script, mainly because it kind of works as the controller of the whole thing and in that way it gives me the chance to have some sort of order in the descriptions. The idea is to have a single point to ask for the resources of a viewer instance. A html page that wants to include an instance of the viewer requires to have an empty [div] component that will be the container of it, and to include as a javascript the path to the PHP script sending as parameters: (i)the id of the instance to create, (ii)the target id, and (iii) the type of data.
There are 3 types of data so far: json returns the MDC configuration file,that indicates which widgets/components are part of this viewer instance; js to get a bundle of all the java scripts files associated with the given id; the third option is css to get a single file with all the css files from the different widgets, dependencies etc.
So the basic HTML file that includes a viewer instance is like follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>PINV - Biosual Architecture</title> <link href="../../include.php?id=pinv&type=css" media="screen" rel="stylesheet" type="text/css"></link> <script src="../../include.php?id=pinv&target=here&type=js" type="text/javascript"></script> <link href="http://fonts.googleapis.com/css?family=Jura" rel="stylesheet" type="text/css"></link> </head> <body> <div id="here"> </div> </body>
- Add a list of mandatory dependencies, which in the current version is composed by jquery, jquery-ui, ajax-solr and biojs. This dependencies can be located in the same machine where the script is located or somewhere accessible via Web.
- The configuration file is loaded through the id parameter passed in the URL.
- One of the options in the config file is to assign a template. this is basically a HTML piece of code that works as layout for the components. In this step the PHP script creates a variable in the javascript code containing the selected template, and them a piece of executable js is added to inject the template into the target div.
- There are scripts that are associated with a configuration in particular (eg. making 2 widgets to work together) in this case those scripts are listed in the configuration option js and the PHP script adds them in to the response here.
- And here is the core of a viewer configuration: the widgets. A widget should be a component that can be executed by itself in the biosual framework, and follow the idea of ajax-solr iwgets, having functions that will be caled at the initialization of the widget and whenever new data is been captured for the Viewer. The way a widget is defined in biosual(at least for now) is as a sub-folder in the folder widgets, it requires a file there called widget.json, the file follows a JSON format and allows to specify the javascript file of the widget, any dependencies a style file on CSS format, and a HTML snippet of code that will be injected whenever the MDC file indicates. An example of the widget configuration below.
{ "name": "Search with Autocomplete", "description": "a text based widget to start a search", "dependencies":["jquery.autocomplete.js"], "dependenciesCSS":["jquery.autocomplete.css"], "js": "AutocompleteWidget.js", "html": "AutocompleteWidget.html", "css": "AutocompleteWidget.css" }
This configuration indicates the widget is in the file "AutocompleteWidget.js", but that it requires the file "jquery.autocomplete.js". it also contains the CSSs, HTML and some metadata for the widget.
A widget can be created but never been used, it is just when is part of a MDC file, that is included, starting for including all its dependencies, then the widget file itself, and in last the HTML to be included in the target explicitly indicated in the MDC file. - A subset of the MDC file is included: widgets, parameters and server
- Finally the loader.js is included. This is a piece of software that uses the previous parameters and scripts to create an instance of the Ajax-Solr manager that includes all the widgets and starts the page.
- The final resource is included in the web page. The loader.js is executed once the page has been loaded.
So let me know any opinions!!
Cheerio!!!
No comments:
Post a Comment