PageFlakes.com has some of the most amazing feature that you cannot find in most websites: a widget container. Any HTML code that you have could be easily loaded through the container provided by Pageflakes.com. Although there are already tons of widgets in their website, you can easily create one of your own.

For example, the embed code in YouTube.com could easily be applied in the codes that you have. Codes that could be integrated in MySpace.com such as simple casual games could also be applied in the widget container. As a developer, you can also offer a widget container in your website so that users could upload an application through an embedded code from a different website.

A widget container is placed inside an update panel. The widget container has two basic parts: the body and the header. The header in the widget is the consistent component while the body is the actual container of the application.

The header serves as the update panel controller with server while the body serves as the ground where the application will be implemented.

To build an efficient container, the three components that you need to consider is the header, updatepanel and the body. Others follow through the coding of the widget.

Unfortunately, an Ajax based widget is not a perfect code as it is. When you consider the header, updatepanel and body alone, the first problem you will experience is the extender. These are the HTML elements found inside the code that determines the physical size of the application uploaded in the container.

The updatepanel refreshes the header and the body but it removes the HTML documents in the body. What then happens is the application is resized and could not fit in the widget container. A trick has to be done so that the extender will be retained to keep the size and behavior of the application.

As we have previously mentioned there is only one updatepanel that controls the header and the body. It is essential for the updatepanel to refresh the header since it wants to connect to the server. On the other hand, the body does not want to connect to the server but instead to the remote host of the application.

When an updatepanel is applied without the host knowing about it, the application will lag. Not to mention the removal of the HTML every time the updatepanel is used on the body of the widget container.

The only solution to this problem is to create another updatepanel for the body. This updatepanel specifically used for the body does not connect to the server so it does not have to go with the header for refreshing the information. The other updatepanel in the body is used to communicate with the separate host.

Using two updatepanels in every widget is a very simple but a smart solution when you are trying to offer an empty box for a widget application. Although it gives the developers additional work for coding, the widget will actually work to everyone’s advantage.

Posted by MixedSoup | No Comments »

You have one page to render everything: news, quote of the day, embedded small online games and even your blog. You can create a page wherein your visitors can scroll down for information but too much scrolling is really annoying. You have to build a website where everything has to be crammed but will never sacrifice the overall lay-out of the website. During the days of HTML, developers are just resigned to the simple fact that everything could never be placed in a single webpage.

Then came Ajax and more specifically, JavaScript. Using the powerful interactivity of JavaScript and HTML for page layout and display, you got yourself a very powerful tool to build a website. You will not have to think where to place all that information in one place and your users will never have to scroll again. There is a command in Ajax that lets users choose what they want to read by hiding some parts of the page.

To understand this completely, let us take a look at these functions that enable these actions:

toggle_visible ()

To use that function you have to wrap your document as a parameter first. That sounds like a very big step but it is actually a small command added to parts of the webpage. By rebuilding the information, you will be able to control them like you are controlling a button or another function of the webpage.

Each article that you have written should be rendered this way – or at least the things that you wanted to be hidden when they are not used.

Aside from this simple function, there are additional parameters that you should add to your article so that it could be retrieved.

First is the el.style.visibility parameter. This parameter ensures that you see nothing when they should be. This parameter will check if the information is visible. If it does, it will be invisible when it is not in use. But it will be back once the information is needed once again by the user.

That function does not end there. You might have done something with the visibility, but not on the overall look of the information. By invoking the “hidden” parameter, you render the information invisible however; you still have to deal with space it has left. If you do not close the space, the hidden function will never be effective.

To close that space you need another parameter – el.style.display. Display will suggest how the specific article will behave in the webpage. At this point you suggest the parameter “none” so that it will not take up any space.

Transforming data into a simple function is just a matter of inserting these functions. When you are able to do that, you do not even have to look for additional functions to wrap the information as a function with specific behavior. The best part of this function is that it does not limit you to very small information but to wide spaces of a webpage as well. That way, you can cram more than two pages in your webpage at the same time without looking very bad.

Posted by MixedSoup | No Comments »

One of the coolest things a JavaScript could do in an Ajax based website is that its ability to drag and drop items right in the web browser. If you have an online store, you should be able to drag and drop items to your cart instead of clicking on a product. The webpage should update you with the cart without even having to refresh the webpage. The program or website becomes user-friendly which is a must in all websites.

Compared to other JavaScript libraries, Drag and Drop codes is a little bit difficult to configure. There are lots of libraries to choose from and frameworks always come with a library with a drag and drop function. However, there are developers who are not at ease with the available library so they go out and look for other codes. Here are some of the websites that offer a wide array of drag and drop codes to enable your website with this function.

dhtmlgoodies.com – there are lots of codes available in this website but dhtmlgoodies.com has a special feature on JavaScript libraries. Among the JavaScript functions that you can easily load in your program is the drag and drop function. There are different types of skins and interface to choose from and could be easily integrated in any website.

DOM Drag – go to this site: boring.youngpop.net and you’ll be able to see a unique drag and drop function. It offers an API that can be used in different browsers that were enabled with DHTML. Static CSS and HTML should be able to handle this function. It’s a highly specific drag and drop function which caters to a specific niche.

Walterzorn.com – this library enriched website offers drag and drop codes that could be easily launched in different browsers. No need to reconfigure the function since these codes is already optimized to work in different browsers. What makes this library special is its ability to handle text drag and drop image flow. Full customization is also possible but personally, you don’t need to do this because the library itself is already impressive.

