Learning XPages Part 18 : Building The Second XPage
Tags : Lotus Domino XPages
Bookmark :
At this stage in our application development we have created a fairly nice looking homepage for our phonebook. When you load up the phonebook in your web browser you see the OneUI layout, a menu on the left of the screen listing all the locations and in the main part of the screen a table listing all the locations with their main phone number and main fax numbers. While it looks nice it doesn't do anything yet, there is nothing to click on to get more details and over the next few sections in the Learning XPages blog series we will create a new XPage and link it from the homepage.
The next XPage that we are going to create will be designed to list all of the people at a single location. The layout will be based on the OneUI just like the homepage, the only different will be the contents of the main part of the page. We will start the process by going to our Custom Controls view in the Domino Designer and creating a new custom control I have called mine content_Location so that I know what it is going to contain.
In our new blank custom control we will drag in a panel control and then looking at it's properties we add a style class of 'lotusContent'. I have also added some placeholder text into the panel, I like to do this so when I preview pages I can make sure that the content will appear in the correct place. Here's what the source view of my control looks like right now :
Save the custom control and then go to the XPages view in your Domino Designer. Now we could create a brand new blank XPage and then recreate all the divs and drag in custom control for the layout just like we did for the original XPage but why reinvent the wheel. An easier option is to select the 'Home' XPage and duplicate it by doing a copy paste. This will result in a new XPage called 'Copy_of_home' so we need to rename it. In traditional Domino Development you can rename design elements by opening then and looking at the properties of the element or you can edit the name in-place within the design view however with XPages you cannot do it this way, you must select the 'Rename' option from the File menu. the keyboard shortcut for this option is F2, so highlight your new XPage and press F2 to bring up the rename dialog box
Type in your new name and then open the XPage in edit mode. I have given mine the simple name of 'Location'. Once you have opened the XPage you can remove the custom control for content_HomePage and drag in the custom control for content_Location. When your finished your XPage source should look like this
Now you can save your new XPage and preview it in your web browser. You should see the OneUI layout that we created earlier and your new placeholder text appearing in the main content area.
In the next part we'll add another repeat control to the contents_Location custom control.
Bookmark :
At this stage in our application development we have created a fairly nice looking homepage for our phonebook. When you load up the phonebook in your web browser you see the OneUI layout, a menu on the left of the screen listing all the locations and in the main part of the screen a table listing all the locations with their main phone number and main fax numbers. While it looks nice it doesn't do anything yet, there is nothing to click on to get more details and over the next few sections in the Learning XPages blog series we will create a new XPage and link it from the homepage.
The next XPage that we are going to create will be designed to list all of the people at a single location. The layout will be based on the OneUI just like the homepage, the only different will be the contents of the main part of the page. We will start the process by going to our Custom Controls view in the Domino Designer and creating a new custom control I have called mine content_Location so that I know what it is going to contain.
In our new blank custom control we will drag in a panel control and then looking at it's properties we add a style class of 'lotusContent'. I have also added some placeholder text into the panel, I like to do this so when I preview pages I can make sure that the content will appear in the correct place. Here's what the source view of my control looks like right now :
Save the custom control and then go to the XPages view in your Domino Designer. Now we could create a brand new blank XPage and then recreate all the divs and drag in custom control for the layout just like we did for the original XPage but why reinvent the wheel. An easier option is to select the 'Home' XPage and duplicate it by doing a copy paste. This will result in a new XPage called 'Copy_of_home' so we need to rename it. In traditional Domino Development you can rename design elements by opening then and looking at the properties of the element or you can edit the name in-place within the design view however with XPages you cannot do it this way, you must select the 'Rename' option from the File menu. the keyboard shortcut for this option is F2, so highlight your new XPage and press F2 to bring up the rename dialog box
Type in your new name and then open the XPage in edit mode. I have given mine the simple name of 'Location'. Once you have opened the XPage you can remove the custom control for content_HomePage and drag in the custom control for content_Location. When your finished your XPage source should look like this
Now you can save your new XPage and preview it in your web browser. You should see the OneUI layout that we created earlier and your new placeholder text appearing in the main content area.
In the next part we'll add another repeat control to the contents_Location custom control.
