Pages

Thursday, August 1, 2013

Android Hello World Part 1

I learnt to develop my Andriod helloworld app from the beautiful contents of the site http://developer.android.com/training/basics/firstapp/index.html

 

Following is the understanding I obtained after creating the hello world app

 

1.      Download the Android SDK from http://developer.android.com/sdk/index.html

 

2.      Open up the sdk folder. You will see an eclipse folder inside it. Open the eclipse and click new.

Fill up the following information in it

 

3.      Click Next.

4.      Now you can select an activity template from which to begin building your app.

For this project, select BlankActivity and click Next.

5.      Leave all the details for the activity in their default state and click Finish.

 

Few directories and files in the Android project


AndroidManifest.xml - The manifest file describes the fundamental characteristics of the app and defines each of its components. 

 

One of the most important elements your manifest should include is the <uses-sdk> element. This declares your app's compatibility with different Android versions using the android:minSdkVersion andandroid:targetSdkVersion attributes. For your first app, it should look like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android" ... >
   
<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="17" />
    ...
</manifest>

src/

Directory for your app's main source files. By default, it includes an Activity class that runs when your app is launched using the app icon.

res/

Contains several sub-directories for app resources. Here are just a few:

drawable-hdpi/

Directory for drawable objects (such as bitmaps) that are designed for high-density (hdpi) screens. Other drawable directories contain assets designed for other screen densities.

layout/

Directory for files that define your app's user interface.

values/

Directory for other various XML files that contain a collection of resources, such as string and color definitions.

When you build and run the default Android app, the default Activity class starts and loads a layout file that says "Hello World." The result is nothing exciting, but it's important that you understand how to run your app before you start developing.

Run on a Real Device


If you have a real Android-powered device, here's how you can install and run your app:

1.    Plug in your device to your development machine with a USB cable. If you're developing on Windows, you might need to install the appropriate USB driver for your device. For help installing drivers, see the OEM USB Drivers document.

2.    Enable USB debugging on your device.

o    On most devices running Android 3.2 or older, you can find the option under Settings > Applications > Development.

o    On Android 4.0 and newer, it's in Settings > Developer options.

Note: On Android 4.2 and newer, Developer options is hidden by default. To make it available, go toSettings > About phone and tap Build number seven times. Return to the previous screen to findDeveloper options.

To run the app from Eclipse:

1.    Open one of your project's files and click Run  from the toolbar.

2.    In the Run as window that appears, select Android Application and click OK.

Eclipse installs the app on your connected device and starts it.

 

The graphical user interface for an Android app is built using a hierarchy of View and ViewGroup objects. View objects are usually UI widgets such as buttons or text fields andViewGroup objects are invisible view containers that define how the child views are laid out, such as in a grid or a vertical list.

Android provides an XML vocabulary that corresponds to the subclasses of View and ViewGroup so you can define your UI in XML using a hierarchy of UI elements.

Building a Simple User Interface


Figure 1. Illustration of how ViewGroup objects form branches in the layout and contain other View objects.

In this lesson, you'll create a layout in XML that includes a text field and a button. In the following lesson, you'll respond when the button is pressed by sending the content of the text field to another activity.

Add a Text Field


To create a user-editable text field, add an <EditText> element inside the <LinearLayout>.

Like every View object, you must define certain XML attributes to specify the EditText object's properties. Here’s how you should declare it inside the <LinearLayout> element:

    <EditText android:id="@+id/edit_message"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:hint="@string/edit_message" />

About these attributes:

android:id

