Understand why

So - You writing code in a TDD manner, which means that basically you're writing the tests first, waiting on them to fail, and then writing the code which makes them pass.
Damn, This makes you feel so good, right? It's like a fucking rush of satisfactory that runs through you, making you feel like you're fulfilling your roll in the world, you're executing your work to the max. You tell yourself that hey! You can do that forever. No, seriously - FOREVER.
But have you ever wondered why you feel this way?

What exactly taps into our, some-might-claim, childish emotions and pats us so warmly on the back?
Most of us feel this way and usually don't give a flying fuck about the end product, not to mention the end user of the software their creating, and this puzzles me greatly - what makes some of the smartest people I know develop such an addiction to this an immediate, shallow gratification feeling?

Let me try to ware the psychoanalyst hat for a sec and make some assumption on why a developer feels so good about a passing test and try to drilldown to find the true nature behind this behavior

Is it the quality?
Sadly I would have to say it is rarely the quality increase which makes developers so satisfied with a passing test. I saw many tests which don't check anything and pass successfully, leaving their author happy like pig-in-shit with the work he has done. In some cases developers would even knowingly cheat to make a test pass, although they will later claim that this has damaged their satisfaction since our conscience cannot be tricked that easily. Sadly The build can.
Personally I believe that the motivation for tests should come from the desire for quality. Why you desire quality? Because you want your customers to enjoy and have value from using your product.

Is it the game?
Writing software in TDD is very much like playing a self-game. It's like you're challenging yourself, much like playing Solitaire, putting targets and then trying to hit them with a stone from afar. And you have monitoring which kind of represent a leader board where you can see how much targets you did hit (coverage), which sometimes brings developer to an absurd state where their testing meaningless chunks of code like Getter/Setter just to have their coverage up.
The game does have contribution to developers satisfactory, but playing it without seeing the big picture can sometimes distract you from the real goal, that is making the end product better for the user. After all, all your code can be covered with tests and you will be top of the list, but the product doesn't sell because it is a piece of crap. Better start packing your cubical up cause your company went broke, but hey, don't forget to take the leader board with you!

Is it the mini-goals?
You know these lovely "todo" lists? Research have shown that people enjoy "checking" a task as done so much, that sometimes they register task they've already completed just to have a "check" next to it, while other tasks that really needs to be attended are left neglected. You know what I'm talking about… yes, you do.
Same with the tests. You set up small tasks to be completed, e.g. "should fetch user information" and you right away start working on it in order to put a "check" over it. You like it so much that sometime your tests become meaningless and have no benefit to the code quality or maintenance.

Is it our perfectionism?
You love to see thing done to perfection. Most of us who deal with software do (some don't and they should get fired. I mean - now). So you look at your coverage report and you eye starts to twitch for you see that you're missing 3% to your 100% code coverage. You don't mind that the code is well tested and that 3% is redundant and having them tested will not benefit the code whatsoever. You want to reach that 100%. A sheer waste of your time and build time, but damn - I just have to get this thing 100% green.

Tests are not the goal, they are the means
Yeah, let's remind ourselves once again that tests are the means in getting our goal which is a good and maintainable product releases. No seriously, you have to stop dancing around glorifying the hammer you're holding when all you have built with it is a huge pile of horseshit.
And for that matter, I strongly believe that developers should stop alienating themselves from the product. It's not only the tests which are the means but the code itself. It is your means for creation. The paint of your brash, the nail and hammer. We should concentrate on the painting. You have never seen a child showing off his color palate to his parents, right?

So why then?
Because it's easy and well defined.
If you look closely at the tasks you've recently had you'll find it that you tend to avoid those which are hard to complete or those which you have a vague idea on how to accomplish them. Tests are neither. Tests are well defined tasks which are basically easy to complete. Of course you like doing them. Hell, you're even get credits if you make a lot of them.
Why the hell won't you write them like crazy?

Conclusion
Tests are good. Write them. Responsively.
You're not a monkey. Always question the world around you and try to understand… why.

Avoiding Angular's Digest Cycles Limit Reached

Hi guys,
I've recently encountered an issue where in a certain view on an Angular application I've reached the digest cycle limit. If you got here, 80% that you've reached the same issue yourselves.
I would like to elaborate here on how I've managed to avoid it, and fix the issue. It might not work for all the variation of this problem, but it is worth trying before you go into more serious measures.

Avoid calling processing-function from the view
I’m talking about manipulating data from the view in order for it to suite the view needs, e.g. ng-repeat=”value in yourFunction(scopeMemeber)”
If you need to manipulate the data for your view, do it on the logic tier, which is the controller.
Try to use only $scope member directly on the view.

When preparing data on the controller, avoid referencing $scope members up until the very end
If you’re getting a value from some service and on the controller you’re start to “work” on it, try to avoid referencing $scope members in it, since any change to them is a potential dirty-check loop.
What you want to do is try and save the assignment to the $scope member to the very end. Manipulate you’re data using plain JS, and only in the end make the assignment to the $scope member.
Note that sometimes it would even be more efficient to copy an Object, just to make sure it is not linked to the $scope anymore…

Put Sorting, Filtering, etc. outside of the view if possible
Although Angular offers nice ways to sort, order, filtering, etc. as a part of their API on the view level, I would be much better to do that on the logic tier (controller) when the view is complex and have a lot of these.
It is sometimes more efficient to order and array and assign it to the $scope member again, than to do it on the view.

If you have more suggestion, I would be happy to hear about it :)

