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.

TDD is an iterative software development process where you first write the test with the idea that it must fail. See http://en.wikipedia.org/wiki/Test-driven_development for more information.

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):

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:

	<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:

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

Now you can see these changes in the picture below:

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

MyPage.page

<?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

<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

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

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:

2. Add tabs for this page

a. Modify the unit test

MyPageTestUi.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

<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

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

MyPage.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:

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):

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:

<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

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

Now you can see these changes in the picture below:

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

MyUserPage.page

<?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

<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

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.

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:

2. Add tabs for this page

Modify MyUserPageTestUi.java test class:

    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

<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

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

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:

Adding simple page in sipXconfig

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