UI≠UX

Difference between UI and UX




The most common misconception we come across in the workplace, in client meetings or even in the Job listings is that the terms UI and UX are interchanged and used in the wrong context. Though both the terms look and spell alike there is a substantial difference in the overall objective and scope.

User Interface (UI) is a medium of communication between a person and a system. UI encompasses approaches and elements that allows the user to interact with the system. In other terms UI can be considered as the most powerful tool that designer use to bring out a great user experience.

On the other hand User Experience (UX) is:

• The overall experience


• A combination of various interface, UI being an important one among it.


• Thrives to address everything perceived by a person

A UI designer can only solve a part of the equation by creating tools such as images, icons, text but the user experience is much larger than that and is influenced by a multitude of things such as functional performance, color scheme, ease of use etc. Hence for an organization it is very important to understand the basic difference between the two roles and hiring the right candidate with proper skill set.


Last but not the least...

This is what happens when you let a developer play the role of UI/UX designer

Initializing NIST JAIN SIP Stack

This tutorial uses NIST SIP JAIN Reference Implementation. Download the NIST source code from here.

public void init() {
try {
// Get the local IP address.
this.ip = InetAddress.getLocalHost().getHostAddress();
// Create the SIP factory and set the path name.
this.sipFactory = SipFactory.getInstance();
this.sipFactory.setPathName("gov.nist");
// Create and set the SIP stack properties.
this.properties = new Properties();
this.properties.setProperty("javax.sip.STACK_NAME", "stack");
this.properties.setProperty("gov.nist.javax.sip.TRACE_LEVEL", "32");

if(proxy != null) {
this.properties.setProperty("javax.sip.OUTBOUND_PROXY", proxy + ':' + port + '/' + protocol);
}

this.properties.setProperty(
"gov.nist.javax.sip.LOG_MESSAGE_CONTENT", "true");
this.properties.setProperty("gov.nist.javax.sip.DEBUG_LOG",
"mss-jsip-debuglog.txt");
this.properties.setProperty("gov.nist.javax.sip.SERVER_LOG",
"mss-jsip-messages.xml");
// Create the SIP stack.
this.sipStack = this.sipFactory.createSipStack(this.properties);
// Create the SIP message factory.
this.messageFactory = this.sipFactory.createMessageFactory();
// Create the SIP header factory.
this.headerFactory = this.sipFactory.createHeaderFactory();
// Create the SIP address factory.
this.addressFactory = this.sipFactory.createAddressFactory();
// Create the SIP listening point and bind it to the local IP
// address, port and protocol.
this.listeningPoint = this.sipStack.createListeningPoint(this.ip,
this.port, this.protocol);
// Create the SIP provider.
this.sipProvider = this.sipStack
.createSipProvider(this.listeningPoint);
// Add our application as a SIP listener.
this.sipProvider.addSipListener(this);
// Create the contact address used for all SIP messages.
this.contactAddress = this.addressFactory.createAddress("sip:" + this.username + "@"
+ this.ip + ";transport=tcp");
// Create the contact header used for all SIP messages.
this.contactHeader = this.headerFactory
.createContactHeader(contactAddress);
// Display the local IP address and port in the text area.
} catch (Exception e) {
e.printStackTrace();
// If an error occurs, display an error message box and exit.
System.exit(-1);
}
}

Digest authorization in SIP with MD5 Challenge

During a SIP request if the server responds with 401 Proxy Authentication Required or 401 Unauthorized then it means the client has to replay the same request again with MD5 challenge.

The client should use nonce value from the response header WWW-Authenticate.

[code]

WWW-Authenticate: Digest realm="sip.linphone.org", nonce="JbAO1QAAAAA3aDI0AADMobiT7toAAAAA", opaque="+GNywA==", algorithm=MD5, qop="auth"

[/code]

The client should use nonce to generate the MD5 challenge and make the original request again with the Authorization header.

Steps to create the MD5 Challenge

1. Create first MD5 hash using username + ":" + realm + ":" + password

[java]

