ASP.NET Custom UI Builder

Question

4.00/5 (1 vote)

See more:

I have a requirement that the User be able to design his own UI (user has a set of Controls available and the user can select a control and start adding the controls to the page.

Now I need a mechanism where I can show what control the user added to begin with and start adding the controls and their position on the page. For the user to be able to understand the controls the user has added, I should be able to show the control hierarchy on a grid ? panel ? iframe ? I dont know , which looks close to the actual hierarchy and order on the page.

I would then read the control position and generate a xml and render the page using XSLT.

Now I need some ideas on how I would show the controls the user just added to the page on a grid ? or some other canvas type so that it looks close to the layout of a page ?

Any suggestions ?

To be even more clear ..

Lets say the page has a drop down with the list of all allowable controls the user can add.. he selects it ..maybe in a panel or this is where I am stuck on what and how ... I show the control added and then the user selects another control he wants to add , either right beside , top , right , left to the previously added control.

--------------------------------------------------
Label TextBox Button
Label TextBox
Label TextBox Label DropDown Label TextBox
Button
--------------------------------------------------

something like this ?

Btw those aren't controls just a literal or something showing the controls the user has added in the respective order so far.

I would then read all the controls their relative positioning and transform it into an XML which would then be transformed and rendered as a page by XSLT.

Posted 22-Jun-11 8:18am

johnberry_berry

Updated 22-Jun-11 18:36pm

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pete O'Hanlon · Answer 1 · 2011-06-22T21:16:00

While it would be fairly tricky to do, you could (using a liberal dose of jQuery), drag and drop the "controls" from a toolbar and capture the co-ordinates that you added them at. To get an idea of how to do this, why not take a look at the jQuery UI[^] to get an idea of how you could do this using their interactions.