[Concept UI] Yahoo Messenger for Mobile based on JAVA

[gxsaurav]

You can also read this on my blog.

The possibility of JAVA for Mobile is endless. It is a lifesaver for restricted OS based phones such as Sony Ericsson or Motorola. These phones don't support third party native software but have full support for JAVA software.

I mostly use yahoo messenger, so I decided to make a concept UI of Yahoo Messenger for Mobile based on JAVA which I think what it should be like. I call upon any J2ME developer who is interested, I would be glad to help in making the front end UI part if someone can contribute to make the back end software engine. The JAVA API for Yahoo Messenger is already documented at jYMSG Sourceforge webpage & using this API anyone can make a JAVA Mobile based Yahoo Messenger client, I would be glad to provide the UI part if required. More information can be found at the DevX webpage. Here is how the concept UI looks like. This is a very basic text & emoticon only version of Yahoo Messenger which I have tried to make.

When the user starts the application it loads & gives the user the following screen.

*img403.imageshack.us/img403/6390/signinto6.jpg

The user is asked to enter his Yahoo ID & Password. After that he can select any one of the given options as shown below the login information section. If he selects to save the login automatically his username & password will be saved in the phone as long as the application is not removed. Next time when the user starts the application it will automatically connect to Yahoo Messenger. After entering info he clicks on "Sign In" & messenger connects to yahoo showing a progress bar.

*img238.imageshack.us/img238/6888/connectingyr6.jpg

Once the user logs in, he is shown the groups of his Yahoo messenger & the online & offline contacts. By selecting in "Settings" under the "Menu" button, he can select whether to show offline contacts or not.

By default Messenger sorts contacts by their status. He can click on any group name to expand or collapse that group. To start a chat he just needs to click on the name of the friend which will then give the chat Windows. The Contact List window also notifies him of the unread mails in his Yahoo Mailbox at the top menu bar, as shown in the image.
*img113.imageshack.us/img113/7147/contactlistol8.jpg *img117.imageshack.us/img117/5308/checkingofflinesni0.jpg

The interface is based on tabs. The current selected tab is shown in black colour, the background tabs are shown in white colour while any offline or unread Message he receives is shown in another tab which flashes in golden colour until the user select to show that tab. The application notifies the user of unread messages in various ways such as flashing the tab, or vibration in the phone or playing a notification sound. All this can be selected in the "Settings".

Here are how the Menus & Settings look. The menu background is plane white colour, & when u mouseover a menu item, its colour changes to blue & a hover rectangle is shown on top of it to notify that this item is selected. To open a menu item, either click on it or press the keypad button

Menu at the first Sign in page, for settings

*img292.imageshack.us/img292/6750/1settingsmenuxc2.jpg

Connection Settings selected & Connection settings

*img256.imageshack.us/img256/9151/2setingspageof2.jpg *img292.imageshack.us/img292/3960/3setingsconnectionwe1.jpg

Settings about how to notify the user. Just to show here I made an image for the checkbox, however in reality it will be replaced by JAVA Checkbox

*img217.imageshack.us/img217/1261/4setingsnotificationfg1.jpg

Font size can be incresed or decresed anywhere.

*img292.imageshack.us/img292/4395/5setingsfontsui0.jpg

User preference to set the status & whether to show offline contacts in list or not.

*img256.imageshack.us/img256/481/6setingspreferencedt7.jpg

Menu for Contact List

*img292.imageshack.us/img292/1696/7menulistta2.jpg

Menu while chatting to superman

*img256.imageshack.us/img256/7880/8menuchattingwp6.jpg

Emoticons Section. You can either type in the emoticon code, or select from the list

*img217.imageshack.us/img217/2503/chattingemoticonlh6.jpg

You might say that the interface is very plane & without much images. The reason is that when we make something for JAVA Mobile, developers have limited ammount of JAVA Heap size or JAVA RAM to work with. Even in my K750i the JAVA heap size in just 1 MB, due to which small file size of JAR file & low RAM requirment is essential. If I get a willing J2ME developer then we will make the Messenger first as u see here, & after that we will add images as & where required. Since this is a frontend, it can also be slapped on the backend of symbian OS version

