Archive

Posts Tagged ‘xp:div’

Stumbling Stones: Difference between xp:panel and xp:div

02/04/2012 1 comment

Today another stumbling stone.

With this post I want to announce that I will write this Blog in english from now on to reach more readers throughout the world. My old posts will be translated step by step. I hope you understand this step and continue reading my Blog.

But back to topic. Today I was customizing a module in one of my applications. The structure was implemented via xp:panel elements. I wanted to save some performance and wanted to change it to xp:div.

By the way, what is the difference between xp:panel and xp:div, you might ask. Well, it is quite easy. Both controls are container controls which are rendered as a <div> element in HTML. The difference is that you can define a datasource in xp:panel elements. Therefore, xp:panel and xp:div references different Java-classes in the backend. The class for xp:panel is more complex, that means you a bit more serverload. Here is the Java code generated:

 

xp:panel:
private UIComponent createPanel2(FacesContext context,
      UIComponent parent, PageExpressionEvaluator evaluator) {
   UIPanelEx result = new UIPanelEx();
   return result;
}

xp:div
private UIComponent createDiv(FacesContext context,
      UIComponent parent, PageExpressionEvaluator evaluator) {
   XspDiv result = new XspDiv();
   return result;
}

 

It seems not worth to mention, but imagine you have an application with, let’s say 200 div containers throughout the application. With each the server has to load the more complex class and prepare the functionality to create a datasource. If you use xp:div instead, the serverload may decrease a bit. I do not have some statistics to prove how it affects the applications performance in detail, but it is alsways a good idea to reach for maximum performance of an application.

So, what was the problem? I changed the tags to xp:div, and the design of my module was affected. I wondered, because I was thinking both elements are rendered as a <div> element in HTML. But a short glance into the Firebug told me something. For two panels, I didn’t define an ID attribute. So, the second difference between xp:div and xp:panel is that xp:panels without an ID attribute are NOT rendered in an XPage. This could affect either some CSS hierarchies and also, if you need every pixel in a container, affects the way it is displayed. In my case it had the result that an image, which I used as a button was not displayed next to an inputBox, it was displayed below that.

Here an example with the output:

 

Without IDs:

XSP:
<xp:panel>
   <xp:panel>
      test 1
   </xp:panel>
</xp:panel>

<xp:br/>

<xp:div>
   <xp:div>
      test 2
   </xp:div>
</xp:div>

HTML:
test 1
<br>
<div>
   <div>
      test 2
   </div>
</div>

With IDs:

XSP:
<xp:panel id="panel1">
   <xp:panel id="panel2">
      test 1
   </xp:panel>
</xp:panel>

<xp:br/>

<xp:div id="div1">
   <xp:div id="div2">
      test 2
   </xp:div>
</xp:div>

HTML:
<div id="view:_id1:panel1">
   <div id="view:_id1:panel2">
      test 1
   </div>
</div>
<br>
<div id="view:_id1:div1">
   <div id="view:_id1:div2">
      test 2
   </div>
</div>

 

This is not a big deal, if you know that and always set an ID attribut, as it should be, you won’t encounter that problem. But like it is always, you have to know it or you get confused by its consequences.

Advertisements

Stolperfalle: Ids bei clientseitigen Events

Heute bin ich mal wieder über einen Fehler gestolpert, welchen ich schonmal begangen habe, und dadurch mal wieder viel Zeit verloren habe. Deshalb landets jetzt hier, in der Hoffnung dass ichs mir auch endlich mal merke =)

Ich hatte ein xp:div Element, welches eingebettet einen Text und ein Bild hatte. Mit einem onMouseover Event wollte ich die URL des zu verwendeten Bildes ändern. Leider reagierte das Element auf keinen MouseOver.

Dies kann man übrigens auf 2 Arten erreichen:

document.getElementById("#{id:zielElement}").src = "url_zum_bild.gif";

oder wenn man sich auf das aktuelle Element beziehen möchte, auf welchem das Event liegt:

try{
	if (thisEvent.originalTarget) {
		thisEvent.originalTarget.src = "btn_go_Hover.gif";
	} else {
		thisEvent.srcElement.src = "btn_go_Hover.gif";
	}
}catch(e){}

Die If-Abfrage hat den Hintergrund dass der Internet Explorer “srcElement” braucht und nicht auf originalTarget zugreifen kann.

Dass mein xp:div auf kein Event gehört hat lag einfach daran dass mein xp:div Element keine ID hatte.

MERKEN: Elemente mit einem clientseitgen Event brauchen IMMER eine ID!!

Btw: Wo wir gerade bei xp:div sind:

Mann sollte immer, wenn man nur ein einfaches div in der Seite braucht, xp:div verwenden. xp:panel hat zwar das gleiche Ergebnis, allerdings werden bei xp:panel noch ein paar Sachen im Hintergrund geladen die es ermöglichen eine Datasource anzubinden. Wenn man dies beachtet kann man noch ein paar Quäntchen Performance aus der Applikation herausholen. Besonders wenn man diese Elemente in einem xp:repeat loopt.

%d bloggers like this: