Ajax

Google Developer Podcast: Android

Tagged:  

Dick Wall, of Google Developer Programs, has posted a podcast in which two architects on the Android engineering team talk about the Android platform from a technical perspective.

Other topics in the podcast include:

  • Some history behind the project
  • The high level architecture of Android. For example, how Linux processes handle the VM and manage security (the VM doesn't handle it)
  • Details on the Dalvik VM and how it is optimized for small devices
  • The architecture: From Intents to Views to Permissions and more
  • How XML is slow, but the tools convert the XML to a nicer format for you
  • The tooling and steps for building an application on Android
  • How so many objects have a URL, and how the environment is like a mini-SOA (Services across processes instead of across the network)
  • Thoughts on how you program for small devices, and things to watch out for if you move from the desktop
  • The control, or lack of control that you have over the application lifecycle
  • "Everything you do drains the battery"
  • The thread story: they exist, you don't have to deal with them if you don't want to, and the UI
  • Using XMPP for messaging

You can download the episode directly, or subscribe to the show (click here for iTunes one-click subscribe).

Click here to visit the Android Developer Blog


OpenID 2.0 Finally Released!

Tagged:  

It is Christmas time and we web developers have just received a great gift. OpenID 2.0 has finally been released. This will hopefully allow for greater adoption of the API (especially now that both Microsoft and Google have announced their supporting of it).

Below is from the OpenID site.

While its certainly been a long process in the making, we’re now quite excited to announce OpenID Authentication 2.0 and OpenID Attribute Exchange 1.0 as final specifications (”OpenID 2.0?). This morning was the closing day of the Internet Identity Workshop and David Recordon, Dick Hardt, and Josh Hoyt (three of the authors and editors) made the announcement during the first session. Both specifications have evolved through extensive community participation and feedback and each have been stable for a number of months. There are already a variety of open source libraries shipping these specifications with product support including Google’s Blogger (via Sxip’s library) and Drupal who did their own implementation of the specifications. Multiple OpenID Providers including MyOpenID, Sxipper, and VeriSign’s PIP already have support for both of these specifications. Given past trends, growing support of OpenID 2.0 should be no different.

Click here to read the full post.

I can't wait to see what new applications are made using the OpenID 2.0.

Thanks to Macskeeball for letting us know of this news. If you would like to let us know of upcoming news you can now use our new social feature (you'll be hearing more about this soon) that will allow for you to let us know what you would like on the blog.

Google AJAX Search API - Search Result Limit Increase

Tagged:  

Google has announced that it's AJAX Search API now supports up to 32 search results as well as pagination through result sets. This is a 4x increase in the number of available search results.

You can see the new code in action in their samples that are based on the default search control:

The pagination logic is built into the default search control. If you like to code your own search control, their Raw Searcher sample has a few lines of code that implements result pagination.

One interesting thing to note is that this annoucement concludes with:

For a number of complex reasons, this feature is not implemented in Blog Search or in Local Search.

So, for a number of complex reasons, this post must end.

DWR Joins DOJO Foundation

Tagged:  

DWR, a popular open source framework, which will be very useful in push down methodology. In more technical words, it is a RPC library which makes it easy to call Java methods from JavaScript and to call JavaScript functions from Java. It has number of features like call batching, marshalling of virtually any data structure between Java and JavaScript. It also has integrations with Server side technologies like Spring, Guice etc. More details about DWR is coming soon.

When Joe, Founder of DWR, shows his interest of moving DWR under DOJO foundation because the foundation will take care of legal issues, hosting etc. There are lot of debates went on the user community. Some of them preferred to go under Apache. The main concern in going through Apache is, Apache insists that everything is in the package org.domain and the domain apache.org and they generally share the similar look and feel. Where as, DOJO foundation provide support for the things that are important like CLAs and website hosting and don't get involved in things like package naming.

DOJO will not enforce DWR that Dojo toolkit will be tightly integrated with DWR. Dojo toolkit will be one of the toolkits will be supported by DWR. DOJO foundation does not enforce anything on the DWR side.

DOJO foundation answered all of the questions raised by the DWR user group about DOJO foundation.DWR is going to write a proposal to the DOJO foundation that they accept DWR. Hope it will be a good move to DWR and brings lot of visibility to it.

A Preview of HTML 5

Tagged:  

In an article on A List Apart, Lachlan Hunt discusses new features in HTML 5, which is currently under development.

Here is an excerpt from the article on the new structure presented in version 5.

HTML 5 introduces a whole set of new elements that make it much easier to structure pages. Most HTML 4 pages include a variety of common structures, such as headers, footers and columns and today, it is fairly common to mark them up using div elements, giving each a descriptive id or class.

Diagram illustrates a typical two-column layout marked up using divs with id and class attributes. It contains a header, footer, and horizontal navigation bar below the header. The main content contains an article and sidebar on the right.

The use of div elements is largely because current versions of HTML 4 lack the necessary semantics for describing these parts more specifically. HTML 5 addresses this issue by introducing new elements for representing each of these different sections.

The div elements can be replaced with the new elements: header, nav, section, article, aside, and footer.

The markup for that document could look like the following:

<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>



Click here to read the full article

jMaki - A Java Ajax Framework

Tagged:  

jMaki a lightweight framework to build Ajax-enabled web applications using standards-based technologies.

jMaki Screencast

[Video] Take a deep dive into jMaki, a client-side framework that makes it easy to build Ajax-based web applications. In this session hosted by Ed Ort from the java.sun.com team, jMaki Project lead and Sun Ajax architect Greg Murray discusses some of the important elements of jMaki and demonstrates building a web application that incorporates jMaki.

Click here for more information, and click here to download jMaki

When Will We Start Seeing Major OpenID Support?

OpenID is a great idea as it moves us closer to not having to remember a million user id's and passwords. Way back in February of this year Kevin Rose of Digg.com announced that Digg would be supporting OpenID later this year (click here to read about the original announcement). At the time I was very excited, but unfortunately it doesn't look like we will be seeing it this year (unless one of you readers knows something that I don't).

This got me looking around at various popular social networks and web applications and the only major site that I have found that allows for OpenID login is DZone (which make since as it is a social network for developers). As for the other major social networks (such as YouTube, MySpace and Facebook), unfortunately there has been no adoption of OpenID.

Hopefully early next year we will see Digg.com put OpenID functionality on the site. This would make it the largest Social network (and one of the top sites on the internet, according to Alexa it is currently ranked 117) to place OpenID functionality on the site. Once this is done hopefully many more sites like MySpace and GMail will follow suite and the web will start to become a place where we can always have a single sign on (except perhaps on Microsoft affiliated sites). Well, I can always hope at least.

diggopenid.png

Debugging Your JavaScript Code the Easy Way

Tagged:  

When developing Ajax applications finding a good JavaScript debugger is very important. If you have ever tried to debug JavaScript in Internet Explorer you know how bad the error messages can be. This has been the reason that many developers have thought of JavaScript as only good for a couple of effects (such as rollovers). The error console in Firefox does a much better job of actually pointing you in the right direction, but this can be better. Below is a list of good tools that will help ease the pain of JavaScript debugging.

The first good tool for debugging JavaScript is JSLint. JSLint is a free web application where you copy and paste your code into the site and it will check the code for you line by line. It does a good job of catching quite a few errors and will recommend some good coding practices. Unfortunately, the site will just list your errors and you have no options to step through your code.

jslint.jpg

The next tool is the Venkman debugger in Firefox. Venkman does a good job of finding errors and is closer to a traditional debugger. Venkman is a free plug in for Firefox that comes packaged with the browser, but when you install it you have to select the correct options to install it. The plug in can also be downloaded from Mozilla's site. The debugger allows for you to step through your code and gives a good overview of what is being called in the code. Venkman is a very good tool when you are chasing down a pesky bug in your code.

walkthrough-overview-large.gif

The third debugger is Firebug. While on the surface Firebug is very similar to Venkman (they are both browser plug ins for Firefox and both offer good step through functionality) where Firebug really differentiates itself is that it can find some obscure problems in your code that most debuggers would not catch. Firebug also has some great functionality where you can set break points only when a certain condition is met.

firebug.jpg

The last debugger is for the MyEclipse Pro IDE and is called the Eclipse JavaScript Debugger. The JavaScript debugger is pretty good and it gives you more of an IDE feel when your are doing your debugging. The debugger is part of the Ajax Workbench which gives you some great tools to debug your Ajax applications. The biggest downside to this toolkit is that it is not free for the debugger nor the IDE (since it requires the MyEclipse Pro IDE). This debugger is mainly useful for large enterprises as they will be more likely to pay for this type of tool.

This is just a quick roundup of what I think are some of the best JavaScript debuggers. While there are more debuggers available (such as included in Tibco's General Interface) these are some very good debuggers that are useful to most developers. If you use a debugger that is not mentioned here I would love to hear about it, so leave it in the comments.

Dynamic Loading of JavaScript without using Eval

In trying to create faster loading Ajax applications it is important to reduce the amount of code that is downloaded. One of the best ways to accomplish this is to dynamically load JavaScript as you need it. This will allow that the initial load time is very short.

There are a few ways to accomplish this. One is to have multiple JavaScript files that are loaded using either eval or DOM manipulation (since I am of the school of eval is evil I will use DOM manipulation). The other is to have a server side script (such as a php or ruby script) dynamically create the needed JavaScript based on parameters that are passed through the URL and once again it would be loaded using either eval or DOM manipulation.

No matter which method you choose to use the below code will work to dynamically load the JavaScript. For those of you who have read my post on the JSON Load Object without using Eval (Click here to read the article) the following code will look very familiar as the methods are very similar.

//Dynamic JavaScript Creation
var javascriptload=new Object();
javascriptload.CreateObject=function(codeholderid, url){
	this.codeholderid=codeholderid; //This is the id of the element to hold the script code
	this.url = url;
	this.loadjavascript(codeholderid, url);
};
javascriptload.CreateObject.prototype={
	loadjavascript:function(codeholderid, url){
		var JavaScriptCode=document.createElement("script");
		JavaScriptCode.setAttribute('type', 'text/javascript');
	        JavaScriptCode.setAttribute("src", url);
		document.getElementById(codeholderid).appendChild(JavaScriptCode);
	}
};

In the above code you would pass in the id of the element to hold the JavaScript (this can be a div, body tag or any other tag that can hold a script tag) and you would pass in the URL to the JavaScript (either the separate JavaScript files or the dynamically created JavaScript).

Now that you have the object to dynamically load JavaScript go through your applications and reduce the initial load time in your Ajax applications. You might be surprised just how much faster you can get your applications to load.

Accordion Widget Using the Yahoo UI

Tagged:  

As you may know Yahoo has a great user interface JavaScript library. The accordion widget is on that can be used on quite a few sites, so I have put together a little demo of this element.

Below is the code to get to the libraries that are needed for much of the JavaScript code.

<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b2.js"></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b2.js" ></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js"></script>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/animation_2.0.0-b3.js"></script>

Below is the JavaScript code that is used to access the Yahoo UI when creating the elements and events.

var AccordionMenu =(function()
{
	var YUD = YAHOO.util.Dom;
	var YUE = YAHOO.util.Event;
	var oMenuSetting = {};
	var oMenuCache = {};
	var dLastHoverTitle ;
	YUD.addClass(document.documentElement,'accordion-menu-js');
	
	function getDT(e)
	{
		var dEl = YUE.getTarget(e);
			
		if(	(e.tagName + '').toUpperCase()=='DD' )
		{	
			var dt = e.previousSibling ;
			while(dt)
			{
				if(dt.tagName &&  dt.tagName.toUpperCase() == 'DT'){break;};
				dt = dt.previousSibling
			};
			
			if(!dt || dt.tagName.toUpperCase() != 'DT'){return;}
			else{return (dt.tagName==='DT')?dt:null};
		}
		else if(e.clientX)
		{
			var found = false;
			while( dEl.parentNode)
			{
				if(YUD.hasClass(dEl,'a-m-t')){ found  = true ; break;};
				dEl = dEl.parentNode;
			};
			if(!found){return null}
			else{return (dEl.tagName==='DT')?dEl:null };	
		};		
	};
	
	
	
	function getDD(dt)
	{
		if(!dt){return null;};
		var dd = dt.nextSibling ;
	
		while(dd)
		{	
			if(dd.tagName && dd.tagName.toUpperCase() == 'DD'){break;};
			dd = dd.nextSibling;
			
		};
		if(!dd || dd.tagName.toUpperCase() != 'DD'){return;}
		else{return dd};
	};
	
	function expand(dl,dt,dd)
	{
		dl.hasAnimation +=1;
		YUD.addClass(dd,'a-m-d-before-expand');		
		var oAttr = {height:{from:0,to:dd.offsetHeight }};
		
		YUD.removeClass(dd,'a-m-d-before-expand');
		
		var onComplete = function()
		{	
			oAnim.onComplete.unsubscribe(onComplete);
			oAnim.stop();
			YUD.removeClass(dd,'a-m-d-anim');
			YUD.addClass(dd,'a-m-d-expand');
			onComplete = null;	
			dl.hasAnimation -=1;
			var dt = getDT(dd);	
			YUD.addClass(dt,'a-m-t-expand');
			if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].onOpen && dd.style.height!='' )
			{	
				oMenuCache[ dl.id ].onOpen(	 {dl:dl,dt:dt,dd:dd} );								
			};	
			dd.style.height = '';
		
		};
		
		var onTween = function()
		{
			if(dd.style.height)
			{	
				YUD.addClass(dd,'a-m-d-anim');				
				oAnim.onTween.unsubscribe(onTween);
				onTween = null;
				dd.oAnim = null;
			};
			
		};
		
		if(dd.oAnim)
		{
			dd.oAnim.stop();
			dd.oAnim = null;
			dl.hasAnimation -=1;	
		};
		var oEaseType = YAHOO.util.Easing.easeOut;
		var seconds = 0.5;
		if(oMenuCache[ dl.id ] )
		{
			oEaseType = oMenuCache[ dl.id ]['easeOut']?oEaseType:YAHOO.util.Easing.easeIn;
			seconds =  oMenuCache[ dl.id ]['seconds'];
			
			if( !oMenuCache[ dl.id ]['animation'] )
			{
				var oAnim = {onComplete:{unsubscribe:function(){}},stop:function(){}};
				onComplete();
				return;
			};
		};
		
		
		var oAnim = new YAHOO.util.Anim(dd,oAttr,seconds ,oEaseType);
		oAnim.onComplete.subscribe(onComplete);	
		oAnim.onTween.subscribe(onTween);
		oAnim.animate();
		dd.oAnim = oAnim ;
	
	};
	
	function collapse(dl,dt,dd)
	{
		dl.hasAnimation +=1;
		YUD.addClass(dd,'a-m-d-anim');
		var oAttr = {height:{from:dd.offsetHeight,to:0}};
		
		
		var onComplete = function()
		{
			oAnim.onComplete.unsubscribe(onComplete);
			YUD.removeClass(dd,'a-m-d-anim');
			YUD.removeClass(dd,'a-m-d-expand');
			dd.style.height = '';
			dd.oAnim = null;
			onComplete = null;	
			dl.hasAnimation -=1;	
			var dt = getDT(dd);	
			YUD.removeClass(dt,'a-m-t-expand');	
			if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].onOpen )
			{				
				oMenuCache[ dl.id ].onClose(	 {dl:dl,dt:dt,dd:dd} );
			};			
			
		};
		
		if(dd.oAnim)
		{
			dd.oAnim.stop();
			dd.oAnim = null;
			dl.hasAnimation -=1;	
		};
		
		var oEaseType = YAHOO.util.Easing.easeOut;
		var seconds = 0.5;
		if(oMenuCache[ dl.id ] )
		{
			oEaseType = oMenuCache[ dl.id ]['easeOut']?oEaseType:YAHOO.util.Easing.easeIn;
			seconds =  oMenuCache[ dl.id ]['seconds'];
			if( !oMenuCache[ dl.id ]['animation'] )
			{
				var oAnim = {onComplete:{unsubscribe:function(){}},stop:function(){}};
				onComplete();
				return;
			};	
		};
		
		var oAnim = new YAHOO.util.Anim(dd,oAttr,seconds ,oEaseType);	
		oAnim.onComplete.subscribe(onComplete);	
		oAnim.animate();
		dd.oAnim = oAnim ;
	};
	
	function collapseAll(dl,dt,dd)
	{
		var aOtherDD = YUD.getElementsByClassName('a-m-d-expand','dd',dl);
		for(var i=0;i 0 ){return;};
		YUD.removeClass(dt,'a-m-t-down');
		
		if(YUD.hasClass(dd,'a-m-d-expand'))
		{	
			collapse(dl,dt,dd);
		}
		else
		{			
			if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].dependent == false ){}
			else{collapseAll(dl,dt,dd);}
			expand(dl,dt,dd);
		};		
		YUE.preventDefault(e);
		return false;
	};
	
	
	YUE.on( document,'mouseover',onMenuMouseover);
	YUE.on( document,'mouseout',onMenuMouseout);
	YUE.on( document,'mousedown',onMenuMousedown);
	YUE.on( document,'click',onMenuClick);
	
  var oApi = {
  
	openDtById : function(sId)
	{
		var dt = document.getElementById(sId);
		if(!dt){return;};
		if(!YUD.hasClass(dt,'a-m-t')){return;};
		var dl = dt.parentNode;
		var dd = getDD(dt);
		if(dl.hasAnimation==null){dl.hasAnimation = 0;};
		
		if(dl.hasAnimation > 0 ){return;};
		if(YUD.hasClass(dd,'a-m-d-expand')){return;};
		if( oMenuCache[ dl.id ] &&  oMenuCache[ dl.id ].dependent == false ){}
		else{collapseAll(dl,dt,dd);}
		expand(dl,dt,dd);
	},
	
	closeDtById : function(sId)
	{
		var dt = document.getElementById(sId);
		if(!dt){return;};
		if(!YUD.hasClass(dt,'a-m-t')){return;};
		var dl = dt.parentNode;
		var dd = getDD(dt);
		if(dl.hasAnimation==null){dl.hasAnimation = 0;};
		if(dl.hasAnimation > 0 ){return;};
		if(!YUD.hasClass(dd,'a-m-d-expand')){return;};
		collapse(dl,dt,dd);
	},
	
	
	setting : function(id,oOptions)
	{	
		if( !oOptions ){return;};
	
		if( typeof(id)!='string' ){return;};
	
		var setMunu = function(dl)
		{	
			dl = dl || this;
			dl.hasAnimation = 0;
			oMenuCache[ dl.id ] = 
			{
				element:dl,
				dependent:true,
				onOpen:function(){},
				onClose:function(){},
				seconds:0.5,
				easeOut:true,
				openedIds:[],
				animation:true
			};
			oMenu =  oMenuCache[ dl.id ] ;
			
			if(typeof(oOptions['animation'])=='boolean')
			{
				oMenu['animation'] = !!oOptions['animation']; 
				
			};
			
			
			if(typeof(oOptions['dependent'])=='boolean')
			{
				oMenu['dependent'] = !!oOptions['dependent']; 
			};
			
			if(typeof(oOptions['easeOut'])=='boolean')
			{
				oMenu['easeOut'] = !!oOptions['easeOut']; 
			};
			
			if(typeof(oOptions['seconds'])=='number')
			{
				oMenu['seconds'] = Math.max(0 , oOptions['seconds'] ); 
			};
			
			if(typeof(oOptions['onOpen'])=='function')
			{
				oMenu['onOpen'] = oOptions['onOpen'];
			};
			
			if(typeof(oOptions['onClose'])=='function')
			{
				oMenu['onClose'] = oOptions['onClose'];
			};
		
			if(oOptions['openedIds'].shift)
			{
				oMenu['openedIds'] = oOptions['openedIds'];
			};
			
			
			for(var i=0;i

The below is the css code that is used for the look and feel.

body{
       font-family:Verdana;
       font-size:0.78em;
       background:white;
       padding:30px;
       background:black;
       color:white;}
dl.accordion-menu dd .bd{
       font-size:0.75em;
       color:#aaaaaa;
}
xmp{
       color:#FF0099;
       margin:2em 0;
       font-size:1em;
       font-family:Tahoma;
       letter-spacing:1px;
}
div xmp{
       color:white;
}
a{
       color:#CCFF00
}
address{
       float:right;
}
address a{
        color:white;
}
h3{
        color:#66CCFF;
}
h4{
        color:#FFCC66;
}
dl.accordion-menu {
	margin: 0;
	padding: 0;
	width: 15em;
	background:white;
}

dl.accordion-menu dt.a-m-t {
	margin: 0;
	background: #aaaaaa;
	padding: 0.3em 1em;
	color: #444444;
	border: solid 1px #222222;
	border-left-color: #dfdfdf;
	border-top-color: #dfdfdf;
}

dl.accordion-menu dt.a-m-t-hover{
	background:#cdcdcd;
}


dl.accordion-menu dt.a-m-t-down{
	border: solid 1px #222222;
	border-right-color: #dfdfdf;
	border-bottom-color: #dfdfdf;
}





html.accordion-menu-js dt.a-m-t{
	cursor:pointer;
	zoom:1;
}

dl.accordion-menu dd.a-m-d {
	margin: 0;
	padding: 0;
	padding:0;
}

html.accordion-menu-js dd.a-m-d{
	display:none;
}


html.accordion-menu-js dd.a-m-d-expand {
	display:block;
}

html.accordion-menu-js dd.a-m-d-before-expand {
	display:block;
	position:relative;
	z-index:-1;
	opacity:0;
	height:auto !important;
	visibility:hidden;
	overflow:visible;
}


html.accordion-menu-js dt.a-m-t-expand {
	border-left-color:#222222;
	color:black;
	background:#c0c0c0;
}

html.accordion-menu-js dd.a-m-d-anim {
	overflow:hidden;
	display:block;	
}

dl.accordion-menu dd.a-m-d .bd{
	padding:0.5em;
	border:Solid 1px #aaaaaa;
}

The below is what actually makes the elements. The dt tag holds the titles and the div inside the dd tag holds text for each accordion element.

<dl class="accordion-menu"><dt class="a-m-t">title 1 </dt>
	<dd class="a-m-d"><div class="bd">
	Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus. 
	</div>
	</dd>
		
	<dt class="a-m-t">title 2 </dt>
	<dd class="a-m-d"><div class="bd">
	Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus. 
	</div>
	</dd>
		
	<dt class="a-m-t">title 3 </dt>
	<dd class="a-m-d"><div class="bd">
	Lorem ipsum dolor sit amet, consectetuer adipnia. Vestibulum pellentesque porta enim. Curabitur elementum vulputate lacus. Donec quis ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam dignissim sagittis purus. Nulla sollicitudin mauris sit amet purus. 
	</div>
	</dd>
</dl>

Click here to view the full demo. For more information and demos using the Yahoo UI click here.

Syndicate content