Cheers

Flashmatticomponents now on GitHub

Hi guys,

It took 1 email from a developer who contacted me about my old Flex/Air open source project called Flashmatticomponent, which made me finally take the time and migrate this project from Google Code to GitHub.
I don't know how many of you are still interested in the murdered-by-Adobe-and-Apple technology called Flex, but if you do, I bet you can make use of it.
I, myself, am really proud of this project ;)

You can find it here:

https://github.com/mbarzeev/flashmatticomponents

I've also copy-pasted the Wiki pages, but it didn't turned out so well, and to be honest, I can't be bothered with fixing it right now, so sorry about that.

Enjoy. 

Quake III Arena - Statistics including Flags

Hi guys,

It is a tradition for us, to drop everything and play Quake III Arena, CTF mode, on every Thursday. Now, we did have some statistics showing each players kills etc. but we never had something to show statistics for Flags. How many did one fetched, how many did he score? did he restored any? you know... what really counts when you're playing CTF.
I looked for something on the web but couldn't find anything (if you know of any solution I'll be happy to know), so I've opened the log file and went through it to see if there is anything that might help me.
Apparently the log does mention the Flags but in such manner that it is really hard to understand in what status is the flag. You can't find anything resembling "Score" or "Fetch" but rather entries where the flag has been "touched" by a player.
To make a long story sort, I came up with a simple algorithm to resolve the Flags status, and having achieved that, the rode for creating an Angular/Node/Express (using Yeoman) application was easy.
I've uploaded that application source to Github and you can find it here:

quake-stats, an open source project

Feel free to download and use, and of course, if you feel that something is missing, or you have anything to add/fix, be sure to pull-request. The code was done pretty quickly, and therefore, somewhat dirty. I know and apologize, but hey - it's an open source project, so if you see something smelly - go ahead and fix it :)

Enjoy and Frag you later ;)

Metronome Directive using the Audio API

Hi,
A few months ago a came to notice this article by Chris Wilson.
Being into Angular I thought it would be nice to create a Directive for a reusable Metronome. I'm guessing it can be useful if you're building some musical application utilizing the Audio API.
So I've publish this GIST where you can find the code for embedding this Directive in you application. You'll have to forgive me for there is still room for improvement there, but I'm sure that if you come this far it will be a walk in the park for you to modify it to you needs.

Metronome Directive Gist

BTW, if any of you knows how to make the Gist bear a name which is not derived from the files name in it, I'll be happy to know.

Cheers

AngularJS Module Seperation needs help

If you're using AngularJS as your framework of choice you probably know that it is recommended that you separate your modules according to Logic (Directives, Filters, Services) of by view type (i.e. dashboard-module) or combine the 2, but the idea is to have a single main module which depends on these "sub" modules.
This is better for testing since you don't need to load them all if you only going to test one of them, and better for keeping you stuff organized.
Currently, if you wish to create a module that, for instance, holds all the Directives, what you need to do is to have a JS file which defines the module and on top of it, it will create all the Directives with the .directive() factory method, and this is where I find the design a bit lacking, since it's really smells bad to have a big (big) file with all you're directives defined in it. no... I want each Directive to live in it's own file.
So this is where it gets uglier. If I want each Directive to be in it's own file, this means I need to load each of these files on my index.html. Now, some of you might say "Hey! use RequireJS to load them up, dummy!" but I know that RequireJS creates a whole new set of issues with the E2E tests... I really don't want RequireJS.
The direction I went with was to go with other script loaders like $script or yepnope and have them define the scripts to load on each module file - on the Directive module I will define all the directive that needs to be loaded. Doesn't work.
In the meantime, if any of you wants to share his/hers idea - I'll appreciate it :)

Cheers.

Twitter - Here I come

