This app is built as part of the exam for course ID2216 Developing Mobile Applications, Which I took during my exchange study @ KTH
Prototyping
The application development
started with designing UI with paper prototypes. The paper prototype that is
built is shown in images below:
·
Main list/filtered list- list of entries with
tag and content, same list is used -for list of entries with a specific tag,
·
Entry view- shows the tittle tag content and
photo of a entry and
·
Entry edit- make changes to tittle, tag, content
and photo.
Site Map
In order to get the structure of
the application clear, a site map is built to show the hierarchy of different
activities. For clarity of the actual program, the class, which implemented the
activities, is also included in this sitemap in this report, in brackets.
UI
User interface are built with the
help of Eclipse. There is one view built for each of the activities with the
exceptions as follow:
·
There is no layout built for select tag
activity, select tag makes use of the system built-in user interface for simple
list.
·
There are two layout built for activity List
entry. There is Edit layout and a View layout, which can be toggled between by
buttons.
The table below shows interfaces
built, the activities they belong to and a short summary of things worth
mentioning in each of the layout.
|
Layout
|
Activity
|
Summary
|
|
main_list
|
Main List (TakeHomeExamDiaryList)
|
A simple list with 3 rows for each
entry, displaying tittle, tag and content of a diary entry.
|
|
list_filtered
|
Display filtered List (FilteredList)
|
Display entries with same tags in the same format as main
list.
|
|
edit_text
|
Entry view/edit <edit>
|
Make changes of tittle, tags,
content and photo of a specific diary entry.
|
|
show_content
|
Entry view/edit <show>
|
Display a diary entry.
|
|
sms_layout
|
Share via SMS (SMS)
|
Shares a diary entry through SMS.
|
Data Storage
To be short, Java data structure
is defined and used to store and sort data when the program is being executed,
and SQLite is used to store the data when the application is not being
executed.
Data processing and storage within application
The main challenge for the data
management within the application is to enable filtering by tags.
In order to achieve the above, two
customized data structure is developed.
·
DiaryList stores the list that would be
displayed in main activity, as user adds and modifies contents, it updates the
list and the ArrayList of lists (with same tag).
·
DiaryEntry is the basic element in DiaryList. It
stores tittle, tags, content and photo path of a diary entry.
For better performance, an
ArrayList of lists (with same tag, that could be displayed on request) is kept
and managed in memory. After user selects a tag, the application would find the
corresponding list and pass it to Display filtered list (FilteredList).
Data storage outside application
SQLite stores the data of diary
application when the application closes and reload the data back into
application when the user runs it again.Only one table is created, for this
purpose. Each row consists of id, tittle, tags, content and photos. The SQLite
classes are invoked in the onCreate method and onStop method in the main
activity.
Submitted application
Subsequent paragraphs demonstrate
how the submitted application is to be used.
Left shows the main list of the
application. Four entries are created for testing purposes.
·
Each entry in the list consists of three lines:
tittle, tags, and content.
·
When clicking the new entry tag, a blank entry
would be created.
·
Clicking Filter by Tag button would brings
up the list of filters that exits in the app, for user to select.
This screen shot shows the list of
tags for selection after cliking the <Filter by Tag> button from main
list.
And after one of the tag is
selected, the application would displays the list of entries with the selected
tag.
This is the list with tag day.
When the <Back to main list>
button is clicked, the user would be brought back to the main list.
Upon selecting one of the items in
the list, the application would display the details of the selected entry in
the view entry view.
The view to the left shows the details of
one entry.
<Back> brings user back to
main list.
<Edit> enables changes to be
made in the edit entry view.
<share> pops up SMS
interface, allow users to share this entry with others.
When <share> is clicked from
view entry, the interface on the left would be brought up.
The default message to be sent
would be the tittle of the entry and the content of the entry.
After entering phone number of the
intended recipient, clicking<send SMS> button would send the message.
<back> button would brings
back the view entry interface.
Acknowledgement and future work
Due to the time constrain of the
project, the displaying photo feature is not successfully added to the
application. It is to be implemented in the near future.
The plan for implementing display
of photoes is as follows:
·
When <Add photo> is clicked, the built-in
image selection activity would be invoked. Upon return of the selecting intend,
the path of the photo together with the file name would be stored in the entry
object as a String.
·
When the view entry interface is lunched, the
application would check whether the path is valid, and if true, the photo would
be added to the interface as an image view.
·
When the application shuts down, the path and
the file name would be consolidated into SQLite database, which is already
done.
