ozinisle: August 2010

Sunday, August 15, 2010

Embedding Video in a Web Page

The following is a sample code that shall help you embed a custom vedio of your choice in a web page.

Note: This code works fine in IE/Fire Fox. Holds good when included in a XPage as well. The same fails when previewed on notes client though... i mean XPages in 8.5.1

The code below shall have two fragments one is <object> tag for IE and <Embed> for Firefox,

Hence you got to specify your video url in two places in the following code.

<object ID="MediaPlayer" WIDTH="400" HEIGHT="300" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..."
TYPE="application/x-oleobject"> <param NAME="FileName" VALUE="http://www.youtube.com/v/bz6BA1heMSI?fs=1&hl=en_US" />
<param name="ShowControls" VALUE="true" />
<param name="ShowStatusBar" value="false" />
<param name="ShowDisplay" VALUE="false" />
<param name="autostart" VALUE="true" />
<embed TYPE="application/x-mplayer2" SRC="http://www.youtube.com/v/bz6BA1heMSI?fs=1&hl=en_US" NAME="MediaPlayer" WIDTH="400" HEIGHT="300" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="1"> </EMBED> </OBJECT>

Thursday, August 5, 2010

Delete Documents from a View - A Simple Generic Function in Lotusscript

Function deleteSelectedDocuments As Boolean

'***********************************************************

'@Purpose : To delete all the selected documents from a view

'@Author : Karthikeyan A

'***********************************************************

'mark the flow of control getting inside the current function

deleteSelectedDocumentsv=False

'declare all variables and objects necessary for further manipulation

Dim session As New NotesSession

Dim workspace As New NotesUIWorkspace

Dim database As NotesDatabase

Dim documentCollection As NotesDocumentCollection

Dim userChoice As Integer

'handle errors in case of abrupt termination

On Error Goto errHandler

'set the handle for the current database

Set database=session.CurrentDatabase

'set the handle for the selected documents

Set documentCollection=database.UnprocessedDocuments

'if no documents are selected then inform the same to the user and exit

If documentCollection.Count=0 Then

Msgbox "You have not selected any documents. Please choose some to delete em",,"No documents selected"

Else

'if user has selected a few documents then ask his confirmation before deleting the same

userChoice=Msgbox ("Do you want to delete " & Cstr(documentCollection.Count) & " document(s)?",64+100, _

"Please confirm...")

'if the user confirms then delete the documents

If userChoice=6 Then

Call documentCollection.RemoveAll(True)

Call workspace.ViewRefresh

End If

'mark the flow of control moving out of the current function

deleteSelectedDocumentsv=True

Exit Function

errHandler:

Print "Error ***" & Error & " occured on line ***" & Cstr(Erl) & "*** with error number ***" & Cstr(Err) & "*** while attempting to delete selected documents"

Msgbox "Error ***" & Error & " occured on line ***" & Cstr(Erl) & "*** with error number ***" & Cstr(Err) & "*** while attempting to delete selected documents"

Exit Function

End Function

Wednesday, August 4, 2010

Dojo2D charts in XPages Part2

In one of my previous posts I had posted about the creation of a simple dojo chart in XPages. Well Here is a more enhanced collection of charts to which that one belonged. Following are screen shots of dojo charts that I have developed using dojo in XPages.

Step1: Create a button to invoke each of the following functions on an xpage.

Step2: Create div tags with the ids as mentioned in the forth coming javascript function

Step3: 150/350 px would be a correct height/width ratio

Step 4: Put the following code in a script library and call them on to the XPage.

makeSimpleLineChart = function(){
var chart1 = new dojox.charting.Chart2D("simplechart");
   chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.render();
};

makeSimpleAreaChart = function(){
var chart1 = new dojox.charting.Chart2D("simplechart");
   chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.addPlot("default", {type: "Areas"});
chart1.render();
};

makeSimpleStackedAreaGraph = function(){
var chart1 = new dojox.charting.Chart2D("simpleStackAreaChart");
   chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.addPlot("default", {type: "StackedAreas", lines: true, areas: true,
   markers: true});
chart1.render();
};

makeSimpleStackedLinesChart = function(){
var chart1 = new dojox.charting.Chart2D("simpleStackedLinesChart");
   chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.addPlot("default", {type: "StackedLines",tension:3,
   shadows: {dx: 2, dy: 2, dw: 2}});
chart1.render();
};

/*********************/
makeSimpleBarChart = function(){
var chart1 = new dojox.charting.Chart2D("simpleBarChart");
   chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.addPlot("default", {type: "Bars", gap: 5});
chart1.render();
};

makeSimpleBarChart_2 = function(){ var chart1 = new dojox.charting.Chart2D("simpleBarChart_2");
   chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.addPlot("default", {type: "Bars", hAxis: "cool x",
   vAxis: "super y"});
   chart1.render();
};

makeSimplePieChart = function(){
var chart1 = new dojox.charting.Chart2D("simplePieChart");
   chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
//chart1.addPlot(defaultParams: { labels: true,ticks: false, fixed: true, precision: 1,labelOffset: 20, labelStyle: "default", htmlLabels: true}, optionalParams: {font: "", fontColor: "", radius: 0});
chart1.render();
};

makeSimpleGridChart = function(){ var chart1 = new dojox.charting.Chart2D("simpleGridChart");
   chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.addPlot("default", {type: "Grid",
   hMajorLines: true,
   hMinorLines: false,
   vMajorLines: true,
   vMinorLines: false});
chart1.render();
};

makeSimpleLinesChart = function(){
var chart1 = new dojox.charting.Chart2D("simpleLinesChart");
   chart1.addPlot("default", {type: "Lines"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.addPlot("default", {type: "Lines", markers: true,
   tension:3, shadows: {dx: 2, dy: 2, dw: 2}});
chart1.render();
};

makeSimpleCombinedChart = function(){
var chart1 = new dojox.charting.Chart2D("simpleCombinedChart");
chart1.addPlot("default", {type: "Lines"});
chart1.addPlot("other", {type: "Areas"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3],
   {plot: "other", stroke: {color:"blue"}, fill: "lightblue"});
chart1.render();
};

Hope this helps :)

JSHeader equivallent in XPages

JsHeader section in the custom forms is one place on which a traditional web developer will rely upon mostly in my perspective. Having to do that all over the years, XPages all of a sudden felt too crude to me most of the times untill now. 'cos I never knew the existence of the awesome tag named "xp:scriptBlock" . Mind the case, it is B and not b.

Yes this is one place which I find very similar to the JSHeader section in the Notes form for the XPage. A simple syntax of the tag can be described as follows,

<xp:scriptBlock type="text/javascript">

<xp:this.value><![CDATA[ -- your javascript functions go here-- ]]></xp:this.value>

</xp:scriptBlock>

Following is a small illustration of the usage of the same.

I have declared a function named greetings() inside the script block in an Xpage. Its purpose is to get the user name from a field (xpage edit box) and greet the user. This function is called by a button on the same page and yeppi that works.

Note:This solution is for clientside javascript alone and does not work with XPages. Also I have not performed any exhaustive test with this. So dont hate me if it does n't work for you :)

The code of the entire XPage is as follows,

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

<xp:scriptBlock type="text/javascript">

<xp:this.value>

<![CDATA[function greetings() {alert('Hi '+document.getElementById("#{id:userName}").value+'.. Having fun with XPages!!!')}]]>

</xp:this.value>

</xp:scriptBlock>

<xp:br></xp:br>

User Name :  

<xp:inputText id="userName"></xp:inputText>

<xp:br></xp:br>

<xp:button value="Call the javascript function defined with in the XPage"

id="button1">

<xp:eventHandler event="onclick" submit="false">

<xp:this.script><![CDATA[greetings()]]></xp:this.script>

</xp:eventHandler>

</xp:button>

<xp:br></xp:br>

</xp:view>

Hope this helps :)

Dojo 2D charts in XPages

I am interested in creation of dashboards and report generation tools. And as a matter of fact that is what I do the best. I have used various tools like plotr, now over rided by flotr, a canvas API that helps u generate charts, intelliprint etc. Since XPages come with Dojo, I got curious on creating Dojo Charts which can be displayed in XPages. Accordingly I explored for sources on the internet and with their help, I finally figured out on how to create charts using Dojo in XPages. Though my charts are not so great, It still gives you an idea of how to create them in XPages.

Following is the procedure that will give you a basic simple line graph shown similar to the following image.

Step 1: Enable the following properties for the xpage dojoParseOnLoad="true" dojoTheme="true"

Step 2: Put the following code into a script library and include the same on to the XPage

dojo.require("dojox.charting.Chart2D");

var makeSimpleLineChart = function(){

var chart1 = new dojox.charting.Chart2D("simplechart");

chart1.addPlot("default", {type: "Lines"});

chart1.addAxis("x");

chart1.addAxis("y", {vertical: true});

chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);

chart1.render();

};

Step 3: Create a button control and add the following code to it.
makeSimpleLineChart();

Step 4: Add a div tag with height and width of your choice to the page in the following manner

Hope this is helps:)