10/13/2009

XPages Webinar Reminder and correction.

Category XPages
Just a reminder in case anyone's interested.  This Thursday at 12:00 NOON EST I'll be giving an introduction session on XPages for Lotus Education Online.  This session will repeat on Wednesday the 21st at 8:00 AM EST.  This time is different then what I said in the screencast!  I had mentioned 8 PM EST.  It's actually at 8 AM EST.  There was a small mixup there.  

I've got a couple more Notes In Nine shows lined up for once I get past the webinars and hopefully I'll be back on iTunes really soon.

Thanks!

10/09/2009

Notes In Nine - 007 - A License to TypeAhead

Category XPages
I've published the 7th episode of Notes In Nine.  In this show I talk about XPages built in capability to easily add a Type Ahead to your field.  I demo how to deal with the 64k Limit and also the potential pitfalls of Full vs. Partial Mode.

As I mentioned in the show, a big thanks to Mark Hughes who posted a great blog article here and also Paul Hannan and Maire Kehoe who are XPage XPerts from IBM!!

Notes In Nine - 007

Also a big shoutout to my buddy Chris Toohey who actually beat me in blogging about this!  Last night when I finished the show I uploaded it to YouTube and hit the sack.  Chris Toohey doesn't sleep, he just goes into power saving mode.

UPDATE:
This was meant to go out Thursday - but I broke my feed. Whoops!  

10/05/2009

Announcing new XPages Webinar

Category XPages
I've teamed up with Lotus Education Online to create a new Webinar on XPages.  I call it:

XPages: Notes Development meets Web 2.0.

If you haven't seen XPages, or you are working in XPages but have yet to establish a comfort zone, then this webinar is geared for you!  

I'm going to cover the What, Why's and Hows of XPages that you need to know to get started.

The session is currently scheduled twice:

Thursday October 15th at 12:00 Noon EST.
Wednesday October 21st at 7:00 pm EST.

I'm approaching this like a live version of my screencast, "Notes In Nine". So if you like that, then hopefully you'll like the webinar.

09/22/2009

XPages with the Blueprint CSS Framework Demo file

Category XPages
Below is the demo file that I used in the last episode of Notes In Nine.

I received a couple of questions so hopefully the file will help.  I intentionally tried to focus a little more on the "What can you do?" and "Why would you want to?" rather then "How do I make this work?"  I couldn't really do both the "Why" and the "How" in a single show.  It is only Nine minutes after all.  :)

Anyway, getting started with Blueprint isn't that difficult once you have it setup and hopefully the demo file will help with that.  If there's interest I can always do a followup show that goes through creating the navigation from scratch.

Thanks for the all the interest!

Download File xblueprint.nsf

09/17/2009

Notes In Nine - 006 - A blueprint for XPages

Category Notes In Nine XPages
I've published the 6th episode of Notes In Nine.  After not talking about XPages at all in the last show I just had to dig back in.  In this show I talk about using XPages with a CSS Framework.

My intention is to give a little over view of how to get started using Blueprint in XPages.

Why does it matter?  If you're a Notes Client person getting started in XPages/Web stuff, you're going to need to learn CSS on top of other things.  Blueprint allows you to place items on your page easily.  I really like it.  If you want to see a good example of Blueprint in action check out IQJam.net.

The link to the show is:

Notes In Nine - 006

P.S. One day I'll find time to get back on iTunes.

P.P.S Yes I need music for the Domino video part.  I'm working on that as well.  ;)

07/29/2009

XPages in Pictures - 9 - Show Single Category

Category XPages
The next feature to add to the application is a way to display all contacts from the current  company page.  The key difference here is that you want to filter the contacts to only show the contacts for the particular company that you’re currently viewing.  There are some new ways to do this in Xpages, like a repeat control, but here I’m going to use a view control again. This will work just like the Notes client when a view is embedded on a form set to show single category.

Open the xCompany Page in Designer.  Add a Carriage Return at the bottom of the page to give you some space and then find the View control in the Container Controls panel and drag it to the page.  In the box that appears choose “vContacts” as the Data Source.  Leave all the columns selected and click on OK.


