Lotus Notes/Domino Blog: 2010

Tuesday, November 30, 2010

jQuery Mobile has launched API for Mobile Applications Development

Hmmm.... jQuery launched Mobile API called jQueryMobile. http://jquerymobile.com/

I have tried to use this for a blackberry mobile application. But it was not working as it should work :(

jQuery Mobile issues for BlackBerry device:

The following are the 2 main reasons that i have come across while using jQuery Mobile.

1. If i use jQuery mobile API, the content loading is very slow, & even a small ajax request is making the browser to hang.

2. Lists hyperlinks are not working.

Hope, they will fix all the issues in next release :)

Friday, October 1, 2010

Unique Variant in Lotusscript

Get unique values in a variant by calling the below function in lotusscript.

Pass the variant to Unique function.



Function Unique(vSourceArray As Variant)

 Dim iFound As Integer

 Dim sTargetArray() As Variant

 

 Redim sTargetArray(0) As Variant

 sTargetArray(0) = ""

 

 Forall sText In vSourceArray

  iFound = False

  Forall sNewText In sTargetArray

   If sText = sNewText Then

    iFound = True

    Exit Forall

   End If

  End Forall

  If Not iFound Then

   If sTargetArray(0) ="" Then ' First time

    sTargetArray(0) = sText

   Else

    Redim Preserve sTargetArray(Ubound(sTargetArray)+1)

    sTargetArray(Ubound(sTargetArray)) = sText

   End If

  End If

 End Forall

 

 Unique = sTargetArray

End Function

Friday, July 2, 2010

Hide/Show the flex elements by id in action script 3

Hide/Show any flex element by ID in action script. Toggle any element in flex.

The below example gives the toggle of HBox on click of the label.

Here is the code to achieve the toggle functionality of any flex element in actionscript 3.

Have added the comments in the code to explain use of each element.



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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">

<mx:Script>

<![CDATA[

//Add event listner to any element in flex to call the below function to hide/show the HBox by id



//Say on click of the lable call the handlerFunction.

public function handlerFunction(event:Event):void {

//get the id of the element by getting the data of the calling element event

var id:String = event.currentTarget.data.toString();  

//get the handle of parent element. i.e. VBox in the below code     

var parentVBox:VBox = event.currentTarget.parent as VBox;

//get the handle to the element by id

var hBoxtoShow:HBox = parentVBox.getChildByName(id) as HBox;   

//code to toggle the HBox (hide/show)    

if (hBoxtoShow.includeInLayout) {

hBoxtoShow.includeInLayout = false;

hBoxtoShow.visible = false;

} else {

hBoxtoShow.includeInLayout = true;

hBoxtoShow.visible = true;

}   

}



public function init():void {

//add HBox id to the lable data. This is used for dynamic hide/show of multiple elements

labelID.data = "hideHBox";

labelID.addEventListener(MouseEvent.CLICK , handlerFunction);

}

]]>

</mx:Script>

<mx:VBox id="mainVBox">



<mx:Label text="Click me" id="labelID"/>

<mx:HBox id="hideHBox">

<mx:Text text="Sample HBox filed to hide this on click of the label"/>

</mx:HBox>



</mx:VBox>

</mx:Application>

Sunday, June 6, 2010

Google Motion Chart using XML datasource

Gooogle Motion Chart using XML as data source

A dynamic chart to explore several indicators over time. The chart is rendered within the browser using Flash.

XML is used as datasource for motion chart instead of google spreadsheet.



<html> 

<head>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load('visualization', '1', {'packages':['motionchart']});

google.setOnLoadCallback(getXMLData);



function getXMLData() {

url = "XML data url here"

if (window.XMLHttpRequest) { // Non-IE browsers

req = new XMLHttpRequest();

req.onreadystatechange = drawChartData;

try {

req.open("GET", url, true);

} catch (e) {

alert("Problem : " + e);

}

req.send();

} else if (window.ActiveXObject) { // IE

req = new ActiveXObject("Microsoft.XMLHTTP");

if (req) {

req.onreadystatechange = drawChartData;

req.open("GET", url, true);

req.send();

}

}

}



