Wednesday, September 12, 2012

WHY U NO USE ROBOGUICE!?!

That's exactly how I ask myself after trying out Roboguice 2 after a tutorial or two.

I discovered Roboguice after a guy in my facebook group posted a link to an excellent Android stack named android-bootstrap. Android-bootstrap is boilerplate application that includes tons of great open source tools and frameworks. I'll save this one for another time.

Back to Roboguice, roboguice adds dependency injection patterns to Android development. It adds annotations that makes writing Android applications like Spring apps in the J2EE space. It basically takes something that looks like this:

class AndroidWay extends Activity { 
    TextView name; 
    ImageView thumbnail; 
    LocationManager loc; 
    Drawable icon; 
    String myName; 

    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main);
        name      = (TextView) findViewById(R.id.name); 
        thumbnail = (ImageView) findViewById(R.id.thumbnail); 
        loc       = (LocationManager) getSystemService(Activity.LOCATION_SERVICE); 
        icon      = getResources().getDrawable(R.drawable.icon); 
        myName    = getString(R.string.app_name); 
        name.setText( "Hello, " + myName ); 
    } 
} 

To something like this:

class RoboWay extends RoboActivity { 
    @InjectView(R.id.name)             TextView name; 
    @InjectView(R.id.thumbnail)        ImageView thumbnail; 
    @InjectResource(R.drawable.icon)   Drawable icon; 
    @InjectResource(R.string.app_name) String myName; 
    @Inject                            LocationManager loc; 

    public void onCreate(Bundle savedInstanceState) { 
        super.onCreate(savedInstanceState); 
        setContentView(R.layout.main);
        name.setText( "Hello, " + myName ); 
    } 
} 

That's some kind of witchcraft if you ask me but still you can't argue how convenient this style of programming can be and we all know programmers are lazy as sin.

Saturday, September 8, 2012

Staring at boobs gave me an idea for Underscored Knockout

I have been using knockout.js ever since I discovered it. Since that time also, my JavaScript chops have been getting good to the point I discovered (and using) underscore.js. Let's face it, array and/or collections handling in plain JavaScript isn't pretty.

Then a couple of days ago, I was staring that this random lady's cleavage on the ride to work - had my sunglasses so she was none the wiser - that I suddenly had a great idea - Knockout's arrays with Underscore's array functionality. And I was like, "FUCK! Why did I think of this sooner?!" Needless to say, I forgot about the boobies.

When I got to work, I fired up my browser and searched the web if someone got the same idea thankfully, Kamran Ayub thought about it while driving home from work - UnderscoreKO. It's was exactly what I was thinking! If I had discovered underscore sooner, I bet I would have wrote this beauty of a library.  Now I can stop writing half-ass functions/closures of my design to merge arrays or search it for certain values and get to writing short, concise, functional Knockout code.

Thank you Kamran!


Sunday, September 2, 2012

Quick & Dirty Tabs on Drupal nodes

I just want a dead simple tab on a Drupal node but sometimes Drupal (with the internet) will just bend you over and spank you.

If you are reading this, I bet you found Quicktabs and read katbailey's "Go forth and tabbify" post but you came to the conclusion that its either:
  1. To complicated; You suspect that the hook_page_alter() function is gonna bite you in the ass down the line 
  2. Its not what you need 
I'll also bet you tried a few other approaches like leveraging the jQueryUI tabs like what Matt did and still found that it wasn't what you want. So now what? Well, you can do what I did - the quick and dirty tabs. 

My quick and dirty tabs is just javascript, html markup and a Omega subtheme. And it just involves 4 steps.

1. The HTML markup. You will use this inside your node.tpl.php or equivalent node template override. Notice the page-control and page-sections parts of the markup.
<div class="com-profile">  
      <div class="page-control">  
           <ul class="myQDtabs">  
                <li class="active"><a href="#">Basic Information</a></li>  
                <li><a href="#">Photos</a></li>  
                <li><a href="#">Forum</a></li>  
                <li><a href="#">Contact Persons</a></li>  
           </ul>  
      </div>  
      <div class="page-sections" style="display:none" >  
           <div class="section">  
                <div class="info">  
                     ...  
                </div>  
           </div>  
           <div class="section" style="display:none" >  
                <div class="gallery">  
                     ...  
                </div>  
           </div>  
           <div class="section" style="display:none" >  
                <div class="forum">  
                     ...  
                </div>  
           </div>  
           <div class="section" style="display:none" >  
                <div class="contactperson">  
                     ....  
                </div>  
           </div>  
      </div>  
 </div>  

2. The Stylesheet. I settled on a pill type of tabs. Just add these styles on the main subtheme stylesheet.
3. The Javascript. This is a tricky bit. If you have read Matt's post about Drupal and jQueryUI tabs, you'll know that Drupal allows other javascript frameworks so Drupal uses jQuery's .noConflict() function. This forces you to write your jQuery withouth that the '$' alias. Oh, create this script somewhere inside your subtheme.
jQuery(document).ready(function(){
    QDtabs('.myQDtabs','.page-sections','click');
});

//function-type tab switching
QDtabs = function($tabs,$tabcontent,method){
  jQuery($tabcontent + ' .section').eq(0).fadeIn();
  jQuery($tabs + ' li').eq(0).addClass('active');
 
  jQuery($tabs + ' li:not(.active)').die().live(method,function(e){
  e.stopPropagation();
  
  var $self = jQuery(this);
  var index = $self.index();  
  $self.addClass('active').siblings('.active').removeClass();  
  jQuery($tabcontent + ' .section').hide().eq(index).stop(false,true).fadeIn();
  
  return false;
 })
}

4. And the last step is making my Omega subtheme load the custom script. Omega has a particular way of adding custom javascripts.

libraries[my_script][name] = QD custom script
libraries[my_script][description] = Quick and dirty tabs
libraries[my_script][js][0][file] = my_scripts.js
libraries[my_script][js][0][options][weight] = 15

The last thing to do is a bit of housekeeping - Clear your Drupal cache and turning on my_script inside my theme's admin interface.