# Programming of UI

###### tags: `etsiinf`

## WebApp Checklist

### Main page
- [x] The main page must show the list of articles retrieved form the server
- [x] Every article in the main page must include: their title, subtitle, thumbnail of the article image (if exists) and their abstract. The body of the article is not shown in the main page and it will be shown in the article detail page.
- [x] The article title and the article image must navigate to the details page of the corresponding article. Article edition is not allowed by means of this links.
- [x] If the user is logged in, the following buttons must appear:
- [x] A button for each article to edit them redirecting the user to the edition form.
- [x] A button to create a new article which redirects to an empty article edition form.
- [x] A button for each article to remove it.
- [x] Article removal requires the confirmation of the user before applying the removal.
- [x] Article removal must give some feedback to the user with the result of the operation.

### Login form
- [x] A login form (username and password) and a button for log in must be shown in the main page of the application
- [x] If the user introduces the correct username and password, the form must be replaced by the name of the user (e.g. “Hello xxxx”) and a logout button must be shown
- [x] If the username or password are incorrect, a message with this information must be shown

### Navigation bar of the main page
- [x] The navigation bar must show all buttons/links for all categories shown in the newspaper, that is, National, Economy, Sports, Technology and All.
- [x] Links/buttons in the navigation bar must filter the articles shown in the main page according to the selected category.
- [x] The navigation bar includes a text field to add some text that will be used to filter the articles shown in the main page of the newspaper.
- [x] If the user is logged in, articles can be created, edited and removed. Otherwise, the user cannot edit the article contents.
- [x] The navigation bar should be properly shown in mobile devices. Ideally, it should be collapsed in one button for small devices.

### Article details page
- [x] The article details must be shown with its title, subtitle, abstract, category, body and picture (if it is included in the article).
- [x] The modification date and the username who have modified the content must be shown at the end of the details page.
- [x] Articles cannot be modified in the details view
- [x] As the article body can be written in HTML, its content must be properly shown by the application

### Article edition and creation
- [x] The form must include all input to edit/create the article, that is: title, subtitle, abstract, body and image selection.
- [x] The categories must be selected in a combo with values: National, Economy, Sports and Technology.
- [x] Body can be filled in HTML format (a WYSIWYG editor can be used).
- [x] All inputs of the form (except the body) are mandatory and the form must be validated before its submission.
- [x] This form must include a button to come back to the main page and another button to save/create the form information added by the user.
- [x] Saving information must give some feedback to the user with the result of the operation.

---

## Desktop App Checklist

### Main Window

- [x] List of all published articles. Login is not required.
- [x] Login
- [x] New. Allows create a new article. Only logged in users can send articles to server. Users can save article to a file, in this case login is not required.
- [x] Load an article from a file.
- [x] Edit. Login is required. Only the articles belonging to the user can be edited.
- [x] Delete. Login is required. Only the articles belonging to the user can be deleted.
- [x] Exit.
- [x] Headlines list. Shows a list with all headlines. When user selects one headline: Command ‘read more’ will be enabled, article image and abstract will be shown. Moreover, if article belongs to the logged user, commands ‘Edit’ and ‘Delete’ will be enabled.
- [x] Category filter. Filter headlines that will be listed. Only headlines with the selected category will be listed. If category is equals to ALL, all headlines will be listed.
- [x] Read More. Allows any user to access to the selected article details

### Form for article details

- [x] Always display article details: image, title, subtitle, category
- [x] At the beginning this form shows article body
- [x] Switch between body and abstract
- [x] Back to the previous form

### Form for Editing and Creating articles

- [x] Add an image. Student can use the provided form ‘ImagePicker’ to implement this functionality
- [x] Add title and subtitle
- [x] Set the article category
- [ ] Add abstract and body. These elements can be edited in plain text or html text
- [x] Send the new or modify article to a server and back to main window. To send an article, title and category must have been defined.
- [x] Save a draft to a file. This command saves the article to a file in the local machine. This draft could be loaded again for editing it or send it to a server. To save an article, title must have been defined.
- [x] Back. This command discards all changes made since last ‘Save to File’ command

---

## Android app checklist

### Main Screen (Ricardo)

- [x] The main screen will show a list of articles available in the server as anonymous user (ordered by date)
- [x] In the main screen a navigation bar must show all buttons/links for all categories shown in the newspaper (National, Economy, Sports, Technology and All)
- [x] Every article in the main page must include:
- [x] title
- [x] abstract
- [x] thumbnail of the image (if exists)
- [x] category
- [x] The body and subtitle text of the article are not shown in the main page and it will be shown in the article details page
- [x] The list will be implemented using a ListView or a ReciclerView, and for each row a custom layout will be implemented
- [x] Every item (article) in the list should be linked (clickable) to the details page of the article.
- [x] A login button will be included in main page. (optional).
- [x] An indicator in main screen should show the user is logged in or not. If the user is logged in, articles can be created, edited and removed. Otherwise, the user cannot edit the newspaper contents.
- [x] The main activity will download and show in a list the articles for the user. Update of the list of articles has to be implemented in an **AsyncTask**

### Article Details Screen (Erik, Ellen)

- [x] The article details must be shown with its title, subtitle, abstract, category, body and picture (if it is included in the image).
- [x] If the article doesn’t contain an image, a default image should be shown.
- [x] The modification date and the user id of the user who have modified the content must be shown at the end of the page.
- [x] Articles cannot be modified with this form, but the image. User have to be able to change the image and upload and save one image from the gallery.
- [x] When one article is selected, other activity is launched, allowing the user to upload a new image to the selected article

### Create, edit and remove articles (João)

- [x] Create
- [x] Edit
- [x] Delete
- [x] Add necessary buttons to redirect to actions

### Login (João)

- [x] [OPTIONAL] The first activity should implement a Login page, storing in application shared preferences the apikey of the user (if successful log).
- [x] Connection to web service login has to be implemented in an AsyncTask
- [x] Implement login routing