A picture named M2


Now, if you preview this changes, you’ll see the complete “vContacts” view on your page.  Now you need to filter it.  To filter, you’re going to use the scoped variable “companyCode” that was created in the afterPageLoad event of the “xCompany” page.

To retrieve the Session Scope Variable use the get method:

sessionScope.get(variableName)

If you were working with a viewScope then it would be:
viewScope.get(variableName)

So to retrieve the companyCode variable, the syntact will be?:

sessionScope.get(“companyCode”)

The trick is going to be finding where to put this.

Select the entire view control on your page.  This is done by clicking on the outside box until it looks like:

A picture named M3

Now, in the properties tab, click on “All Properties and drill down to data\data and find categoryFilter.  Remember that even though this is a simple statement, you can not just type it in the box.  You would only do that for hard coded values.  Click on the diamond to the right and choose “Compute Value”.  In the script editor that appears enter your code:
sessionScope.get(“companyCode”)

Click ok and you should see this:
A picture named M4

Save the page.  And open your application starting with the “xMain” page and open a company.  You should now see only the contacts for the company you choose.

A picture named M5


07/29/2009

Notes in Nine - 004 - Can't we all get along with our Scoped Variables

Category XPages
In this edition of Notes in Nine I talk a little more about Scoped Variables.  In addition to that I give an example that is the XPage equivalent of a very common UI component for a Notes Client Developer:
 
A form with an Embedded View on it that uses Show single Category.

A little while back I was publishing my own little series of Blog Posts inspired by Declan's great Learning XPages series.  While I got away from that for a while I just posted the ninth article in that series. The demo in this episode is really a video walk through of this ninth article.

This episode is slightly longer then the last couple of shows.  I actually broke my 10 minute limit a couple of times and had to "re-shoot".  I think I ended up going and talking a little too fast in this one to squeeze everything in and it comes off a little rushed.  I gave some thought to scapping it and starting all over, but I'm not sure when I'll have time to do another.  Due to traveling next week it'll probably be 2 weeks or so until the next show.  In the end I decided to post what I had because I really wanted to post a contribution today.

Speaking of traveling, next week I'll be at IamLUG then I'm off to Wildwood NJ.  I'm really looking forward to getting away from the day job for a week.

The link to the YouTube video is here.  Please note that YouTube likely won't have the High defination processing done until 9:00AM EST.

Thanks so much for all the interest and feedback!

06/18/2009

Getting the value of a Radio Button in Xpages.

Category Xpages
This is a long story for a relatively short answer.  Sorry about that...

Recently I was working on a test XPage application and wanted to have a page that would let the users fill out some fields and then it would create a document in the "backend" using server side Javascript and send the document to a team HelpDesk e-mail account. I would not be saving this document in the application.

On this page I wanted to have a simple Radio button with the choices Low, Medium, and High.  The user would choose the level of their problem and I'd include that in the e-mail.  However, I hadn't used Radio Buttons up to that point.  Especially in the case that I wasn't really saving the XPage.  I only wanted to get the value to the backend document that would be mailed.

I had some problems trying to figure out how to get the value.  You see, when you're dealing with individual radio buttons on an XPage, each option is it's own component and when you drop them on a page each has it's own unique name. This is not like the Notes Client where you have one Field of the type "Radio" with multiple options inside it.  Hmmm..  I know in traditional Javascript you need to iterate through a control looking for the checked property.  But what do you do here?

I first tried to get the value of the selected button by trying to do a getComponent on the group name.  

var choice = getComponent("groupName")

Well that didn't get me to far.  So I shouted out on twitter and got some good suggestions.  The best might have been to ask Matt "Mr. XPages" White himself, but really this has to be solvable by us mere mortals. Paul Hannan noticed that I didn't have "getValue" at the end of my statement.  Whoops.  I do keep forgetting that so I gave this a try:

var choice - getComponent("groupName").getValue()

Still no Joy.  Declan suggesting I look at the Domino Designer Wiki which I did go back to.  There's some articles on Radio Buttons but they seem to be talking about a Control in the Other Controls section called a Radio Group.  I still don't know what that is.  Something to do with not having hard coded values but looking them up from a view I think.  That didn't seem right so I moved on.

