darkroomtechies: Code snippets

Showing posts with label Code snippets. Show all posts

Tuesday, December 22, 2009

Radio Group in GWT

May be many of you know how to create a radio group still I would like to put small comment on GWT radiobutton group ..

There is no separate RadioButton group class .. its the same RadioButton class which makes the radio button to be treated as a group or a separate radiobutton.

Only the first parameter decides whether it wil be treated as a radio button or radiobutton group.

RadioButton radio1 = new RadioButton("Group Name", "Label Name1");

RadioButton radio2 = new RadioButton("Group Name", "Label Name2");

So now two radio button belong to the same group "Group Name" ..

Monday, December 21, 2009

Lightbox- a UI feature in Javascript.

Lightbox is a terminology for kindaa off UI display in which, u click a button a new division will be opened and rest of the elements in the screen will be looking de-selected and de-highlighted.

It involves the concept of overlapping one division over another with z-index in css.




<"html"><"head">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

 
  <title>LIGHTBOX EXAMPLE</title>
  <style>
  .black_overlay{
   display: none;
   position: absolute;
   top: 0%;
   left: 0%;
   width: 100%;
   height: 100%;
   background-color: black;
   z-index:1001;
   -moz-opacity: 0.8;
   opacity:.80;
   filter: alpha(opacity=80);
  }
  .white_content {
   display: none;
   position: absolute;
   top: 25%;
   left: 25%;
   width: 50%;
   height: 50%;
   padding: 16px;
   border: 16px solid orange;
   background-color: white;
   z-index:1002;
   overflow: auto;
  }
 </style>
 </head><body>
  <p>This is the main content. To display a lightbox click 
  
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>
<div style="display: none;" id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
  <div style="display: none;" id="fade" class="black_overlay"></div>

</body></html>

Try this sample to achieve this simple lightbox feature.

Sunday, December 20, 2009

Anonymous functions and its usage in Javascript

Everybody knows there exists anonymous classes, but not anonymous functions.

There exists anonymous functions only in Javascript. C,C++,Java doesnot like that.
It is widely used in python,ruby,c#,Lisp,PHP...

Anonymous function doesnt have name to it.
Example.

function square(x)
{
return x*x;
}

var a = (function(x) { return x*x;})(10); //100;

Which scenario it can used
--------------------------

var request;

function init()
{
var url = 'http://ajax.googleapis.com/ajax/services/search/local?hl=en&v=1.0&rsz=large&q=pubs paris &start=0';
sendRequest(url);
url='http://www.google.com';
sendRequest(url);
}
function sendRequest(addr) {
request = new XMLHttpRequest();
request.onreadystatechange = handleResponse;
request.open("GET", addr, true);
request.send(null);
}

function handleResponse() {
if (request.readyState == 4) {
alert(request.responseText);
}
}

sendRequest() is called for two URL next to next.. Whichevers request, is served first, then global variable 'request' is updated with that response. So when the second request's response comes then it cannot take its proper value.
If u run the above snippet, u would see alert() is called only once.

url='http://www.google.com';
sendRequest(url); ----> Change this line to setTimeout("sendRequest('http://www.google.com')",3000);

No issue will be seen. This is a race condition.

Changed code :

function init()
{
var url = 'http://ajax.googleapis.com/ajax/services/search/local?hl=en&v=1.0&rsz=large&q=pubs paris &start=0';
sendRequest(url);
url='http://www.google.com';
sendRequest(url);
}

function sendRequest(addr) {

var request = new XMLHttpRequest();
request.onreadystatechange = function(){

if (request.readyState == 4) {
alert(request.responseText);
}
};
request.open("GET", addr, true);
request.send(null);
}

Make the 'request' variable local to senrequest() and introduce anonymous functions to handle the response for each request. So that a local copy of 'request' will be given to function and when the response comes each call will have its own copy.So no clash.

Wednesday, November 25, 2009

Using the Google Data APIs Java Client in GWT Hosted Mode

After Long Fight with GWT Hosted Mode setup at last I could solve the problem accessing GData Content using GData Java Client Library. You can always have nice and working setup for your Console or Java Client Apps by following the steps below ..

http://code.google.com/apis/gdata/articles/java_client_lib.html

http://code.google.com/apis/gdata/articles/eclipse.html#installingLibs

But above steps doesn't help when you run the same Code in GWT Client / Server :( ..

Almost after 3 days of long fight with web search and heat and trial options found the solution, hope it helps to my fellow colleague and friends .

1 . You must follow the above steps suggested by Google for sure..

2. Add google-collect-1.0-rc1.jar also as external libray in your eclipse project

3. Put all the gdata* jar files in your project \war\WEB-INF\lib folder

