How to change component position at runtime

Use Case – How to change component position at runtime

Solution –

Step 1. Add two panel boxes. Specify inlineStyle as given below,

<?xml version=’1.0′ encoding=’UTF-8′?>
<jsp:root xmlns:jsp=”; version=”2.1″
< contentType=”text/html;charset=UTF-8″/>
<af:document id=”d1″>
<af:form id=”f1″>
<af:panelBox text=”PanelBox1″ id=”pb1″ inlineStyle=”position:absolute; left:#{backingBeanScope.TestBean.position};”></af:panelBox>
<af:panelBox text=”PanelBox2″ id=”pb2″ inlineStyle=”position:absolute; left:#{backingBeanScope.TestBean.position1};”></af:panelBox>
<af:commandButton text=”Swap their position” id=”cb1″
action=”#{backingBeanScope.TestBean.changePosition}” inlineStyle=”position:absolute; left:1000px”/>

Step 2, Create one sampleBean and specify properties from this runtime. SampleBean code below,

package com.sample;

public class TestBean {
private String position=”5px”;
private String position1=”722px”;
public TestBean() {

public String changePosition() {
// Add event code here…
return null;

public void setPosition(String position) {
this.position = position;

public String getPosition() {
return position;

public void setPosition1(String position1) {
this.position1 = position1;

public String getPosition1() {
return position1;

Step 3,

You can control hard coded position values at runtime also.




Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s