XPages in Pictures - 03 - First XPage
Category XPages
This is the third post in my series...
The first XPage we’re going to create will be used to display the Company documents.
Create a new XPage and call it “xCompany”.
We want to bind this page to our company form. This is a new concept. In Traditional Notes Development the Form could only ever contain a single document. You can reach into other documents with embedded views, dialog boxes or script but the rule is one document to a Form. In XPages it’s possible to have multiple documents on a single XPage. So we now have to deal with “Binding” which is telling an XPage or even individual “control” what document to work with.
For now we’re going to keep it simple and “Bind” 1 document to 1 XPage.
At the bottom, go to the Data section and click on Add:
The default name will probably be “document1”. Let’s change it to be “companyDoc”. Choose “fCompany” for the form, and the default action can be “Create Document”.
You now have an XPage that’s bound to the company form. On the right hand side, there should be a Data Tab next to the controls tab. This will show you the fields from the company form.
Now, we need to select all the fields. Click on the first item, “address1” then click on “zip” while holding down the shift key. All the fields should be highlighted in blue. Just drag them to the page. It will put all the fields, with labels inside a table.
How cool is that? Try doing that in a Notes Form! There’s even a cool Wizard that can help here. I’ll talk about that later.
For now, we want to change 2 things, the order of the fields, and the text of 2 labels. Let’s do the labels first.
The labels are coming from the actual field names. DDE is automatically capitalized the first letter for you to try and help. How thoughtful! In the Form, there is only a single Address field, but I called it address1 in case we wanted another address field in the future. You will want to change the label to just “Address:”. Do this by clicking directly on the word “Address1”. You should see the properties change at the bottom of DDE. Change the label in the circled area to remove the “1”.
Do the same thing with the label “Companyname”. Rename that to be “Company”.
Your table should now look like this:
Now you want to re-order these rows. There are several ways this can be done. You could do this in the Source view, or even with the outline panel. I’m going to keep it simple here and work with the table like we might on a traditional Notes Form.
Click in the first row of the table to place your cursor. Then click “Table – Add Row Above”. This is available from the menus at the top, or the context menu that you get when you right click.
You should now have this:
Carefully click on the label “Company:” and drag it to the top cell. Do the same with the companyname edit box.
You get this:
Now continue to re-arrange the order until it makes sense to you. Move State up a row, Zip to where state was, and then you can delete the empty row where Zip used to be by using the option “Table – Delete Row”.
You now have a table that looks like this:
Dragging controls from cell to cell in a table isn’t too difficult. But you do need to be careful, as I’ve seen DDE get a little temperamental. Arguably using the Outline view or the Source view might be a better way to do this but I’m trying to keep things simple and familiar.
Now would be a great time to mention something else Domino Designer in Eclipse (DDE) gives us. Multiple levels of Undo!!! So if you are dragging fields around and miss a placement, Edit-Undo (CTRL-Z) is your friend. I don’t know how many levels it stores, but it’s a lot. And guess what? It’s not just for XPages! Multiple Undo works in Forms and other design elements as well!
Ok, now it’s time to save the xCompany XPage and move on. Don’t worry, we'll come back to this soon.
This is the third post in my series...
The first XPage we’re going to create will be used to display the Company documents.
Create a new XPage and call it “xCompany”.
We want to bind this page to our company form. This is a new concept. In Traditional Notes Development the Form could only ever contain a single document. You can reach into other documents with embedded views, dialog boxes or script but the rule is one document to a Form. In XPages it’s possible to have multiple documents on a single XPage. So we now have to deal with “Binding” which is telling an XPage or even individual “control” what document to work with.
For now we’re going to keep it simple and “Bind” 1 document to 1 XPage.
At the bottom, go to the Data section and click on Add:
The default name will probably be “document1”. Let’s change it to be “companyDoc”. Choose “fCompany” for the form, and the default action can be “Create Document”.
You now have an XPage that’s bound to the company form. On the right hand side, there should be a Data Tab next to the controls tab. This will show you the fields from the company form.
Now, we need to select all the fields. Click on the first item, “address1” then click on “zip” while holding down the shift key. All the fields should be highlighted in blue. Just drag them to the page. It will put all the fields, with labels inside a table.
How cool is that? Try doing that in a Notes Form! There’s even a cool Wizard that can help here. I’ll talk about that later.
For now, we want to change 2 things, the order of the fields, and the text of 2 labels. Let’s do the labels first.
The labels are coming from the actual field names. DDE is automatically capitalized the first letter for you to try and help. How thoughtful! In the Form, there is only a single Address field, but I called it address1 in case we wanted another address field in the future. You will want to change the label to just “Address:”. Do this by clicking directly on the word “Address1”. You should see the properties change at the bottom of DDE. Change the label in the circled area to remove the “1”.
Do the same thing with the label “Companyname”. Rename that to be “Company”.
Your table should now look like this:
Now you want to re-order these rows. There are several ways this can be done. You could do this in the Source view, or even with the outline panel. I’m going to keep it simple here and work with the table like we might on a traditional Notes Form.
Click in the first row of the table to place your cursor. Then click “Table – Add Row Above”. This is available from the menus at the top, or the context menu that you get when you right click.
You should now have this:
Carefully click on the label “Company:” and drag it to the top cell. Do the same with the companyname edit box.
You get this:
Now continue to re-arrange the order until it makes sense to you. Move State up a row, Zip to where state was, and then you can delete the empty row where Zip used to be by using the option “Table – Delete Row”.
You now have a table that looks like this:
Dragging controls from cell to cell in a table isn’t too difficult. But you do need to be careful, as I’ve seen DDE get a little temperamental. Arguably using the Outline view or the Source view might be a better way to do this but I’m trying to keep things simple and familiar.
Now would be a great time to mention something else Domino Designer in Eclipse (DDE) gives us. Multiple levels of Undo!!! So if you are dragging fields around and miss a placement, Edit-Undo (CTRL-Z) is your friend. I don’t know how many levels it stores, but it’s a lot. And guess what? It’s not just for XPages! Multiple Undo works in Forms and other design elements as well!
Ok, now it’s time to save the xCompany XPage and move on. Don’t worry, we'll come back to this soon.
- 
Comments
Posted by Rob McDonagh At 01:14:00 PM On 04/23/2009 | - Website - |
Posted by David Leedy At 10:16:02 AM On 04/24/2009 | - Website - |
I need a tutorial like this to start. Thanks.
Posted by Josep Alemany At 05:34:09 AM On 04/24/2009 | - Website - |
Posted by David Leedy At 07:30:59 PM On 04/23/2009 | - Website - |
Posted by Phil P At 04:22:05 AM On 04/24/2009 | - Website - |
Posted by Brett At 06:16:01 PM On 07/13/2009 | - Website - |
Posted by Edward At 02:43:58 AM On 12/17/2009 | - Website - |
Posted by Edwin At 01:55:31 AM On 01/18/2010 | - Website - |
Thanks !
Posted by Balaji Balasundaram At 10:27:56 PM On 04/18/2010 | - Website - |
Posted by Rimki At 07:17:06 AM On 05/24/2010 | - Website - |
Posted by alex At 05:07:25 AM On 07/06/2010 | - Website - |
Posted by James At 07:59:37 AM On 07/23/2010 | - Website - |