This article illustrates how to create a simple page in sipXconfig, for both user and admin portal.

Notes

Throughout this article I will consider the '/main/sipXconfig' the root directory.

Intro

We use test-driven development (TDD) in order to create / modify a page or fix a issue.

...

For that we use JUnit, JWebUnit, HtmlUnit, DbUnit, etc.

Use 'ant' tool to run these tests (from 'sipXconfig' directory):

ant test-all -Dtest.name=MyTest

I Admin portal

1. Add a new menu (MyMenu) and a new entry (MyPage) to the new page

a. Add a test for the new menu and the new page

Under '/sipXconfig/web/test' directory, create a new package org.sipfoundry.sipxconfig.site.admin.mypackage and a new test class in this package (MyPageTestUi.java):

Code Block

	java
	java


package org.sipfoundry.sipxconfig.site.admin.mypackage;

public class MyPageTestUi extends WebTestCase {
    public static Test suite() throws Exception {
        return SiteTestHelper.webTestSuite(MyPageTestUi.class);
    }

    @Override
    protected void setUp() throws Exception {
        getTestContext().setBaseUrl(SiteTestHelper.getBaseUrl());
        SiteTestHelper.home(getTester());
        clickLink("toggleNavigation");
        clickLink("menu.myPage");
    }

    public void testDisplay() {
        SiteTestHelper.assertNoException(tester);
        SiteTestHelper.assertNoUserError(tester);
    }
}

Run this test:

ant test-all -Dtest.name=MyPage

This test will fail with the following errors:

[~lceausescu@itcnetworks.ro:junit] Test org.sipfoundry.sipxconfig.site.admin.mypackage.MyPageTestUi FAILED

............
[~lceausescu@itcnetworks.ro:concat] testcase: MyPageTestUi
[~lceausescu@itcnetworks.ro:concat] junit.framework.AssertionFailedErrorjunit.framework.AssertionFailedError: Unable to find link with id [~lceausescu@itcnetworks.ro:menu.myPage]

b. Create the menu entry and the page

In sipXconfig/web/context/WEB-INF/common/AdminNavigation.html file, add the next piece of code:

Code Block

	html
	html


	<li>
	  <div class="roundedMainSectionBoxTopLeft"></div><div class="roundedMainSectionBoxTopRight"></div>
	  <div class="roundedMainSectionBoxInside">
	    <a class="heading"><span key="menu.section.myMenu">My Menu</span></a>
	      <ul>
		<li><a jwcid="@PageLink" id="menu.myPage" page="admin/mypackage/MyPage"><span key="menu.myPage">My Page</span></a></li>
	      </ul>
	  </div>
	</li>

and in sipXconfig/web/context/WEB-INF/common/AdminNavigation.properties, add the following two lines:

Code Block

	html
	html


menu.section.myMenu=My Menu
menu.myPage=My Page

Now you can see these changes in the picture below:

Image Added

Under 'sipXconfig/web/context/WEB-INF/admin/', create 'mypackage' directory and three files in this directory, as follows:

MyPage.page

Code Block

	html
	html


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE page-specification PUBLIC "-//Apache Software Foundation//Tapestry Specification 4.0//EN"
  "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">
<page-specification class="org.sipfoundry.sipxconfig.site.admin.mypackage.MyPage">
  <description>My page</description>
</page-specification>

MyPage.html

Code Block

	html
	html


<div jwcid="@common/Border" useDojo="true" borderTitle="ognl:borderTitle">
  <span jwcid="@common/QuickHelp" value="message:quick.help" />
  <form jwcid="myPageForm@Form" id="myPageForm">
  </form>
</div>

MyPage.properties

Code Block

	html
	html


title=My title page
quick.help=TBD<br/>\
           Insert quick help here

Create also /sipXconfig/web/src/org/sipfoundry/sipxconfig/site/user_portal/MyUserPage.java class

Code Block

	java
	java


package org.sipfoundry.sipxconfig.site.user_portal;

public abstract class MyUserPage extends UserBasePage {

    @Override
    public void pageBeginRender(PageEvent event) {
        super.pageBeginRender(event);
    }
}

Now MyPageTestUi test will pass and changes can be seen below:

Image Added

2. Add tabs for this page

a. Modify the unit test

MyPageTestUi.java

Code Block

	java
	java


    public void testDisplay() {
        SiteTestHelper.assertNoException(tester);
        SiteTestHelper.assertNoUserError(tester);
        assertLinkPresent("link:first");
        assertLinkPresent("link:second");
    }

If we run this test again, it will fail:

[~lceausescu@itcnetworks.ro:junit] Test org.sipfoundry.sipxconfig.site.admin.mypackage.MyPageTestUi FAILED

.................................................

[~lceausescu@itcnetworks.ro:concat] testcase: MyPageTestUi
[~lceausescu@itcnetworks.ro:concat] junit.framework.AssertionFailedErrorjunit.framework.AssertionFailedError: Unable to find link with id [link:first]

b. Add the tabs

We will modify previously created files as follows:

MyPage.html

Code Block

	xml
	xml


<div jwcid="@common/Border" useDojo="true" borderTitle="ognl:borderTitle">
  <span jwcid="@common/TabNavigation" tabNames="ognl:{'first', 'second'}" selectedTab="ognl:tab"/>
  <div id="settings-content">
    <span jwcid="@common/ErrorMsg"/>
    <span jwcid="@RenderBlock" block="ognl:components.get(tab + 'Tab')"/>
  </div>
  <div jwcid="firstTab@Block">
    <span jwcid="@common/QuickHelp" value="message:quick.help.firstTab" />
    <form jwcid="firstForm@Form" id="firstForm">
      MY FIRST TAB
    </form>
  </div>
  <div jwcid="secondTab@Block">
    <span jwcid="@common/QuickHelp" value="message:quick.help.secondTab" />
    <form jwcid="secondForm@Form" id="secondForm">
      MY SECOND TAB
    </form>
  </div>
</div>

MyPage.properties

Code Block

	xml
	xml


title=My title page
tab.first=First tab
tab.second=Second tab
quick.help.firstTab=TBD 1
quick.help.secondTab=TBD 2

MyPage.java

Code Block

	java
	java


package org.sipfoundry.sipxconfig.site.admin.mypackage;

public abstract class MyPage extends SipxBasePage {

    @Bean
    public abstract SipxValidationDelegate getValidator();

    @Persist
    @InitialValue("literal:first")
    public abstract String getTab();

    public void pageBeginRender(PageEvent event) {
        if (!TapestryUtils.isValid(this)) {
            return;
        }
    }
}

Now MyPageTestUi test will pass and changes can be seen below:

Image Added

II User portal

Adding a page in User portal is similar to adding a page in the Admin portal

1. Add a new entry to the new page (MyUserPage)

Under '/sipXconfig/web/test/org/sipfoundry/sipxconfig/site/user_portal' package create a new test class (MyUserPageTestUi.java):

Code Block

	java
	java


public class MyUserPageTestUi extends WebTestCase {
    public static Test suite() throws Exception {
        return SiteTestHelper.webTestSuite(MyUserPageTestUi.class);
    }

    @Override
    public void setUp() {
        getTestContext().setBaseUrl(SiteTestHelper.getBaseUrl());
        SiteTestHelper.home(getTester());
        clickLink("seedTestUser");
        clickLink("loginFirstTestUser");
        clickLink("toggleNavigation");
        clickLink("menu.myUserPage");
    }

    public void testDisplay() {
        SiteTestHelper.assertNoException(tester);
        SiteTestHelper.assertNoUserError(tester);
    }
}

Run the test - ant test-all -Dtest.name=MyUserPage
This test will fail:

junit Test org.sipfoundry.sipxconfig.site.user_portal.MyUserPageTestUi FAILED
.......................................................
concat testcase: MyUserPageTestUi
concat junit.framework.AssertionFailedErrorjunit.framework.AssertionFailedError: Unable to find link with id menu.myUserPage

In /sipXconfig/web/context/WEB-INF/user_portal/UserPortalNavigation.html file, add the next piece of code:

Code Block

	xml
	xml


<li>
	<div class="roundedMainSectionBoxTopLeft"></div><div class="roundedMainSectionBoxTopRight"></div>
	<div class="roundedMainSectionBoxInside">
		<a class="heading" jwcid="@PageLink" id="menu.myUserPage" page="user_portal/MyUserPage">
		<span key="menu.myUserPage">My User Page</span>
		</a>
	</div>
</li>

and in '/sipXconfig/web/context/WEB-INF/user_portal/UserPortalNavigation.properties' file, add

Code Block

	xml
	xml


menu.section.myMenu=My Menu
menu.myPage=My Page

Now you can see these changes in the picture below:

Image Added

In '/sipXconfig/web/context/WEB-INF/user_portal/' create three files:

MyUserPage.page

Code Block

	xml
	xml


<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE page-specification PUBLIC "-//Apache Software Foundation//Tapestry Specification 4.0//EN" "http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">
<page-specification class="org.sipfoundry.sipxconfig.site.user_portal.MyUserPage"/>

MyUserPage.html