Back to playing with my XPage I noticed that even though I didn't really want this page bound to a Notes Form, it was telling me to.  These radio buttons wanted to be bound to something.  Ok who am I to argue with DDE? So I created a form and bound the 3 radio buttons in the group to the same field.

That's when something really interesting happened!  I tried this code:

var choice1 = getComponent("radio1").getValue();
var choice2 = getComponent("radio2").getValue();
var choice3 = getComponent("radio3").getValue();

And guess what?  Each variable contained the SAME value.  So to get the Value of a radio button in XPages, just get the value of ANY of the controls in a Radio Group!  

How cool is that?  No looping to find a value like in normal JavaScript.


XPages are like wives.  They can be frustrating at times, but at the end of the day, you're glad to be with them.

 

06/08/2009

XPages in Pictures - 08 - Return to Company

Category XPages
This is the 8th Post in the “XPages in Pictures” series.

Ok.  Now it’s time to tell the xContact page to return to the parent company when you save a contact.

Open up the xContact Page.  Click on the save button and remove the Simple Action “Save Data Sources”.  This action allows us to save all the datasources that are bound to the page and gives us a parameter on which page to open next.  We’re going to instead use 2 simple actions.  The first to simple save the data and another one to open our return page.

Add a new action that uses the category of “Document”.  The Action is “Save Document”.  

A picture named M2

This is a simple save action.  There is no return page built in.  Click ok to add this to your list of Actions.  It will be indented under “Simple Actions Root”.

Now add another simple action.  Go back to the “Basic” category and choose “Open Page” for the Action.  The name of the page is “xCompany”.  The Target document is “Edit Document” and the document ID is where you’re going to reference your sessionScoped variable.

The Document ID box is expecting a specific document id.  You can’t type your code directly in the box.  You need to compute the ID.  Click on the diamond next to the Document ID box and choose “Compute Value”

When in the script edit enter the following code:

sessionScope.get("companyCode")

Click Ok.  The Action box should look like this:
A picture named M3


Click ok to add the Action, and you now have an Actions Group.
A picture named M4

This is the equivalent to having a “Save and Close” action in the Notes client.  The document will be saved, and the browser will open the xCompany page, in Edit mode, finding the company document that matched the UNID variable that’s stored in the scoped variable.

Save your page.  Go into a company, create a contact and save it.  You should now be returning to the correct company after the save!

05/18/2009

XPages in Pictures - 07 - Session Scope Variables

Category XPages
This is the 7th post of the “XPages in Pictures” Series.

Now it’s time to address the fact that saving the contacts returns us to “xMain” instead of the company page that we were on when we created it.

In the last article, you saw that when you created a response document, you passed the current companies noteid field into the simple action as the Parent ID.  If you could only store the noteid somewhere, you could then use it in the Save button of the contact page to return us to the correct company.  But how do you store a variable that spans different XPages?

Scoped Variables

It turns out there’s a way to store this information in something called “Scoped Variables”.  There are different types of scoped Variables.  I’m going to talk about 2 that are of interest right now.
1- viewScope                The variable lives for the duration of the page
2- sessionScope        The variable lives for the duration of the user session.

Since you want to access a variable between pages lets focus on sessionScope.  You’ll create a variable that can be accessed from anywhere.  Here’s how:

Open the page “xCompany”.  Go to the Events tab of the XPage and click on “afterPageLoad”.

A picture named M2

This event will run after the page loads and will let you get the documents’ “universal id” from the backend document object and store that in a sessionScope variable.  Once that happens it will be available from any page.

Rather then using a Simple Action, like you’ve done before, now you’re going to have to enter JavaScript that will run on the server.  Select “Script Editor in the radio button.  Now you can start to enter JavaScript in the box, or click on the “Open Script Editor” button, to bring up the editor.

A picture named M3

Enter the following code:

//Get the document object in JavaScript
var doc:NotesDocument = companyDoc.getDocument();

//Create a variable with the Universal ID
var sID = doc.getUniversalID();

