Cleaner UI Up and live

Well after some work and crunching I have managed to get the new UI Idea up onto the live link (http://www.forxdesign.co.za/ox-designer/). Due to some recent changes in the GWT-dnd library there seems to be the possibility to removet the bottom "pallet" where the widgets are dropped on creation. I will be looking at changing this as well as refining the click-properties panel of each widget. I will either be adding an "edit" link or a context menu tag (right click - my preference)

Back from the Dead: OX-Designer!

OK so saying "its been a while" is a mild statement. I think raising the titanic took less time than the time between these blogs ;op

Onto business.. OX-Designer (XForms Designer) is back into the coding playing field thanks to the OpenMRS Internship Program. Keeping this short: I've finally managed to find a working version of my source..go figure you change computers a few times and have a few hard-drive crashes and what do you know..remembering where you backed up your work gets kinda tough!

I have updated my current dev environment to include the latest libraries from GWT, GWT-dnd and GWText (still using legacy version at this point). I will be working to upgrade the old source to the new libraries which include a few of the features I had to code myself (pallet). Stay tuned for posts on this.

When the code is up to date i will focus my attention on the properties dialog boxes (where i left off last) and the problem of only loading one instance and not creating multiple objects for each ui widget.

The link to the old code still works but I will be updating it with a new version ASAP! even the current old version is an option at this point!

Here's to the future.

Stop and Go! Its Live! (mostly)

well looking at yesterday's post i don't think I'm going to write that much. But what i am going to put up is a link, http://www.forxdesign.co.za/ox-designer/ . This is a very special link as it point to, yes you guessed it, the online version of the interface of OX-Designer. It is still very much in the BETA stage and will be updated as soon as i add more features to it. Please note that there is no XForm creation support in it yet as I'm still hunting for a decent JSP hosting package. This page is basically showcasing the User Interface and the ideas as well as testing it in a "live" environment. As most of you will probably stop reading at this point and go play on the site I'm going to keep the recap of yesterday's work and today's task short :)

Yesterday's tasks.
Build a form: well that seems easy enough. However after some thought on the initial idea of a grid style dropping form i chose to rather go with a vertical panel which allowed widgets to be dropped on it and stacked in a vertical manner. It also allows for widgets to be inserted between others in a list. This single column layout is roughly how i see any PDA form being laid out. And as the initial version of this application should allow for the creation of XForms for a mobile device I'll stick to this one. This Single column layout doesn't restrict me from adding tables and multiple column layouts in the future, in fact it actually promotes the inclusion of plug ins and widgets that allow for this in the future (will build them later)

I also Found my XForms library i had built!! And with the new form layout the CSS generation is not necessary. We going to go with an initial top down listing of the XForms controls when exporting the form. Further more complicated translation algorithms will be added later.

(So much for short)

Today's Tasks

• Build a base widget to represent the abstract XForm control
• Define the fields that this widget must cater for in its content menu
• Add the content menu
• Add the dialog which allows the user to link the field to the model
• Define the initial set of form controls needed.
• Build an XForms Factory
• Link this into GWT.
• Build XML Module loader.

Right so those are the tasks, and to be honest they will prob be the tasks for today and tomorrow but optimism is the key! Anyone with constructive criticism please feel free to leave a comment or if you think you might have some code to do a portion of this, i am open to the idea as this is an open-source project!

Workmen ahead! Detour next right!

Well yesterday was a very productive day! After the initial idea that it would be simple to implement the tasks I proceeded to find all the challenges. The joys of being a developer :) I have included a screen shot of the new look and feel of the application. I must thank the GWT-EXT library for the time it has saved me from digging through CSS and making it look modern, it's allowed me to focus more on the core of the application.

So in reviewing yesterday's tasks I had to add a stackable blind component (you can see that on the screen shot - the headings "Drag and Drop Controls" and "Model view" are panels within the blind.) To add to the idea i have also allowed both the Tool box (Stackable blind) and the Pallet to be able to be hidden when no in use using a collapsable panel. The idea is to be able to view more of the form. And the XML tree was added too - turned out to be much easier than i thought, although when it comes to populating it that will be another story for some research.

I have added the artists pallet underneath too. It allows for a full drag and drop capabilities with the widgets being destroyed when dropped on the "Bin". I personally like this idea very much :)

And finally the control buttons have been set up to create dummy widgets within the pallet when clicked so all that remains is to replace the dummy code calls with calls to the correct widget creating methods and Viola we have workable widgets :)

I did run into an issue which had me pulling at my hair yesterday (the little i have!). The issue lay with the making widgets drag and drop ready. When a widget is created it must be constrained to only being able to land on allocated drop locations. It works now but when i started they could be dropped all over the place! I managed to fix this by changing my call to the GWT-DnD class from:

dragController = new PickupDragController(null,true);

to:

dragController = new PickupDragController(null,false);

