• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5886
  • Last Modified:

How To Create A Mash Up Site Like iGoogle and Pageflakes With Popular AJAX Functions

Sites like iGoogle and www.pageflakes.com use external content feeds and with clever use of AJAX, the user is able to move and re-arrange content boxes around in the page, add unique content or delete and customize to their heart's contentment.

If I wanted to create a similar website where users could select from external rss feeds and display them on their own 'mashup page', how could I do that?

I looked at the Google web developer tools, thinking they were offering something, but it turns out they only want you to make stuff for their own iGoogle page.  I have an idea for my website where I want to create like a information directory page - where a user can add a list of useful telephone numbers or email address on their 'mashup page', but then they can delete or add modules whenever they need to, with complete freedom.  Essentially the same core functionality found on the previous example sites, but maybe not as complex or with so much flair.

I'm sure there are many others out there wondering how to do the same thing.  I guess it may need the hands of an experienced developer, but how to start such a project?
0
thyros
Asked:
thyros
  • 4
  • 3
2 Solutions
 
MacAnthonyCommented:
Just to clarify, the movable panels aren't AJAX but are often associated with AJAX since apps that use it are typically the ones with these interactive features. Google does offer a toolkit to build apps like these called the google web toolkit (http://code.google.com/webtoolkit/) but it's a server side language using java.

There are, however, tons of AJAX frameworks and libraries that also have the animation features that these do.
scriptaculous - http://script.aculo.us/
jquery - http://www.jquery.com
EXT JS - http://www.extjs.com
yahoo UI - http://developer.yahoo.com/yui/
dojo - http://dojotoolkit.org/

And plenty more. Find one you like and start playing with it.
0
 
hieloCommented:
First of all, since you are talking about various external domains, the browser security will not let you do this. However, you can achieve this through the marriage of client and server-side scripting:
Server site:
a. make a list of your urls EX.
var uri = new Array();
uri.push("http://site1.com");
uri.push("http://site2.com");
notice that you have inadvertedly assigned an id to each uri. Index 0 of the array is for the first array, index 1 is for the second array, etc.

b. Check if the client browser has sent you uri id.
If not, show them the options or show the default page
If so,  use a server-side utility to import the page

A sample server-side utility to do this would be MSXML2.ServerXMLHTTP.4.0 on a windows machine running IIS. Not sure what is available for other platforms.
c. write the page to the client

Client Side:
1. Create an AJAX enabled page that request unique pages from your server.
2. show a list of available url
3. upon request make an ajax request to your page, indicating the id of the url that you are interested in. An example uri could be:
ajaxObj.open('myProxy.asp?uri=1',false);
ajaxObj.send();
You can make use of ajax frameworks if you do not want to implement it from scratch
Look at: http://www.prototypejs.org/api/ajax

4. upon receiving the content from your server, update your content.
5.Smile and be proud.
0
 
thyrosAuthor Commented:
Hello,

Thanks for your comments.

Re; external domains - iGoogle and Pageflakes etc seem to be making use of RSS feed content to incorporate into the page, so that should not cause any browser security issues, no?

For my own project, I want to load different 'modules/gadgets' of information from my own site, so I am not too bothered about external content immediately, but it would be a nice bonus to be able to add rss feeds.

I guess what I am essentially trying to replicate is an RSS feed reader, but one that perhaps allows a bit of re-arranging, and incorporating a few web gadgets like a sticky-note txt editor.

I am not a coder so I don't think I'll be programming this stuff myself, but I was hoping there would be a ready platform to take and build upon - like a white label rss feed reader.

I'll take a look through those links and see what I can find..
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
hieloCommented:
The browser does not know nor care if the content is in RSS, HTML, or whatever format. The security limitations/restrictions are dictated by whether or not the page you are trying to "import" via scripting come from your own site(allowed) or from some one else's site(not allowed). Furthermore, I believe the restriction also applies if your "rss feed reader" is at http://yoursite.com/feedReader.asp and it is trying to get the content from http://subDomain.yoursite.com/news.rss. Even though your feed reader and the rss feed reside on the same network (yoursite.com), strictly speaking, they are on different domains.
Probably not your case, but something to keep in mind.
I know EXACTLYwhat you are trying to do (been there, done that, but cannot share the url). That is why I posted step by step instructions on my previous post. Basically I even told you the "workaround" to retrieve rss feeds that do not come from your site!

The styling/layout (meaning those extra gadgets that you want to incorporate) should not be a problem.
The most challenging part would be to retrieve the feeds. If you had a gmail account maybe we could instant message. This way its is just crazy.
0
 
thyrosAuthor Commented:
Hi Hielo,

I will need to study this thread in some more detail to see if I can fully understand it.  ** removed content with contact info (i.e. email, skype) - b0lsc0tt **

Thanks
0
 
hieloCommented:
Were you able to implement this?
0
 
thyrosAuthor Commented:
Sorry for the delay, but thanks for your help.
0
 
thyrosAuthor Commented:
I wasn't aware of the contact info restrictions, but sure it makes sense.

Regarding the topic, another option is to use some existing scripts and adapt them.

Free but basic:
http://www.dhtmlgoodies.com/scripts/dragable-boxes/dragable-boxes.html

Lots of features, but with a price tag:
http://www.alstrasoft.com/ajax-desktop-startpage-enterprise.htm

Hopefully that will help anyone looking for a quick solution.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now