This provides a unique identifier for the view, which you can use to reference the object from your app code, such as to read and manipulate the object (you'll see this in the next lesson).

The at sign (@) is required when you're referring to any resource object from XML. It is followed by the resource type (id in this case), a slash, then the resource name (edit_message).

The plus sign (+) before the resource type is needed only when you're defining a resource ID for the first time. When you compile the app, the SDK tools use the ID name to create a new resource ID in your project's gen/R.java file that refers to the EditText element. Once the resource ID is declared once this way, other references to the ID do not need the plus sign. Using the plus sign is necessary only when specifying a new resource ID and not needed for concrete resources such as strings or layouts. See the sidebox for more information about resource objects.

android:layout_width and android:layout_height

Instead of using specific sizes for the width and height, the"wrap_content" value specifies that the view should be only as big as needed to fit the contents of the view. If you were to instead use "match_parent", then the EditText element would fill the screen, because it would match the size of the parent LinearLayout. For more information, see the Layouts guide.

android:hint

This is a default string to display when the text field is empty. Instead of using a hard-coded string as the value, the "@string/edit_message" value refers to a string resource defined in a separate file. Because this refers to a concrete resource (not just an identifier), it does not need the plus sign. However, because you haven't defined the string resource yet, you’ll see a compiler error at first. You'll fix this in the next section by defining the string.

Note: This string resource has the same name as the element ID: edit_message. However, references to resources are always scoped by the resource type (such as id or string), so using the same name does not cause collisions.

Add a Button


Now add a <Button> to the layout, immediately following the <EditText> element:

    <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="@string/button_send" />

The height and width are set to "wrap_content" so the button is only as big as necessary to fit the button's text. This button doesn't need the android:id attribute, because it won't be referenced from the activity code.

Make the Input Box Fill in the Screen Width


The layout is currently designed so that both the EditText and Button widgets are only as big as necessary to fit their content, as shown in figure 2.

Figure 2. The EditText and Button widgets have their widths set to "wrap_content".

This works fine for the button, but not as well for the text field, because the user might type something longer. So, it would be nice to fill the unused screen width with the text field. You can do this inside a LinearLayoutwith the weight property, which you can specify using the android:layout_weight attribute.

The weight value is a number that specifies the amount of remaining space each view should consume, relative to the amount consumed by sibling views. This works kind of like the amount of ingredients in a drink recipe: "2 parts vodka, 1 part coffee liqueur" means two-thirds of the drink is vodka.

In order to improve the layout efficiency when you specify the weight, you should change the width of theEditText to be zero (0dp). Setting the width to zero improves layout performance because using"wrap_content" as the width requires the system to calculate a width that is ultimately irrelevant because the weight value requires another width calculation to fill the remaining space.

Here’s how your complete layout file should now look:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
xmlns:tools="http://schemas.android.com/tools"
   
android:layout_width="match_parent"
   
android:layout_height="match_parent"
   
android:orientation="horizontal">
   
<EditText android:id="@+id/edit_message"
       
android:layout_weight="1"
       
android:layout_width="0dp"
       
android:layout_height="wrap_content"
       
android:hint="@string/edit_message" />
   
<Button
       
android:layout_width="wrap_content"
       
android:layout_height="wrap_content"
       
android:text="@string/button_send" />
</LinearLayout>

In Eclipse, click Run  from the toolbar.

 

You will be able to see a screen like the following in your android. Not necessarily the same

 

Tuesday, May 28, 2013

Big Tables with fixed headers (eg. 1000 Rows and 200 Columns)

There have been a lot of solutions on the innernet when I searched for tables with fixed headers. Most of them worked pretty much the way the demonstration was made in those websites.

But all of them had a lot issues when the size of the table got bigger. Especially with a table containing 1000 + rows and 200+ columns, literally all available examples choked and I had a lot of issues reusing them.

Some of the issues that I encountered during the course of this R&D are as follows

1. Position:fixed would have been used and hence I will not be able to scroll towards right to find new column titles
2. Position-y or Position-x: fixed was not available
3. Ready made solutions which had a fix to the above mentioned points were mostly from jquery and they choked out the browser making them squell with an error page saying some script is running which stops the page from loading on time - DO YOU WANNA KILL IT???
4. Minimizing the table size was not an option
5. Had to think through the tableCellElement.offsetWidth
6. Gave a thought about creating headers with multiple separate div tags and displaying them simultaneously
7. Even solutions that helped admist all these issues required me to scroll through the entire 200+ columns to see the vertical scroll
8. Un even table cell widths

on and on and so on....

Eventually the following seemed promising to me and it did work well with both ie and chrome.

Step 1: I used the following inline styles

table {width:auto;}
thead {  position: absolute;}
thead th { height:50px; }
tbody { height:150px; overflow: scroll; }
tbody td { height:60px;}

Step 2: following is a supportive script that will help your table header stay in tact. This includes a timer

var interval = "";
  var itr = 0;
  var repeatDuration = 100;
  interval = window.setInterval("myfunc()", repeatDuration);

function myfunc() {

if (document.all) {
document.getElementsByTagName("thead")[0].style.left="-"+document.documentElement.scrollLeft+"px"
document.getElementsByTagName("thead")[0].style.top=document.documentElement.scrollTop+"px"
} else {
document.getElementsByTagName("thead")[0].style.left="-"+document.body.scrollLeft+"px"
document.getElementsByTagName("thead")[0].style.top=document.body.scrollTop+"px"
}

}
Step 3: Construct your table and view it on the browser.

Hurray I was able to do it atlast. Try it out and let me know if it works in firefox and safari too :)