function drawChartData() {

if (req.readyState == 4) { // Complete

if (req.status == 200) { // OK response

var reqResponse = req.responseXML;

var xmlItems = reqResponse.getElementsByTagName("item")

//alert(xmlItems[i].getElementsByTagName("item1")[0].childNodes[0].nodeValue);

var data = new google.visualization.DataTable();

data.addColumn("string", "Country");

data.addColumn('date', 'Year');

data.addColumn('number', 'Projects');

data .addRows(xmlItems.length);



for (var i = 0; i < xmlItems.length; i++) {

//alert(xmlItems[i].getElementsByTagName("year")[0].childNodes[0].nodeValue);

data .setCell(i, 0, xmlItems[i].getElementsByTagName("country")[0].childNodes[0].nodeValue);

data .setCell(i, 1, new Date(xmlItems[i].getElementsByTagName("year")[0].childNodes[0].nodeValue));

data .setCell(i, 2, Number(new Number(xmlItems[i].getElementsByTagName("projects")[0].childNodes[0].nodeValue)));

}

//alert(data.getValue(0,0));

var chart = new google.visualization.MotionChart(document.getElementById('chart_div'));

chart.draw(data, {width: (screen.availWidth-50), height:(screen.availHeight-250)});

}



} else {

//alert("Problem: " + req.statusText);

}

}

</script>

</head>



<body>



<div id="chart_div" width="100%" height="90%">

<table width="100%" height="100%"><tr><td height="80%" width="100%" align="center" valign="center">

<img src="Loading Image URL"></img>

</td></tr></table>

</div>

</body>

</html>



******************



XML format shoule be as shown below



<items>

<item>

<country>India</country>

<year>12/24/2009</year>

<projects>2000<projects/>

</item>

<item>

<country>USA</country>

<year>12/24/2009</year>

<projects>4000<projects/>

</item>

</items>

Wednesday, May 19, 2010

Flex progress bar while loading the xml data using URLLoader

Show progress bar in flex while loading the xml data using URLLoader class.

For progress bar display, have a separate MXML component called LoadingBar

MXML Main Code



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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

     xmlns:net="flash.net.*" layout="absolute" creationComplete="init()">

    <mx:Script>

        <![CDATA[

        

            import mx.managers.PopUpManager;

            import mx.containers.TitleWindow;

            import flash.geom.Point;

            import mx.containers.HBox;

            import mx.controls.Spacer;

            import mx.containers.*;

            import mx.controls.*;

            public var loadingBar:LoadingBar;

                

            public function init():void{                        

                loadingBar=LoadingBar(PopUpManager.createPopUp( this, LoadingBar , true));

                loadingBar.progressBar.source = urlLoader;

                PopUpManager.centerPopUp(loadingBar);               

                urlLoader.addEventListener(Event.COMPLETE, xmlLoaded);              

                

                urlLoader.load(new URLRequest("http://localhostdatasource"));

            }

            

                private function xmlLoaded(event:Event):void {                           



                PopUpManager.removePopUp(loadingBar);

                

            }

        ]]>

    </mx:Script> 

                

<net:URLLoader id="urlLoader" />



</mx:Application>

MXML Loading Bar component code



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



<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" title="Progress" 

    width="300" height="100" borderThicknessLeft="1" styleName="loadingStyle"

    borderThicknessRight="1" borderThicknessBottom="1" borderThicknessTop="1" >

      

   <mx:VBox width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

    <mx:ProgressBar id="progressBar" label="Loading Data..." mode="event" labelPlacement="center" />          

   </mx:VBox> 

    

</mx:TitleWindow>

The Flex Project looks like below image.

Tuesday, May 18, 2010

Flex & ActionScript 3 tips useful for code optimization & performance

There are many useful tips to optimize the flex & actionscript code.

The below site gives some of the tips to optimize flex code while developing.

ActionScript 3.0 and Flex optimization techniques and practices

Wednesday, April 28, 2010

Develop Mobile Applications in Flex

Slider: Flex Mobile Framework

Adobe is currently developing a mobile-optimized version of the Flex framework that will make it easy for developers to build Flex applications that run across mobile devices. Using Slider, developers can leverage their existing skills to build intuitive applications that can be easily customized and rapidly adapted across platforms.

More info at http://labs.adobe.com/technologies/flex/mobile/

Wednesday, March 24, 2010

Excel active rows check in vb, lotusscript

Excel import active rows check in lotus script

Its not the best way to check the blank value in a mandatory row and stop the process while importing data from excel file.

You can get the active rows in an excel file by using SpecialCell function.

The syntax for the SpecialCells Method is;
expression.SpecialCells(Type, Value)

Where "expression" must be a Range Object. For example Range("A1:C100"), ActiveSheet.UsedRange etc.

Type=XlCellType and can be one of these XlCellType constants.
xlCellTypeAllFormatConditions. Cells of any format
xlCellTypeAllValidation. Cells having validation criteria
xlCellTypeBlanks. Empty cells
xlCellTypeComments. Cells containing notes
xlCellTypeConstants. Cells containing constants
xlCellTypeFormulas. Cells containing formulas
xlCellTypeLastCell. The last cell in the used range. Note this XlCellType will include empty cells that have had any of cells default format changed.
xlCellTypeSameFormatConditions. Cells having the same format
xlCellTypeSameValidation. Cells having the same validation criteria
xlCellTypeVisible. All visible cells