Crossbrowser.com – has the same capabilities with walterzorn.com. Simple, yet highly effective in different browsers.

Wiki.Script.aculo.us – of course, who would forget this world famous library. Because most of the drag and drop function are almost the same, Script.aculo.us took the drag and drop function to the next level. The library consists of two functions: the “droppables” (objects that can be dropped) and “draggables”(objects that can be dragged). This makes drag and drop function a very specific function. Aiding the drag and drop library are the sorters to ensure the objects are properly tagged.

The previously mentioned websites have great libraries which also includes the drag and drop function. Also worth mentioning are tool-man.org, openrico.org, dhtmlkitchen.com and yahoo’s own development website.

Be sure to check out these sites as they offer drag and drop functions and more. More often than not, these libraries work well in all major frameworks both open-source and licensed.

Posted by MixedSoup | No Comments »

Checking your application is always a standard procedure in any language. In the case of Ajax, the importance is even greater considering the complexity of the development technique.

When debugging the application, Ajax developers knows that they have to go for the Server-side functions as well as the client side. Fortunately, client side debugging tools are common. Firefox even has a small add-on that has the ability to debug Client-Side functions of Ajax. Just one run with the application, developers will know if there are bugs found in the system.

The Server-side however, is not so lucky. Debugging the Server-side function on JavaScript is ok but when you are running on a framework, you are in a little bit of a trouble. Frameworks in the Server-side translate Java into JavaScript. Since it is not on JavaScript, debugging tools for Ajax is never possible. Developers might just have to let go of debugging Server-side functions.

Actually, there is a simple trick on how can you debug Server-side functionality. When building the Server-side functions, also build another function that actually debugs the function. That function writes the variables of the application into a file. Since it was built on a file, you can fire up a simple debugging tool.

That function will technically start by determining which variable to debug. When it does it uses a function from PHP called the OutPut buffering. This simple function from PHP loads the variable to the file so that it could be tested. From this point, the debugging functionality will be used. A simple debugassistant command in different lines will be useful. In fact, the debugassistant might be the only thing that you need to ensure that the debugging works.

Lastly, the function should access the file called debug to transfer the data extracted from the debugging tool. Simple as that.

The best part of this debugging tool is that it has the ability to be used in certain stages of the application development. You do not need to wait until the finished product and run it through the debugging tool. With this simple functionality, you should be able to test the application by stages. Every time an update comes up, the functionality could be kicked in so that it could easily identify the latest variables and run it through the debugging application.
Of course, the other good thing about this is that you do not need to use a JavaScript debugging tool. Not that we do not like them but when you are running the Server-side practically end with nothing.

Remember, this function could be easily integrated into the script. It might not be even noticed when the application starts to kick in. As a developer in your end, you will have the ability to trigger it when you need it. Unfortunately, you will not be able to automatically configure it to work but that is just fine as this could even be at your advantage.

Using this simple debugging function to ensure your Server-side functions work. It is simple but a very effective tool for Server-side frameworks.

Posted by MixedSoup | No Comments »

Developing an Ajax based Facebook application is always a challenging task. Unfortunately, Facebook does not admit Ajax head-on. What developers have been doing in their websites and applications to enable Ajax or to make it an Ajax based application will not be applied in Facebook.

The main reason of course is security.

Although most of the developers might find this move a little bit on the side of being paranoid, Facebook maybe right in one thing: they just wanted to make sure everything is secured. It may be ok to taunt hackers with Ajax in other aspects of life and business but to hack personal information especially of the kids is intolerable.

On the other hand, Facebook has acknowledged the interactivity Ajax can provide to their website. Being a lightweight tool, this development technique is too good that Facebook does not want Ajax to just float away from what they could do. Facebook eventually developed a unique coding technique for Ajax and called it Mock Ajax.

Mock Ajax wraps the Ajax based application. Again for security reason it makes developers build another code that eventually wraps their Ajax based application. Facebook also requires a little deviation in rendering the application.

So how does Facebook wraps the Ajax based application? When an attribute is triggered by a user, it sends the clickwriteform form so that it could be posted (using the command POST). After that, the form is again relayed to the application URL. In Ajax, the return should been an HTML function so that it could be read in a browser. Facebook on the other hand renders the result as FBML, which is a markup language for Facebook. And it does not end there – FBML is again reverted to HTML so that it could be injected to the innerHTML which was the original request of the user.

That really sounds complicated considering that FBML will have to be the end result of the application URL. But this “wrapping” technique is very effective when you consider security. The HTML result could have been hijacked and could be used at the whim of hacker. Developers will just find themselves building applications but the end result is not their webpage. With FBML, the source is a little bit harder to decode since the mark-up language is native to Facebook. If you are trying to hack FBML, you have to do it within the platform of Facebook but they should be able to detect any malicious activity.

We have to admit that this technique is a little bit difficult at first. The native mark-up language maybe a little bit different compared to XML or JSON but it is still a mark-up language and those who knows more than a thing or two in XML should understand the concept of Facebook quickly. Also, when you have stayed in Facebook long enough, coding could be a little bit easier. All you need is a little bit of creativity and persistence to know something new and you will find yourself working relentlessly to build the next big Facebook application.

Posted by MixedSoup | No Comments »