Monday, May 27, 2013

Trigger Select All Checkbox Click in XPage view panels in XPages


This post shows the method through which the select all button that you would enable on a Xpage view panel can be programatically clicked.

I found need for a scenario in which I would require the document ids of all documents that are being displayed on a Xpage view in a browser. Eventually the simplest userfrinedly/user interactive mechanism that I was able to think about was the native select all feature available with the XPage view controls in Lotus Notes.

It took me quite a while to understand the usage though, It was quite tricky and tough but not any more :)
Following is the code fragment that allowed me to do this silly stuff

var viewPanelContainer=document.getElementById("ViewPanelContainer");

//-- Following line of code has been commented and the forth comming lines, second and third respectively
//have been introduced to bypass a IE bug related to the HTMLNode.getElementsByClassName command in javascript
//var selectAllCheckBox=viewPanelContainer.getElementsByClassName("xspCheckBoxViewColumnHeader")[0];
var selectAllCheckBoxes=getElementsByClassName(viewPanelContainer, "xspCheckBoxViewColumnHeader");
var selectAllCheckBox=selectAllCheckBoxes[0];
//-- End of block highlighting the work around for an IE bug


selectAllCheckBox.click(); //dispatchEvent("click");

Here I am using a function named as getElementsByClassName. The function is available in the blog, you can simply search for the same using the name itself or use any other method that you have. This is essential for the code to work in the tremendously awesome Internet explorer crap.

For all other poor browsers out there, they are in capable of making my life difficult and hence a simple object.getElementsByClassName will work on them

Hope this helps :)

Dojo Toolbar related tips and tricks in XPages

A while ago I was working on creating a tool bar for one of my Xpages. I was able to find a lot of reliable resources on the internet. It did take me a lot of time to understand and build my own toolbar though.

In summary my understanding is you may have to use all or few of the following dojo.require attributes in your page


dojo.require("dojo.parser");
dojo.require("dijit.form.Button");
dojo.require("dijit.Toolbar");
dojo.require("dijit.Tooltip");
dojo.require("dijit.ToolbarSeparator");

I also found that I was using the code line "var djConfig = { baseScriptUri : "js/dojo/",parseOnLoad : true };"
I am not sure if I had used the djConfig variable any where in my program to construct the tool. I guess it automatically loads with Xpages. If not - what stops you from a copy & paste :)

! guess I copy codes blindly at times lol.

Again I wanted this to be visible to the entire XPage and hence I used a "xp:scriptBlock" tag to define them

Later I copied code from the standard examples about dojo toolbar available on the web and modified it to suit my requirements
This sure is a lot of code. Just skip or delete the code fragments that might not be of interest to you.

Now I have acquired a decent tool bar when I preview the page on the browser. Which looks like the following.

<div id="toolbar" style='display:none;position:fixed;_position:absolute;
top:0;_top:expression(eval(document.body.scrollTop));
left:0;_left:expression(eval(document.body.scrollLeft));'>
<div id="toolbar1" dojoType="dijit.Toolbar">
<div dojoType="dijit.form.Button" id="toolbar1_Home"
iconClass="iconHome" showLabel="false">
Home
</div>
<span id="span6" dojoType="dijit.Tooltip" connectId="toolbar1_Home">
Home
</span>
<span data-dojo-type="dijit.ToolbarSeparator"></span>
<div dojoType="dijit.form.Button" id="toolbar1_ExportAll"
iconClass="iconExportAll" showLabel="true">
Export All
</div>
<span id="slides_tip" dojoType="dijit.Tooltip" connectId="toolbar1_ExportAll">
Export all data to Excel Sheet
</span>
<span data-dojo-type="dijit.ToolbarSeparator"></span>

<!-- div dojoType="dijit.form.Button" id="toolbar1_ExportSelected"
iconClass="iconExportSelected" showLabel="true">
Export Selected
</div>
<span id="fs_tip" dojoType="dijit.Tooltip" connectId="toolbar1_ExportSelected">
Export
selected documents to Excel Sheet
</span>

<span data-dojo-type="dijit.ToolbarSeparator"></span-->


<div dojoType="dijit.form.Button" id="toolbar1_PrintPage"
iconClass="iconPrintPage" showLabel="true">
Print
</div>

<span id="thumb_tip" dojoType="dijit.Tooltip" connectId="toolbar1_PrintPage">
Print the page as you see it
</span>
<span data-dojo-type="dijit.ToolbarSeparator"></span>

