After months of GWT and GXT at work I wanted to see how the other side looks like. In my case that would be Flash based rich internet applications. Long time ago I did some experiments with Open Laszló but I did not really get into it.
Now I decided to check Flex so I downloaded free Flex SDK and started with some simple examples and tutorials. Building user interface seems to be quite easy but there are a lot of things I have tried out, yet. Learning server connections using Blaze DS is on my TODO as well as trying out Maven with Flex.
So far Flex seems to be quite easy to get started with as soon as you understand the difference between MXML and ActionScript. The syntax of ActionScript 3 is not too bad for Java programmer. I also bought Flex on Java book from Manning with 50% discount so maybe I end up getting serious with Flex.
Archive for February of 2009
Learning Flex
February 28, 2009Testing GXT grid with Selenium
February 12, 2009
Grid is a fast and versatile component of GXT. Testing it with Selenium is quite simple but requires couple points to be handled. After some thinking and experimenting I came up with following.
First of all, you will need Firebug or similar tool to inspect DOM created by GXT. A suitable example of Grid is http://extjs.com/examples/grid/grid.html. Simply open that URL and open your Firebug.
We are interested to check that Nokia's stock symbol matches NOK. By inspecting the symbol column cell for Nokia we see something like this:
We can use the 'x-grid3-col-symbol' as a CSS locator. The syntax in IDE is then 'css=div.x-grid3-col-symbol'. This selects the column but the we should also specify the row.
This can be done by creating a new class extending GridViewConfig and overriding getRowStyle method. This method should return suitable value (for example name from Model). You might want to add a postfix or prefix to the value to avoid conflicts. The value becomes part of the CSS style for the row. Set your own instance extending GridViewConfig to your Grid's using myOwnGrid.getView().setViewConfig() method.
Now you should be able to pin point a specific cell using Selenium locator with two CSS classes: 'css=div.x-grid3-col-symbol div.row_nokia'
First of all, you will need Firebug or similar tool to inspect DOM created by GXT. A suitable example of Grid is http://extjs.com/examples/grid/grid.html. Simply open that URL and open your Firebug.
We are interested to check that Nokia's stock symbol matches NOK. By inspecting the symbol column cell for Nokia we see something like this:
<div class="x-grid3-cell-inner x-grid3-col-symbol">NOK</div>We can use the 'x-grid3-col-symbol' as a CSS locator. The syntax in IDE is then 'css=div.x-grid3-col-symbol'. This selects the column but the we should also specify the row.
This can be done by creating a new class extending GridViewConfig and overriding getRowStyle method. This method should return suitable value (for example name from Model). You might want to add a postfix or prefix to the value to avoid conflicts. The value becomes part of the CSS style for the row. Set your own instance extending GridViewConfig to your Grid's using myOwnGrid.getView().setViewConfig() method.
Now you should be able to pin point a specific cell using Selenium locator with two CSS classes: 'css=div.x-grid3-col-symbol div.row_nokia'