4. Add line <property name="com.google.gdata.DisableCookieHandler" value="true"/> in your project's appengine-web.xml file (No Idea what is the side effect with this fix)

Hurrey !!!! You are ready to use any Google services class in your app engine :)

You can end up facing similar problem while using the Raw java class HttpURLConnection..

I could successfully create a http connection by adding a simple line httpConnection.setRequestMethod("GET"); for example the below lines of code works fine in GWT while accessing any Google Feeds.

HttpURLConnection httpConnection = (HttpURLConnection)url.openConnection();

httpConnection.setRequestMethod("GET");

Friday, November 13, 2009

Ajax Programming Made easy for Java Programmers -> Google's GWT Way !!

I believe Most of us are familiar with Core Java and HTML concepts..Also often we dream to write Good Java Scripts/JSP/ASP.. WebApps using our desktop coding skills.. Google's GWT is there to help the Developers with basic Java Knowledge to build powerful Ajax WebApps !!!.

We can write simple Java Code using GWT which on compilation gets converted to a powerful Ajax Apps. The Google Web Toolkit speaks to all the Java programmers left petrified by the thought of web programming. GWT has a call: forget about cross browser issues, don’t bother with JavaScript, stay away from HTML. In case you’ve never heard of it, GWT is an open source project from Google that compiles Java code into JavaScript. You write your Java code just like a desktop application and get JavaScript on the other end. Instead of onClick=myFunction() you write myObject.addClickListener(this); To know more on the basics of GWT click here..

Dont get dissapointed my friend if you have written your prototypes with HTML and CSS..You can still powered your prototype with GWT (Ajax) ..No No you don't have to rewrite it !!! Here is the hack for you ...

Let’s look at this Link which converts a HTML prototype page which I will be converting to GWT with 4 simple steps.

Wireless Telephony Applications Interface (WTAI) public library - S60 browser - few examples.for calling, saving to contacts..

The S60 dual browser supports three Wireless Telephony Applications Interface (WTAI) public library functions: making a call while browsing, sending DTMF tones, and saving numbers and names to the phone book. These functions — MakeCall, SendDTMF, and AddPBEntry — can be used anywhere in XHTML MP code.

Making a phone call The MakeCall function is used to make a phone call directly from an XHTML page. A typical example of the usage of MakeCall is when the user selects that initiates a phone call. In XHTML, the MakeCall function is defined following string:

Call 123456 789

When a MakeCall function is executed, the user is asked to confirm that the dial-up is to be made. If the phone number about to be called does not exist in the phone book, a confirmation query with the phone number is displayed. If the number exists in the phone book, a confirmation query is displayed with the name fetched from the phone book.

Sending a DTMF tone The user can send DTMF tones through the network by executing a WTAI function called SendDTMF. Just like MakeCall, a typical way of using SendDTMF is to assign the SendDTMF function to a link. The user must have a voice call active. When the DTMF tone has been sent, the user returns to the active page where s/he initiated the sending. The voice call remains active.

Adding a phone book entry The AddPBEntry function offers an easy way to store a phone number and corresponding name onto the phone book application from an XHTML page. In XHTML, the AddPBEntry function is defined with the following string:

Home

When the user activates an AddPBEntry function and the content author has declared a name and number, the device displays a confirmation query with the text "Save name?" When the user accepts the confirmation query, another confirmation query with the text "With number +123456789" is displayed and the number is stored in the phone book application. When saving is complete, the currently active page is displayed again. The user does not have to be online or have any voice calls active in order to use the AddPBEntry function.

Thursday, November 12, 2009

A little beyond what we know about varargs in functions

Lemme Start first
Have you ever noticed __cdecl and __stdcall in your code.
The major difference between them is

1) In __cdecl , the Calling function pops the arguments from the stack.So functions declared
using __cdecl can support varargs as the called function knows how many arguments it needs to pass(push to stack) and how many arguments it needs to pop from the stack .Assume funcA,funcB,funC call "funcZ" ,then each of the functions that call funcZ should have the code to pop the stack .So the code size becomes more here.

2) In __stdcall ,the Called function pops its own arguments from the stack.
Other differences:
__cdecl
Argument-passing order --> Right to left
Stack-maintenance responsibility --> Calling function pops the arguments from the stack Name-decoration convention --> Underscore character (_) is prefixed to names
Case-translation convention --> No case translation performed

__stdcall
Argument-passing order --> Right to left.
Argument-passing convention --> By value, unless a pointer or reference type is passed.
Stack-maintenance responsibility --> Called function pops its own arguments from the stack.
Name-decoration convention --> An underscore (_) is prefixed to the name. The name is followed by the at sign (@) followed by the number of bytes (in decimal) in the argument list. Therefore, the function declared as int func( int a, double b ) is decorated as follows:

_func@12

will update with a small example for the above in next blog.