So whud'ya know... I'm going Twitter.
I know, I know - I have written these lines (for those of you who don't understand Hebrew, I'm bashing Twitter like hell), but I found myself more and more coming up with short ideas that posting a blog entry for is a bit of an overhead, you know what I mean? I need something I can tap to easily and write a quick thought or revelation that comes to my mind. 140 chars should do the trick, no? :)

So I set myself with a Twitter account and it's here:
https://twitter.com/Flashmattic.

For now, only confirmed followers have access to it... suites me at this point. Not everyone should go there ;)

I hope you'll find the twits interesting and given I'm an easily distracted person, you can expect a lot of them :)

See you (also) there,

Cheers

What is a data grid?

I lately found myself explaining to different people what is a data grid, or to be more accurate, what is not a data grid.
There seems to be a common misunderstanding of what a data grid should do and what are it's responsibilities among developers and UX experts equally.
Below I will list what a data grid should not include with hopes it helps you in future debates over one of the most common component in RIA. Of course it really depends on UX requirements in the end, but given your UX is not trying to invent the wheel all over again, the following lines are true to you as well.

A data grid is not responsible for fetching it's data

The data grid should not know where it gets the data from nor the API which is behind the collection it receives. If you want a fully business-detached component there shouldn't be any call to the server from the data grids. This includes refreshing the data of course.

The actions available on the data grid are not a part of the data grid

Add, delete, refresh, export to excel etc. are all actions a user can do on the data of the data grid. The data, not the data grid.
Let's take "add" for example - you create a model, insert it into a collection (sync the server if required) and give the updated collection to the data grid to display it.
I can smell the next question popping - No! a toolbar is not a part of a data grid.

Paging is only triggered by the data grid, not done by it

Some data grids embed paging mechanism, but as mentioned before, grids do not fetch their data, and given that paging is actually fetching the data with params, the grid should not handle the paging but just dispatch an event with the page number, start index and range included. "Someone" else should take this data and fetch the page.

Filtering is not the grid's business

Again, grids do not fetch their data. Filtering is actually fetching a data with constraints to it. Do it elsewhere and bring the results to the grid.

Sorting, in most cases, is done on the server...

I know that most grids support sorting within results, meaning that they sort the results which were already fetched, but in most cases you would like to go to the server and ask for a new sorted data, since the results exceed the page row limit (or lazy load limit). In these cases, the data grid simply tells that one of it's header were clicked, and let's other do the fetching for it.

Bottom line...

The data grid is mainly for displaying data, not messing around with it. pretty simple concept that keeps slipping under UX big mocks. If you keep your grid at doing what it should and nothing more, you will create a more reusable and portable component.

Take care.

Flashmattic or JSMattic?

I guess that this post is out for all who have approached me and asked if it wasn't time for me to change my blog name into something more suitable to what I'm actually practicing for the past year or so - JavaScript. Well, it's not really JavaScript, since I played around with all kinds of technologies like GWT, Grails and some libraries on top of JS like ExtJS, but yeah, they had it right - I haven't been practicing (nor preaching) Flex or Flash.

There is no question here. Flashmattic.

Flash, my friends, is a state of mind and I'm sure that all my Flash/Flex mates will agree. The Flash/Flex communities were the most exciting forums I had the privileged to be a part of. Developers who took a relatively simple technology and made amazing stuff with it, including the creation of RIA.

Being a Flash-Developer meant that you had to think outside the box, always looking for ways to amaze people using your products. It is no wonder that the top Flash developers of the time are now among the top JS developers of today, people like Grant Skinner and Jesse Warden bring their creative minds into the not-so-recent-dry-as-F&^k JavaScript realms (Hey, the JS community is so hyped about discovering the MV* patterns in a way that makes any Flex developer ROFL).

So, my friends - This blog's name remains Flashmattic though you will see more and more content which has nothing to do with Flash.

Plus, it simply sounds better :)

Cheers.

Grails r:script and g:include - workaround

Hi,
As others did, I also bumped into this mess. I wanted to include a controller view into another view, and have the nested view contain JS which can be used on that view, but r:script and g:include are not best friends.
I found a workaround you might find useful as well. I simply add an empty r:script tag on the parent view (the one who is using the include) and that's it, like this:

Parent view, on the HEAD tag:

And in the nested view:

// Script here

Mind you that we're counting on using the main.gsp layout (or some other layout which supports r:script)

Flashmattic has a new code highligt

Hi guys,
A small update - I've took the little time I have to update the way the code is presented in my blog. I must say that I should have done this a long time ago...
You can see a sample here.
Now you will be able to read it easier and use it better. Unfortunately I don't have the time or patience to go over previous posts and modify them so you should only expect it from now on.