<div dojoType="dijit.form.Button" id="toolbar1_PrintAll"
iconClass="iconPrintAll" showLabel="true">
Preview All
</div>

<span id="span2" dojoType="dijit.Tooltip" connectId="toolbar1_PrintAll">
Preview all documents
</span>
<span data-dojo-type="dijit.ToolbarSeparator"></span>

<div dojoType="dijit.form.Button" id="toolbar1_PrintSelected"
iconClass="iconPrintSelected" showLabel="true">
Preview Selected
</div>

<span id="span1" dojoType="dijit.Tooltip" connectId="toolbar1_PrintSelected">
Preview selected documents
</span>

<span data-dojo-type="dijit.ToolbarSeparator"></span>

<div dojoType="dijit.form.Button" id="toolbar1_SearchField"
iconClass="" showLabel="true">
<xp:inputText style="width:222.0px" id="SearchContent">
</xp:inputText>
</div>
<div dojoType="dijit.form.Button" id="toolbar1_SearchButton"
iconClass="iconSearchButton" showLabel="false">
Search Image
</div>

<span id="span4" dojoType="dijit.Tooltip" connectId="toolbar1_SearchButton">
Search
</span>

<div dojoType="dijit.form.Button" id="toolbar1_HighlightButton"
iconClass="iconHighlightButton" showLabel="false">
Highlight Matches
</div>

<span id="span3" dojoType="dijit.Tooltip" connectId="toolbar1_HighlightButton">
Highlight
matches without searching
</span>

<div dojoType="dijit.form.Button" id="toolbar1_AdvSearchButton"
iconClass="iconAdvancedSearch" showLabel="false">
Advanced Search
</div>

<span id="span5" dojoType="dijit.Tooltip" connectId="toolbar1_AdvSearchButton">
Advanced
Searching Options
</span>

<span data-dojo-type="dijit.ToolbarSeparator"></span>
<div dojoType="dijit.form.Button" id="div1" iconClass=""
showLabel="true">
<xp:label value="Show " id="label3"></xp:label>
<xp:comboBox style="width:80.0px" defaultValue="30"
id="docsToDisplay">
<xp:selectItem itemLabel="30 Docs" itemValue="30">
</xp:selectItem>
<xp:selectItem itemLabel="50 Docs" itemValue="50">
</xp:selectItem>
<xp:selectItem itemLabel="100 Docs" itemValue="100">
</xp:selectItem>
<xp:selectItem itemLabel="200 Docs" itemValue="200">
</xp:selectItem>
<xp:selectItem itemLabel="1000 Docs" itemValue="1000">
</xp:selectItem>
<xp:eventHandler event="onchange" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:var searchViewGrid:com.ibm.xsp.component.xp.XspViewPanel=getComponent("searchViewPanel");
var docsToDisplay=getComponent("docsToDisplay").getValue();
var docToDispInt=java.lang.Integer.parseInt(docsToDisplay)
searchViewGrid.setRows(docToDispInt)}]]></xp:this.action>
</xp:eventHandler>
</xp:comboBox>
</div>
</div>
</div>

Its a lot of code. Atleast I got a nice looking tool bar like the following on my screen now.



Now take a closer look at the parent tag that I have defined for the tool bar. The style that is being computed/defined here helps the tool bar stay on top of the page irrespective of the page scroll

I dont know whether this method is recommended or not but, it servers the purpose. So if you find/know of a better way to do this please do let me know of the same.

Here the various icon classes that I have used here are responsible for the nice icons that are being displayed on the tool bar. So mark sure that you define your styles properly. Following is one such example of the associated style sheet

Our net stop is to see how to define an onclick event for our nice tool bar buttons here. Hi hi what did you expect. On click event related activites needs to be explicity defined through code and its not a simple onclick event definition. Following is the way to do it.

It would seem a little complicated, but its easy to understand. Following screen shot shows how I defined onclick events for the toolbar buttons along with how I defined the functions that were associated with the onclick events

Hope this helps :)


Monday, May 13, 2013

GetElementsBYClassName bug in IE

A while ago I was working with a checkBoxElement.click() type of function in which I had my client side javascript code identify the checkBoxElement through a HTMLNode.getElementsByClassName('myClassName') method.

This worked like charm with Chrome ( Chrome is the best :), unfortunately as expected this one had issues with the great Internet Explorer.

Eventually I had to scan through the web and with little effort I found the following nice function

