To import, download and extract the zip file. Then inside of Prefernces, select the Studio dropdown on the left, choose Formatter and then on the right select the import profile option.

Lately a common topic of debate is native vs non-native in programming or applications. I’ve sat back and listened to a lot of arguments about native vs non, and both have valid points, but as programmers often do, I feel that most are missing the big picture.. For this case study, we’re going to use mobile as the platform, and discuss what it means to be native and identify why EVERYONE is right.

What does it really mean to be native?

If you were to ask this question to most mobile developers, many would agree that native means an application compiled in the main language used and interpreted by the operating system, eg: Objective C for the iPhone and Java for Android. Many developers that know these ‘native’ languages would argue that it is better to write native code instead of using frameworks or web views, which are often interpreted on the fly rather than completely compiled. Their statement would be valid, to an extent. There are better efficiencies in using low level languages, and while this argument holds its own against bare minimum hardware or complex apps, I think the thought process and argument itself seems hypocritical. Most of the developers that make arguments are overlooking a critical point.. their language of choice is still a higher level language. In fact if you want to break it down, the entire operating system is a higher level language just interpreting Objective-C or Java. Until you get down to the drivers and machine code that actually interface directly with hardware, everything else is a higher level, interpreted language.

So what’s the point?

Simply to call hypocrites out, and tell them to stop being critical. It’s okay if one developer is using pure Objective-C and taking more time to write extremely efficient code.. it’s also okay the developers are using Titanium or Web Views to build simple applications. Clearly there will always be advantages and disadvantages to both, but so long as we all recognize that, we can all build quality useful apps.

So what do you think? Native or Non-native and why? Lets get a fact dump going and see if we can really break this down further.

I first built out the markup for the app using jQ mobile docs and once I had started on an interface I wanted to tie it into a functional back-end. I installed Kohana, enabled the database, orm and auth modules and went to town.. wrote a couple models for managing accounts and budgets. There’s a lot of value that this framework has in making existing web apps more mobile compatible. Upon the first stable release, I’m thing of writing a mobile layer for things like our task manager, wordpress, etc.. because the markup changes use mostly html5 data attributes so the changes will cause minimal work for what already exists. The potential is huge. Chosen just went mobile!

Launch the App (best viewed on mobile device)

I’ve worked with all the major players in the PHP framework space, and there are good and bad takeaways from all of them. My goal isn’t to bash on any of the others, because they all have fairly equal strengths and weaknesses.. some obvious and others not so much. This post will instead be focused on one of my favorite frameworks, Kohana.

Holy Light Footprint, Batman!

What initially intrigued me about Kohana was the fact that there were so many credible developers raving about it, and the size of the whole framework was under a meg! Previous to Kohana, I had been doing nearly every project in Zend, so a 60M footprint didn’t really phase me after a while.. and to see a framework that small made me immediately question how powerful it could really be; but within install and reading docs, I was off to the races building powerful web apps with such a tiny footprint.

After diving into the framework on a few large projects, I’ll sum it up this way.. Kohana is like the frame of a house.. which a framework honestly should be. It doesn’t include the drywall or insulation, but since the frame is so solid, yet lightweight.. the house can be shaped and formed in any manner then the extras can be added on. Compared to the modular home that Zend and CodeIgnitor offer, this truly is a different framework.

Yet something familiar..

The next thing I noticed is it felt a lot like CodeIgnitor, even though it was also very different. When I started seeing syntax similarities, I investigated to find that the Kohana team stemmed from the CI team a while back. What doesn’t matter is the politics of the separation, but what does matter is that Kohana was geared to utilize PHP5 from day one. This fact also made me beyond words excited to start building projects.. as I’ve watched PHP5 start to become more OOP but had yet to really see it in action or throw away my bad habits. Long story short, this boy has started OOP’ing everything because of it. Goodbye MVC and linear and hello HMVC and sub-classing.

But the best part

The complaint I hear the most is that “Kohana’s documentation sucks” which honestly just makes me laugh. What I love about Kohana is that it quickly brings out the fools of developers who need examples to write “Hello world” or tutorials to do CRUD operations on a database. Kohana is a very thoroughly and thought out framework, but yes.. it is lacking in examples. That’s because the classes and commenting in Kohana is meant to be the documentation. They built the manual right into the product, which is a feature we’re ALL SUPPOSED TO DO if we’re good programmers!! Am I right?!? I’ve found that looking up documentation is as easy as a shortcut search within my IDE and quickly grabbing what I need. I don’t use a book, no snippets or cheatsheets; because they’re all unnecessary.

Kohana PHP

Kohana is by far my number one choice when it comes to building most small to medium scale websites or applications. It’s proven capable time and again, and if my opinion counts for anything, then take my advice on this one.. you won’t regret it (unless you’re a bad programmer).

We’re quick to turnover when we really believe in something. One of the automated scripts we wanted for our company was a system to upload mockups to a directory and have them automatically publish in a web page. This system allows us to simply drag and drop images and have them populate with different versions and folders. We also wanted this functionality to be password protected and to have a way to separate public and private folders in a directory.

For security purposes I have removed the actual session control script that we use (which is a way of protecting pages via login). However, it does come standard with a simple login posting ability so even if you know nothing about programming, this script should come in handy.

Features:

• JQuery Slider for form and functionality
• PHP to read directories and manage users
• Minimal design and small pages.
• Basic frame and structure, ideal for building upon or changing functionality

Documentation:

Under the parent mockups directory

• This is the area to store your CSS, JS, and Layout Images
• The index on this page reads the directory and displays any directory starting with an _underscore
• The user name should also be the directory name that user has access to
• User names and passwords are stored in an array

Under the mockups > _user directory

• This once again reads the directory looking for folders starting with an _underscore
• This step is not necessary for the application, we simply use it for different versions/revisions

Under the mockups > _user > _version directory

• The index page in this directory reads the directory and looks for any images (you can change extensions that it looks for).
• Once it finds the images it outputs them in HTML and displays the file name, sorted alphabetically.

Check it out

Check out the RFP Application in action

Tooltip jQuery Implementation

The tooltip reads the target (in the example above, the target would be all <a> tags with the class of tooltip), and creates a tooltip based upon the title attribute on that link. For example:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/tooltip.js"></script>
 
<!-- Invoke the script and plugin -->
<script type="text/javascript">
$(function() {
    // Target elements to apply, and options to pass to the API
    $("a.tooltip").tooltip( { offset: [15, 20] } );
});
</script>
 
<a class="tooltip" href="#" title="link text">link</a>

Grab the Code

(function($){$.tools=$.tools||{version:{}};$.tools.version.tooltip='0.1.0';var effects={toggle:[function(){this.getTip().show()},function(){this.getTip().hide()}],fade:[function(){this.getTip().fadeIn(this.getConf().fadeInSpeed)},function(){this.getTip().fadeOut(this.getConf().fadeOutSpeed)}]};$.tools.addTipEffect=function(name,loadFn,hideFn){effects[name]=[loadFn,hideFn]};$.tools.addTipEffect("slideup",function(){var conf=this.getConf();var o=conf.slideOffset||10;this.getTip().css({opacity:0}).animate({top:'-='+o,opacity:conf.opacity},conf.slideInSpeed||200).show()},function(){var conf=this.getConf();var o=conf.slideOffset||10;this.getTip().animate({top:'-='+o,opacity:0},conf.slideOutSpeed||200,function(){$(this).hide().animate({top:'+='+(o*2)},0)})});function Tooltip(trigger,conf){var self=this;var tip=trigger.children("span");if(conf.tip){if(conf.tip.indexOf("#")!=-1){tip=$(conf.tip)}else{tip=trigger.nextAll(conf.tip).eq(0);if(!tip.length){tip=trigger.parent().nextAll(conf.tip).eq(0)}}}function bind(name,fn){$(self).bind(name,function(e,args){if(fn&&fn.call(this)===false&&args){args.proceed=false}});return self}$.each(conf,function(name,fn){if($.isFunction(fn)){bind(name,fn)}});var isInput=trigger.is("input, textarea");trigger.bind(isInput?"focus":"mouseover",function(e){e.target=this;self.show(e);tip.hover(function(){self.show()},function(){self.hide()})});trigger.bind(isInput?"blur":"mouseout",function(){self.hide()});tip.css("opacity",conf.opacity);var timer=0;$.extend(self,{show:function(e){if(e){trigger=$(e.target)}clearTimeout(timer);if(tip.is(":animated")||tip.is(":visible")){return self}var p={proceed:true};$(self).trigger("onBeforeShow",p);if(!p.proceed){return self}var top=trigger.position().top-tip.outerHeight();var height=tip.outerHeight()+trigger.outerHeight();var pos=conf.position[0];if(pos=='center'){top+=height/2}if(pos=='bottom'){top+=height}var width=trigger.outerWidth()+tip.outerWidth();var left=trigger.position().left+trigger.outerWidth();pos=conf.position[1];if(pos=='center'){left-=width/2}if(pos=='left'){left-=width}top+=conf.offset[0];left+=conf.offset[1];tip.css({position:'absolute',top:top,left:left});effects[conf.effect][0].call(self);$(self).trigger("onShow");return self},hide:function(){clearTimeout(timer);timer=setTimeout(function(){if(!tip.is(":visible")){return self}var p={proceed:true};$(self).trigger("onBeforeHide",p);if(!p.proceed){return self}effects[conf.effect][1].call(self);$(self).trigger("onHide")},conf.delay||1);return self},isShown:function(){return tip.is(":visible, :animated")},getConf:function(){return conf},getTip:function(){return tip},getTrigger:function(){return trigger},onBeforeShow:function(fn){return bind("onBeforeShow",fn)},onShow:function(fn){return bind("onShow",fn)},onBeforeHide:function(fn){return bind("onBeforeHide",fn)},onHide:function(fn){return bind("onHide",fn)}})}$.prototype.tooltip=function(conf){var el=this.eq(typeof conf=='number'?conf:0).data("tooltip");if(el){return el}var opts={tip:null,effect:'slideup',delay:30,opacity:1,position:['top','center'],offset:[0,0],api:false};if($.isFunction(conf)){conf={onBeforeShow:conf}}$.extend(opts,conf);this.each(function(){$(this).prepend('<span class="tip"><span class="top"></span>'+$(this).attr("title")+'<span class="bottom"></span></span>');el=new Tooltip($(this),opts);$(this).data("tooltip",el)});return opts.api?el:this}})(jQuery);

Checking out the Application