Cheers

Stop using IE - Start using the web

It appears that many startups are consciously choosing to stop supporting IE ,and by that saving loads of cash and man hours for the project. I'm here to support this decision - IE should be banned out the internet community.

Whilst other browsers offer the freedom and ingenuity, MSIE seems to be stuck in some kind of a religious conservatism of keeping their user, from both ends, suffering.

It is as if that little child has finally raised his head, pointed out shouting "this king is butt naked!", or in other words - if you choose IE7 pay me up some taxes for making me bend in ways developers should not. And I'm saying, why stop at IE7 alone? Here, check this out - The jQuery core team has announced that it will quit supporting IE6/7/8 from it's 2.0 version.

Just think of the amazing stuff that could have been done hadn't IE been around. I know that MS is really trying to catch up (no, really, they are trying so hard it kinda brings tears to ones eyes), but IE9 is not there, and IE10, well - can MS please decide if they're enabling flash content there or not already?! And why should anyone wait for a version that it's feature he can get on other browsers now? indeed, old browser do hold the internet back.

And one might say that the problem is us. I mean, if we, as web consumers will stop using IE that will be it. How hard it is to upgrade your browser into something better? It's like people still want to drive with their bear feet like the Flintstones while there is a brand new Ferrari right next to them.

I must admit, that the only reason I'm still using IE is the fact that almost every government site in IL support IE only. Nothing works on FF or Ch and this is extremely annoying, but let me add that many official state services have started to realize that they need to support other browsers, like banks, healthcare etc.

The title "Internet Explorer" cannot be more misleading. Explorer is someone who boldly goes in search of new exciting adventures and experiments, where IE is more like the little guy at the end of the expedition line carrying everyone's dirty laundry. Far behind FF and Ch which are truly out there, leading the exploration to new worlds.

Stop using IE. Start using the web.

Intercepting and Routing AJAX calls with ExtJS

Hi there.
So yeah, I'm still messing around with ExtJS and still discovering it's quirky ways of making the lives of developers easier (to some extent, lets not get to optimistic now, shall we).
Today I want to share with you a nice way for intercepting and then routing AJAX calls from ExtJS. This may come extremely handy when you want to use relative paths within you Model/Store proxies, but want to test them for a specific server, meaning you want that relative URL to be converted into an absolute path. This way you don't introduce new code to the application but rather implement the solution externally (the HTML wrapper of the application is a nice option of doing it).
So say that our model looks like this (taken from Sencha docs):

Ext.define('User', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email'],

proxy: {
type: 'rest',
url : '/users'
}
});

Now, this Model will fetch data from a relative path to the web application it runs on, meaning that if you are running on http://localhost/myapp, it will go to http://localhost/myapp/users.
But this is not what we want. We want it to go to http://otherdomain/users. Enters the Ext.AJAX singleton.
By using the Ext.AJAX singleton we can intercept any AJAX call on the system and re-route it to a different location - here how it is done:

Ext.require('Ext.Ajax');
var URLPrefix = 'http://otherdomain/'
Ext.onReady( function() {       
Ext.Ajax.on("beforerequest", function(conn, options, eOpts){
options.url = URLPrefix + options.url
});
});

On the code above we're listening on the "beforerequest" event of the AJAX singleton, and the handler alters the URL by adding it a prefix of the desired domain.

That's it. Simple, ain't it?

Cheers.

ExtJS Simple Charts Walkthough and Workarounds

Hi guys,

I was in a need for a simple application that displays a nice grid and a chart alongside, both "look" at the same data source with all it means.

The technology at hand is ExtJS (4) and I was wondering, being a Flex fan (wait… yeah, ok), how well did Sencha made their charting framework, and their MVC infra. If you don't have the time to read further, I will sum it up for you - they did a pretty good work at it, but there is still room for improvement. I will try to explain what I mean, and hopefully let you learn from my experience so that you will know how to workaround issues I came across.

Ok, so ExtJS MVC infra has really made it simple. I had a Model that defined the fields and the proxy (a RESTFul service, providing JSON responses). Then I created a Store that would link to that Model and have it auto load the data when initialized. This pretty much concludes all the "data" section of the application. Out-of-the-box configuration, nothing to it.

Moving to the view, I've created a simple Viewport that contains the Grid and the Chart. On this note, I would like to say that Sencha still have a lot to improve on layout-ing. I always get mixed up with "flex", "fit", "stretch" etc. it is so confusing and not intuitive, unlike Flex layout-ing. I ended up using an "hbox" layout… oh, well.
No controller was involved in the process yet, but we'll get to that in a minute.
My data model contained a "name" field and 2 numeric fields. I wanted these 2 to be on 2 different Y axis, where the name played the part of the "category" axle. So here are my axes:

axes: [
{
title: 'Score',
type: 'Numeric',
position: 'left',
fields: ['score'],
minimum: 0
},
{
title: 'Hits',
type: 'Numeric',
position: 'right',
fields: ['hits'],
minimum: 0
},
{
title: 'Player',
type: 'Category',
position: 'bottom',
fields: ['player'],
label: {
rotate: {
degrees: 60
}
}
}
]

You see what I did there with the label on the "Player" axle? I had to, for if the labels don't have enough room to be displayed to the fullest, they are simply trimmed off leaving not-so-nice gaps , so having them rotated a bit was a good enough solution for that.

I then created the series, and here comes the frustrating part. It is not as trivial as you might think. I assumed that if I create 2 column series and define the yField that each relates to, I'm done. But no. when you do that you get an overlapping series, where the columns stand on over the other on the same category, and not one next to the other. If you want it to be one next to the other they need to share the same Y axle, which was not my goal.

After a quick search I understood that this is a well-known bug and if I desire something that will be readable, I have to use different types of series, so I ended up using "line" and "columns". That's kinda sucks. As I see it, it is a level 0 defect of Sencha charting.

Ok, so after having that figured out I wanted to change the scale of the Y axes I had, meaning that each will go from 0 to it's max, where max is relative to the max value it may contain according to the data given. I've set the axes "minimum" property to 0 and didn't set the max, as the documentation suggested. Running the application caused the 2 series to be relative to a single axle. What? Why? Well, it appears that if you don't specify the series the axe it relates to, it relates to the first axle it finds. It’s pretty stupid, since I've already defined the yField the series works with, and on the axes definition I've defined which axle work with which yField so… can't ExtJS figure it out by itslef? That should be the default behavior where if I wanted something more advanced I would gladly define the axes for each - not mentioning that the documentation really lacks in that aspect. Why should I find this "trivial" information on a blog? Why should you?

I ended up with the following definition of my Series:

series: [
{
type: 'column',
xField: 'player',
yField: 'score',
axis: 'left',
style: {
fill:'#77AECE'
},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('player') + ' score: ' + storeItem.get('score'));
}
}
},
{
type: 'line',
xField: 'player',
yField: 'hits',
axis: 'right',
style: {
stroke:'#77AECE'
},
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('player') + ' hits: ' + storeItem.get('hits'));
}
}
}
]

Ok, this was starting to look good. I must admit that the binding done between the Store and the grid/chart was impressive. I would sort the grid, and the chart would change accordingly with no intervention by me. The animation was playing smoothly, everything was scaling and resizing nicely. Well done, Sencha. The code lines that ware involved were narrowed to just what needed. A simple application remained simple in code terms, while still enforcing the principals of MVC.

Moving forward, I wanted to create a "stupid" polling that will fetch the data every 5 minutes. This is where the Controller came to the rescue. I've created a controller, that referenced the store I'm working with, and when initializing it, I used the TaskManager to create a timed event. Here is the code:

stores : ['PlayersStore'],
init : function() {
Ext.TaskManager.start({
run: this.refreshData,
interval: 300000,
scope: this
});
},
refreshData: function() {
this.getPlayersStoreStore().load();
}

That is it!

Pretty simple, won't you think? I must say that I am (yet again) impressed with the work Sencha have done. I admit that having this in Flex would have been probably as easy to do, but playing with it's scale would have been a little scary. Altogether, ExtJS gives you some kind of assurance that everything will render as expected. This is something, I have to admit, that I did not take for granted using Flex.

1 hour and you have an application that sums up the best part of UI concepts in RIA development today.

Hope it helped you.



Cheers.

ExtJS SASS disabled button color bug

Whud'up?

Bugs are everywhere but level 0 bugs kinda irritates you even more - such is the bug I want to discuss here.
As you know, ExtJS have SASS as the technology behind the framework's CSS. They did one hell of a job there, and so creating new custom themes is something that was made very easy.
Changing the color of a button text is somewhat elementary, when it comes to creating a new theme.
A part of it is changing the "disabled" state color on a button, which should be so trivial and shouldn't take more than a minute to implement. Alas, this is not the case for ExtJS.

You see, when you set the disabled color via the button ui mixin, you find out that it uses the "up" state color eventually.
Going into the code of the mixin, the cause reveals itself:

@if $color-disabled != $color {
color: $color !important;
}

