Razvan Pandor

Recently I had to put up a SOAP web service with PHP. This was my first contact with Soap and Wsdl.

Some links that got me started:
http://www.php.net/soap
http://www.devshed.com/c/a/Zend/PHP-SOAP-Extension/
http://www.w3.org/TR/wsdl
http://www.w3schools.com/wsdl/wsdl_intro.asp
http://xml.coverpages.org/wsdl.html

To test the service i used SoapUI.

… of course these can all be customized by going to Window -> Preferences -> General -> Keys

Recent John Resig’s speaches :

1. jQuery (BarCamp Boston)
2. Processing and Processing.js (BarCamp Boston)
3. jQuery (MeshU)
4. Managing the Mozilla Way (Slashdot, ITWorld)
5. jQuery (DrupalCamp Toronto)
6. JavaScript 1.5 to 2.0
7. JavaScript Libraries (Kings of Code)
8. JavaScript Libraries (@Media)
9. jQuery (BostonPHP)

demo used:

• Accordion Menu (Apple.com) (Completed)
• Ajax Todo List (Completed)
• Ajax Social Networking Site (Completed)

via John Resig

A little filter that detects if the The X-Forwarded-For (XFF) HTTP header is set.
If it’s set it means that the call arrived trough a proxy, and when the “getRemoteAddr()” method is called by the server it will return the last proxy in the IP array.
So basicly what this does is (if XFF is set) forces the “getRemoteAddr()/getRemoteHost()” methods to always return the first IP in the XFF header.

Here’s the filter class:

public final class EditHeader implements Filter {

private FilterConfig filterConfig;

public void init(FilterConfig filterConfig) throws
ServletException {
System.out.println("Filter initialized");
this.filterConfig = filterConfig;
}

public void destroy() {
System.out.println("Filter destroyed");
this.filterConfig = null;
}

public void doFilter(ServletRequest request, ServletResponse response,
FilterChain chain)
throws IOException, ServletException {

chain.doFilter( new MyWrapper((HttpServletRequest) request), response);
}

}

Here you have the filter wrapper class:

public final class MyWrapper extends
        HttpServletRequestWrapper {
    public HttpServletRequest httpRequest = (HttpServletRequest) super.getRequest();
    public String reqAddr = httpRequest.getRemoteAddr();
    public String reqHost = httpRequest.getRemoteHost();
    public MyWrapper(HttpServletRequest servletRequest) {
        super(servletRequest);
   }
    public String getRemoteAddr() {
        String callerChain = httpRequest.getHeader("X-Forwarded-For");
        if (callerChain==null ||callerChain.equals(""))
            return reqAddr+"abc";
        StringTokenizer tempStringTokenizer = new StringTokenizer(callerChain, ",");
        return (tempStringTokenizer.nextToken());
    }
    public String getRemoteHost() {
        String callerChain = httpRequest.getHeader("X-Forwarded-For");
        if (callerChain==null ||callerChain.equals(""))
            return reqHost+"def";
        StringTokenizer tempStringTokenizer = new StringTokenizer(callerChain, ",");
        return (tempStringTokenizer.nextToken());
    }

And here’s a little test servlet :

public class test extends HttpServlet {
    public void doGet(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        res.setContentType("text/html");
        PrintWriter out = res.getWriter();
        out.println("");
        out.println("");
        out.println("");
        out.println("Caller Host  :" +req.getRemoteAddr() + "");
        out.println("Caller Addr  :" + req.getRemoteHost() +"");
        out.println("");
    }
}

The web.xml looks like this :

      EditHeader
      EditHeader
   

      EditHeader
      test
   
	
        test
        test
    
    
        test
        
            test
        
    

Docs:

http://java.sun.com/products/servlet/Filters.html
http://www.onjava.com/pub/a/onjava/2004/03/03/filters.html
http://www.developer.com/java/ent/article.php/3467801

Drag&drop Tabs

A dynamic user interface using the jQuery javascript library that allows an user to drag and drop a tab from one tab component to another.

• JQuery main documentation page
• An online tutorial on JQuery, by Jorn Zaefferer
• The tabs demo on the JQuery page.
• Draggable&Droppable elements demo on the JQuery page.
• A fantastic colection of interface components based on JQuery. (demos)

The order of events over the past days :
• Friday, May 30: 3 hours of reading/resource searching on JQuery.
• Saturday, May 31: 3-4 hours of tutorials and examples, experiencing with the JQuery UI.
• Sunday, June 1: 2 hours - putting together the interface.

The JQuery UI components used are:

• Tabs
• Draggables
• Droppables

The order of events managed:

• Create the two tab sets using JQuery’s tabs component.
• Make the tabs draggable with JQuery’s draggable component.
• Make the heads of the tab sets a “droppable” area so that it can recieve a new dragged element.
• On the “drop” event : Get the corespondent content of a dragged tab, remove drgged tab from the source tab set, add new tab into the destination tab set with a coresponding content identical to the one it came from

I used the “flora” theme found in the resources available in the JQuery documentation.

View the interface!
Main issues:
-didn’t figure out why the movement from the right set to the left one doesn’t work propperly

-didn’t manage to make the 2 containing divs display “on the same line” in IE6.. tried with a wrapper div but still not working

Before uploading files via a HTML-form, I want to do some client-side validating.
E.g. to check the filesize of the file selected by the user to upload.
Filesize should be, say, between 5MB and 50 MB. Javascript solution?!?

Nope, not really. By design, a person’s browser isn’t allowed to snoop around the file system.

These days I’ve came uppon the problem of uploading an image to a web server and save it into a database as a Blob field with JSP. After some research and some experiencing on my own the solution that worked for my case looked like this:

<form method=post action="includes/upload.jsp?imgId=<%=iNumPhoto%>"
name="upform" enctype="multipart/form-data">

onchange="LimitAttach(this.form, this.form.uploadfile.value)">

Where “iNumPhoto” is a parameter that i use when i need to overwrite an image (it’s set to -1 when the image is new), and “LimitAttach” is a JavaScript function that limits the types of file that can be submited trough my upload form.

<%@ page import="java.io.DataInputStream" %>
<%@ page import="java.io.FileOutputStream" %>
<%@ page import="java.util.Hashtable" %>

<%
String iNumPhoto = request.getParameter("imgId");
String contentType = request.getContentType();
 if ((contentType != null) && (contentType.indexOf("multipart/form-data") >= 0)) {
   DataInputStream in = new DataInputStream(request.getInputStream());
   int formDataLength = request.getContentLength();
   byte dataBytes[] = new byte[formDataLength];
   int byteRead = 0;
   int totalBytesRead = 0;
   while (totalBytesRead < formDataLength) {
       byteRead = in.read(dataBytes, totalBytesRead, formDataLength);
       totalBytesRead += byteRead;
    }
   String file = new String(dataBytes);
   String saveFile = file.substring(file.indexOf("filename=\"") + 10);
   saveFile = saveFile.substring(0, saveFile.indexOf("\n"));
   saveFile = saveFile.substring(saveFile.lastIndexOf("\\") + 1, saveFile.indexOf("\""));
   int lastIndex = contentType.lastIndexOf("=");
   String boundary = contentType.substring(lastIndex + 1, contentType.length());
   int pos;
   pos = file.indexOf("filename=\"");
   pos = file.indexOf("\n", pos) + 1;
   int boundaryLocation = file.indexOf(boundary, pos) - 4;
   int startPos = ((file.substring(0, pos)).getBytes()).length;
   int endPos = ((file.substring(0, boundaryLocation)).getBytes()).length;
   FileOutputStream fileOut = new FileOutputStream(saveFile);
   int imageSize = endPos - startPos;
   byte[] imgBuffer = new byte[imageSize];
   byte[] width = new byte[4];
   // Calculate width from byte position 17 to 20 of PNG header
   System.arraycopy(dataBytes, startPos + 16, width, 0, 4);
   Integer myWidth = (width[0] * 16 * 3) + (width[1] * 16 * 2) + (width[2] * 16) + width[3];
   System.arraycopy(dataBytes, startPos, imgBuffer, 0, imgBuffer.length);
   Hashtable< Integer, Object> messageImages = message.getMessageImages();
   if (!iNumPhoto.equals("-1")) {
   Integer idPhoto = Integer.parseInt(iNumPhoto);
   MessageImage messageImage = (MessageImage) messageImages.get(idPhoto);
   if (!myWidth.equals(messageImage.getWidth())) {
   out.print(" The selected image has an invalid width! Please select a valid one! (width = "+myWidth+")");
                out.print("Back");
                //todo send error
            } else {
                messageImages.remove(idPhoto);
                messageImage.setWidth(myWidth);
                messageImage.setData(imgBuffer);
                messageImages.put(idPhoto, messageImage);
                message.setMessageImages(messageImages);
                out.print(" Image replaced! (width = "+myWidth+")");
                out.print("Ok");
            }
    } else {
         MessageImage newImage = new MessageImage();
         newImage.changeMandatoryValues(new String[]{"id", "messageId"}, new String[]{"-1", message.getId()});
        newImage.setWidth(myWidth);
       newImage.setData(imgBuffer);
       messageImages.put(-1, newImage);
       message.setMessageImages(messageImages);
%>

The tricky part was getting separated the byte-array containing the image, from all the data sent by the upload form (yes the form doesn’t send only the file). After that all easy, even figured out how to get the image width. I’m using a bean called “message”, and the “saving into the database” part is done by passing the byte-array to the bean where all the data-base related operations take place.

….Googled it!

First atempt: Ended up here, tried [sourcecode language='css']…[/sourcecode] and got no result. (guess that this works only for wordpress.com users….no harm done)

At a second try: got a plugin here (syntaxhighlighter Google Code project by Alex Gorbatchev). Copied it to my server into the wp-content/plugins, activated it from the wp-admin and… that’s it. It works like this: Place your code on the page and surround it with < pre > tag. Set name attribute to code and class attribute to one of the language aliases you wish to use. Works for: XML/HTML, C++ (cpp, c, c++), C# (c#, c-sharp, csharp), CSS (css), Delphi/Pascal (delphi, pascal), Java (java), Java Script(js, jscript, javascript), PHP (php), Python (py, python), Ruby (rb, ruby, rails, ror) , Sql (sql), VB (vb, vb.net ).
After playing around a bit with the style my first try looked like this:

if($you_can_see_this)
            echo "syntaxhighlighter works!";

So from now on i will post pieces of code that trigger my attention.

January 22nd 2008: W3C published a working draft for HTML 5. The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera and many hundred other vendors.

Some of the new features in HTML 5 are functions for embedding audio, video and graphics, client-side data storage, and interactive documents. Other features are new page elements like <header>, <section>, <footer>, and <figure>.

HTML 5 improves interoperability and reduce development costs by making precise rules on how to handle all HTML elements, and how to recover from errors.

See full HTML 5 Reference

http://akrabat.com/

http://extjs.com/