String a1 = username + ":" + realm + ":" + password;
String ha1 = toHexString(mdigest.digest(a1.getBytes()));
[/java]

2. Create second MD5 hash using request_method + ":" + request_uri

[java]

String a2 = request_method.toUpperCase() + ":" + request_uri;
String ha2 = toHexString(mdigest.digest(a2.getBytes()));
[/java]

3. If qop in the response header is "auth" then the final MD5 hash is calculated using step 3a else if it is undefined or empty refer step 3b.

3a. Create the final MD5 string using ha1 + ":" + nonce + ":" + nonceCount + ":" + cNonce + ":" + qop + ":" + ha2

[java]

String finalStr = ha1 + ":" + nonce + ":" + nonceCount + ":" + cNonce + ":" + qop + ":" + ha2;
String response = toHexString(mdigest.digest(finalStr.getBytes()));
[/java]

3b. Create the final MD5 string using ha1 + ":" + nonce + ":" + ha2

[java]
String finalStr = ha1 + ":" + nonce + ":" + ha2;
String response = toHexString(mdigest.digest(finalStr.getBytes()));
[/java]

Download the complete source code from here

SIP Register Request using JAIN SIP

This tutorial uses NIST SIP JAIN Reference Implementation. Download the NIST source code from here.

Note: To understand the Authorization process for handling 401 response code from server please go through this tutorial.

REGISTER request is used to update the current location of a user on the REGISTRAR server. The application sends a REGISTER message informing the server its current location which in turn is stored in location server. When a caller calls a user the proxy server uses this information to find the location of the callee.

Register request should be sent by the client periodically. The validity of the REGISTER request is determined by the Expires header.

Flow



Sample Request

[code]
REGISTER sip:sip.linphone.org SIP/2.0
Call-ID: 0a0f14355fa76ae6435b98bfe085baf9@223.1.1.128
CSeq: 1 REGISTER
From: <sip:vkslabs@sip.linphone.org>;tag=-1427592833
To: <sip:vkslabs@sip.linphone.org>
Max-Forwards: 70
Via: SIP/2.0/TCP 223.1.1.128:5060;branch=z9hG4bK-323532-2a454f4ec2a4213f6d6928eba479521d
Contact: <sip:vkslabs@223.1.1.128;transport=tcp>
Content-Length: 0
[/code]

Now lets see how to construct the above request using the NIST SIP Stack.

First step is to create a class that implements the SIPListener. Make sure your SIP Stack is Initializing NIST JAIN SIP Stack.

1. Create Call-ID header

[java] CallIdHeader callIdHeader = this.sipProvider.getNewCallId(); [/java]

2. Create CSeq header

[java] CSeqHeader cSeqHeader = this.headerFactory.createCSeqHeader(cseq, "REGISTER"); [/java]

3. Create From header

[java] Address fromAddress = addressFactory.createAddress("sip:" + username + '@' + server);
FromHeader fromHeader = this.headerFactory.createFromHeader(fromAddress, String.valueOf(this.tag));
[/java]

4. Create To Header

[java] ToHeader toHeader = this.headerFactory.createToHeader(fromAddress, null); [/java]

5. Create Max-Forwards header

[java] MaxForwardsHeader maxForwardsHeader = this.headerFactory.createMaxForwardsHeader(70); [/java]

6. Create a Via header

[java]
ArrayList viaHeaders = new ArrayList();
ViaHeader viaHeader = this.headerFactory.createViaHeader(this.ip, this.port, "tcp", null);
viaHeaders.add(viaHeader);
[/java]

7. Create contact header

[java]
this.contactAddress = this.addressFactory.createAddress("sip:" + this.username + '@' + this.ip + "transport=tcp");
// Create the contact header used for all SIP messages.
this.contactHeader = this.headerFactory.createContactHeader(contactAddress);
[/java]

Once all the headers are created it is time to create the request itself.

[java]
request = this.messageFactory.createRequest("REGISTER sip:" + server + "SIP/2.0\r\n\r\n");
request.addHeader(callIdHeader);
request.addHeader(cSeqHeader);
request.addHeader(fromHeader);
request.addHeader(toHeader);
request.addHeader(maxForwardsHeader);
request.addHeader(viaHeader);
request.addHeader(contactHeader);
[/java]