// Assign the variable sID to a Session Scope Variable called "companyCode"
sessionScope.put("companyCode",sID);

Your screen should look like this:
A picture named M4

Now that you’re starting to enter JavaScript code, I should mention debugging.  At the time of this writing, Notes DDE version 8.5, debugging tools and techniques seems to be lacking.  My suggestion is to save often and test in the web browser often.  (This is another way of saying that I haven’t figured out a great debugging approach yet.)

Testing…

You now have a variable that will be available for any XPage.  Before putting this to a practical use, make sure you’re getting a good value.  You can test this by using an Edit Box Control that’s bound not to a field on a Notes Document, but to the sessionScoped Variable itself.

From your Core Controls List, drag a Label to the page.  Then drag and Edit Box next to it.

A picture named M5


The resulting page should look like this:
A picture named M6
Now click on the Label control and change the “Label” property to be “UNID:”  Then click on the Edit box control and go to the Data tab.  This is where you control the binding.

A picture named M7

In the beginning when you created the xCompany and xContact Page, you dragged data fields to the XPage and a nice table of field names and controls was created and the binding was automatically done for you.  Here is where you can control the binding of individual fields.  Maybe you don’t want a table, or you want to replace an Edit Box Control with a Multiline Edit Box.  You can choose between Simple, Javascript, and Advanced data binding.

In this instance, you want to bind to the scoped variable “companyCode”.  This variable is created and updated with the page xCompany loads. To do this, you want to bind data using the “Advanced” option.  Choose “Scoped Variable” next to “Use:” and select “Session Scope” and enter the variable name “companyCode”.

A picture named M8
Note: This screen shot looks incorrect as I review this post. The variable name should be "companyCode".  XPages is very case sensitive so be careful.  I'll try and update the screenshot soon.



Finally, go back to the Edit box properties and bake the control “Read Only”.  Save the page and launch the application in your browser.  Click on any company.  You should now see the companies’ UNID..
000000000000000000000000000000000000000000000000
A picture named M9

Click on different companies.  Notice how the UNID on the page will change.  This variable is getting updated every time you open a company!

Pretty Cool huh?

05/06/2009

XPages in Pictures - 06 - Creating Response Documents

Category XPages
This is the sixth article in the XPages in Pictures series.

At this point you have a small XPages application that allows you to track Company names and addresses.  This app starts in a page that lets you view any companies that have already been created.  There’s a “New Company” button to create additional companies.  Inside the list of companies, you can click on the name of the company to open it up and edit it.  Saving any changes brings you back to the Main page.

On a technical side, you’ve seen how to create an XPage and bind it to a form.  You’ve seen how to add fields to the page and you’ve created a button that saved the data source and returned the user to a specific page.  You’ve gone deep into the properties of the XPage and found and turned in “computeWithForm”.

Not too shabby really. Especially for so little coding so far. Once you go through this process the first time, the next time through should be much quicker.

Adding Contacts

Ok.  Now’s the time to start integrating contacts into our application. The goal is to allow the user to enter as many contacts as they want for a particular company. They will open any company and see a “New Contact” button. They will also see a list of existing contacts on the company screen.

Let’s get started.

Create a new XPage and call it “xContact”.
 
Bind the page to the form “fContact”.  Name the Domino Document “contactDoc”.
A picture named M2

Now, just like you did for the company document, add all the fields from the Data panel to the page.  Like, before, select them all and just drop them on the page.  Rearrange the table order until it looks like this:

A picture named M3
Now add a button to the page and change the label to be “Save”.  Go to the onclick Mouse event and click on “Add Action”.  Choose “Save Data Sources” and have the next page be xMain.

A picture named M4

Note: Normally you would would not want to return to the xMain page on saving a contact. You’d prefer to return to the company that you were in.  We’ll address this in a just a little bit.

Save your xContact page and open up the xCompany Page.

Drag a new button to the page.  Call this “New Contact”.  Like before, go to the onclick event and Add a Simple Action.

This time, you’re not going to use the “Basic” category.  Click on the dropdown for Category and change it to “Document.”  Change the Action to be “Create Response Document”. The name of the page to open is “xContact”.