See that? If the disabled color is not equal to the color, use the color? Definitely a copy/paste bug.
Check out this next post at Sencha forums, where you see that I'm not the first one to encounter it.
the code should actually look like this:

@if $color-disabled != $color {
color: $color-disabled !important;
}

So, first of all - I hope that this post will stop your frustration as to why is this happening, and secondly, I have a workaround (or two) that you might wanna use:
The simple solution is to override the ExtJS mixin in you own .scss and fix the bug.
Another solution really depends on whether you're building you project using some kind of a build technology which has an artifact dependency mechanism (Maven, Gradle, etc.), and then you can make the modification at the SDK and deploy it to you artifact repository, with a slight version update to differ it from the original SDK.

Cheers

Displaying JS Code inside ExtJS TextArea

Hi guys,

Well, in this post I would like to talk about how to display a code snippet inside ExtJS. Say you want to create a panel where you can see a code snippet, copy/paste of whatever, but you want this code snippet to come from an actual file, in our case - JS file, and be loaded at runtime.
So, how do you do that?
It's pretty simple in the end, but finding and assembling the solution is not as trivial as you might think (and so I wish this post will turn future searches to be much faster than mine).
We're going to use a config property of the TextArea called "loader", which helps us in loading remote content to the TextArea. This loader can receive a URL to tell it from where to load the content and it has several predefined renderers that can be applied on the content and, well, render it accordingly.
Since we don't have a JS code renderer predefined, we can use a function instead of a String defining the renderer type, and in that function declare how we want the code to be rendered, which is mainly some indentations, at this point.
I used the code snippet from here to create the RegExp needed to render the code nicely (BTW, please find the ones who invented RegExp and electrocute them somewhere, ok?).
So with out further a due, here is the code for displaying a JS code inside an ExtJS TestArea.