Now that the request object is created with all the necessary headers it is time to send the request.

[java] inviteTid = sipProvider.getNewClientTransaction(request);
// send the request out.
inviteTid.sendRequest();
[/java]

Once the request is sent successfully the response will be passed to the application using the processResponse callback in SIPListener.

[java]
public void processResponse(ResponseEvent responseEvent) {
int statusCode = responseEvent.getResponse().getStatusCode();
}
[/java]

Code

[java]
public void register(Response response) {
try {
cseq++;
ArrayList viaHeaders = new ArrayList();
ViaHeader viaHeader = this.headerFactory.createViaHeader(this.ip,
this.port, "tcp", null);
viaHeaders.add(viaHeader);
// The "Max-Forwards" header.
MaxForwardsHeader maxForwardsHeader = this.headerFactory
.createMaxForwardsHeader(70);
// The "Call-Id" header.
CallIdHeader callIdHeader = this.sipProvider.getNewCallId();
// The "CSeq" header.
CSeqHeader cSeqHeader = this.headerFactory.createCSeqHeader(cseq,
"REGISTER");

Address fromAddress = addressFactory.createAddress("sip:"
+ username + '@' + server);

FromHeader fromHeader = this.headerFactory.createFromHeader(
fromAddress, String.valueOf(this.tag));
// The "To" header.
ToHeader toHeader = this.headerFactory.createToHeader(fromAddress,
null);

// this.contactHeader = this.headerFactory
// .createContactHeader(contactAddress);

request = this.messageFactory.createRequest("REGISTER sip:"
+ server + " SIP/2.0\r\n\r\n");
request.addHeader(callIdHeader);
request.addHeader(cSeqHeader);
request.addHeader(fromHeader);
request.addHeader(toHeader);
request.addHeader(maxForwardsHeader);
request.addHeader(viaHeader);
request.addHeader(contactHeader);
if (response != null) {
retry = true;
AuthorizationHeader authHeader = Utils.makeAuthHeader(headerFactory, response,
request, username, password);
request.addHeader(authHeader);
}
inviteTid = sipProvider.getNewClientTransaction(request);
// send the request out.
inviteTid.sendRequest();
this.dialog = inviteTid.getDialog();
// Send the request statelessly through the SIP provider.
//            this.sipProvider.sendRequest(request);

// Display the message in the text area.
logger.debug("Request sent:\n" + request.toString() + "\n\n");
} catch (Exception e) {
// If an error occurred, display the error.
e.printStackTrace();
logger.debug("Request sent failed: " + e.getMessage() + "\n");
}
}
[/java]

Download the complete working code from here.

Introduction to SIP

SIP stands for Session Initiation Protocol a signaling protocol defined by IETF used for controlling communication sessions. SIP is used to create, manage and terminate sessions in an IP based network. SIP is widely used in VOIP (Voice over IP) .

 

The two main entities in a SIP session are

User Agent Client

User Agent Server

There are several types of server

 

Proxy Server

Redirect Server

Registrar

Location Server

 

SIP is similar to HTTP protocol. To understand the differences lets first learn how HTTP Protocol works.

Here is a sample HTTP request

GET /index.html HTTP/1.1

Host: www.w3.org

User-Agent: Mozilla/5.0 (Windows NT 5.1; rv:20.0) Gecko/20100101 Firefox/20.0

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-US,en;q=0.5

The first line is the request line which has the request method (GET), the URI that is being requested (index.html) and the protocol version (HTTP/1.1)

Following the request line is one or more request headers like Host, User-Agent etc.

An empty line break follows the request headers which is followed an options message body.

Once you understand the protocol you can mimic a browser and send a request to web server using telnet or a simple java program that uses plain socket.

TBD

Now lets take a look at SIP protocol and find out the differences between HTTP and SIP

Here is a sample SIP request