Code Block

	xml
	xml


<div jwcid="@common/Border" restricted="false" borderTitle="ognl:borderTitle">
  <span jwcid="@user/UserNavigation" bean="ognl:user" renderCondition="ognl:userSession.admin"/>
  <span jwcid="@common/ErrorMsg"/>
  <span jwcid="@common/QuickHelp" value="message:quick.help" />
  <form jwcid="myUserPageForm@Form" id="myUserPageForm">
    <span key="label.user">User:</span>&nbsp;
    <span jwcid="@Insert" value="ognl:user.userName"/>
  </form>
</div>

MyUserPage.properties

Code Block

	xml
	xml


title=My title user page
quick.help=Insert quick help here
label.user=User

Create also MyUserPage.java class, under /sipXconfig/web/src/org/sipfoundry/sipxconfig/site/user_portal/ package.

Code Block

	java
	java


public abstract class MyUserPage extends UserBasePage {

    @Override
    public void pageBeginRender(PageEvent event) {
        super.pageBeginRender(event);
    }
}

Note that all pages from user portal must extend UserBasePage class.

Now MyUserPageTestUi test will pass and changes can be seen below: Image Added

2. Add tabs for this page

Modify MyUserPageTestUi.java test class:

Code Block

	java
	java


    public void testDisplay() {
        SiteTestHelper.assertNoException(tester);
        SiteTestHelper.assertNoUserError(tester);
        assertLinkPresent("link:first");
        assertLinkPresent("link:second");
    }

Re-run test: ant test-all -Dtest.name=MyUserPage

junit Test org.sipfoundry.sipxconfig.site.user_portal.MyUserPageTestUi FAILED
...................................
concat testcase: MyUserPageTestUi
concat junit.framework.AssertionFailedErrorjunit.framework.AssertionFailedError: Unable to find link with id first

We will modify previously created files as follows:

MyUserPage.html

Code Block

	xml
	xml


<div jwcid="@common/Border" restricted="false" borderTitle="ognl:borderTitle">
  <span jwcid="@common/TabNavigation" tabNames="ognl:{'first', 'second'}" selectedTab="ognl:tab"/>
  <span jwcid="@common/ErrorMsg"/>
  <div id="settings-content">
    <span jwcid="@RenderBlock" block="ognl:components.get(tab + 'Tab')" />
  </div>
</div>
<div jwcid="firstTab@Block">
  <span jwcid="@common/QuickHelp" value="message:quick.help.firstTab" />
  <form jwcid="firstForm@Form" id="firstForm">
    <span key="label.user">User:</span>&nbsp;
    <span jwcid="@Insert" value="ognl:user.userName"/>
  </form>
</div>
<div jwcid="secondTab@Block">
  <span jwcid="@common/QuickHelp" value="message:quick.help.secondTab" />
  <form jwcid="secondForm@Form" id="secondForm">
    <span key="label.user">User:</span>&nbsp;
    <span jwcid="@Insert" value="ognl:user.userName"/>
  </form>
</div>

MyUserPage.properties

Code Block

	xml
	xml


title=My title user page
label.user=User
tab.first=First tab
tab.second=Second tab
quick.help.firstTab=TBD 1
quick.help.secondTab=TBD 2

MyUserPage.java

Code Block

	java
	java


package org.sipfoundry.sipxconfig.site.admin.mypackage;

public abstract class MyPage extends SipxBasePage {

    @Bean
    public abstract SipxValidationDelegate getValidator();

    @Persist
    @InitialValue("literal:first")
    public abstract String getTab();

    public void pageBeginRender(PageEvent event) {
        if (!TapestryUtils.isValid(this)) {
            return;
        }
    }
}

Now MyUserPageTestUi test will pass and changes can be seen below: Image Added

Versions Compared

Old Version 1

New Version Current

Key

Notes

Intro

I Admin portal

1. Add a new menu (MyMenu) and a new entry (MyPage) to the new page

a. Add a test for the new menu and the new page

b. Create the menu entry and the page

2. Add tabs for this page

a. Modify the unit test

b. Add the tabs

II User portal

1. Add a new entry to the new page (MyUserPage)

2. Add tabs for this page

Page Comparison

Versions Compared

Old Version 1

New Version Current

Key

Notes

Intro

I Admin portal

1. Add a new menu (MyMenu) and a new entry (MyPage) to the new page

a. Add a test for the new menu and the new page

b. Create the menu entry and the page

2. Add tabs for this page

a. Modify the unit test

b. Add the tabs

II User portal

1. Add a new entry to the new page (MyUserPage)

2. Add tabs for this page