Lab 06 Themes-JavaScript-NotesAgents.pdf

7/29/2019 Lab 06 Themes-JavaScript-NotesAgents.pdf

1/18

Domino's XPages Workshop

Lab Manual

Lab 6

Advanced Concepts Themes, JavaScript,

& Notes Agents

COPYRIGHT IBM CORPORATION 2010. ALL RIGHTS RESERVED. LAB 6 IBM ISV & DEVELOPER RELATIONS.

Page 1 of 18


2/18

Introduction:

Now that your Profiles XPages application is pretty much completed, you will next learn about themes,

javascript, and Notes Agents. You will learn about Themes and visual customization in the first section of

this lab. You will learn how to use a combination of client and server side JavaScript in the second

section of this lab. You will learn how to call a Notes agent from xPages and hand over the document forprocessing in the last section of this lab.

Description:

This lab introduces the themes, JavaScript, and Notes Agent concepts. In this lab, you first will explore

the Themes used in the discussion template and after that you will create a new Theme for use with your

application. Then you will perform two tasks for adding Java Script: 1) Before a server side action is

performed you execute a client side script that determines if that server-side script should execute at all.

2) In a client side script you want to use server side script constructs. Lastly, use your scrapbook

database. Create one form with 3 fields: color, shape (editable, text), statement (text, computed when

composed, formula -> empty string), create a view to show those documents. Put both onto a single

xpage and make an agent process the document when saved in xPages.

Objective:

At the end of the lab, you should be able to:

Know what themes are and how to apply them to your XPages applications

Know the difference between Client side and Server side JavaScript

Understand how to use Notes Agents

Procedure:

SECTION 1: LEARNABOUT THEMESFOR XPAGES

In this section, you will learn about Themes and visual customization. You first willexplore the Themes used in the discussion template and after that you will createa new Theme for use with your application.


Page 2 of 18


3/18

Step 1 Create a New Application based on the discussion template.

Step 2 Set the access control of the database to allow foranonymous access (otherwise you can'tpreview stuff without a server).


Page 3 of 18


4/18

Step 3 Preview the database in the Notes Client and check out the functionality.

Step 4 With the database open in Designer, change the theme in the Application Properties:


Page 4 of 18


5/18

Step 5 Save the changes. Preview the database in the Notes Client again and check out thechanges to the theme by applying the Tux theme to your application.

Step 6 Open the tux theme in the Designer and have a look inside.


Page 5 of 18


6/18

Step 7 Modify this theme for your own application (demo discussion). Scroll to the end of the file andadd this code under the comment for:

InputField.EditBox

style;height:20px;font-size:18px;

NOTE: This piece of code will change the height of the edit/input boxes and alsothe font size for the text that goes in them. Making it easier to read on higherresolution monitors.

Step 8 Modify the tag (at the top of the file) to be:


Page 6 of 18


7/18

Step 9 Save the changes. Preview the changes to the theme within the Notes Client. You'll have tocreate a new topicdocument in order to see an edit/input box.


Page 7 of 18


8/18

Things to Explore: 1) Themes can extend other themes. There can be serverwide themes or database specific themes. Themes can use JavaScript todetermine settings (as can be seen in the Discussion template themes).

2) You also can add code to switch a theme on the fly:

var curID = context.getThemeId();var newID = (curID == "webstandard") ? "oneui" : "webstandard";context.setSessionProperty("xsp.theme", newID)

Further Readings:

Domino Designer help

SECTION 2: UTILIZEACOMBINATIONOF CLIENTAND SERVERSIDE JAVASCRIPT

In this section, you will learn how to use a combination of client and server sideJavaScript. There are two tasks: 1) Before a server side action is performed youexecute a client side script that determines if that server-side script shouldexecute at all. 2) In a client side script you want to use server side scriptconstructs.

Step 1 Open the profileForm custom control.

Step 2 Navigate to the link control inside the friends repeat control that contains the Removecommand. Your server side code should look like that:


Page 8 of 18


9/18

Step 3 Click on the Client tab, select the Script Editoroption and enter the following formula:

if (confirm(Are you sure to remove that friend?\n(You always can talkabout it))) {return true;

} else {return false;}

Step 4 Preview the application within a Browserand test the new client check.

Step 5 Create a New XPage in your scrapbook database, name it test.

Step 6 Create a button control with the following server side code:

sessionScope.myVariable = Server Code test;

Step 7 Create two more button controls to test the following client side JavaScript Code:

tmp = #{javascript:@DbName()}; alert(tmp);

tmp = #{sessionScope.myVariable}; alert(tmp);

NOTE: The second line of code must be created as a Client > Simple Action > Execute

Client Script.


Page 9 of 18


10/18

Step 8 Save all of the changes you just made.

Step 9 Preview the test XPage within the Browserto test the code's functionality.

Things to Explore: 1) What happens if you use ${...} instead of #{...} foryour macro inclusion?

Further Readings:

http://www.jmackey.net (Category Domino 8.5 XPages)

http://particletree.com/features/a-guide-to-unobtrusive-javascript-validation/

http://ajaxian.com/archives/fvalidator-unobtrusive-javascript-tool-for-easy-handling- form-validation