The screen should look like this.
A picture named M5
 

Notice that there’s a warning message.  The Parent ID is required when creating response documents.

To give it a parent ID we’re going to use a little bit of JavaScript.  Click on the diamond at the right of the Parent ID and choose “Compute value” to bring up the Script Editor.

A picture named M6


The script editor should look like this:
A picture named M7


The language we’re going to be using is JavaScript.  Specifically Server Side Javascript; this gives you a lot of shortcuts.

If you think back to when we created an XPage and bound a document to it, the default name is usually “document1” and in the case of the “xCompany” page we changed that to “companyDoc”.  Here is where you start to see this change getting used. Look carefully on the left hand side and you will see “companyDoc”. Expand “companyDoc” and take a look at the methods.

A picture named M8

These methods are very similar to the backend objects that are used in LotusScript programming!  

Double click on “getNoteID()” to add this to the script window.

A picture named M9

That’s all you need.  This will tell XPages to make this contact document a response document of the current company.  The Parent ID is now computed.  Your simple action screen looks like this:
A picture named M10 

Click ok to close the window and then make sure to save the XPage.  Go ahead and create some contacts for different companies.  Ignore the fact that on the save, we’re going back to the main page instead of the company page.  That will get address shortly.

After creating some contacts you should then just verify that they are being created as response documents.  In the Notes Client, open the view “vContacts” to check.

A picture named M11


You’ve now seen how to create documents that are responses to the current document.  We’ll be going deeper into this in the next few articles, working up to the equivalent of a show single category embedded view.

04/28/2009

XPages in Pictures - 05 - Adding a Company View

Category XPages
This is the Fifth article in the XPages in Pictures Series.

In the last article, we created a home page called “xMain” to be the initial page of the application.  It has a “New Company” button on it, but nothing else.  Today you’re going to add a view of all our saved companies to this page.  You’ll also create links to the companies in the view so they can be edited. Finally, you’ll see how to associate a Notes Form with an XPage.

Adding a “Companies View” to the xMain page.

Ok, you’ve created some company documents but now you want to display them. You’re going to use a “View Control” to display the view directly on the “xMain” page.  Open up the “xMain” page and locate the View Control that lives in the Container Controls section.

A picture named M2

Now Drag this onto your page.  You’ll be presented with a popup box.

  A picture named M3

Set the view to “vCompanies” and click OK.  Don’t worry about anything else right now.

Now save and preview xMain in your browser and you have a nice list of any companies you’ve created.  

A picture named M4

Notice how there is already a Pager in the top right corner of the view?  No programming needed!!  In Designer, you can click on the pager control and change the style if needed.  You can even create a custom style.

Adding Links to the View.

Now we want to create links so we can return to the company.  We’ll put them in the first view column.  Click in the name column of the view. Click in the column itself, not the header.

A picture named M5

Then in the properties of that column click on “Show values in this column as links”.

A picture named M6


Now if you were to save this and preview xMain, you’ll see that your view has links for the company names and none of them work.

What we need to do is tell XPages how to open the link.  There are two ways to do this.  The first is in the view control itself.  If you select the view control, by clicking one of the sides in the overall “Box”…

A picture named M7
You’ll be able to get to a property of the view control that let’s you set what XPage to use when opening the document.



A picture named M8

If you were to select “xCompany” here, your links would now work correctly but you’d have to remember to do this in the future if you used additional view controls.  So for now, leave this set to “The document’s default form or page.”

Go into the properties of the traditional Notes Form.  On the second, beanie tab, there’s a new option for displaying an XPage on Web Access.

A picture named M9

Choose xCompany and save the form.

Now go back to your browser and look at xMain again.  Clicking on the linked company name brings up the company document in an XPage.  You can make changes to everything except the computed when composed “Unique” field.  Clicking the save button brings you back to the main page.

In this article we’ve added a View Control to the page and bound it to data.  We’ve taken a column of that view and turned it into links that open the correct company.  Our application now allows use to create, view, save and edit company documents. We even have a pager to assist in navigating the contacts view.

Not a bad start for doing no real coding whatsoever yet.



04/27/2009

