Data Interface

This week, I improved the user interface, implemented most of the data interface, and implemented some function of the Media part.

About the user interface, firstly, I placed the settings menu into the option menu. Secondly, I adjusted the margin of the chatting message, to make it less crowded. Thirdly, the background of the interface is slightly changed, and buttons now are turned into the rounded rectangles. And about the icons for the tab “CHAT” and “MEDIA”, it may take some time to create.

About the data interface, thanks to the dataflow diagram of Dan, and also with the help Chrome’s developer tool, I figured out how data was transmitted between server and client. And I designed two classes to implement the data interface. The first is HttpService, which implements HTML methods such as GET, POST, PUT and so on. HttpService is designed as a single-instance class, and interacts with the CouchDB server using JSON. The second class is CouchDB, which implements lots of specific data methods, just like those in services.js, by calling HttpService. Currently, these methods includes login, getSession, getFiles, createDir, register, getUserDoc, saveUserDoc, getMOTD, getChatDBInfo, longPollingChat, longPollingIM, longPollingUser, getMsgs, postMessage, queueMessage, and all of them return a JSONObject. But some of the methods has not been tested yet. And I don’t know how to implemented the uploadFile method. MediaGrid seems to use jQuery to upload file, and the content-type is multipart/form-data, and the data is bounded by something like this “——WebKitFormBoundarypsthWGZ9GBIxD93X”. It seems a little complicated. Could I just use base64 to code the file content, and specify something like base64 in Content-Type? Will the CouchDB server accept that? Thanks.

And about the Meida part, I implemented getting file list, and changing directory, and was going to achieve making directory and uploading. If the setting are correct(like user name, password, server ip and port), it works well.

Some pictures shows the result:

 

 

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