Note : Yahoo Messenger for Mobile will not work on iPhone due to the stupid decision made by El Jobso of not including support for JAVA

 

[RCuber]

Nice work GX , BTW I think the connecting progressbar can be given a enhancement.

 

[gxsaurav]

Yup it can be, but JAVA for Mobile is not like JAVA for Computer where u have 256 MB RAM, we have to keep memory limitations in considaration, thats why small images are adviced.

 

[gauravakaasid]

Great work Saurav....how soon can we have it? hope ur planning to keep this thing free ..and yea, the connection progress bar can use a lil more work

 

[gxsaurav]

Thanx guys, Hope u like it. Umm...due to public demand I m changing the progress bar with file size as mall as possible, do you guys have any advice or ideas? This is the default Windows Vista progress bar

@ Gaurav

abe pahle banne do de, abhi sirf design hai ....I need a J2ME developer first, any one willing to sacrifise his free time? If I sale it, don't worry it won't cost $5 but Rs 150 only at max.

 

[Chirag]

Current progress bar doesn't go with the design. The earlier one was better. Purple color goes with the logo so looks neat.

 

[Choto Cheeta]

well I suppose when ready and when available as download, people will have option to chat with Sups

on topic, Cool Design

 

[gxsaurav]

Current progress bar doesn't go with the design. The earlier one was better. Purple color goes with the logo so looks neat.

What if I change the green colour with Purple or blue? You know, like just the hue.

 

[Chirag]

^^
Try karke dekh. I liked the earlier progress bar though. (Personal view)

 

[gxsaurav]

I forgot to mention. Small file size is a concern when it comes to Mobile phone applications, so all those gloss & high colours have to go, a simple & effective progress bar added now. How is it?

 

[iMav]

yahoo messenger who uses yahoo messenger its the most crap messenger use iChat its the best, java based chat client do u know anything abt mobiles and computing gx

oh well sorry its just jealousy because we guys did/can/could not buy Apple products for whatever reason!

nice work tell zeeshan to do the coding ....

 

[gxsaurav]

^^^ he is making a non-usable Mock Application of Windows Mobile center first, to slap the back end to it later. He doesn't know J2ME but is learning JAVA SE, so....it will take some time for him. I m rather looking for a J2ME developers, there is Anuj, but let him join the job first.

Oh & just that u know, iPhone doesn't even has iChat

Updated the images.

The "Menu" is under construction & will be released in few days. How is it so far? The font size will be user changeable everywhere between "Small, Medium, Large & Extra Large"

 

[Chirag]

Yea progress bar looks cool now.

 

[gauravakaasid]

@Saurav...now this looks better, and u better keep this thing free for us members....warna....

 

[gxsaurav]

@Gaurav

Sure, find me a J2ME developer who is willing & ready to sacrifise his weekend, & it will be free for u

See, the API is open source & anyone can use it. We are just using that API to slap a UI on top of it to make this app. Legally we can sale it, cos we are just giving the UI source code while the backed in already available as open source

Updated with Menu Concept

 

[Pathik]

@saurav see the implus client for some inspiration...
btw nice UI... Add some more colors in the text.. like Green for online and red for offline users..

 

[gxsaurav]

@saurav see the implus client for some inspiration...

I took inspiration from IM+ for tabs, & Talkonaut for colour theme

Add some more colors in the text.. like Green for online and red for offline users..

Where, can u post the screenshot where u means ? Here is the colour scheme

Online user in Contact List = Black
Ofline user in Contact List = Light gray

Your name in chat = Gray
Friends name in chat = Dark Blue
Buzz in chat = Red

Umm...u r right, offline users should show in some other colour in chatting tabs, like the name of flash. I will make it green

I changed the looks a bit. Offline contacts name is shown in green colour now.

Here is how what I call the Ultra UI looks like . I won't be jajjing it a lot right now unless there is some developer willing.

Sign In Window. When hovering upon a button, it will be covered by a light blue stroke colour

*img523.imageshack.us/img523/5452/signinmenura6.jpg *img207.imageshack.us/img207/3990/settingspagexd6.jpg
*img207.imageshack.us/img207/2336/setingsconnectionxf5.jpg *img523.imageshack.us/img523/2001/emoticonselectionzk3.jpg