Apr 27, 2012

DART - Google develops new javascript

Ok, another one...
Google is on attempt to develop web structured language that can compile to JavaScript.
Catch is it should support server side scripting what ever that means.
And it can not mean nothing less then employing Google web servers or what?

http://www.dartlang.org/

Cofee script

I had to persist this one as bookmark. It's one of those things that you don't hack know what they are for but they uber cool :)
Guys wrote small JavaScript language without lose of performance.
You write JavaScript with 1/3 length of original code.

http://coffeescript.org/

Apr 25, 2012

JQuery Mobile theme roller in action

JQuery Mobile elegantly approached customizing colors and feel of its UI by enrolling complete online solution through web app named "Theme roller".
Here is url:
http://jquerymobile.com/themeroller/

It looks great but I ran into problem.
I've created custom css, downloaded it and tried to put it as it should as an extending CSS that loads before original JQuery Mobile CSS. Hence it supposed to override existing JQM swatches A,B,C etc.
Something like this:


<link rel="stylesheet" href="themes/mycustomtheme.min.css" /><link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile.structure-1.1.0.min.css" />


It did not work for me. :(
So I end up with copying portions of swatches into original JQM CSS.
Open up CSS you just downloaded from theme roller and find for example swatch C witch should look like this:

/* C
------------------------------------------------------------------------------------
.ui-bar-c {
border: 1px solid #0071bc /*{c-bar-border}*/;
background: #53b9e4 /*{c-bar-background-color}*/;
Copy complete section and copy it to jquery mobile CSS  jquery.mobile-1.0.1.css under the same section.

Yes its wrong, yes I should dig out problem but for now it works.



Apr 15, 2012

ASP.NET WEB API vs MVC or what?

Now this was confusing at first.
So what's with this new ASP.NET component WEBAPI?
While ago I've got task to create lightweight back end for mobile JSON consumer app.
Ok, let's roll WCF, contracts, binding  WCF ABC and that stuff.
But no my colleague came with another acronym:
"No man, we'll use WEBAPI REST services. Where have you been, locked up somewhere ? :) "

And on top of it came another statement:
"Look, we must install ASP.NET MVC 4 so we can plug it in ..."

MVC ? What a ...?
Now wait a minute. There is that giant stuff that communicates with everything in the world (and they are building protocol for aliens :) ) called WCF? Right?
It inherited good ol' SOAP like in stone age.
To my humble knowledge that baby goes along and host virtually on anything that can host .NET.
It has nothing to do with MVC or webforms.
So what's the catch?

Well you'd better listen to this great Scott Hanselman minutes (no, I'm not on his marketing payroll :) ):

http://www.hanselminutes.com/264/this-is-not-your-fathers-wcf-all-about-the-webapi-with-glenn-block

Ok, now google REST and you got the picture.

Now, reason for this post was something else. On introduction videos on http://www.asp.net/web-api
there is very important statement about WEBAPI in MVC "skin".

When you create routing for WEBAPI you DON'T define actions as in classic MVC model.
WEBAPI defines standard HTTP  REST statements POST, PUT, GET ... as actions.

For me that punches the whole idea on integrating this "baby" wanna be REST WCF into MVC model and it fits just fine give it a try.


Apr 11, 2012

Proper referencing of PhoneGap with JQuery mobile

Ok, so you've setup Eclipse, Android SDK, PhoneGap or XCode and you want to use best from the two javascript libs:
  • PhoneGap
  • JQuery Mobile
JQuery Mobile is not just another JQuery plugin. So you don't just reference it and use it per scenario.
After its loading it runs asynchronously number of tasks to change DOM structure so it fits into JQMobile UI layout conventions.
Bottom line is that any other yours peace of javascript has to be put in proper place inside this JQM model or you won't get results you expect.

How to reference PhoneGap with JQuery Mobile?

It depends what and mostly when you want it to be done.
If you need to run it as the very first thing before JQM and you don't need nothing from JQM for this task you must reference it on the top before referencing JQM library like this:
<head>
...
  <script type="text/javascript" >
    function OnDeviceReady() {                    
                      // Do something when PhoneGap is initialized
                }
     $(document).ready(function(){
                document.addEventListener("deviceready", OnDeviceReady, false);
   });
   </script>
   <script type="text/javascript" src="jquery.mobile-1.0.1.min.js"></script>   
 ...
</head> 


Now this will work but there is a catch. Both PhoneGap and JQmobile libs are based on event driven model. They run bunch of task in their own processes asynchronously. What this means is that when you tell PhoneGap that you want OnDeviceReady executed it will not be executed until phonegap in separate thread says I'm ready.
After line:
          document.addEventListener("deviceready", OnDeviceReady, false);
; execution continues and JQM starts to kick in. So they run parallel and no one can tell will OnDeviceReady really get executed before JQM starts.
Now someone will say that this is exactly what is expected from async process to behave but its just not plain obvious when you start to play with this things.

Hence I figure out I'll have to do some more reading on JQM :)

To cut long story short as a manual for lazy developers, like I'am, here it is.


<div id="MyPageUniqueName" data-role="page" data-theme="e">        
        <script type="text/javascript">
            $("#MyPageUniqueName").bind("pagebeforecreate", function (event) {

                  function OnDeviceReady() {                    
                      // Do something when PhoneGap is initialized
                }
                document.addEventListener("deviceready", OnDeviceReady, false);

});
</script>
...

JQM recommends injecting your code in appropriate JQM events. Read JQM docs for details on events and their purpose.

Although in proper place this code still does not guarantee that OnDeviceReady will get executed before JQM thread kicks in.

This represents a problem only if you need PhoneGap to prepare some stuff BEFORE JQM starts.
For example you need to obtain some data from mobile device internal storage using phonegap, inject it to DOM of page and let JQM render UI with new data.

Although you could try to wait using setTimeOut() while PhonGap loads and do its work and then let go JQM continue it is simple not right approach.

Right approach is to have Page A that prepares DATA using PhoneGap and then POST's this DATA to PageB. Page B then does not care about when PhoneGap is loaded since it already has its required DATA and can render it in proper JQM event PageBeforeCreate.












Kick off

Hi,
you are visiting blog that tracks some of my interesting experiences with various web & mobile development endeavors from both my professional and amateur effort.
I make my bread as senior ASP.NET developer with occasional ventures in "dark side" NON-Microsoft arena :).
As any other developer out there and after a lot of Google-ing I've figure out that is easier to put some things online so I can keep them in one place and maybe someone else will get his answers just as I often seek them.

So have a nice reading a drop a line if you care,

Sinisa