repeated components design issue

[eneko]

Hi,
I am trying to build a polling website and decided to use Ext as GUI, because of obvious reasons. However, I am a little lost with the design (software design and patterns) of Javascript based GUI components.

I need to show many components of the same class (i.e poll mini-windows, where users can vote) many times on a page. These mini-windows are Ext based layout components (Rails partial templates) with many things inside, like buttons and tabled, and they need a huge amount of JS code to work. As I need to render many of these components per page, there's repeated JS code that should be removed.

Also, I haven't actually written any code yet, but I think that It would be really difficult to reference elements by id, because there would be many elements with the same id (one per rendered component). I could concat an unique id to every element, but it isn't a good design approach.

Please, any suggest about how to design the Ext-intensive mini-windows without repeating code and easily referencing each element's inner components?

Thank you for advance.
PD: Excuse my poor english

Eneko

[Animal]

First of all ids must be unique. Things will break if you have two elements with the same id.

Is each "mini-window" different?

In my opinion, it is up to the server-side resource that generates the downloaded page fragment to generate unique IDs, and to generate script which "activates" the markup in that fragment and builds Ext widgets around it.

I don't know about Rails, but in Java, we have tag handlers which allow us to code in pseudo-HTML, and the tag handlers hold all the knowledge about what is needed in terms of markup and script, and output it all. The page author does not need to know very much.

If I were you, I'd get a simple mockup working so that you really know the Ext principles first, and then work on your server-side resources so that they can generate repetetive and complicated javascript for you.

[eneko]

firstly, many thanks!

Each "mini-window" is different in it's inner content, but they all use the same javascript code (Ext layouts, table, ...). By the way, I don't know about JSP, but it seems that Rails' partial templates and Java tag handlers are similar concepts.

I am currently working with a simple mockup, and getting things work slowly, but in the near future I will need to render it repeatedly per page, and I can't see any 'clean' way to avoid code repetition and complication.

Do you know about any pattern that would fit to this problem?

Thank you
Eneko

[Animal]

You won't write repeated code, you will repeatedly invoke a server side object, telling it declaratively what kinds of behaviour you expect, and you will have coded into that class the logic to do the heavy lifting for you.

[eneko]

Ok, I think I understand what you mean.

However, I am afraid I will come back later with more questions... (nOOb)

Thanks and congratulations for your great work.

Eneko

[BigTitus]

Eneko, have you found a proper (Rails based) solution on this? Or maybe anyone else?

[eneko]

Finally I used unique id elements to get over the problem. In my case, polls are Railsmodel elements so I could concat its id column's value to some string to create unique ids, like "poll_1" or "poll_2".

so create a Javscript class which encapslates yor component with at least one argument in the constructor (the unique id), and then instantiate them using different ids.

However please describe your problem more conciselly so we could help you better.