coder and technology lover
goog.net.XhrIo: make simple ajax calls with Google Closure
Nov 17th
Closure has a consistent package called goog.net, which contains a lot of classes to work with ajax and remote http requests. In this post I want to show how to create a basic xhr object to make get/post calls, listen for related ajax events and send data to server. Once imported the main js file (base.js), we will require the following:
1 2 3 4 | goog.require("goog.dom"); goog.require("goog.net.XhrIo"); goog.require("goog.structs.Map"); goog.require("goog.Uri.QueryData"); |
The most important import is goog.net.XhrIo, which represents the object wrapping the XmlHttpRequest and allows us to retrieve and send information to/from the server. This class is a pretty low level api, which means that several tasks are not as simple and automatic as they would in jQuery or such libraries, but on the other hand this offers us more control and consciousness of what we are going to do.
The first step is instantiate an object of type goog.net.XhrIo and take a reference to it:
goog.ui.TabPane: Create tabs with Google Closure
Nov 16th
Hi everyone,
by starting with this post I would like to begin a series of posts dedicated to the new javascript library released by Google: Closure!
Today I will focus my attention on tabs creation, since this is maybe the most common user interface component in a web application.
In order to create Closure tabs, we need to import the base js file (/goog/base.js) and then require the class goog.ui.TabPane. Inside our head (or body) we will get the following:
1 2 3 4 | <script src="closure/goog/base.js"></script> <script type="text/javascript"> goog.require('goog.ui.TabPane.TabPage'); </script> |
Installing Eclipse + Aptana + Subclipse SVN
Nov 4th
Recently I’ve updated my Eclipse version and I installed certain plugin which has created some kind of conflict and confusion in my workspace. What I was trying to do was installing an SVN plugin in order to work on a google code SVN repository, but I had several errors and I lost several hours trying to figure out what was wrong. So I decided to do a fresh and clean installation, once understood the problem. So, I would like to write a sort of tutorial which will explain how to get a sound and working installation of Eclipse, Aptana and Subclipse (which as far I read, is actually the best plugin available for SVN on Eclipse).
Reading querystring variables using SSI and regular expressions
Oct 29th
In these days I worked on a project into which I have to rely on SSI (apache’s Server Side Includes) in order to read and use url parameters to dynamically include certain html files with “include virtual” directive. Unfortunately the documentations available online is not exhaustive, and I had to figure out some things by myself.
Anyway, according to the docs, there are several global variables we can use in SSI, two of these are: DOCUMENT_URI and QUERY_STRING, which are the two we can use to handle the page url. The first returns the (%-decoded) URL path of the document, the second all the string starting with “?”.
So, how we can extract our desired variables from these strings, since SSI doesn’t offer method such “substring”, “split”, “indexOf” and similar? The answer is: by using Regular Expression in a tricky and ingenious way!
SSI offers a basic way to implementing decision flow (if, else, elif), the if command has an attribute expr which represents a declaration to be valuated, in this attribute is also possible to use a regex to test a given pattern. By knowing this, is possible to declare an SSI variable which represents the desired querystring parameter in the following way:
1 2 3 4 5 6 7 | <!--#if expr="$QUERY_STRING = /year=([0-9]{4})/" --> <!--ssi-comment: year found --> <!--#set var="year" value="$1" --> <!--#else --> <!--ssi-comment: year NOT found --> <!--#set var="year" value="$DATE_LOCAL" --> <!--#endif --> |
In the code above I’m looking to a querystring parameter called year which must be a 4 ({4}) digit number ([0-9]).
If the pattern tested returns true, the matched value (returned by the regex) will be assigned to the SSI variable year, otherwise the current server date year ($DATE_LOCAL) will be assigned.
Notes:
1. “ssi-comment:” is not a special syntax, but just a comment style I decided to adopt to be readable and understandable.
2. To get only the year from $DATE_LOCAL variable, you must config the format using “#config timefmt=”%Y”"
Finally, JXT is out!
Sep 23rd
I’m proud to announce the release of the first public beta of my project: JXT. And when I say “proud” I mean that this is the big thing I realized in my (brief) career and I hope it will become a common technology in web development. Basically, JXT is a framework based on custom XHTML tags, which let you use jQuery and Ext functions and widgets without write a single line of javascript code.
It doesn’t requires programming skills other than XHTML, is lightweight and the markup will be validated because it make use of a custom DTD! Take a look here: http://www.jxtproject.com, and let me know your opinion ;-)
Find outermost top level XML/HTML tags with regular expressions
Sep 10th
I’m working on a personal big project (which I’m going to release soon) and in this project I need to parse strings containing XHTML tags with the goal of extract the top level of a given tag name, ie. from:
1 2 3 4 5 6 7 8 9 | <onetag id="t1"> <onetag id="t1-1"></onetag> <onetag id="t1-2"></onetag> </onetag> <onetag id="t2"></onetag> <onetag id="t3"></onetag> <onetag id="t4"> <onetag id="t4-1"></onetag> </onetag> |
I have to get 4 tags (t1, t2, t3, t4 with t1 and t4 containing their child nodes).
My regex knowledge is unfortunately very basic, so I googled for a ready to use regex, but none satisfied my need… all the examples I found didn’t handle properly nested tags… so, after some hours of testing I realized my own regex (my first real one), the result is the following:
1 | var pattern = /<(onetag)[^<>]*>(<\1[^<>]*><\/\1>)*<\/\1>/gi; |
In my case I’m using that pattern in Javascript, but I think it can be used with any language, because it doesn’t make use of advanced features like “atomic grouping” and these kind of “black magics”. To match the desired tag you can use it by replacing “onetag” with the tag you are looking for (even a tag with a namespace like “<foo:mytag>”).
EDIT:
The pattern above will work only if applied to a single line string (ie: var myString = “<onetag id=’t1′>…”), if you use that pattern on a “complex string” (a string containing spaces and new lines) it won’t works properly. Fortunately you can remove “bad characters” before by using a simple replace:
1 | var parsedString = originalString.replace(/\s(?!\w)/gi, "").match(pattern); |
\s(?!\w) will match any space and new line not followed by an alphanumeric characters (in this way spaces between tag attributes won’t be removed)
EDIT 2:
The pattern /<(onetag)[^<>]*>(<\1[^<>]*><\/\1>)*<\/\1>/gi won’t works properly in presence of several type of nested tags, ie:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <onetag id="t1"> <anothertag> <onetag id="t1-1"></onetag> <onetag id="t1-2"></onetag> </anothertag> </onetag> <onetag id="t2"></onetag> <onetag id="t3"></onetag> <onetag id="t4"> <anothertag> <onetag id="t4-1"></onetag> </anothertag> </onetag> |
The updated pattern is the following:
1 | var newP = /<(onetag)[^<>]*>.*?(<\1[^<>]*>.*?<\/\1>)*.*?<\/\1>/gi; |
I hope this will works without further modifications :P
Eclipse: convert upper case text to lower case and viceversa with a simple shortcut
Aug 25th
This is just a quick post to share these 2 little shortcuts to convert text from lower case to uppercase and viceversa in Eclipse.
Lower case: CTRL+SHIFT+Y
Upper case: CTRL+SHIFT+X
In both the combination you can select one or more character to convert.
I released my first interesting Flex component :)
Aug 7th
Today, I released my component “ImageNavigator”, you can see it here and download source code. I’m pretty satisfied about it, but it needs some little improvements and I’ve got some ideas to extend its features… so don’t consider it as the final version :P
Resolve Flex’s error: “Type was not found or was not a compile-time constant”
Aug 2nd
I just faced the terrible nightmare of “Type was not found or was not a compile-time constant” error (Flex Builder) and I lost several time to figure out what the problem was.
I realized that I was using the same name for MXML Application file which was already used by a class inside one of my packages. So, by renaming the file I solved the problem, but I was not completely satisfied and I looked for a way to avoid the error mantaining the same file/class name. Initially I tried to use namespaces, but as the reference says: “Applying a namespace means placing a definition into a namespace. Definitions that can be placed into namespaces include functions, variables, and constants (you cannot place a class into a custom namespace)”. I finally solved by renaming class references inside my package with the full qualified name (from MyClass to com.mysite.foo.MyClass)
Adapting iframe height to its content with 2 lines of javascript
Jun 12th
In a project, I have to use an iframe and I need that its height is automatically calculated based on its content. However is not possible to accomplish this by simply setting the attribute height to 100%, instead we must smartly use javascript to dynamically assign that value after a computation. The solution I’m going to show you is not 100% my work but instead an optimization and a better implementation of clever intuitions I found on the web.
The “trick” works in this way:
1. The iframe should has an ID assigned:
1 | <iframe id="slideshow_frame" src="frame.html" frameborder="0" width="100%" marginheight="0" marginwidth="0" scrolling="no"></iframe> |
2. the page loaded into the iframe should contains all the html into an “easy retrievable” container (a div with an ID is perfect!):
1 2 3 4 5 | <div id="content"> <div style="background: red; width: 400px; height: 120px"></div> <div style="background: green; width: 400px; height: 300px"></div> <div style="background: yellow; width: 400px; height: 60px"></div> </div> |
3. on the iframe’s page “onload” event, a function will be executed to adjust its height:
1 2 3 4 5 6 7 8 | function resizeIframe(iframeID) { var iframe = window.parent.document.getElementById(iframeID); var container = document.getElementById("content"); iframe.style.height = container.offsetHeight + "px"; } |
Recent comments