doOriented.com

Wicketing Javascript through AJAX

admin — Fri, 09 May 2008 17:52:20 +0000

Communication between Java and Javascript cannot be done easier than with Wicket framework, by far the best helper if you’re in Java based web development.

html

[]

Java - or should I say the magic of Wicket?

package com.somepackage;

import org.apache.wicket.PageParameters;
import org.apache.wicket.ajax.AbstractDefaultAjaxBehavior;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.AjaxSelfUpdatingTimerBehavior;
import org.apache.wicket.markup.html.IHeaderContributor;
import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
import org.apache.wicket.util.time.Duration;

@SuppressWarnings("serial")
public class BasePage extends WebPage {
	private WebMarkupContainer dummyDiv;
	private Label label;

	public BasePage() {
		this(null);
	}

	public BasePage(final PageParameters parameters) {
		//handle js call to wicket
		final AbstractDefaultAjaxBehavior behavior = new AbstractDefaultAjaxBehavior() {
		    protected void respond(final AjaxRequestTarget target) {
		    	label.setModelObject("Yeah I was just called from Javascript!");
		        target.addComponent(label);
		    }
		};
		add(dummyDiv = new MyWebMarkupContainer("div", behavior));
		//handle wicket call to js
		dummyDiv.add(new AjaxSelfUpdatingTimerBehavior(Duration.seconds(1)) {
			@Override
			protected void onPostProcessTarget(AjaxRequestTarget target) {
				target.appendJavascript("callWicket();");
			}
		});
		dummyDiv.add(behavior);

    	add(label = new Label("wicketAnswer", "Look here to see when wicket is called from javascript"));
    	label.setOutputMarkupId(true);
	}
}

@SuppressWarnings("serial")
class MyWebMarkupContainer extends WebMarkupContainer implements IHeaderContributor {
	AbstractDefaultAjaxBehavior behavior;

	public MyWebMarkupContainer(String id, AbstractDefaultAjaxBehavior behavior) {
		super(id);
		this.behavior = behavior;
	}

	@Override
	public void renderHead(IHeaderResponse response) {
		response.renderJavascript("var callback = '" + behavior.getCallbackUrl() + "';", "insertedjavascript");
	}
}

I don’t think anyone needs explanation about how this works since it’s THAT easy. Only one more thing to add:

Map map = ((WebRequestCycle) RequestCycle.get()).getRequest().getParameterMap();

- this to get the parameters map.

Javascript inheritance

admin — Fri, 09 May 2008 17:12:14 +0000

When it comes to web development, Javascript is the best client-side programming language. It has come a long way in the last years. It’s no longer just a simple scripting language. These days a lot of Javascript libraries are available to be used freely and they are incredibly powerful: Script.aculo.us, DOJO, YUI, jQuery, Prototype, to name just a few.

I am personally not very found of Javascript because of its loosely typed nature. I consider it harder to develop a large framework in Javascript compared to say, Java, because the compiler/interpreter cannot always come to your rescue as you’d expect if you’re coming from a strongly typed language.

But a lot of its strength comes from the fact that it’s loosely typed. You also feel the sense of freedom that only these kind of languages (like Ruby) can offer. Types help you a lot to avoid errors and to give you important structure, but also constrain your ability to do more with your code.

Javascript is (or can act like) a(n almost) full fledged object oriented language. Let’s try inheritance:

This is the method that simulates inheritance in Javascript:

function inherit(child, parent) {
    var sConstructor = parent.toString();
    var aMatch = sConstructor.match( /\s*function (.*)\(/ );
    if ( aMatch != null ) { child.prototype[aMatch[1]] = parent; }
    for (var m in parent.prototype) {
        child.prototype[m] = parent.prototype[m];
    }
};

Let’s define some Javascript objects:

function Element() {
	this.location = null;
	this.type = "Element";
	this.selected = false;
	this.zIndex = 0;
}
Element.prototype.isInside = function(rectangle){
        dosomething;
}

function Item() {
	this.Element(); //calling the constructor of the base class

	this.lastValidLocation = null; //a rectangle
	this.type = "Item";
	this.selectorItem = null;
	this.zIndex = 1;
}
inherit(Item, Element);
Item.prototype.getSelectorItem = function() {
	return this.selectorItem;
}
Item.prototype.draw = function() {
       dosomething;
}
Item.prototype.deleteItem = function() {
       dosomething;
}

function SelectorItem() {
	this.Element();

	this.items = new Array();
	this.type = "SelectorItem";
	this.zIndex = 0;
}
inherit(SelectorItem, Element);
SelectorItem.prototype.getSelectorItem = function() {
	return this;
}
SelectorItem.prototype.createNewItem = function(onItem) {
       dosomething;
}
SelectorItem.prototype.draw = function() {
       dosomething;
}

It is very important when you call “inherit”. That’s because Javascript does not support method override/overload, but you can also simulate this. When executing “inherit”, the prototype of the base class will be copied to the child. Then, if needed, redefine some methods so that when you call them, the new ones will get executed.

Using a static image map with Wicket

admin — Fri, 09 May 2008 16:20:20 +0000

On one of my projects I had to implement an image and link the image area to wicket.

This is how I did it:

html


   
       
       
   
   

   Some text here

Java

       add(new PageLink("wicket1", SomeWicketClass1.class));
       add(new PageLink("wicket2", SomeWicketClass2.class));

Wicket is the best framework for web development.

Javascript - how to make something happen after some time

admin — Fri, 09 May 2008 15:51:59 +0000

I’m writing this post because I’ve been asked a million times about this and it’s easier to point someone to a link than to explain it again .

In Javascript, executing something after a specified time couldn’t be easier - you’ve got the setTimeout method. Just be careful to call it the right way. It takes two arguments:

-> the method to be called after the specified time passed. I repeat, a method, not a method call.
-> the amount of time, specified in milliseconds.

For example, using script.aculo.us, I can make the “feedback” div fade away in 10 seconds after rendering like this:

window.setTimeout(function() {Effect.Fade(’feedback’);}, 10000);

(and NOT window.setTimeout(Effect.Fade(’feedback’), 10000}; - also keep in mind Javascript is case sensitive)

Javascript variables scope

admin — Sun, 27 Apr 2008 20:55:58 +0000

A variable can be defined as a segment of memory which holds some kind of value. The programmer can reference that segment of memory by using the name of the variable in order to assign it a value or to read it and use it.

In Javascript, the scope of the variable is the area of the script where that variable is valid to be used. The scope of the global variable is the entire script. That means you can access it anywhere between the tags and in other scripts that are executed after the variable definition.

A global variable is a variable defined in the main part of the script (not inside a function for instance). It makes no difference if you define it using the keyword var or without it. It does make all the difference in the world if you use it inside a function.

A local variable is a variable that is defined inside a function. It is only available to be used inside that function. Javascript allows you to use the same name for a global variable and for a local one, but when used inside that function, the local variable will be evaluated. A local variable is defined only by using the keyword var. If the keyword is omitted, the variable is defined as global.

Local variables are temporary. Global variables are permanent. Permanent variables exist throughout the execution of all the scripts, until being discarded when the page unloads. Temporary variables are allocated on the stack every time the function is called and deallocated when the execution of the function ends. Large local chunk of data causes the stack to overflow, so data structures like large arrays declared inside a function (as local) or passed to the function (as arguments) should be avoided. Use global variables for such tasks.

Variables in Javascript can only be of 4 types: number (there is no distinction between integer and real-valued numbers), string, Boolean and null values. Remember that Javascript is a “loosely typed language”, which means the type of the variable is not declared explicitly. Javascript implicitly determines the type of the variable based on the initial value that is assigned to it.

The null value is automatically converted to the initial values of other data types once that variable is initialized to a different type - when used as a number, it becomes 0, when used as a string it becomes “” and when used as a boolean it becomes false.

Data types are automatically converted as needed throughout the execution of the script. For instance, when an expression containing a number and a string (like a sum) is evaluated, the value returned is a string. Also, keep in mind that in Javascript evaluation is done from left to right and only paranthesys can change the order of the evaluation:
10 + 10 will return 20
10 + “10″ will return “1010″
10 + 10 + “10″ will return “2010″.

Wicket - Ajax like file upload on a modal window

admin — Wed, 23 Apr 2008 20:52:43 +0000

A lot of people seem to be asking how to do a file upload using AJAX. The short answer to this is that it cannot be done! That’s because it is not supported by today’s HTML / browser specs.

What you can do is just fake it .

I’ve been using Wicket (Java Web Framework) regularly for web development. Recently I needed to be able to do a file upload inside a modal window. File uploading needs form submission in order to work so I faced a few problems:

My modal window was implemented as a panel. I could not do a regular form submission as that would close (submit) my modal window. I’ve been suggested to implement the modal window as a page instead of the panel so that I could use Ajax submit but I really needed it the way it was.
Ajax and multipart don’t cope.
Whatever I tried, without regular submission, the file uploading field would not return the file name so it was impossible to get.

I searched the web and I finally found and implemented the solution. It involves using an iframe, but it’s pretty simple. Here’s the code if anyone else needs this:

UploadIFrame.java

public abstract class UploadIFrame extends WebPage {

    private boolean uploaded = false;
    private FileUploadField uploadField;
    private String newFileUrl;

    public UploadIFrame() {
        add(new UploadForm("form"));
        addOnUploadedCallback();
    }

    /**
     * return the callback url when upload is finished
     * @return callback url when upload is finished
     */
    protected abstract String getOnUploadedCallback();

    /**
     * Called when the input stream has been uploaded and when it is available
     * on server side
     * return the url of the uploaded file
     * @param upload fileUpload
     */
    protected abstract String manageInputSream(FileUpload upload);

    private class UploadForm extends Form {
    	public UploadForm(String id) {
            super(id);
            uploadField = new FileUploadField("file");
            add(uploadField);
            add(new AjaxLink("submit"){
            	@Override
            	public void onClick(AjaxRequestTarget target) {
            		target.appendJavascript("showProgressWheel()");
            	}
            });
        }

    	@Override
        public void onSubmit() {
            FileUpload upload = uploadField.getFileUpload();
            newFileUrl = manageInputSream(upload);
            //file is now uploaded, and the IFrame will be reloaded, during
            //reload we need to run the callback
            uploaded = true;
        }

    }

    private void addOnUploadedCallback() {
    	//a hacked component to run the callback on the parent
        add(new WebComponent("onUploaded") {
        	@Override
            protected void onComponentTagBody(MarkupStream markupStream, ComponentTag openTag) {
                if (uploaded) {
                	if (uploadField.getFileUpload() != null){
	                    replaceComponentTagBody(markupStream, openTag,
	                            "window.parent." + getOnUploadedCallback() + "('" +
	                            uploadField.getFileUpload().getClientFileName() + "','" +
	                            newFileUrl +"')");
                	}
                    uploaded = false;
                }
            }
        });
    }
}

UploadIFrame.html

This is how to use it:

		add(new UploadPanel("myUpload"){
			@Override
			public String onFileUploaded(FileUpload upload) {
				if (upload != null){
					if(upload.getSize() > 1000000) {
						return "The Picture Is Too Big !";
					} else {
				        try {
							jdbcSignUp.changeAvatarFor(((WebSession)getSession()).getUser().getUsername(), upload.getInputStream(), (int)upload.getSize());
				        	//save on server side here
				        	//and return the url of the saved file
	                        return "The Picture Has Been Uploaded";
				        } catch (IOException e) {
							log.error("Exception:", e);
						}
					}
				}
				return "";
			}

			@Override
			public void onUploadFinished(AjaxRequestTarget target, String filename, String newFileUrl) {
				//when upload is finished, will be called
				messageLabel.setModelObject(newFileUrl);
				target.addComponent(messageLabel);

				avatarImage.setImageResource(new MyBlobImageResource(((WebSession)getSession()).getUser().getUsername()));
				target.addComponent(avatarImage);
				((BasePage)parent).onAvatarChanged(target);
			}
		});

Most credit should go to Vincent Demay, although his code contains errors.