Interface Implementation

This week, Dan and I decided to develop a local application using Java, rather than just use PhoneGap to port the original MediaGrid. The local application has a lot of advantages, for example, it runs faster than that on PhoneGap, and it can be extended with some features such as GPS, Bluetooth and so on. While at the same time, to develop a local application is much more difficult because the database interfaces and AngularJS are all going to be changed.

Based on the interface designed last week, I’ve already implemented the interface of MediaGrid on Android. The structure of this project is as follows:

Image

ChatListFragment: Message list.

MediaListFragment: Media list(file list).

SettingFragment: Settings.

ChooseMemberActivity: Member list.

LoginActivity: log in.

RTPullListView: A pull-to-refresh list view, loading data asynchronously.

CouchDB: CouchDB wrapper(not coded).

DBMediaGrid: MediaGrid data provider (just returns test data for present).

GlobalUtils: Providing utilities and constants.

Now, here’s a detailed introduction about the main interfaces.

LoginActivity: Pick a user name, or click on an existing user name to log in.

Image

MediaMainFragment:

A ListView to show chatting items. On every item, there’s from ID, to ID, message time, and message content. The ListView is re-implemented as a PullListView, to supporting pull down refresh. The data and image (if there’s need) is asynchronously loaded into the PullListView in another thread. At the bottom lies a tool bar, containing “all” button, “send” button, and message input box. If “all” is clicked, A chooseMemberActivity will be shown.

Image

 

ChooseMemberActivity:

A list of all members, to select the target member to send our message.

Image

 

MediaListFragment:

A PullListView to show files and folders, with extra information like file size and file uploaded time. And at the bottom lies upload and makedir button. The two pictures shows the media list and its pull-to-refresh state.

Image

Image

SettingFragment:

Just three buttons: switch room, log out and about.

Image

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s