Page 10 of 18
http://www.jmackey.net/http://particletree.com/features/a-guide-to-unobtrusive-javascript-validation/http://ajaxian.com/archives/fvalidator-unobtrusive-javascript-tool-for-easy-handling-form-validationhttp://ajaxian.com/archives/fvalidator-unobtrusive-javascript-tool-for-easy-handling-form-validationhttp://particletree.com/features/a-guide-to-unobtrusive-javascript-validation/http://ajaxian.com/archives/fvalidator-unobtrusive-javascript-tool-for-easy-handling-form-validationhttp://ajaxian.com/archives/fvalidator-unobtrusive-javascript-tool-for-easy-handling-form-validationhttp://ajaxian.com/archives/fvalidator-unobtrusive-javascript-tool-for-easy-handling-form-validationhttp://www.jmackey.net/


11/18

SECTION 3: CREATEA NOTES AGENTUSING LOTUSSCRIPTFOR XPAGES

In this section, you will learn how to call a Notes agent from xPages and hand overthe document for processing. Use your scrapbook database. Create one form with3 fields: color, shape (editable, text), statement (text, computed when composed,formula -> empty string), create a view to show those documents. Put both onto asingle xpage and make an agent process the document when saved in xPages.

Step 1 Create a NewForm and name it AgentDemo. Add3 fields:- color (text, editable)- shape (text, editable)- statement (text, computed when composed)

Step 2 Select the statement field and enter the formula of an empty string, .

Step 3 Create a New View named AgentDemos with 3 columns to show color, shape, &statement. Use this view selection formula:

SELECT (Form = AgentDemo)


Page 11 of 18


12/18

Step 4 Create a New XPage named AgentSample and add Edit Box fields forcolorand shape.Below those, add a button to save the form. And below that add a view to see the existingdocument. (Don't forget the data binding!) It should look similar to this (feel free to make it

pretty):

Step 5 In the button, add a simple action to Document > Save Document.


Page 12 of 18


13/18

Step 6 Save the changes you made. Preview yourAgentSample XPage within both the Browserand Notes Client to test the form, view, & page. It will create new entries with an emptystatement column (not that this example makes any business sense, that's why it is in yourscrapbook).

Step 7 Locate the data events of the XPage (near the root) and expand the events linked to thedocument:


Page 13 of 18


14/18

Step 8 Add the following code to the postSaveDocumentdata event:

ag = database.getAgent("agFromXpage");noteid = agSampleDoc.getDocument().getNoteID();ag.run(noteid);

NOTE: The name of the document (ie: agSampleDoc), comes from the databinding options that you created. The document name should be the same asthe data source name used.

Step 9 Create a New LotusScript Agent, call it agFromXpage.


Page 14 of 18


15/18

Step 10 Add the following code (again not too useful, but does create a statement field out of thecolor and shape fields entered via form):

Sub Initialize

Dim db As NotesDatabase

Dim doc As NotesDocumentDim s As New NotesSession

Dim ag As NotesAgent

Dim noteid As String

Set db = s.CurrentDatabase

Set ag = s.CurrentAgent

noteid = ag.ParameterDocID

Dim statement As String

Set doc = db.GetDocumentByID(noteid)

If doc Is Nothing Then

Print "Document not found"

Exit Sub

End IfIf doc.color(0) ="" Or doc.shape(0) = "" Then

Statement = "Half baken data entry, too bad!"

Else

Statement = "You choose " + doc.color(0) + " and "+ doc.shape(0)

End If

Call doc.ReplaceItemValue("statement",Statement)

Call doc.Save(True,True)

End Sub

Important remark here:In a classic WebQuerySave agent a handle to the current document is obtained usingNotesSession.DocumentContext. That handle returns the NotesDocument after it has been

processed by the server BEFORE it hits the disk. You can useNotesDocument.SaveOptions = 0 to prevent a save.In xPages currently you hand over a NodeID (not a universal-ID!) to the agent and theagent code needs to use NotesSession.currentAgent.ParameterDocID to get the ID of thedocument and retrieve it. The document will be in it's saved state (so if you call an agentother than from the PostSave event you will have an OLD copy of the data to work on(which can be useful too).In a WebQuerySave agent Print statements are sent back to the browser. Currently thexPages implementation doesn't support this, so you might need to write return informationinto a field in the document, so xPages can pick them up from there.


Page 15 of 18


16/18

Step 11 Under the Properties for the new agent, make sure the RuntimeTarget is set to None.

Step 12 Save all of your changes.


Page 16 of 18


17/18

Step 13 Preview your updated AgentSample XPage within both the Browserand Notes Client to testthe form, view, & page. Notice how the Statementfield now gets filled in, thanks to theLotusScript code.

Things to Explore: 1) Use an auxiliary document to transport values to/froman agent.

2) Checkout the difference between run and runOnServer.

3) Let your agent call a web service?


Page 17 of 18


18/18

Summary:

Congratulations! You have completed this overview lab of XPages.

In this lab, you completed the following procedures:

Learned about Themes within XPages

Utilized both client and server side JavaScript

Created a Notes Agent using LotusScript for use within the XPages app


Page 18 of 18

Date post:	03-Apr-2018
Category:	Documents
Upload:	avadh-kumar
View:	222 times
Download:	0 times

Lab 06 Themes-JavaScript-NotesAgents.pdf

Documents