XPages in Pictures - 04 - Saving an XPage and Misc.

Category XPages
This is my 4th posting in the “XPages in Pictures” series.  This one is a little on the long side.  In this episode we’re going to create a Home page for the application, add a button to create and save a new company, and even go off on a small tangent to discuss creating a unique number.

Creating a Home Page

First, we want to make a new XPage that will act as a main or “home page”.  This new page will hold a button that will allow us to create new companies as well as how a view that will display a list of any companies that we’ve created.

Create a new XPage called “xMain”.

Unlike what you did with the company page, you’re NOT going to bind the page to any data.  There won’t be any direct fields on this page, at least for now.  All this page will have is a “New Company” button and a View Container Control.  The View Container Control will get bound to view data in order to show the list of Companies.    

First, drag a button from the Core Controls section to the page. Under the Button Properties, change the label to be “New Company”.

Now, go to the Events tab for the button.  There are all sorts of Events available.  For each event we have the option of adding JavaScript Code or selecting one of the many Simple Actions.   Don’t discount the Simple Actions!  Since the properties of Simple Actions can be computed these actions can be very handy.

To create a New Company, you want to add a “Simple Action” that will allow you to create a new company document.  Technically it will open the XPage “xCompany” as a New Document. Click “Add Action”. Change the “name of the page to open” to be “xCompany” and the Target document to be “New Document.”



A picture named M2

 
Test this in your browser.  You should now have a method of creating new companies.  Good work!!!

You might notice that the field “unique” has no value.  Ideally we’d like a unique key in this field.  Also, you probably want a way to SAVE the company document.  Lets look at those two issues now.

Close the xMain page and go back to the xCompany Page.  First let’s create a button to save a new company document.

Saving the Company Document

Drag a button onto your page.  I’ve placed mine underneath the table.  Change the label for the button to be “Save”.  Go to the Events tab.  Add a simple action.  The Category should be Basic and the Action should be Save Data Sources.  For the name of the page to open next, select “xMain”.
A picture named M3

Now you can create a company, save it, and send the user back to the main page.  Now we’re starting to cook with Gas as they say!

Unique Numbers

But what about the Unique field? In the original Notes form, we set it to “computed when composed” with the formula @unique.  This implies that we want to have a unique, unchanging number for future functionality.  Typically the result looks something like this: DLEY-7R4HNY

I’ve found 2 ways to get a unique value in Xpages.  The first is to use the built-in Javascript translation of @unique.  The syntax is @Unique().  To do this, click on the edit box control for “unique”.  Then in the Data Properties, click the little diamond next to Default Value.

A picture named M4


Select Compute Value to get to the script editor.  Enter your formula into the code window.  You can also use the Dropdown under libraries to switch to @Functions to see other @Functions that are available. We’ll be using some of these later.
A picture named M5


Now if you save this page and preview it in your web browser you’re going to get a unique value.  I think!

A picture named M6

What is this value?  I have NO idea.  I’m not sure why it’s not using the format of the traditional @Unique.  I’m not even sure if it can be considered “Unique”.

Ok, so we either don’t like this format or don’t trust it yet.  Let’s populate this field with the normal looking @Unique value.

First, remove the formula for the default value of the unique field.  We won’t be using it after all.

Since we have the formula we want on the Traditional Notes Form.  We can use it by telling the XPage to “computeWithForm”.  

First click somewhere on the XPage itself.  We do not want the focus to be on a control or label.   Then go to the Properties and All Properties section.  You’re looking for data.  Underneath data is another data, and then you should see a dominoDocument.  dominoDocument contains a computeWithForm property.  Click next to it and choose “onload”.  

A picture named M7

This will compute the fields of the XPage against the computed formulas that are embedded in the form.  This is a method of keeping some business logic in the form itself if you’d like.

Save your form and try creating a company.

You should see the normal format for @unique.

A picture named M8

But this field is editble.  Not what you would want for this kind of field.  

Click on the field “unique” and find the properties for Edit Box.  Put a check next to Read-Only to prevent this from being edited.

Well done!  We’re finished working with the Company XPage for the time being.  

