New Look to Flowsheet Module UI

During the last week I added a new feature to filter patient history by Concepts. There are options to select all concepts at one or few concepts at once. The patient history will be filtered according to that concepts and will be displayed.

I used the GXT FormPanel to enhance the UI. The screenshot below shows the new look.

Then I worked on displaying details of a single observation when clicked on it. There will be a popup window showing the details. In addition for numeric type concepts, there's an option to view the history of that particular concept in a graph(line chart). Images below shows these features.

I sent the progress update to my mentors Sy and Paul. Paul suggested some changes to the UI. I am working on them during this week. We have planning to have a discussion on Skype to discuss more on improving the module features.

Fourth Week of Coding - Date Range Filtering

Just completed another exciting week and now it's almost a month after coding started. During this week, I modified the class diagram posted in my previous blog to have some fields like hiNormal,hiCritical, hiAbsolute,lowNormal,lowCritical and lowAbsolute in the UIConcept class. The purpose is to indicate any abnormal values of observation. Using this values, abnormal flags are indicated in red text as show below.

I will use a more effective way to show the abnormal flags in the future.

As the next task, I worked on date range filtering of Patient data. I did some search about possible widgets to use for the date range selection. DatePicker and Slider were my choices. After reading more, I used GXT's DateField (which has DatePicker popup) widget for date range selection. Using a slider widget was not a good choice in my opinion since it will be difficult to select accurate values. Using the feature of the GXT DatePicker widget which allows to specify a Max and Min value of dates to be selection-enabled, I achieved the objective. This widget will only allow to select dates between the range the patient has records.

I modified the service method which retrieve patient data to have additional parameters in order to enable date range filtering. I am happy that we reached the mid-term goal roughly by finishing this task. But there will be much more improvements in these features.

The next feature I am planning to have is filtering data by Concept. Once this features is implemented, the user will be able to filter patient data according to the Concepts related to the observations of that person. I started working on this and looking forward to finish it by next week.

In the mean time I received the Google's welcome package. It included a note book, pend and two stickers. Also the payment card as well :) .

Looking forward to keep my passion growing...

Third week of Coding - Modeling the Transfer Objects

As mentioned in my previous post, during the third week I worked on the modeling the required API classes in the GWT client side. When using GWT-RPC, the transfer objects should be serializable. The bean class can implement either java.io.Serializable interface or the IsSerializable provided by GWT library. When the GWT module is compiled using the GWT compiler, it will create these bean classes in to javascript and package them in the generated folder, which is used as a resources in the OpenMRS module. I came up with a initial version of the class diagram and it can be modified later on when requiring more details. The diagram below shows the initial version of the class diagram.

I added these classes to org.openmrs.modules.flowsheet.gwt.model package and modified the FlowsheetServiceImpl to use these classes. The image below shows the output I got.

Last Thursday I presented my project's first demo to the OpenMRS community during the developer call. I explained the project, integration of GWT-RPC to the module etc. I got good feedback and valuable suggestions from the community to handle huge amount of data. I am reading more on the suggestions to decide on the most suitable methodology. It was a great experience for me to present the demo to such a experienced group of developers. Their encouraging words always motivate me to give my best. Special thanks to my mentor Syfor guiding me to present the demo successfully.

Awaiting for many more excitements and experiences...

GWT Integration to the Flowsheet Module

As mentioned in my previous post, during the second week of coding, I started figuring out the way to integrate GoogleWebToolkit(GWT) to the Flowsheet module. As I expected, it was a challenging task since I needed to find out the integration points. My thanks to my mentor Sy and the OpenMRS developer Daniel Kayiwa. Daniel has already done some work related to GWT in his Xform module. I am happy that I could find out the way to integrate GWT. Thanks to the folks at ##gwt IRC as well. I have written the details about the integration in the module wiki page. Here I will talk more about the problems I faced and how I managed to solve them.

I faced two major problems during the integration:

1. I used a div tag id "flowsheet" in the GWT UI code to get the RootPane. But since my module name is "flowsheet", there was already a div tag defined with the id "flowsheet". When I used the same id in the JSP to hold the GWT UI, there was a conflict and the GWT was not rendered properly. When I inspected via Firebug, I found that the content window retrieved by the new div area was null. But I couldn't figure out at the first try that the name duplication was the actual cause for the problem. While going through the generated code observed in Firebug, I found that there was already a div area with that name. When I changed the name of the new div area, in to some other name, it worked fine.