function getElementsByClassName(node, classname) {
/* function obtained, modified and reused from
http://stackoverflow.com/questions/7410949/javascript-document-getelementsbyclassname-compatibility-with-ie
*/
var objectCollection = [];
        var re = new RegExp('(^| )'+classname+'( |$)');
        var els = node.getElementsByTagName("*");
        for(var i=0,j=els.length; i<j; i++)
            if(re.test(els[i].className))objectCollection.push(els[i]);
            return objectCollection;
        }

This worked well across both Chrome and IE. I am relieved :)

Hope this helps :)

Thursday, May 2, 2013

Function to bring focus to a html field element


function focusField(field) {
var myField;
if (typeof field==='string')
myField=document.getElementById(field);
else if (typeof field=='undefined')
return;
else myField=field;

window.setTimeout(function ()
    {
myField.focus();
myField.select();
}, 0);
}

Thursday, April 25, 2013

Search issues in XPages #1 - Dont forget to Create FTIndex in replicas manually

I have been working with XPages searches for a long time. It has been a while since I have worked with XPages and I was almost happy to get my hands on it again. I had to create a search feature that would help my clients perform a decent search.

Since they were ok with performing an FTIndex on the application, XPage searches was a nice option that occured to me.

To my frustration, proving that I got a little rusty with XPages, it took me 4 hours to get this search feature complete. I was bombarded with errors and for some reason, my search was not working the way I expected it to work.

Following are the summary of the issues that took me time to identify and fix

#1. Enable "Display Xpage runtime error page" in the XPages tab in "Application Properties". Else you would end up debugging for a long time

#2. My XPage's view control lost its data source referance and was showing a 'red X' in the application navigator which I missed to notice oweing to large number of design elements.

#3. Check source code pane, now and then to find if there are any errors being displayed. It will exist there with out any warning and you would not notice it on the design pane of the XPage

#4. Enable FTIndex inorder to work with the native search feature available with XPages

#5. Be warned, in case of clustered server, were replicas of databases from multiple servers are used to render a webpage. Because, FTIndex dont ret replicated. They need to be enabled and updated across replicas separately.

My search worked like charm after I rediscovered all of these items again :(

Wednesday, April 24, 2013

StartKey in View Url

I was working with StartKey argument in a view's url to help enable a search feature.

It was a headache. For some reason my startKey argrment was completely ignored by the browser.

EOD I found the following,

1. The first column in the view should show only simple text values. Date values with "/"s and other values with special characters are a head ache.
2. This wont work properly with views containing their first column as a hidden column
3. Your first column must be sorted for this argument to work.

I am not sure whether all of these are true or not. But its my understanding as per my experimentations so far.

Friday, March 8, 2013

A nice data recovery/undelete software - RECUVA

I recently got into a scenario, which had cost me my data archives containing data for almost a couple of years now. The exitement was great and this happened at a really very good time. Some one from holland and another one from Phillipenes where going to give me hollaphino problems and this happened just to same my sorry face. :)

And to add to my luck I knew  a few really good administrators who helped me a lot speaking about policy and **** that denies permissions for them to help me for an other 48 hours. And to add to my luck.... ok I guess you woud have already admitted to the fact that I am a really happy corporate fellow by now.
All this good life and sweet mares went away when I had to find "Recuva" and download it.

Are these guys crazy. They helped me find a file which I lot a couple of days ago. How dare they over take my admin guys. My admin guys are now wary cos of this and what to beat the **** of this one. What can a silly fellow like me do to save it. I had to give them a copy of this software.

My point is download the tool in the following website and see it for your self. :) It really works and it is free

http://www.piriform.com/recuva//download/standard

Saturday, February 9, 2013

Change native lotus notes database display format - view index on top and view in bottom

Every Lotus Notes Professional would be aware of the way lotus domino databases would be displayed on the notes client if no custom framet has been configured, It would be something like the following.

I just messed up the view names for personal reasons. So I think I make sense here. View index would be on the left margin and the view being displayed or selected will be displayed ont the right margin.

But did you ever know that we have an option to change that to the following silly format :)

Believe me I did not take two different screen shots and place them together. This is a screen shot as it is from the notes client. Yes view index is on top and the view being displayed or selected will be displayed in the bottom pane like a preview pane and yes you can have a separate preview pane for the view as well.

Its just that your display will be messed up and will be ackward. I sont recollect a scenario where this would be of advantage as far as lotus notes client applications are concerned. Atleast, I now know that I have such an option and can do it. May be I would use it to statle someone in the future hi hi :)

Yes I dream a lot :)

By the way, as far as I know you need to use the following @commands to get this done.

@Command([ViewBelowFolders])

and to get the display back to normal, you can use the following command

@Command([ViewBesideFolders])