These arguments cannot be added together to return more than one XlCellType.

Value=XlSpecialCellsValue and can be one of these XlSpecialCellsValue constants.
xlErrors
xlLogical
xlNumbers
xlTextValues

These arguments can be added together to return more than one XlSpecialCellsValue.

The lotus script code to get the active rows count.



Set varExcel = CreateObject( "Excel.Application" )



varExcel.Visible = False ' Making the selected Excel invisible



varExcel.Workbooks.Open xlFilePath '// Open the Excel file



Set xlWorkbook = varExcel.ActiveWorkbook



Set xlSheet = xlWorkbook.ActiveSheet



xlSheet.Cells.SpecialCells(11).Activate



xlsRows = varExcel.ActiveWindow.ActiveCell.Row

xlsRows variable gives the count of the active rows in an excel file.

Facebox is not loading in FireFox

If you use removeAttribute function in your page, and if you try to load facebox, then facebox will not load properly in firefox.

removeAttribute function is used to make the font as clear type in IE.

This function solves the issue of clear type text in IE with jQuery.

You should use removeAttribute function only for IE.



if ((verOffset=navigator.userAgent.indexOf("MSIE"))!=-1) {

this.style.removeAttribute('filter');

}

Wednesday, March 3, 2010

Gauge in flex open source code by brightpointinc

I need to develop a dashboard application with the column/bar charts and Gauges.

I searched in google for Gauge chart, i could find Gauge charts by IBM Ilog Elixir which is licensed version.

I continued my searching for a free Gauge chart and at last i found Gauge chart by Brightpointinc which is an open source.

Its very easy to use and easily customizable.

You can find the sample and source code here -- http://www.brightpointinc.com/flexdemos/gauge_v04/gauge_v04.html

Wedge Stack Graph in Flex by AXIIS Open Source

http://www.axiis.org/

Wedge Stack Graph is a fantastic chart that can be easily customizable and its free.

Link to download the source code -- http://www.axiis.org/examples/WedgeStackChartExample.html

Friday, February 19, 2010

getElementById is not working in fire fox

For hidden fields the following code will not work in firefox
document.getElementById("AttachName").value = fname;
it should be
document._frmUpload.AttachName.value = fname;
Here _frmUpload is the form name.
AttachName is field ID.
So better use the second one if you know the form name.

Friday, February 12, 2010

Flex Pie Chart using XML as data source

Pie Chart in flex using XML as dataprovider for piechart

The XML format should be as shown below.



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

<items>

<item name="option1" number="2000" />

<item name="option2" number="9000" />

<item name="option3" number="5000" />

<item name="option4" number="7000" />

</items>

The Flex application code is shown below.



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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:HTTPService id="dataRequest" url="" showBusyCursor="true" fault="dataRequestFaultHandler(event);" />     

<mx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent;

import mx.rpc.events.FaultEvent;

import mx.controls.Alert;

import mx.collections.ArrayCollection;   

public function initApp():void {

var timeStampForNocache:Date = new Date() ;         

var urlAgent:String = "Your XML returing URL PATH & tim=" + timeStampForNocache.toString();          

dataRequest.url = urlAgent;

dataRequest.send();

}

[Bindable]

private var stats:ArrayCollection;



private function dataRequestFaultHandler(event:FaultEvent):void {

Alert.show(event.fault.message);

}

]]> </mx:Script>      

<mx:PieChart width="100%" height="100%" showDataTips="true" dataProvider="{dataRequest.lastResult.items.item}" id="myChart">

<mx:series>

<mx:PieSeries width="100%" height="100%"  field="number" nameField="name"   />

</mx:series>

</mx:PieChart>

<mx:Legend direction="horizontal" dataProvider="{myChart}"/>

</mx:Application>

The result would be like the below image.

Thursday, February 11, 2010

Flex Column Chart using XML as source

Column Chart in flex using XML as dataprovider for column chart

The XML format should be as shown below.



<items>

<item>

<name> Test1 </name>

<number> 1000 </number>

</item>

<item>

<name> Test1 </name>

<number> 1000 </number>

</item>

<item>

<name> Test1 </name>

<number> 1000 </number>

</item>

<item>

<name> Test1 </name>

<number> 1000 </number>

</item>

</items>

The Flex application code is shown below.

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">

<mx:HTTPService id="dataRequest" url="" showBusyCursor="true" result="dataRequestResultHandler(event);" fault="dataRequestFaultHandler(event);" />      

<mx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent;

import mx.rpc.events.FaultEvent;

import mx.controls.Alert;

import mx.collections.ArrayCollection; 

public function initApp():void {

var timeStampForNocache:Date = new Date() ;       

var urlAgent:String = "Your XML returing URL PATH & tim=" + timeStampForNocache.toString();        

dataRequest.url = urlAgent;

dataRequest.send();

}

