Scaling Div Based on Space Available, not Content
For HTML div's, there are different CSS attributes to define how much space they are allowed to take up.
- Height (min-height, max-height, height)
- Width (min-width, max-width, width)
- Overflow (scroll, clip, etc)
The div height for example will be calculated based on the properties of the div (if height is set) or the content of the div (if min-height / max height is set). In this case, there is a requirement for another option - to have the div scale to the amount of space available to it.
The use-case is:
- Three div panels that will be displayed vertically
- Multiple devices with multiple screen resolutions
- The div panels look good @ 2em but no less and @ 5em but no more
- The div panels should take up as much space as they can
When defining the panels -
.panel{
margin: 0.5em;
padding: 0.5em;
min-height: 2em;
max-height: 5em;
}
This causes the panel to be 2em at any resolution, browsers calculate the size of the div based on the content. Setting the size of content of the panel div does not give me the dynamic size that is required. The solution is to set a % for the height of the panel.
.panel{
margin: 0.5em;
padding: 0.5em;
min-height: 2em;
max-height: 5em;
height: 15%;
}
Now the panel will take up 15% of the size up to 5em - exactly what is needed. The value of the % of the height will change how quickly it will scale to the max and should be modified as needed.
GWT RPC and the transient reserved word
I have been building an application wit GWT to host on Google's App Engine. The application makes extensive use of one SimpleEventBus (using a singleton pattern) and POJOs that are modified. The user is only allowed to view and modify one POJO at a time, and can move forward and backwards through the POJO objects. Each POJO must add an handler to it as soon as it is being viewed and will remove the handler when it is not being viewed.
Something that I noticed is when I have a HandlerRegistation feild with the POJO, my GWT RPC fails with a SerializationException. After debugging, it seemed that HandlerRegistation isn't serializable and is causes the problem.
The solution? The transient reserved word. The first thing I thought was 'oh man, GWT isn't going to understand it, they use their own serialization and also convert Java to JavaScript, this isn't going to work...'
But - Google says about GWT:
The transient keyword is honored, so values in transient fields are not exchanged during RPCs. Fields that are declared final are also not exchanged during RPCs, so they should generally be marked transient as well.
So - when thinking about serialization and communicating with the server, put some thought it what you need to serialize and send to the server.
Keeping Context when using Facebook API Callbacks
I learned something very quickly with playing around with facebook's javascript API. When using facebook's callbacks, you dont have any hooks to keep the context through the callback. This can be a problem if you are planning on using any of the methods or structures associated with the original caller. An example:
application.prototype.login = function (response){
if(response.session){
FB.api('/me', this.getUserInfo);
}else{
console.log('logout, or not logged in');
}
};
Considering that there is a method getUserInfo for the application object, when facebook returns from the graph API call, the callback has no context and 'this' is a reference to the global object 'window'. Looking through Facebook's API, there is no support for adding context. This will happen for any callback through facebook's API. This include FB.getLoginStatus, FB.Event.subscribe and FB.api.
Most examples online for facebook's API use global functions for callbacks - which I feel is incorrect, unless you are just exploring you probably want to keep some type of sanity with your code and use some sort of pattern. There is another option, which uses javascripts apply function and closures. This post is not going to go into the nitty gritty details about closures and apply. There are plenty of resources on the internet.
The solution:
//Create a global function called bind
function bind (context, func){
//return an annon function
return function () {
//use apply to give context to the func, and pass arguments
func.apply(context, arguments);
};
};
Modify the original example to use bind:
application.prototype.login = function (response){
if(response.session){
console.log('login');
//Changed the callback
FB.api('/me', bind(this, this.getUserInfo));
}else{
console.log('logout, or not logged in');
}
};
Now when getUserInfo is called, 'this' references the application object. If you are using a javascript framework such as prototype, jquery ect. They usually will have an utility method that will accomplish the same thing.
On a lighter note - I'm very very impressed with how easy it is to authenticate my javascript client to facebook. It leverages oAuth behind the scene, but I dont have to worry about it 
- great feature!
Ext.js vs Dojo – Using a Grid for Demos (GridPanel vs DataGrid)
I have had a very enlightening period in the past few months designing demos for our yearly conference. With the time allotted I got to do the same demo twice using two different frameworks, Ext.js and dojo. I have used both Ext.js and dojo in different projects and demos - but I have never used both to complete the same project. This really gave me the clear division of the real strengths and weaknesses of both the packages.
Before we get into what the demo was, its requirements etc. I just wanted to spoil the ending and say that Ext.js was superior and was the champion.
The demo was to show business intelligence (BI) being consumed in a custom javascript UI. This is the showcase the Services Oriented Architecture (SOA) that is integrated within the product. The data is delivered from the BI environment is in a customizable format(the business intelligence suite has a clear division between the model and the view, so the view is easily customizable). The demo at the end of the day shows multiple grids in a mashup to create an administrative application that refreshes frequently to give real time data to an administrator. This demo needed to consume JSON and XML (to show off different capabilities of the SOA). The grids needed to have the following capabilities:
- Login using AJAX.
- Fetch data
- Sort/Filter on client
- Custom column rendering (thresholds)
- Custom column rendering (buttons to perform server side actions)
- Have a clean UI to impress customers and prospectives
- Auto Refresh
The demo is usually pitched as part of our SDK package as consuming BI in a 3rd party system, which can be accomplished in a million ways. But, over the course of the year, we have had numerous requests about BI and javascript frameworks, which hints towards this trend being viable for companies in the future.
From my beginnings in javascript land I was a dojo man - When looking at dojo framework, it was very mature for its time, with amazing capabilities (connect has been a lifesaver). The documentation for dojo was a little lacking but was improving. Ext.js on the other hand, had some very attractive UI widgets, but seemed like it was lacking direction. If I remember correctly, Ext.js was initially built on top of yui then jquery, and now it has its own framework. But that was in the past. Now in the present, I had a demo to brew up using Ext.js GridPanel and dojo DataGrid.
DataGrid - Overall, I am more comfortable with dojo but this was my first time using the DataGrid in dojox. Again, dojo documentation was very limited and the examples didn't do exactly what was needed. So for every modification that needed to be done to get the workflow I needed, I had to dig around in dojo source and firebug to figure out how it worked. An example of this was getting the loading bar to not occur. At the end, I ended up creating another grid behind the scene, and replacing it in the DOM. There should have been an easier way though... Overall the demo took 3 working days to complete to the specifications and standards for the conference.
GridPanel - Saying that I was able to complete the same demo in 1 day + 1 morning Ext.js vs 3 days with dojo should hint why I say Ext.js was best. This is mainly because of the clear documentation and numerous samples available on Ext.js's site. Even though I am less familiar with Ext.js, I was able to complete the task in less time. Ext.js's UI is clean and beautiful without any modifications. Dojo's themes are still missing the WOW factor needed to impress out of the box. This is where alot of time was spent in dojo, with the theme. As a web programmer, I hate having to work around quirks and worry about perfect clean interfaces - this is something that Ext.js handles eloquently with their UI widgets while dojo misses...
One cool thing though is dojo datagrid and Ext.js gridpanel were consuming the same information from the BI system with no modifications. This is one of the benefits of being able to provide data as a service. At the end of the day, it doesn't matter which tool or technology you decide to use, because the BI system can support it by serving it data.
So, for my next JavaScript project - I am definitely going to give Ext.js another chance. For someone who requires documentation to get started and doesn't want to spend hours fixing layout/look and feel issues, Ext.js can be a viable solution.
Hello and Welcome to OMGitsTom
Before I can define the point of this blog and why any one would want to read it, I need to introduce myself. I'm Tom, a Program Manager in the Software Industry living in Northern VA. I have the background of a web developer, and the heart for web technologies. So when I am not engulfed in the Program Management discipline, I am dabbling is some sort of web related technology / tool. At the time of this post, this has been JavaScript Frameworks (dojo v extjs) and Google Map API. I am a advocate of web services, open source utilities, and innovative web applications.
That is just my professional life though, I am in my mid twenties, and I am still young at heart. I travel, party, and have a good time whenever I have time. Growing up in a smaller town, I have a interesting perspective on city life.
So what is going to be blogged about? Anything that I mentioned above - I can see this turning into a nerdy whirlpool of random technologies and fun/interesting adventures - I hope you enjoy...Cheers!