I don’t really know if we’re going to need this unique number in the future, but I wanted to have it for the demonstration.

Auto Launching an XPage

Let’s flesh out the application a little more.  We want to set the xMain page to Auto Launch when a user opens up the database on the web.

Click on “Application Properties” in your database.  Remember these are double clicks!

A picture named M9

The second tab is called “Launch”.  In the section for Web Browser Launch, set it to “Open Designated Launch Page” and set the XPage to be “xMain”. Make sure you save the changes.

A picture named M10



Congratulations.  You now have the start of a little application that’s all XPages.  Opening this database in a browser should give you a page with a new company button.  Clicking this button allows you to create a company document.  A uneditable unique number will be automatically assigned and you can fill in the name and address fields and save the company.  By clicking Save you are returned to the main page.  In the next article we’ll create a view on the Main page to display the companies.

04/23/2009

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:
A picture named M2

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

A picture named M3
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.

A picture named M4

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.

A picture named M5


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

A picture named M6

Do the same thing with the label “Companyname”.  Rename that to be “Company”.

Your table should now look like this:
A picture named M7

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:
A picture named M8
Carefully click on the label “Company:” and drag it to the top cell.  Do the same with the companyname edit box.

You get this:
A picture named M9
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:
A picture named M10
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.

04/23/2009

XPages in Pictures - 02 - Forms and Views

Category XPages
Here we go….

I want to make a simple working application using XPages. This will be a small customer tracking application. Nothing fancy. We want to store Companies and Contacts.  Maybe we’ll add additional features later.

I’ll start out by storing companies as main documents and then have contacts as response documents.  Not unlike a typical Notes Application.  I’ll have a primary starting page with a list of companies on it and a button to create a new company.  The Company screen will have a view of all their contacts, just like an embedded view (show single category) in a Notes App.  There might be other ways to present some of this data, but for the time being I’m going to stick with the look and feel of a Notes Client type application.  I want to get some basics down before we start going “outside the box”.

Create a new application called xDemo.nsf.

The first thing to do is to create a Form to hold the company field information.  

XPages seems to replace the need for many of the common Notes Design Elements that we typically use.  Pages, Navigators, Outlines, and Sub-Forms, are not really needed in XPage Development.  But you still need Forms and Views.

Forms are going to be used to define your data.  We’ll use fields like in traditional Forms, but that’s all you’re need on the Form. You won’t need any tables, description or formatting if the application is only going to be viewed from Xpages and not the Notes Rich Client.  The Form will now just define your data.  There will be very little business logic needed in the Form.

Create a new form called “fCompany”.  Create the fields that you see on the screenshot.
A picture named M2

Note:  I’ve already mentioned that the language of choice for XPages is JavaScript.  If you know nothing about JavaScript, and I’m assuming you might now, be aware that JavaScript is CASE SENSISTIVE.  Case matters everywhere.  Even in fieldnames.  So you may want to think about how you create your fieldnames.  You may want to use all lowercase or Camel Case.  


For the field “unique”, make it computed for composed with the formula @unique as the value. I’ll talk more about this later.

A picture named M3

Save the form when you’re done. You now have a Company Form.

Next, create a form to hold the contact information.  Again, this just needs a few fields for our exercise.  This should be set as a “Response” document.  Call the form “fContact”.

A picture named M4

This is very simple so far, just two little forms that you use to define your data structure. You might be used to putting the fields in a table with descriptive labels and other formatting, but since we’re only going to focus on seeing this data through xPages, it’s not necessary to have anything other than the fields on the Form.  If you wanted to use this application in the Notes Client as well, you would just create nicer looking forms.

You’ll need 2 views for the application.  The first view, for companies, should have all the fields from the Form.  The company name should be in the first column and we’ll want to sort that ascending.  The selection formula for the view should be:

SELECT form = "fCompany"

A picture named M5

Call this view “vCompanies” and save it.

The second view will be for contacts.  We’re dealing with response documents here.  So add all the contact fields to the view but the first column will be computed to show the $REF field.  The formula should be:

@text($REF)

Now this column should be categorized which will automatically sort it as well.  Finally we’ll want to go into the view properties and turn off “Show responses in hierarchy.”

