Clientside control of DOM elements

Using Servoy to administrate the content of your website? Discuss all webrelated Servoy topics on this forum!

Clientside control of DOM elements

Postby wmoerdijk » Fri May 20, 2011 4:10 pm

Hi,

For an application we are building we need to add some dynamic features to elements in the webclient. We are using the solution model to a large extend to manage specific demands of the interface. One thing we can not control are specific animations and/or manipulation of the DOM after it is send to the browser.

We want to use a js toolkit like jQuery to do this. So far for the intro, now for the question:

- Is there a way to add a specific name or identifier to an element so jQuery can pick it up clientside

Ideally we would have a property in eclipse to set a custom attribute for an element. This attribute could the be used clientside to do stuff like animation, resizing etc.

(e.g. jQuery code:
Code: Select all
$(".MyClassName").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});
)

R,

W.
wmoerdijk
 
Posts: 21
Joined: Sat Sep 23, 2006 4:43 pm
Location: Amersfoort

Re: Clientside control of DOM elements

Postby pbakker » Fri May 20, 2011 4:30 pm

Using the WebClientsUtils plugin hosted on ServoyForge you can retrieve the clientside id of each Servoy element, which can then be used to target it.

Paul
pbakker
 
Posts: 2822
Joined: Wed Oct 01, 2003 8:12 pm
Location: Amsterdam, the Netherlands

Re: Clientside control of DOM elements

Postby wmoerdijk » Fri May 20, 2011 5:03 pm

That sounds good. And we can be sure that the id will never change after a server deploy or a wicket update?
wmoerdijk
 
Posts: 21
Joined: Sat Sep 23, 2006 4:43 pm
Location: Amersfoort

Re: Clientside control of DOM elements

Postby jcompagner » Fri May 20, 2011 5:19 pm

no you have to constantly get it, it is not stable.
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8828
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: Clientside control of DOM elements

Postby pbakker » Fri May 20, 2011 5:27 pm

As Johan already said: the id is not stable. Depending on the config you use on the application server, short local id's can be used or longer UUID's.

If using the first, it will be different between different application server running the same solution. Hence the WebClientUtils plugin allows you to get the ID in scripting in your solution and then do with it what you want.

Paul
pbakker
 
Posts: 2822
Joined: Wed Oct 01, 2003 8:12 pm
Location: Amsterdam, the Netherlands

Re: Clientside control of DOM elements

Postby wmoerdijk » Fri May 20, 2011 7:16 pm

Ok so for my clarification, with this I can get target individual elements giving me some control, but :

A. only target individual id's not a group of elements (like a class would)
B. have to write the jQuery code dynamically from the Servoy code and insert the id's.
C. have the app write a jquery script for each element I want to target.

This sounds like somewhat of a complicated solution for a simple problem. Am I missing something, or is this something for a feature request?

R,

Wouter.
wmoerdijk
 
Posts: 21
Joined: Sat Sep 23, 2006 4:43 pm
Location: Amersfoort

Re: Clientside control of DOM elements

Postby jcompagner » Mon May 23, 2011 11:01 am

we also set a class to our elements, specific for their type. Maybe you can target that.

But ID's will not be fixed for ever. That is just not possible.
For example you have 1 design time form. And you create with application.createNewFormInstance you create a copy of that and both forms "instance1" and "instance2" you show on another parent form at the same time
And that you show in the webclient. Now it is impossible to have the same id's on both of those forms, they should be different, so they have to be generated on the fly.
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8828
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: Clientside control of DOM elements

Postby wmoerdijk » Mon May 23, 2011 11:18 am

Hi,

The class that Servoy sets is just a single one and it is too generic (e.g. 'field' or 'label'). IMHO a nice feature of html is the possibility to set multiple classnames for one element. This allows you to set additional classnames for an element and use them without interfering with the ID's. The classname for a field could be something like:

Code: Select all
class="field myclassname1 myclassname2"


The 'field' class will then be applied as usual, but you can also use "myclassname1" and/of "myclassname2" to target the element e.g. $(.'myclassname1').css('width','80px') which will set all elements with classname 'myclassname1' to a widht of 80px.

R,

Wouter.
wmoerdijk
 
Posts: 21
Joined: Sat Sep 23, 2006 4:43 pm
Location: Amersfoort

Re: Clientside control of DOM elements

Postby jcompagner » Mon May 23, 2011 11:38 am

yes it is known how css works, but currently servoy only generates what it needs itself in the id and class attributes.
So if you want to set your own style name in the class then i guess that could be build in the WebClientUtils plugin that you can get from ServoyForge.
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8828
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: Clientside control of DOM elements

Postby wmoerdijk » Mon May 23, 2011 4:44 pm

Hi,

That sounds like a good way to go. Do you think that this would be a complex thing to add this to the plugin? I am no Java developer, so it would help to know what I am up against. What you propose is to add a method like:

Code: Select all
plugins.WebClientUtils.setClassIdentifier(elements.yourElement, <classname string>);


Is this correct?

R,

Wouter.
wmoerdijk
 
Posts: 21
Joined: Sat Sep 23, 2006 4:43 pm
Location: Amersfoort

Re: Clientside control of DOM elements

Postby jcompagner » Mon May 23, 2011 4:52 pm

yes something like that yes, you could open a feature request for this at servoyforge.
Johan Compagner
Servoy
User avatar
jcompagner
 
Posts: 8828
Joined: Tue May 27, 2003 7:26 pm
Location: The Internet

Re: Clientside control of DOM elements

Postby wmoerdijk » Tue May 24, 2011 12:06 pm

I did. Thanks for the help so far.
wmoerdijk
 
Posts: 21
Joined: Sat Sep 23, 2006 4:43 pm
Location: Amersfoort


Return to Web Development

Who is online

Users browsing this forum: No registered users and 2 guests