2. After reading the documentations, I came to know that the servlets under the web/src of a module can be accessed via http:/moduleServlet/flowsheet/flowsheetService. But I took sometime to figure out the format of the URI parameter for the @RemoteServiceRelativePath annotation of the RemoteService interface. The @RemoteServiceRelativePath annotation specifies the relative path of the Service. In this case, the compiled GWT code resides under . So if the relative path is given as /moduleServlet/flowsheet/flowsheetService, it will end up with
http://localhost:8080/openmrs/moduleResources/flowsheet/generated-folder/moduleServlet/flowsheet/flowsheetService. To avoid that, the location ../../../moduleServlet/flowsheet/flowsheetService is used. This will end up in the correct location of the service :
http://localhost:8080/openmrs/moduleServlet/flowsheet/flowsheetService

My next task is to decide on the UI objects to be represented in the client side of GWT. I have already started working on designing a class diagram for this purpose.

The first group of GSoC students presented their project progress during the developer call on last Thursday. This week is the turn for the students belong to the second group. I belong to the second group and eagerly waiting for this Thursday to present my progress to the OpenMRS developer community. I am sure that it will bring me lot of experience. Looking forward to it....

Started the New Journey - First Week of Coding

The official coding period for Google Summer of Code 2010 started on the 24th of May. I was prepared to kickoff with coding. One the very first day, my mentor created a svn location for my module named "flowsheet". Since the name, Longitudinal Dataview Model was somewhat lengthy, we decided to go with "flowsheet" as the module name. I was having conversations with my mentor Sy via Skype and Sy assigned me the first task. It was to make the module's tab available in the patient dashboard.

I created a new module using the OpenMRS Eclipse studio, modified the configurations and started working on getting the tab available in the patient dashboard. After some amount of time looking at other module's code and module wiki I managed to find how to do that task. I created a class inside the package org.openmrs.module.flowsheet.extension.html named FlowsheetTabExt which extends the class PatientDashboardTabExt. I got a new tab called "Flowsheet" available on the patient dashboard. I informed Sy about it and Sy asked me to check in the code to the svn. I did my first commit on Monday it self to the svn location http://svn.openmrs.org/openmrs-modules/flowsheet/.

Even though we decided to GWT, for the purpose of getting the idea about retrieving patient data, I worked on to get the patient history printed on the jsp page of the module. It was just a throw-away work to get knowing the stuff. I managed to list all the obs of a patient in reverse chronological order in a jsp page. The figure below, shows the output I got.

Next, I listed the obs grouped by encounters as shown in the figure below.

After doing these two tasks, I got more understanding of how the patient history can be retrieved from the existing OpenMRS services.

Next, I worked on integrating a simple GWT UI under the Flowsheet tab of the patient dashboard. I referred the existing Xforms module code which uses GWT. I created a separate GWT project, compiled the code and copied the generated folder to module/resources. Then I used the generated javascript by a call in the jsp page. The figure below shows the output I got.

Apart from coding, we had a nice demonstration on OpenMRS by Ben Wolfe. During the demo Ben explained how OpenMRS is used in a typical system, answered questions and discussed some code as well. I got to know many things and my doubts cleared about Obs,Encounters & Concepts. The demo was very useful for all new interns.

My next goal is to write some services to retrieve data in the GWT UI. Since it requires integration of both the OpenMRS module and the GWT module, it is a challenging task. I started working on it..
The first week of coding was lot of new experience... I felt that I am learning something new and was very happy... Expecting this fun will continue through out the summer...

Chrome Extensions for web development

Some handy stuff for web development from Google Webmaster Blog:

http://googlewebmastercentral.blogspot.com/2010/05/chrome-extensions-for-web-development.html

Getting ready towards a new journey...

During the last two weeks my main focus was on preparing myself with the technologies which I am going to use in the project. I read about GXT and Spring mostly. While reading on Spring, I referred the OpenMRS code base (both trunk and modules) to get a clear understanding of how Spring Controllers, Handlers etc are used in the project. Honestly I progressed quickly with my reading because of the real world solution I was looking at. I read more on Spring Controllers since it will be handy for me when implementing the project.

As the next step I searched for possible libraries to be used for the purpose of GXT+Spring integration. As my mentor Sy suggested, I read about GWT-SL library and looked at some code hosted online. I got the basic idea about it and I am sure that I will get more understanding once I start using it. Meanwhile I requested for svn access and I got it. The developers at OpenMRS had long discussions about the name of the module and finally decided to have "flowsheet" replacing the existing flowsheet module.

In brief the last two weeks were full of new learning experience. Now another new journey is going to start... Yes, it is the GSoC coding period... the coding period officially starts on 24th May. I am looking forward for a nice period ahead.. Also I am sure that I will be learning a lot during the next developer call on Thursday through the demonstration on OpenMRS by Ben Wolfe.

The new journey starts here and I am getting ready to give my best...