xtype: 'textareafield',
autoScroll: 'auto',
width: '100%',
height: '100%',
loader: {
url: 'https://localhost/springapp/js/app/view/component/codesnippet.js',
autoLoad: true,
renderer: function(loader, response, active) {
var text = new String(response.responseText);
text = text.replace(/&/mg, '&');
text = text.replace(//mg, '>');
text = text.replace(/\"/mg, '"');
text = text.replace(/\t/g, ' ');
text = text.replace(/\r?\n/g, '
');
text = text.replace(/

/g, '
');
text = text.replace(/ /g, ' ');
loader.getTarget().update(text);
return true;
}
}

Cheers

Extending ExtJS 4 DatePicker to highlight marked dates

Hi guys,

So today I want to share with you a little extension that I re-wrote for ExtJS 4 DatePicker component.
I say re-wrote, because this is an advanced form of the solution presented here, except that the other one relates to ExtJS 3 and not as robust.

So the basic idea is to have a marked dates on the calendar, same as you would have on your meeting calendar date picker in outlook. I also wanted the component to show some related tooltips for the marked date, and that meant that the data provider for the component is not strictly dates (as in a String, like the other solution), but rather an Objects that contains some metadata for the date.

Let's start with the data that we wish to be displayed. We want to have the date marked, so we need a Date, and for this example we will use the JS Date object, and for each date we want to display tooltip for a mock percentage and cost. So we're actually talking of an object that might look like this:

{date:new Date(2011, 10, 19), percent: '30%', cost:596}

On the component itself we I've created a config member named "markers". This one will hold the array of objects mentioned above.

config: {
    markers: null
},

In addition I want the JS Date object that is given to the DatePicker to use the same date format that is configured for the DatePicker, so for the sake of that lets override the applyMarkers method and in it apply the DatePicker format on each date. With this process we're actually changing the data within the markers from a simple Array to Associative Array, or a Map if you want, where each cell is defined by the formatted date and in it holds the metadata. This will help us later in marking these dates easily.

applyMarkers: function(markers) {
var formattedMarkers = [],
me = this

var formatDates = function(marker) {
var format = me.format,
eDate = Ext.Date,
formattedDate = eDate.dateFormat(marker.date, format)

formattedMarkers[formattedDate] = {percent: marker.percent, cost:marker.cost};
}

Ext.Array.each(markers, formatDates);

return formattedMarkers;
},

We're getting to the heart of the modification. Here we override the fullUpdate method of the DatePicker since it is the one that is in charge of rendering the cells within the calendar, we will add our own "if" statement to ask if there are dates to be marked, and if so we will find the cells that match the dates on the associative Array and append a tooltip according to marker object data.
For convenience purposes I'm only giving the relevant code part:

fullUpdate: function(date, active) {
...
var markers = this.markers;
...
setCellClass = function(cell) {
...
// If we have a need for highlighted dates, let's find the dates
// and start highlighting them
if (markers) {
formatValue = eDate.dateFormat(current, format);
if (markers[formatValue] != null) {
// Use the highlight-date CSS class for highlighting
cell.className = 'highlight-date';
cell.title = "Percent: " + markers[formatValue]["percent"] + "\n" + "Cost: " + markers[formatValue]["cost"];
}
}
};
...
}

Notice that I'm using a CSS class named "highlight-date" to mark the cells. This class, of course, should be included in your CSS file.
And there you have it. A DatePicker that lets you mark dates and append tooltips for it, here is how you use it:

Ext.create('Flashmattic.component.AdvancedDate', {
markers:[
{date:new Date(2011, 10, 19), percent: '30%', cost:596},
{date:new Date(2011, 10, 10), percent: '10%', cost:45},
{date:new Date(2011, 10, 8), percent: '86%', cost:367}
]
})

Have a great week,
Cheers.

Apache Flex? Hell yeah

You've probably heard the old news, about Adobe ditching the development for Flash Player on Mobiles devices, but here is something even newer:
From the "your questions about flex" announcement it is pretty sure to say that Adobe has decided to ditch the Flex SDK and BlazeDS development and proposed an offer for the Apache Software Foundation to "incubate" both.
Before you jump into conclusions I strongly suggest that you read the Q&A once again, to understand what this step means to the Flex community. And now that you have, I'll give you my 2 cents on the topic.
Although many will refuse to believe, I did foresee this coming, though I didn't imagine that Adobe will renounce themselves from Flex, and I still stand behind my words that "ditching Flex and moving to HTML5 completely is also not the smartest path to take" but enough quoting myself.
Many might say that this announcement is the final nail in Flex coffin.
I think not.
As a matter of a fact, this might bring the Spring (pun intended) of Flex and maybe put a sock in the mouths of those Java geeks who walked around shouting "Adobe is not a code company" - meaning that Adobe cannot be compared to Oracle (Sun) in delivering a coding platform like Java. Now if Apache takes the wheel this might change for the best.
I will say it again - Flex will lose it's place in the RIA technologies market. HTML5, at it’s uncompleted form today, can already supply 90% of what Flex can offer, however, Flex is still a valid technology, as I see it, and if I came across a project that shouts "Flex!", I will not hesitate.
If Apache will except Adobe's offer, this will mean that Adobe no longer decides where Flex goes - the community does. If back then, we had to scream for better compiler, I believe that in the hands of Apache the response will be quicker and much better.

Just think of it - "Apache Flex".
Too bad Adobe is keeping the development for the Flex Builder, but what can you do.
So - no doubt that the future will be interesting (in spite of HTML and JS) and I do wonder what Adobe and Apache will cook for us. In the meantime, try to remember these unquestionable truths:

• Flex offers complete feature-level consistency across multiple platforms
• The Flex component set and programming model makes it extremely productive when building complex application user interfaces
• ActionScript is a mature language, suitable for large application development
• Supporting tools (both Adobe’s and third-party) offer a productive environment with respect to code editing, debugging and profiling

Cheers

Combine, Minify and Copy your JS's to your .war file using Gradle

So - In the course of work I was introduced to Gradle.
WTF is Gradle, one might ask - in brief? It's a much flexible manner of building your projects than Ant or Maven. It's based on Groovy (which always makes me laugh thinking on the nerd who came up with that name and thought he is so damn cool), and I leave it to you to go and read about it.

First thing first I wanted to build my .war file. No problem there. Just apply the "war" plugin to your gradle.build file and you're done. Seriously - that's it.

apply plugin: 'war'

So I have my .war file empty and now I want to add my JavaScript to it. Oh, wait - I want to add my minified JavaScript to it, not just that, but I want to combine all of my JS files into one, and just then minify it. To the rescue comes gradle-js-plugin which can minify my files using the infamous Google's Closure Compiler and of course the easy way gradle lets you arrange and configure it's tasks.

So I added this plugin, like this

apply plugin: 'js'

And asked it nicely to combine all the files and simple-optimize it. As you can see, my JS files are under the src/main/javascript directory

combineJs {
input = fileTree(dir: "${projectDir}/src/main/javascript", include: "**/*.js")
output = file("${buildDir}/all.js")
}

minifyJs {
input = file("${buildDir}/all.js")
output = file("${buildDir}/all-min.js")
compilationLevel 'SIMPLE_OPTIMIZATIONS'
warningLevel = 'QUIET'
}

As you remember I wanted to make all that before I copy it into my war so, I've added this procedure before the .war building. Again - compared to Maven, it's done pretty easily by using the doFirst task method

war.doFirst {
tasks.combineJs.execute()
tasks.minifyJs.execute()
}

Ok - so now we have a combined minified JS file on our build directory, the next thing to do is to copy it into the .war file. Here I use the war plugin again and use it's webInf() method to add some content to the WEB-INF. I'm copying the minidified file into the root of the webapp under a directory named "js".
Actually the webInf(method) is responsible for adding resources to the WEB-INF directory, not the root of the webapp, but by adding "/" before the "js" I've worked around it.

war.webInf {
from "${buildDir}/all-min.js"
into "/js/"
}

There you have it. Running gradle build will create our webapp with all the above included.
I guess that this is not the last post on the topic, since gradle will probably walk with me several miles, so stay tuned.

Cheers.

Flex Missioner talks ExtJS

The Plot Thickens
You know - It always made me laugh and then feel sorry for the new emerging RIA technologies. As a Flex senior missioner, I found those fail attempts pathetic at. I'm obviously talking on platforms like "Silverlight" (Silver… what? Oh, that project MS closed not so long ago), "Open Laszlo", "JavaFX" (heheh oh boy, the horror!) and the list goes on and on.
To me it appeared that JavaScript is a script (I dare you call it a programming-language!) that played it's part in the web world some 10 years ago, and has no place, but frustration, in today's web technologies.
Alas, Came Steve Jobs and thickened the plot.
HTML5, as the new web standard (you're kidding, right?) enters and changes the game rules. Suddenly we're back at the mercy of JavaScript. Things like the DOM which I happily have forgotten for the sake of Smart View Interfaces, reincarnated and came back to haunt me, along side with browser incompatibilities, poor debugging, and messy code. God damn.

A new hope...
It was then that I have discovered a new hope.
Now, as some of you may know, once upon a time there was ExtJS, which was and still is, a very nice JavaScript library. Then, one day, came the merge with JQTouch which gave birth to "Sencha".
History is lovely, isn't it? Yeah… whatever.

I'm skeptic when it comes to new RIA technologies. Maybe it's because I know what it means to really compete with Flex for territory. I'm not the kind of UI Architects that sees a nice Control or a Component and jumps with joy, pants down, shouting "Eureka!". When it comes to the best UI technology for web applications there are a lot to consider, like: Richness, Extendibility, Community, Browser Support, Vendor liability, Ramp up Time… just to list a few.
ExtJS knocked me down.
I'm used to seeing pixilated controls, with "not quite there" finish to them, but here it actually looks like… well... Flex! Even better to some extents. Going to create a theme in ExtJS, and you will find freaking amazing integration with SASS and Compass that generates you're CSS and with a single variable can alter the entire look of you're application. Now try to extend one of it's components. Again - nothing dodgy there. MVC you say? Well, you have it. I know it's a bit twisted but there is a solution that actually give you the benefits of MVC.
And JavaScript? ExtJS made it so close to OOP, that you even don't feel the heartburn when writing "new" to create an Object.
Oh wait, hold on - what about the client Data package? No problems there, mate. JSON you say? There you go - a verity of "proxies" to integrate with any kind of Web Services out there (though I didn't see any AMF implementation, and as you know AMF out-performs any String based communication when it comes to large masses of data). This, my fellow Flexers, is not some immature platform we're dealing with here. It looks like every aspect was thought of.

Sitting on the shoulders of the giants
So, some might say, and be right about it, ExtJS is sitting on the shoulders of the giants, meaning it looks as if a lot of the component architectures, down to the Data packages ware "inspired" by other technologies, and dare I say, Flex in particular. Do you have a problem with it? On the contrary my friends, I'm good with that.
I must say, though, that the layout configuration is somewhat not intuitive, where words like "fit", "flex" and "stretch" don't do exactly what you thought they would, and hey - don't forget the whole browser compatibility, where extJS 4 doesn't really play nicely with IE9 (CSS gets screwed up and other kinds of glitches)… oh well.

Breathing on Adobe's neck?
Another thing to add to the grill is the fact that Sencha has launched it's own Animator, as if breathing on the neck of Adobe which also, recently, launched it's own solution for animation and transition editing tool for HTML5. now - that's pretentious of Sencha. Why? I believe that the experience that Adobe has in Designer IDE's plus the advantage they have from Flash, plus the integration with other graphic tools (Photoshop, Illustrator) will probably crush any attempts from Sencha, but you can never know. History teaches us that it can take only a single Company to change the entire developing agenda of the web, even if it's taking it 10 years backwards.
:)

Cheers.