A picture named M6

Call this view “vContacts”

For now, that’s going to be it for “Traditional Notes Development”.  You have 2 forms and 2 views.  In the next post you’ll create your first XPage. You’ll learn how to “Bind” data to a Notes Document, add fields to the page and create and manipulate a table.

04/23/2009

XPages in Pictures - 01 - Introduction

Category XPages
To me, trying to learn XPages is like eating Hot Peppers.  It’s fun and exciting, but there’s serious pain involved.

Right now my pain is in learning how to do “simple” things in XPages.

What I intend to do is to start sharing the few things that I’ve learned so far.  Hopefully this helps someone else starting to look into XPages.  This will probably be more on the basic end compared to some of the other examples out there.  It’ll probably be geared for Notes Rich Client developers since that’s primarily what I do.

There are several hurdles in learning XPages; there’s the initial hurdle of learning how to move around in the new Domino Developer for Eclipse (DDE).  That takes some getting used to. There’s also a language switch.  The XPage language of choice is JavaScript, not LotusScript.  However, there is a really nice consolidation price here.  Many of our familiar @Functions and also the Notes Document Object Model has been implemented in JavaScript.  That saves a lot of time, and is like having you’re favorite pillow with you for a long road trip. The only catch is that if you’re just getting started in JavaScript, there’s no book on the language that tells you how to mix JavaScript with the Notes Object model.  You’re on your own for that.  But more and more examples are starting to appear.

For me, the absolute biggest hurdle that I’ve found is that we really need to “Think Different”. You are going to need to change your programming methodology when working with XPages because XPages allow you to do things that would be difficult and time consuming in normal Domino Web Development and down right impossible in traditional Notes Client development.  XPages gives you the concept of scoped variables, which are variables that can stay in memory for different lengths of time. For example, there is a session scope variable that remains resident in memory when the user switches page views.  No need to pass data along, or save data somewhere only to retrieve it again when the user moves to a new web page.

XPages give you the ability to do a dbLookup from inside a view.  Finally, Notes programmers can do the equivalent of a SQL Join.  Try that in the Notes Client!

There is a powerful new concept that uses “Panels” and “Repeat Controls”. This allows you to do many interesting things. One use will be the ability to create a “table” with unlimited rows.  You can allow the user to add rows on demand.  Another interesting use is the ability to display view data, but not have it look like a table.  You can control where the fields where go and then apply CSS Styling.  For example, you might have a view of people, but rather then showing them in a table, you’re displaying each person in multi-line boxes.  Then you could style it and make the “box” look like a business card.

These new tools are very powerful.  The difficulty that I am having in transitioning to XPages is in absorbing the examples that are now available.  We’re starting to get some great examples to look at.  Declan Lynch and John Mackey have a bunch of great examples on their websites. Steve Castledine created the xWiki application on OpenNTF.  The Domino Designer Wiki has over 88 topics on XPages at the time of this writing.  But almost all these examples are all really encompassing.  They are a like full 7 course meal, when what I want is an appetizer sampler.  Before I dive into Repeat Controls I want to first learn how to create and modify documents.  Before I dive into applying styles and themes to a page I want to know how to filter the contents of a view.

I’m primarily a Notes Client developer.  I’ve missed most of traditional Domino Web Development.  It’s not that I didn’t want to work on web apps.  We just don’t do much Domino web work at my company. While that has been a point of personal frustration, in hindsight, XPages makes that not seem to bad anymore.  XPages are just very different that what’s been done up to this point, both in the Client and on the Web.

What I plan to do is create an XPages walk though of building an application, or at least, the shell of an application.  There will be lots of screenshots and maybe some videos.  I’m going to focus on methods and concepts that are going to be familiar with a Notes Client developer. But I’m not going to try not to assume too much knowledge of Notes Development overall.  I think we as a community need a little more focus on basic information to help new developers starting out.

 I don’t know how far I’ll get and maybe I’ll learn something new along the way, but to me it looks like the future to Notes is here, and it’s called XPages.  

Powered By:

Domino BlogSphere
Version 3.0.2