This line associates the dragging to widgets on the page. The 2 arguements represent the following:
the first (null in both cases for me) indicates the boundary where a widget my be dragged within. I set it to null as my layout isn't restricted to a particular area. My thinking was to allow the widget to be dragged anywhere but only dropped on desired locations.
the second argument indicates if the widget is able to be dropped anywhere without there being a drop controller associated to the panel. So for my thinking to work mine had to go from true (drop anywhere) to false (restrict dropping to registered drop controllers)

Well that was yesterday's tasks. Todays tasks was a toss up actually! between creating the form canvas or the widgets. I chose the 1st, so here they are:

Tasks:

• Build Form
• Needs Absolute-Grid restrained-No overlap dropping capabilities
• Merge drop controllers into a new super controller
  
• Add CSS generation engine to XForms Data Structure/Engine
• Find and include XForms data structures (yes they are here somewhere but i have to find them :P )
• Descide how the CSS will translate to XForms

So these may seem like a small amount, but if they do turn out to be done pretty quickly then i'll come back and add some more :) besides I also have a few other things to do today but we will see how that goes. Stay tuned for 2morrow as it promisies to be full of issues and design ideas around the XForm widgets and their display!

Silence is golden?

As often as people say that, in some cases its probably not true. In this case its a bit of both. Since my last post over 6months ago a lot has happened! GWT 1.4 (http://code.google.com/webtoolkit/) has been released and a new version of a Drag and Drop module for GWT was released to (http://code.google.com/p/gwt-dnd/). And these have opened up some great ideas for OX-Designer! In addition I have added another library to the quiver, GWT-EXT (http://code.google.com/p/gwt-ext/). To be honest I was sold on the very very clean demo project it had. So as it stands OX-Designer will make use of the above mentioned libraries.

So for a progress report:
I have build my underlying XForms data structures in Java. Now I'm building the UI and working back into including the intelligence of the form design. And yes there is a dead-line in my mind. I'm hoping by Sunday evening (as I'm in Maputo for the Monday to Thursday).

My current tasks for the day include:

• Adding a stackable blind control (similar to MS Outlook)
• Add an example XML tree to the blind
• Create an artists pallet for widgets
• Include a bin portion to delete widgets
• Implement Control buttons.

And most importantly I need to migrate my ideas from the previous version of OX-Designer to the new version. Well its a busy day and hopefully a productive one!

OX-Designer phase-1

After the initial description of the idea of an Open Source Browser Based XForms designer/editor came the task of setting the project deliverables and getting started towards accomplishing these goals. The deliverables will include:

• a fully browser based Xforms editor that will allow the associating of XForm controls to the model associated with the XForm.

The initial User Interface ideas include the following:

• A light weight Layout, More of a hybrid of a GMAIL and Outlook appearance.


• A drag and drop layout manager for the XForm (this is under review)

With the initial front-end progress it is time to bring the server side up to speed. The server will run various JAVA based services that will allow the manipulation of the XForm structure. The first pass at the server side XForm structure includes an XForm object which holds the Model object, the Controls object and the Logic object.

The Model Object consists of a collection of model elements, these will be the data elements that are to be collected, which are obtained from the XML.I have decided to cater for XForm models that have attributes associated with the data elements to be collected, e.g:

The thinking behind allowing for attributes is to allow for a more hands-off generation of the forms from the meta-data associated to the model. There is no predefined attribute list as of yet, but rather I have chosen to leave it open for any developer should they wish to extend it to suit their needs.

Current design issues that are being considered are the following:

Should the model (xml) be parsed on the client side or on the server side. At this point in time the client side is slowly becoming heavier with various UI tasks and the server is fairly light. The current train of thought is that the Model should be parsed to the server (i.e. upload the file) to extract the model components and then return what is needed to the User. This should reduce the initial load time of the application while still giving the server the power and possibility to automatically generate a first pass of the form.

Second design issues that is being investigated is the representation of the XForms controls to the user in the editor, currently the controls are being displayed using GWT widgets and standard HTML controls. The decision that is being faced is that of making use of a RichText component that allows for a more WYSIWYG editor with a more flowing layout, or to maintain the idea of a fully absolute layout manager and the addition of text to the form be done using "Labels". Other issues being considered are the use of tables and how to represent these in the various methods described above.

With that said it leaves me with the task of investigating the issues and hopefully coming to the correct conclusion. Until next time

The beginings of a long journey

The idea of OX-Designer (Open Source XForms Designer) originated from a need brought up at the OpenMRS Implementors meeting 2006. OpenMRS is an open source medical record system which currently makes use of Microsoft InfoPath as the method to collect patient data. In the light of providing an alternative data collection method I proposed an XForms alternative.

XForms, for those not familiar with the technology, is a W3C specification for creating a form. It is essentially a form mark-up language that is build on a Model-View-Controller architecture. For more information regarding XForms the XForms site provides an in-depth description.

The project is to create an open source browser based XForms designer/editor. This will allow the user to upload an XForms model (stage 2 will hopefully include a model designer) and design the visual aspect of the form by making use of a WYSIWYG editor. The XForms model is an XML definition of the data that the form collects. The application will be an AJAX based web application and hence has no platform dependencies and the only condition to using the application would be that the user make use of a web browser.