Monday, February 27, 2012

Animation in Xages - Blink the Name and Animate an Element

Animation is not a complex thing in Xpage,

We can change the style of an element continuously.

But seeking in Javascript Tween is not working on Xpages,

So we have an ideal thought of changing the style of an element is one of the nice way...

copy and paste the below code on your Xpage's source...


<xp:view id="page" xmlns:xp="http://www.ibm.com/xsp/core"
createForm="false" style="color:rgb(0,0,160)">


<xp:this.afterPageLoad><![CDATA[#{javascript:sessionScope.val=1}]]></xp:this.afterPageLoad>
<xp:label value="Ramkumar" id="label1"
style="font-weight:bold;font-size:20pt">
</xp:label>

<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var t = 1;
var flag;

function doMove() {

t = t + 1;
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
document.getElementById("#{id:label1}").style.postion = "absolute";
document.getElementById("#{id:label1}").style.left = "50px";
flag = setTimeout(doMove, 1000);

}

else {
document.getElementById("#{id:label1}").style.color = "red";
document.getElementById("#{id:label1}").style.postion = "absolute";
document.getElementById("#{id:label1}").style.left = "100px";
flag = setTimeout(doMove, 1000);
}

}


doMove();





]]></xp:this.script>
</xp:eventHandler>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:span
style="font-weight:bold;color:rgb(255,0,0);font-size:20pt">
</xp:span>
<xp:span
style="font-weight:bold;color:rgb(255,0,0);font-size:20pt;position:absolute;left:20px;top:250px">
</xp:span><xp:span style="font-weight:bold;color:rgb(249,23,215);font-size:20pt;position:absolute;left:20px;top:250px">SAMPLE ANIMATION IN XPAGE, Thing is changing the style
contiuously...
</xp:span>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>

<xp:br></xp:br>
<xp:br></xp:br>
</xp:view>

Get the Run time Input from Server side script in Xpages

Yes We are able to get the run time input box from server side script...

With the use of Java class, It is very very simple...

The following code is used to make the message box in server side javascript in Xpage...

var msg:javax.swing.JOptionPane=new javax.swing.JOptionPane();
var GetMessage=msg.showInputDialog("Server Side InptBox...");
msg.showMessageDialog(null,GetMessage);

Friday, February 17, 2012

$Readers Field

It is one of the Nice functionality in Lotus notes...

Simple Readers and $Readers field's functionality is same.

But the Behavior is making me excited...

For a single field which is changed the all of our document's items.

Create a form.,

Without putting "$Readers" field, Run and save for some times :) ( for some documents we have to get)

Put a field on your form as "$Readers"

Enter @UserName as default value for that field...

Save the document and goto your view, and open the all documents and see you will get amazed... (:))

Before opening the document please refresh all the documents using "@Command([ToolsRefreshAllDocs])"

Wednesday, February 15, 2012

message box in server side javascript

Actually at the starting of our Xpage, Every faced this problem...

How can we get the message box in server side?

Yes there is a lot of solutions for that...

1. We can create a panel as message box and use Hide when formula (css - z-index)...

2. Use Dojo dialog.

3. I tried to make a unique and nice way, Finally I have one great idea.

That is we can create a Jpane for message box single line code,


JOptionPane.showMessageDialog(null,"Message");

We can use documentcontext for calling this agent and we can use this code for validation too...

I think this is one of the nice idea for validating our current document.,

Monday, February 13, 2012

Delay (Sleep) in Xpages

We can make some delay for our execution on our client.

But in web, we don't have sleep function for making our process delayed.,

But we can overcome this issue with the calculation of starting time with our delaying time.,

Here is the code for delaying our execution (Millisecond is a delaying duration)

Which will work in CSJS and SSJS

function delay(millisecond)
{
var startTime = new Date().getTime(); // get the current time
while (new Date().getTime() < startTime + millisecond)
{
}
}

Wednesday, February 1, 2012

Mail in HTML format

I have faced the mail content design problems from starting carrier...

But every time I am used to @ClientType() and manipulate the data depends on notes or web.

And I struggled with HTML content of mail for other mail domains.

I suffered a lot with 8.5.1...

I used NotesRichTextItem ParseHTML...

But Everything had failed in one situation...

use of NotesMIMEEntity class is working fine... But it needs to be declared each and every time,


I got a solution from Mark Leusink blog.,

He is telling nice solution for that.,

Do the following,

Step 1: Add the download file and put this code into your script library as "xpHTMLMail", Script code


Step 2: Add the following code into your button click.,

var mail = new HTMLMail();
mail.setTo( "ramkumar@domain.com" );
mail.setSubject( "Have a nice day!" );
mail.addHTML( "<b style=\"color:red\">Hai Have a Nice Day... <b>" );
mail.send();

For more info, click

Section Animation Effect using dojo.fx library

I am trying to do some animation things in Xpage without using CSS classes.,

And I started searching for that,

I was in end of one project, And it is full of sections and data table.,

So I need to make nice animation effect with an efficient manner for section.,

I found that Mark Leusink blog,

He told with the use of dojo.fx library we can easily make a nice effect for our sections in xage.,

Step 1: You can add as many number of sections what you want...

Step 2: And Select Page -> Resources -> Dojo Module ->Add dojo.fx .

Step 3: Set true for Dojo theme and dojoparseOnLoad property.

Step 4: Add a output script from core controls,

Step 5: And add the following code in that output script's value...

dojo.addOnLoad( function() {

//override init section function
var oldInitSection = XSP.initSectionScript;

XSP.initSectionScript = function x_iss(targetSectionId, sectionId, expand){
oldInitSection.apply( this, arguments ); //call the original function

//rename the existing content div
if (expand) { //only do this for one of the two calls to this function
var section = dojo.byId(sectionId);
var contents = dojo.byId(sectionId + "_contents");

dojo.attr(contents, "id", sectionId + "_contents2"); //rename id attribute of original contents

//create hidden div with old contents id
var div = dojo.create( "div", { id : sectionId + "_contents" } , section );
dojo.style( div, "display", dojo.style( contents, "display") ); //set same style
}
}

//override function to show/hide a section
var oldShowSection = XSP.showSection;

XSP.showSection = function x_ss(sectionId,show) {
oldShowSection.apply( this, arguments ); //call the original function

//show/hide the contents node using a wipeIn/wipeOut effect
if (show) {
dojo.fx.wipeIn( { node : sectionId + "_contents2" } ).play();
} else {
dojo.fx.wipeOut( { node : sectionId + "_contents2" } ).play();
}
}

});

Now you will see the nice animation for your sections...

Thanks Mark Leusink

For more info...

http://www.bleedyellow.com/blogs/m.leusink/entry/add_some_animation_to_your_xpage_sections7?lang=en_us