About hazems

Hazem Saleh has more than eleven years of experience in Cloud, Mobile and Open Source technologies. He worked as a software engineer, technical leader, application architect, and technical consultant for many clients around the world. He is an Apache PMC (Project Management Committee) member and a person who spent many years of his life writing open source software. Beside being the author of the "JavaScript Unit Testing" book, "JavaScript Mobile Application Development" book, "Pro JSF and HTML5" book and the co-author of the "Definitive guide to Apache MyFaces" book, Hazem is also an author of many technical articles, a developerWorks contributing author and a technical speaker in both local and international conferences such as ApacheCon North America, Geecon, JavaLand, JSFDays, CON-FESS Vienna and JavaOne. Hazem is an XIBMer, he worked in IBM for ten years. Now, He is working for Nickelodeon New York as a Mobile Architect. He is also an OpenGroup Master Certified Specialist.

Ajax file upload to a Java Servlet in HTML5

HTML5 comes with a great feature which is the ability to upload files using the XMLHttpRequest version 2.
Modern Gecko and WebKit browsers include a wonderful object FormData that allows combining both simple and complex form data (text and files) in the Ajax request object.

Let's show you how to do this.

In the example, we are having a form with two fields, one field represents a simple text field, and the other one represents a file field as shown in the code below.

<form id="form1">    

    <label for="sampleText">Please enter a text</label>

    <input id="sampleText" name="sampleText" type="text" /> <br/>

    <label for="sampleFile">Please select a file

    <input id="sampleFile" name="sampleFile" type="file" /> <br/>

    <input id="uploadBtn" type="button" value="Ajax Submit" onClick="performAjaxSubmit();"></input>

</form>

<script type="text/javascript">

    function performAjaxSubmit() {

        var sampleText = document.getElementById("sampleText").value;

        var sampleFile = document.getElementById("sampleFile").files[0];

        var formdata = new FormData();

        formdata.append("sampleText", sampleText);

        formdata.append("sampleFile", sampleFile);

        var xhr = new XMLHttpRequest();       

        xhr.open("POST","/fileUploadTester/FileUploader", true);

        xhr.send(formdata);

        xhr.onload = function(e) {

            if (this.status == 200) {

               alert(this.responseText);

            }

        };                    

    }   

</script>

As we see in the listed code, it is a normal old XHR code, but it has two differences:
1. The files property in the HTML5 input file, which gives you the ability to get the file(s) object(s).
2. The FormData object, which has one method called append, that allows adding any form data (text and file) to the object. The FormData object has another big advantage which is making the Ajax request “multipart/form-data” without writting any special code.

Now, Let's move to the Servlet code (Iam using Apache Commons File Upload for handling the multipart form request parsing).

public class FileUploader extends HttpServlet {

    protected void doPost(HttpServletRequest request,

                          HttpServletResponse response)

                          throws ServletException, IOException {

        String ajaxUpdateResult = "";

        try {

            List items = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);            

            for (FileItem item : items) {

                if (item.isFormField()) {

                    ajaxUpdateResult += "Field " + item.getFieldName() + 

                    " with value: " + item.getString() + " is successfully read\n\r";

                } else {

                    String fileName = item.getName();

                    InputStream content = item.getInputStream();

                    response.setContentType("text/plain");

                    response.setCharacterEncoding("UTF-8");

                    // Do whatever with the content InputStream.

                    System.out.println(Streams.asString(content));

                    ajaxUpdateResult += "File " + fileName + " is successfully uploaded\n\r";

                }

            }

        } catch (FileUploadException e) {

            throw new ServletException("Parsing file upload failed.", e);

        }

        response.getWriter().print(ajaxUpdateResult);

    }
}

The Servlet simply parses the multipart form request and then constructs a message with the result.

Please keep in mind that this code will work with Chrome 5 and Safari 5, Firefox 4 but unfortunately will not work with IE9 because miserably IE9 does not have the FormData object, I will show later how you can achieve the same behaviour in IE9 “Iam sure you will not like it because it is much harder ;-)”.

Download the complete code from here.

Reading the Dojo DateTextBox in your custom format

In Dojo 1.4, you can use the DateTextBox component for showing an input calendar for the user, as follows:

<label for="sampleDate">Select the Date: </label>
<input id="sampleDate" dojoType="dijit.form.DateTextBox"></input>
<button id="sampleButton" class="buttonClass" id="getDateValue" 
dojoType="dijit.form.Button" type="button" 
onclick="getDateValue();">Get Date Value</button>

However, getting the date value using the value property dijit.byId("sampleDate").value will result in a value like this:

Wed Nov 30 2011 00:00:00 GMT+0200

If you want to simply format the date object in the “yyyy-MM-dd” format (for example), you can use the dojo.date.locale.format as follows:

dojo.date.locale.format(dijit.byId("sampleDate").value, {datePattern: "yyyy-MM-dd", selector: "date"})

The complete getDateValue JavaScript function is as follows:

<script type="text/javascript">
function getDateValue() {
    alert("Default Date: " + dijit.byId("sampleDate").value);
    alert("Formatted Date: " + dojo.date.locale.format(dijit.byId("sampleDate").value, 
    {datePattern: "yyyy-MM-dd", selector: "date"}));
}
</script>

I wish that this tip can be useful to you.

[Problem] Tried to register widget with id==xxx but that id is already registered

You may face this error while working with the Dojo widgets. The main reason behind this error is that you are trying to create a widget with an id that already exists. The holder of this id may be the same widget.

If it is the same widget then you can destroy the old attached Dojo widget before re-creating the new one again as shown:

attachedWidget = dijit.byId("xxx");
		
if (attachedWidget ) {			
    attachedWidget.destroy();
    attachedWidget = null;
}
// Create the new attached widget here with the same id (xxx)...

If it is not the same widget then you can create the widget with another id without having to destroy the old one.

Invoking SCA Components from your Dojo iWidget Components in the WebSphere Process Server

To be able to call an SCA component from a Dojo iWidget component in a convenient way, you need to provide an HTTP Export for the SCA component. In this post, I will show you how to do this in details.

The complete post is here: https://www.ibm.com/developerworks/mydeveloperworks/blogs/hazem/entry/september_2_2011_10_42_pm?lang=en

Ten Tips for enhancing your Page Response Time

1. Do not declare your JavaScript functions in your view (JSP, XHTML, …etc). Instead, externalize your JavaScript functions to an external JavaScript file because JavaScript files are cached on the browser level.
2. Compress the JavaScript files.
3. Reduce the JavaScript code on the page load.
4. Do not use more than one client framework (for example: Dojo and YUI) on the same page.
5. Avoid duplicate JavaScript files include.
6. Avoid duplicate JavaScript functions.
7. Do not define your styles in your view. Instead, externalize your CSS code to a CSS file because CSS files are cached on the browser level.
8. Compress the CSS files.
9. Collect the images into one big image, and use the background-position for extracting the desired image.
10. Use Ajax for page updates like loading lists and independent lists.

Sharing session between multiple wars in the same EAR (For WebSphere Applications)

To share the same session between multiple wars in the same ear, you can do this if you are using IBM Rational Application Developer (RAD) or Rational Software Architect (RSA). For this example, Iam using RSA 7.5.

Assume that you set a session attribute (key) to a value (xyz) in application1 war as follows:

session.setAttribute("key", "xyz");

Using this feature, you can get this session attribute in application2 war using:

session.getAttribute("key");

To enable this feature in the EAR:
1. Open the (ibm-application-ext.xml), if you did not find this file in your EAR, just select the EAR (Java EE -> Generate WebSphere Extensions Deployment Descriptor).

2. Check the (Shared Session Context) option as follows:

This is about all!

IE Redirection Problem inside Facebook Application's Canvas (IFrame) and Solution

When working in my Facebook java application that performs Facebook authentication through OAuth. I found a very weird behavior when configuring my application on Facebook and setting the application canvas type to “IFrame”.

My FacebookSignInServlet is just redirecting the user to the Facebook graph OAuth authorization URL[1] and appending the application callback servlet URL to the Facebook graph OAuth authorization URL. This scenario works fine on all the browsers except IE.

After digging in the problem, I found that the problem was due to an IE iframe redirection security issue.

How to resolve this issue?

In your FacebookSignInServlet, set the P3P header to “IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT” as follows:

response.addHeader("P3P",
"CP=\"IDC DSP COR ADM DEVi TAIi PSA PSD IVAi IVDi CONi HIS OUR IND CNT\"");

And redirection will work without extra efforts from your side.

[1] https://graph.facebook.com/oauth/authorize