REGISTER sip:ss2.biloxi.example.com SIP/2.0
Via: SIP/2.0/TLS client.biloxi.example.com:5061;branch=z9hG4bKnashds7
Max-Forwards: 70
From: Bob <sips:bob@biloxi.example.com>;tag=a73kszlfl
To: Bob <sips:bob@biloxi.example.com>
Call-ID: 1j9FpLxk3uxtm8tn@biloxi.example.com
CSeq: 1 REGISTER
Contact: <sips:bob@client.biloxi.example.com>
Content-Length: 0

The first line is the request line which has the request method (REGISTER), the URI that is being requested (index.html) and the protocol version (HTTP/1.1)

Following the request line is one or more request headers like Host, User-Agent etc.

An empty line break follows the request headers which is followed an options message body.

Capturing Android SIP Logs using TCPDump

Please make sure your device is rooted before following these steps.

1. Start adb in root mode by entering the following command

            adb root

2. Download the tcpdump binary from either http://www.tcpdump.org or here

3. Push tcpdump to the device.

            adb push tcpdump-arm /data/local/

4. Make sure correct permission is set for tcpdump.

            adb shell chmod 777 /data/local/tcpdump-arm

5. Start capturing the network packets. Replace any with your interface name. In my case it was wlan0.

            adb shell /data/local/tcpdump-arm -i any -p -s 0 -w /data/local/captured.pcap

6. Once the network packets are captured we can copy that back to your machine to view it in wireshark.

            adb pull /data/local/captured.pcap

7. View the SIP packets in wireshark using the view filter.



Note: Wireshark can be downloaded from http://www.wireshark.org/download.html

Setting Firefox location bar search engine

Recently I installed a freeware which came with ask.com plugin for firefox. This plugin after installing became default for lot of features in the browser which was really irritating me so had to remove the plugin.

Even then any search I do by entering the keyword directly in the address bar (location bar) went through ask.com. If you are also facing similar problem here are the steps to set your favorite search engine.

1. Type in about:config in the location bar and press Enter
2. You might see the This might void your warranty! warning screen. Click I'll be careful, I promise! to continue.

3. Enter keyword.URL in search field and press Enter.
4. Double click the keyword.URL to modify the value. Here is the list of URL for different search engines.

Google
https://www.google.com/search?q=

Yahoo
http://search.yahoo.com/search?p=

Bing
http://www.bing.com/search?q=

Note
To disable this feature enter keyword.enabled and double click to set the value to true.

Declaring java package and method signature in JRuby

We can add the package declaration for the java classes generated by JRubyc by using java_package. Just add the following line before the JRuby class declaration

java_package 'package name'

And also make sure you have included the statement require 'java'.

[ruby]
require 'java'
java_package 'com.vkslabs.example.ruby'
class MyClass
def initialize()
end
def myfunction(msg)
puts msg;
end
end
MyClass.new.myfunction('Hello JRuby!');
[/ruby]

Now once you convert the code using jrubyc you will find that the package structure is automatically created.

Similarly you can declare signatures for java methods using
java_signature 'put method signature here'

[ruby]
require 'java'
java_package 'com.vkslabs.example.ruby'
class MyClass
def initialize()
end
java_signature 'void myJavaMethod(String msg)'
def myfunction(msg)
puts msg;
end
end
MyClass.new.myfunction('Hello JRuby!');
[/ruby]

Now you can call the new method signature from your java code by creating object for MyClass

[java]
import com.vkslabs.example.ruby;
class Test
{
public static void main(String[] a) {
MyClass obj = new MyClass();
obj.myJavaMethod("Hello Jruby from Java");
}
}
[/java]


Make sure you include jruby.jar while compiling Test.java

Converting JRuby to Java

Now that we know how to write a basic JRuby code lets see how to convert the JRuby code in to Java code. JRuby comes with JRubyc a cross compiler that does the magic!

Convert to Java code


Convert JRuby Java class files


Okay great! now you have Java source class for your JRuby class but what if you want to declare package and method signature for the generated java class?

Introduction to JRuby

