my 2 cents

The last weeks while implementing the timetracker for Tine 2.0 we also developed new concepts for working with the grid view. Here is a little series of screenshots to demonstrate the cool workflow and userinterface we come up with.

Filter all timesheets from last month whoose timeaccount-numbers start with a certain string.

Select some Timesheets and mark them as billable too.

Add a filter to only find billable timesheets and select all 259 Timesheets which got found.

Now we export all selected timesheets as ODS to write our bill in Open Office

Finaly we again use mass update to mark all timesheets, found by our filter, as cleared and add in which bill we cleared them.

To avoid double billed timesheets, it would have been a good idea to filter for non cleared timesheets too

When testing the multi time-zone capabilities of Tine 2.0 I came across an interesting problem with the Ext.form.DateField.

The basic form handling in Extjs in like this.

1. Render the from (e.g. the contact edit dialog).
2. Get a Ext.data.Record (e.g. representing a contact).
3. Update the form with the record data: All form properties having a corresponding property in the record will be set/updated.
4. The user does his changes in the form (e.g. updating the name).
5. Update the record from the form values: All record properties having a corresponding property in the form will be updated with the form data.

The last step always copies all the form values into the record, regardless of which properties actually got changes by the user. Normally this is no problem, as the value only changes if the user relay did changes. But the implementation of the DateField has a problem in a multi time-zone environment.

Imagine I myself update my birthday in my contact record. This is 1979/06/05. In fact this means by birthday was from 1979/06/05 00:00:00 to 1979/06/05 23:59:59 in the time-zone Europe/Berlin.

So what Tine 2.0 stores in its database is: 1979/06/04 22:00:00 UTC cause Europe/Berlin is UTC+2 when daylight saving time is active. This means in UTC my birthday was from 1979/06/04 22:00:00 to 1979/06/05 21:59:59.

Unfortunately the Ext.dateField has no clue about time-zones or time-shifts. It just deals with dates, e.g. (Y-m-d).

So when my contact record gets updated from someone living in UTC time-zone, the DateField gets filled with 1979/06/04 22:00:00 (step 3). When user changes something and saves changes (step 4) it just return 1979/06/04 (step 5) even though the user didn’t actually change my birthday.

As result, the Tine 2.0 server sees a change in the birthday property from

1979/06/04 22:00:00 UTC to 1979/06/05 00:00:00 UTC which is obviously wrong, as this is not my correct birthday!

As a quick fix for the Ext.form.DateField we now preserve the time when the user does not change the date field. This is the fix I added to our Ext fixes code. Note, you need to include this after the Extjs library, but before your application code.

Yesterday I had a short discussion with a colleague of our front-end/website team. We had a look a gallery implementation made in JQuery.  He wanted to have a similar animation like the rezise/move/fadeout animation when an image gets clicked in this gallery.

The question was how hard it would be to implement such an animation. My short answer was: “I guess this is about 5 lines of code”. Well, I have never worked with JQuery and animation in general, and after looking into the code I realized, that JQuery seems to differ conceptually a lot from ExtJS.

However a few weeks ago I roughly scanned the docs of Ext.Fx. This is a small but very powerful Effect class in ExtJS. Many people think, ExtJS is ‘just’ suited for Web-Apps with a look similar to the Tine 2.0 look. But this is not the whole truth. ExtJS is also a general purpose JS Library with also comes with great animation and effects support.

As you can see bellow, I couldn’t resist to implement a spacegallery using ExtJS. The code for all animations, not only the animation of the top Image, is just 4 Lines of code:

onImageClick: function(e, dom) {
this.imageEls[0].shift(this.fadeOutPerspectiveData);
for(var n=1; n this.imageEls[n].shift(this.perspectiveData[n-1]);
}
this.cycleStack();
},

Ok, it's a matter of interpretation if you count the single "}" line .

Finally, after Tine 2.0′s Milestone 2 is released, I found some time to upgrade the jsdoc-tk-ext package which now comes in version 0.4.

Thanks to contributions from the ExtJS-Forums documentation of Ext.ux classes is greatly improved. Moreover I spend some time to ease invocation of the toolkit.

The Tine 2.0 JS API Documentation got generated with a simple:
~/jsdoc$ java -jar jsrun.jar app/main.js -H='Tine 2.0 JS API Documentation' -r  ../tine20

Changes in Detail:

• make it running with windows (thanks Sierk)
• include return comments (thanks Sierk)
• allow to use shortcuts for @cfg in ExtJS doc style (thanks duralabh)
• allow to specify config options for undefined properties (thanks duralabh)
• allow to use new config format for properties and config (thanks duralabh)
• use exjs logo (requested by jack slocum)
• allow to document classes which are defined into global namespace (thanks SamuraiJack1)
• set ext template as default 
• include a copy of extjs
• remove dumper dependencies
• make headline configurable
• some code cleanup