client side datatable pagination in jsf

Hi,

if  you want to add simple client side pagination to a datatable in JSF, it is very simple to do so.

suppose you have this regular h:datatable in your page:

<h:dataTable id="datatable" var="item" value="#{someBean.all}">

<h:column>
<f:facet name="header">
<h:outputText value="my header"/>
</f:facet>
<h:outputText value="#{item.someField}" escape="true"/>
</h:column>

</h:datatable>

just use jQuery and use this plugin: http://neoalchemy.org/tablePagination.html

include the plugins and jQuery’s js in your page and just add this to your page:

jQuery(document).ready(function() {
jQuery('#datatable').tablePagination();
});

and that is all. It works for 1.2 and 2.0.

btw this thing is useful if you are not using PrimeFaces. PrimeFaces ease your custom needs very quickly. this solution is for a situation where you cannot use PrimeFaces some how.

Tracing JSF

Hi,

to trace JSF, my favorite tool is FacesTrace. You can find a demo here :

http://www.primefaces.org:8080/prime-showcase/facestrace/createBook.jsf

especially for starters it shows the lifecycle, parameters etc.

you can also use ui:debug. it can be handy in production mode with pressing ctrl+shift+d ( can be changed of course ) which shows score variable and component tree.

Object doesn’t support this property or method datatable

Hi,

if you have “Object doesn’t support this property or method” error when using primefaces datatable in Internet Explorer, it is quite likely that you assign the same name for id and widgetVar for the datatable like:

<p:dataTable id=”documents” widgetVar=”documents”

so if you change one them like widgetVar to “documentsVar” it will be fixed.

Firefox does not have this problem btw.

Increasing memory in idea

Hi,

if you have troubles like me in idea because of heap sizes etc. open ( for mac users of course 😉 )

/Applications/IntelliJ IDEA 9.0.1.app/Contents/Info.plist

and in the lower part of the document you will see

<key>VMOptions</key>

change it as you wish, mine is :

<key>VMOptions</key>
<string>-Xms256m -Xmx1024m -XX:MaxPermSize=768m -ea -Xbootclasspath/a:../lib/boot.jar</string>

and I am happy with it :).

Force users to enter only digits in JSF

Hi,

if you want to force user to enter only digits while entering a numeric data like age, amount etc. you can use PrimeFaces’ inputMask component as follows:

<p:inputMask id="age" label="Age" value="#{bean.age} placeHolder=" " mask="?99"/>

This component with ?99 mask forces users to enter ages from 0 to 99

Easy, huh?

You can see other possible masked inputs from here : http://primefaces.org:8080/prime-showcase/ui/inputMask.jsf

Easy Selenium tests with Page Objects

Hi,

As you all know Selenium is a very nice tool while doing integration tests. You can simulate an user using your webpage for any kind of test cases.

While writing selenium tests in Java, it was very hard to trace the test code as you may come up with something like

	@Test
	public void testCreateUser() throws Exception {
		final String firstName = "firstNameSelenium";
		final String lastName = "lastNameSelenium";
		final String login = "loginSelenium";

		selenium.click( "link=Menu" );
		selenium.click( "usersMenuItem" );
		waitForPageToLoad();
		selenium.click( "registerNewUserLink" );
		waitForPageToLoad();
		Assert.assertTrue( selenium.isElementPresent( "userEditPage" ) );

		// Register a new user
		selenium.type( "form:firstName", firstName );
		selenium.type( "form:lastName", lastName );
		selenium.type( "form:login", login );
		selenium.type( "password", "secretPassSelenium" );
		selenium.type( "form:personalEmail", "perso@perso.com" );
		selenium.select( "form:homeCountry", "value=FR" );
		selenium.select( "form:access2Add", "label=Business Unit Manager" );

		selenium.click( "form:industries:industryToggleLink" );
	
		selenium.click( "form:saveButton" );
		waitForPageToLoad();
		Assert.assertTrue( selenium.isElementPresent( "userEditPage" ) );
	}

and this is not nice, as the code seems unmaintable and you cannot understand what you are testing by doing what. Also if you change the id of an input for example, you have to change that code every place.

With Page Object Pattern, you can represent your each page as an object and with this way you can seperate the html codes from your tests.

Let’s do the following example. A user will try to login to our page and then will list all the latest news from the main page. By the way I will not go over how to setup selenium etc. I will just try to show you can use the Page Objects.

We firstly create our login page as follows:

public class LoginPage{
	protected final DefaultSelenium selenium;

	public LoginPage(DefaultSelenium selenium) {
		this.selenium = selenium;
	}

	public DashBoardPage loginAs(String userName,String password) {
		selenium.open("/YourApplication/login.xhtml");
		selenium.click("j_username");
		selenium.type("j_username", userName);
		selenium.click("j_password");
		selenium.type("j_password", password);
		selenium.click("logbut");
		selenium.waitForPageToLoad("30000");
		return new DashBoardPage(selenium);
	}
}

this login page just logins to the system and returns the DashboardPage. let’s see what dashboard page looks like:


public class DashBoardPage {

	protected final DefaultSelenium selenium;

	public DashBoardPage(DefaultSelenium selenium) {
		this.selenium = selenium;
	}

	public NewsPage goToNewsPage() {
		selenium.click("link=news");
		return new NewsPage(selenium);
	}
}

and news page

public class NewsPage {

	protected final DefaultSelenium selenium;

	public NewsPage(DefaultSelenium selenium) {
		this.selenium = selenium;
	}

	public boolean isNewsDisplayed() {
		return selenium.getBodyText().contains("News for today");
	}
}

ok a basic setup is here, let’s see the a simple test

 public class DisplayNewsTest {
	protected DefaultSelenium selenium;
	
	@Before
	public void before() {
		selenium = new DefaultSelenium("localhost",4444,"*iexplore","http://localhost:8190");
		selenium.start();
	}
	@Test
	public void shouldLoginAndDisplayNews() {
		LoginPage loginPage = new LoginPage(selenium);
		Dashboard dashboard = loginPage.loginAs("admin", "admin");
		NewsPage newsPage = dashboard.goToNewsPage();
		assertThat(newsPage.isNewsDisplayed(), equalTo(true));
	}
}

See how easy and readable the test is?

it is a very basic example but you see it will make your code more readable and easier to maintain. For example we have a current test like:


	@Test
	public void shouldCreateAChannelOwner() {
		LoginPage loginPage = new LoginPage(selenium);
		NewUserPage newUser = loginPage.loginAs("admin", "admin").gotoAdministrator().goToUsers().goToCreateNewUser();

		assertThat(newUser.isUserCreateSuccessful(), equalTo(true));		
	}

You can understand what the test is doing by looking at here.

So use page objects while developing with selenium. A more detailed info can be found here:

http://code.google.com/p/selenium/wiki/PageObjects