[Bindable]

private var stats:ArrayCollection;

private function dataRequestResultHandler(event:ResultEvent):void {

stats = event.result.items.item;

}

private function dataRequestFaultHandler(event:FaultEvent):void {

Alert.show(event.fault.message);

}

]]> </mx:Script>    

<mx:ColumnChart  id="xmlChartBar" dataProvider="{stats}" showDataTips="true" width="500">

<mx:horizontalAxis>

<mx:CategoryAxis dataProvider="{stats}" categoryField="option"/>

</mx:horizontalAxis>

<mx:series>

<mx:ColumnSeries showDataEffect="fadeIn" xField="name" yField="number" displayName="Hits" />

</mx:series>

</mx:ColumnChart>   

</mx:Application>

The result would be like the below image.

Monday, February 8, 2010

Quiz result page - Quiz application in flex

As i have mentioned in the previous post, developed quiz application result page.

Here is the sreen shot. As it is not fully completed, i am not posting the source code.

Navigation to all the quiz questions is shown below.

Once it is completed, then i will post the code to download.

MEANWHILE IF YOU WANT THE CURRENT VERSION AS IT IS, PLEASE LEAVE YOUR MAIL ID IN COMMENTS SECTION, TO MAIL THE SOURCE CODE.

Saturday, February 6, 2010

IE is losing ClearType if you use jQuery hide or fadeIn

IE is losing ClearType if you use jQuery hide/show or fadeIn/fadeOut or even when you open a remote page.

$('#myDiv').hide();

$("#myDiv").fadeIn('slow');

The problem seems to be that the CSS "filter" attribute is not automatically removed. The most simple solution to this problem would be removing it manually :)


$('#myDiv').fadeIn('slow', function() {
 this.style.removeAttribute('filter');
});

But the above solution looks odd because for each hide you need to remove manually.

A simple, more elegant solution would be to wrap the .fadeIn() and .fadeOut() functions with a custom function via the plugin interface of jQuery. The code would be exactly the same, but instead of directly calling the fade functions, we call the wrapper.


$('#node').customFadeOut('slow', function() {
 //no more fiddling with attributes here
});

So, how do you get this working? Just include the following code after you include the jQuery library for the added functionality.


(function($) {
  $.fn.customFadeIn = function(speed, callback) {
      $(this).fadeIn(speed, function() {
              if(jQuery.browser.msie)
                      $(this).get(0).style.removeAttribute('filter');
              if(callback != undefined)
                      callback();
      });
  };
  $.fn.customFadeOut = function(speed, callback) {
      $(this).fadeOut(speed, function() {
              if(jQuery.browser.msie)
                      $(this).get(0).style.removeAttribute('filter');
              if(callback != undefined)
                      callback();
      });
  };
})(jQuery);

Bug in Lotus 8.5.1 ? jQuery script is giving error while saving in Lotus 8.5.1 script library as javascript code

jQuery script is giving error while saving in Lotus 8.5.1 script library as javascript code.

Error screen shot:

Is that problem with jQuery (i dont think). This could be a problem with Lotus 8.5.1 javascript script library.

What do you think?

Friday, February 5, 2010

Have you used jQuery facebox in your application?

Facebox is a fantastic tool to display small information in pop up style.

The code is very simple. This is effectively working in Lotus Domino.

The below image shows how the facebox looks.

Click Here to see more information on this.

Thursday, February 4, 2010

Do you want to copy css of a particular element in any site.. Its easy..

Do you want to copy css of a particular element in any site.. Its easy now with Mozilla Firefox.

All you need to do is

1. Download firefox (if you do not have).

2. Install WebDeveloper add on as shown in below image.

3. Goto CSS tab in web developer toolbar and select View CSS Information as shown below.

The below figure shows the CSS for Signup button in twitter. CSS displayed in the Right side bar.

It is so simple right?

Tuesday, January 19, 2010

Quiz application in Flex integrating with Lotus Domino

Quiz application in flex

Here is the main screen shot of quiz application. its like a gadget and you can have it in side bar.

On click of any choice it opens a new page which shows the result and flex chart to show the overall result.

How did i achieve it?

Well, here is the procedure:

Create a lotus notes db and a form to post the questions with answer, options and some other info.

Have a view which returns the value in XML format.

Getting the question and choices in the flex application by using URLLoader.


var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
urlLoader.load(new URLRequest(DBPath+"/QuizView?OpenView"));

As of now i am attaching the screen shot of flex code.

Main screen part completed. Working on Quiz Rresult page.

Once everything is completed without any loopholes, i will post the entire flex code and lotus notes db used.

If you have any queries please feel free to post in comments box.

Lotus Notes/Domino Blog