JRuby
JRuby is an implementation of Ruby which runs on top of Java Virtual Machine. JRuby code can be embedded in Java code and your JRuby code can interact with Java Objects and has access to every Java API.

Why to use JRuby?
Ruby being a scripting language is dynamic and much faster than Java. There are lot of things that can be easily accomplished in Ruby for example I found that parsing & scraping HTML is much easier and faster in Ruby using HPricot. As a Java programmer and you can write part of your application in JRuby and then either embed this in your Java code or use JRubyC compiler to convert your JRuby code in to Java.

Your first JRuby program

[ruby]
require 'rubygems'
class MyClass
def initialize()
end
def myfunction(msg)
puts msg;
end
end
MyClass.new.myfunction('Hello JRuby!');
[/ruby]

Executing the above code can be done using the following command

Handling Home Key in Android

I recently came across "Todler lock" application which had lot of interesting features. One of the most intriguing feature was handling  of Home key event.

1.Create a Activity Alias

We use Activity alias in order to programmatically enable or disable home screen launcher. An alias of an activity acts as an independent entity and intent filters that are not in the original activity can be added.

Declare your activity and declare an alias for your activity with the following intent filters


[xml]
<activity
android:name="com.vkslabs.example.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity-alias
android:name=".MainActivityAlias"
android:targetActivity="com.vkslabs.example.MainActivity"
>
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.HOME" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.MONKEY"/>
</intent-filter>
</activity-alias>
[/xml]

2. Enabling and disabling component using setComponentEnabledSetting
[java]
PackageManager manager = getPackageManager();
ComponentName compName = new ComponentName("com.vkslabs.example", "com.vkslabs.example.MainActivityAlias");
//ComponentName compName = new ComponentName("<Package Name>", "<Package Name.Alias Name>");

manager.setComponentEnabledSetting(compName,
PackageManager.COMPONENT_ENABLED_STATE_ENABLED, PackageManager.DONT_KILL_APP);
[/java]
You can use COMPONENT_ENABLED_STATE_DISABLED for disabling the alias.

Saving bitmap buffer as bitmap image

Eclipse Memory Analyzer doesn’t provide option to view a bitmap buffer directly. Try the following steps that will allow you to save the bitmap buffer as a bitmap image that you can view using any image viewer.

1. Select the bitmap buffer that you would like to Save

2. Save the buffer to your computer

Select the Location in your computer where you would like to save the buffer file. You can give any name and extension

3. Enable inspector view in Eclipse

Once you have saved the bitmap buffer you will have to convert the bitmap buffer to bitmap for which you will need to know height and width of the bitmap.

You can use the inspector window to view the height and width of the bitmap. If inspector window is not available you can enable it using the following option.

4. Find the dimension of the bitmap

5. Convert the bitmap buffer in to bitmap image

Once you have the bitmap buffer, bitmap dimension you can execute the attached java program with the following command line option.

[code]
Java MATBitmap.java &lt;input.bmp&gt; &lt;output.bmp&gt; &lt;bitmap width&gt; &lt;bitmap height&gt;
[/code]

Example

[code]
java MATBitmap debug.bmp converted.bmp 800 800
[/code]

Bingo! now you can open the converted.bmp in any image editor.

Download MATBitmap.java

Fixing Bitmap memory leaks in Android

The biggest hurdle for Android developers is memory leaks. Especially if you are using a lot of images you tend to see memory leaks more often. Android internally handles the images as Bitmaps so even if the images used are optimized or of low quality it takes the same amount of memory. For example an image of size 800X600 takes 4 bytes per pixel which means the size will be 1.8 MB (4*800*600 = 1920000 bytes) whereas the same image will be 200 KB – 600 KB based on the quality of the image.
If you are facing frequent Out Of Memory errors then the first handy tool will be DDMS and Memory Analyzer tool (MAT).

Whenever you take memory dump you could see that there are bitmaps held in heap but most of the time you will not be able to find which image exactly the bitmap instance holds. MAT doesn’t provide an easy way to view the bitmap image held in a bitmap objects.
You can do the following steps to view the image in the bitmap buffer.