One Page design

R

rarepearldesign

New Member
Simple:

Put all your content or forms on one page, each section that would typically be its own page you wrap in a div with style="display:none".

Then when a user comes to the page you set style="display:inline" for the first section.

Sounds ok right? Well, now when the user clicks a link or form button instead of posting that information back to the server to load the next page, they just display the next section, and hide the previous. When the workflow is complete, you then post to the server.

People have been doing this for years really, nothing new.

Its great for workflows (sequences of pages that are linked together in a typical user interaction scenario) when then content is not too long, otherwise the load time to laod all the info the first time does nto outweigh the performance of posting back to the server.

The problem with multiple posts to the server to complete a workflow was best solved by another method....Ajax.
 
L

Licicin

New Member
But you can process all forms together at the end
and not call ajax on every page.
Does it eliminate conversation transaction management as stated on that website?
 
R

rarepearldesign

New Member
Licicin said:
But you can process all forms together at the end
and not call ajax on every page.
Does it eliminate conversation transaction management as stated on that website?
Click to expand...

Yes, you can process all forms at the end because they are all the same form.

For example, say you have a customer registration form, that traditionally had four pages, each with their own form except the last invoice page.

Page 1 - Customer Information
Page 2 - Address
Page 3 - Payment Details
Page 4 - Invoice / Confirmation

With the traditional method the customer would fill out customer information, and submit form. System would save the customer in session or in DB and return a customer id.

They would then fill out address and submit where the system would take the customer id and save the address relation data.

Then the fill out the payment details where the system makes payment, and stores the payment info to that customer with customer id.

They then get the invoice.

PROBLEMS WITH THIS:
1) DB transaction cannot be held over multiple requests so any break will leave orpaned data in the DB.
2) Response time on multiple posts.

You could use session to save an in memory version of the customer until the end and persist that back to the database at end.

Using the one page approach you have all those forms bundled in one form and hide them until needed. The customer would fill out customer information, then submit which uses client script (no postback) to display the address form, they fill that out and submit (same as previous technique), and so forth until the payment details are filled out. Then that submit actually submits the data. The server would create the customer and associate all customer data in one single transaction which guarantees no orphaned data.

Ajax does not offer that same ability but what it does do is take away the "refresh" and postbacks by only posting the snippets (forms) back and forth.

My only issue with one page design is long forms and loaded content will make the page sizez very large, reducing initial load time. Kinda like a flash site where it takes awhile in the beginning. but instant after that.

The other issue I have is its not a new idea, people have done this for years.
 
L

Licicin

New Member
But for me, one page design pattern suggests some sort of independent,
fat client, you can do all staff on your PC,
they suggest some pictures, or books (i'm not sure it is relevant to the topic)
and you can call ajax to validate the form,
but again, i didn't see sites that implement this pattern.

Could you send some links with this pattern ?
 
R

rarepearldesign

New Member
Licicin said:
But for me, one page design pattern suggests some sort of independent,
fat client, you can do all staff on your PC,
they suggest some pictures, or books (i'm not sure it is relevant to the topic)
and you can call ajax to validate the form,
but again, i didn't see sites that implement this pattern.

Could you send some links with this pattern ?
Click to expand...

Their site implements the pattern. Also, click the "Questionnaire" link. That form operates EXACTLY as I described it.

It is fat client, because you have to have all the validation and scripting done at client side, and since all the possible data you could have is loaded the first time, your page is FAT, except you are making it appear thin using that technique.

I don't know any sites off hand that use this technique, but there are some sites that implement it for certain sections of their site for sure.
 
R

rarepearldesign

New Member
Sure, these these are my favorite books:

Sitepoint: HTML Reference
http://www.sitepoint.com/books/htmlref1/

Sitepoint: CSS Reference
http://www.sitepoint.com/books/cssref1/

As well as,
Designing Web Navigation
http://oreilly.com/catalog/9780596528102/

Sitepoint: Principles of Beautiful Web Design
http://oreilly.com/catalog/9780975841969/?CMP=AFC-ak_book&ATT=The+Principles+of+Beautiful+Web+Design

Dynamic HTML: The Definitive Reference, Third Edition
http://oreilly.com/catalog/9780596527402/

And more advanced are:
C# 3.0 Design Patterns
http://oreilly.com/catalog/9780596527730/index.html#top

And to Cure Headaches
http://oreilly.com/catalog/9780596009090/index.html#top
 
R

rarepearldesign

New Member
Licicin said:
COOL!
i've checked http://www.onepd.com/ one more time,
they have some books on Struts and Spring.
Could you recommend these frameworks for web development,
i see C# in your list, or is Java much better?
Click to expand...

Wrong one to ask about Java and PHP.

I am a Microsoft .NET Solutions Architect...so I am all .NET (ASP.NET, VB.NET, C#, etc). Some others could help you with that stuff.
 
L

Licicin

New Member
I agree with you.
Could you recommend some good site/books on Struts and Spring
Is Java better for web development ?
 
You must log in or register to reply here.
Top