code lab 101

HyperText Markup Language (HTML)

A tree data structure of HTML elements

<html>
  <head>
    <title>My test page</title>
  </head>
  <body>
    ⋮
  </body>
</html>

HTML is a document oriented specification

<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <h1>Hello world!</h1>
    ⋮
  </body>
</html>

A tree of HTML Objects

Browser converts HTML to Document Object Model(DOM)

var myHeading = document.querySelector('h1');
myHeading.onclick = function() {
   alert('Ouch! Stop poking me!');
   myHeading.textContent = 'Hello world!';
   myHeading.style.color = "red";   
}

HTML Syntax

How many syntactical rules?

Element types

Block Elements are structural or container elements
- html, body, nav, section, article, headings, paragraphs, lists, forms, footers, etc.
- Block elements are nested to structure a document
- The minimum block elements to structure a document?
```
<html>
  <head>
    <title>My test page</title>
  </head>
  <body>
    ⋮
  </body>
</html>
```

Inline elements are contained within block level elements.

<p>
   A site where the learned share questions: 
   <a href="edge.org">edge.org</a> 
</p>

"Self-closing" (or empty elements) have only attributes defining the content and are closed by />.
```
<img src="fun.png" alt="kids playing" />
```

XML — Extensible Markup Language

General purpose markup language
Extensible — no predefined vocabulary

"Correct" XML must be:

Well-formed tree data structure

<message>
    <warning>
        Hello World      
    <!--missing </warning> -->
</message>
<message>
    <warning>
        Hello World      
    </warning>
</message>

Valid — conform to an XML schema or a DTD (doctype)

<!ELEMENT message (warning)>
<!ELEMENT warning (#PCDATA)>

JML — XML language for jokes!

What vocabulary or elements?
jokes, joke, punchline, question, answer, genre

XML well‐formed tree data structure ( jokes.xml )

<?xml version="1.0" encoding="UTF-8"?>
<?doctype jokes SYSTEM "jokes.dtd"?>
<jokes>
   <joke>
      <question>
         Why did the chicken cross the road?
      </question>
      <punchline>
         To get to the other side!
      </punchline>
   </joke>
   <joke>
      <question>
         What did the gold fish say to her mate swimming in a Tank?
      </question>
      <punchline>
         I didn't know you could drive!
      </punchline>
   </joke>
</jokes>

What about the doctype and the DTD?

<?xml version="1.0" encoding="UTF-8"?>
<!ELEMENT jokes (joke+)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT joke (question, punchline)>
<!ELEMENT question (#PCDATA)>
<!ELEMENT punchline (#PCDATA)>

What about selecting elements ( joke_with_css.xml )?

jokes {
   font-family: verdana, Courier, mono;
   font-size: 48px;
   background-color:#CCFFFF;
   margin: 40px;
}
joke {
   display: block;
   background-color:#FFFF99;
   border: 2px solid green;
   border-radius: 5px;
   margin: 1em;
   padding: 1em;
}
question {
   display: block;
   color:#CC0000;
}
punchline {
   display: block;
   color:#000099;
}

HTML — validation and debugging

Browsers are written to be permissive & allow errors!
Without doctype, browsers correct with "quirk mode"
With errors, also "quirk mode"
XHTML is XML well-formed and valid to a DTD
- Use Firefox to "View page source" and see wellformed errors in red
- Use W3C validator for conformance to a DTD
- MDN — Debugging HTML exercise

Cascading Style Sheet (CSS)

HTML → DOM ← CSS

Selected DOM Object properties set with CSS

<p>
   Let's use: <span>CSS</span>
</p>

span {
   border: 1px solid black;
   background-color: red;
}

Let's use: Cascading Style Sheet

Rules & Specificity

simple selectors: element, class, id

<p id="special" class="general">
   some content
</p>

Cascading and Specificity, which declaration wins?
```
p { color: red; }
#special { color: green; }
.general { color: blue; }
```
- last declration with the highest specifity wins.
- class has higher specificity than element type p
- id has higher specificity than class
- Which colour wins?
- developer tools: Styles and Computed panels

Pseudo-classes

/* These styles will style our link in all states */
a {
   color: blue;
   font-weight: bold;
}

/* declare visited links to be the same 
   color as non visited links */
a:visited {
   color: blue;
}

/* Highlight the link when it is hovered over (mouse over), 
   activated (mouse down) or focused (keyboard) */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

At-rules — convey metadata

/* import another CSS file */
@import "layout.css";
@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

Layout & Box model

The CSS box model is the foundation of layout on the Web

Types of CSS boxes (set with disply property)

block — stacked like paragraphs with padding, border, margin
inline — opposite to Block; flows with parent block
inline-block — between block & inline! can be sized & move with the parent block

For children of the box and complex layout:

Organising & Debugging

Cascading & Specificity
- Best Practice — External stylsheet
```
<link rel="stylesheet" href="style.css">
```
- Permissible (but not deployment) — Internal stylesheet
```
<style>
   h1 { color: red; }
</style>
```
- Bad practice — Inline styles
```
<h1 style="color: blue;">Hello World!</h1>
```
CSS is permissive, it will ignore incorrect code.
Validator from W3C
Right-Mouse Click & Inspect Element
then click an element from DOM and see corresponding CSS
Start with the layout
Organizing your CSS

Temporal data (Audio, Video)

Remember MIME types
- MIME (Multipart Mail Extensions) or Media Type is a standard that indicates the nature and format of content.
  Example MIME types
  - text/html, text/css, text/javascript
  - image/jpeg, image/png, image/svg+xml
  - audio/mpeg, audio/vorbis
  - font/woff, font/ttf
  - video/mp4, video/ogg
  - multipart/form-data
- Developer tools, Network
  (note the MIME type of each request)
It's all in bits! Text, Image, Audio, Video
- Text ‐ unicode
- Image ‐ Lossy vs Lossless, Vector vs Raster
- Audio and Video
  - Analog to Digital conversion (A/D)
  - Audio quality: Bandwidth, Sample rate
    (8kHz human speech, 96kHz high resolution audio)
  - Container formats: WebM, MP4, Ogg

HTML5 audio and video elements

<audio controls>
   <source src="bethoven.mp3" />
   <!-- more sources with differnet formats … -->
   Your browser does not support the audio element.
</audio>               

<video controls="controls">
   <source src="earth.ogv" />
   <!-- more sources with differnet formats …  --> 
   Your browser does not support the video element.
</video>

JavaScript

(HTML, CSS) → DOM ← JavaScript

Selected DOM Object properties set with CSS

<p>CSS is declarative</p>

p { background-color: red; }

CSS is declarative

A tree of DOM Objects used in JavaScript

const myParagraph = document.querySelector("p");
myParagraph.style.color = "black";
myParagraph.style.backgoroundColor = "red";

Object Oriented, Event Driven, Prototype based Language

What does it do?

JS built into browsers, canva, libraries, frameworks
- Dynamically script web pages — document API
- HTML canvas
- Libraries and Frameworks, Express & Node.js
Browser & Third party APIs

The internet

The internet is a world-wide network of computers that makes the Web possible.

LANs — computers and routers
A network of networks
Scale infinitely
Telephone infrastructure — modem
Internat Service Provider (ISP)
ISP router to ISP router

Finding Computers

Internet Protocol (IP) address
173.194.121.32 (Alias for humans! google.com
Browser checks a local cache or uses a Domain Naming Server (DNS)
Browser sends a request for the resource from the IP address

Client—Server

Hyper Text Transport Protocol (HTTP)

MIME types

MIME (Multipart Mail Extensions) or Media Type is a standard that indicates the nature and format of content.
Example MIME types
- text/html, text/css, text/javascript
- image/jpeg, image/png, image/svg+xml
- audio/mpeg, audio/vorbis
- font/woff, font/ttf
- video/mp4, video/ogg
- multipart/form-data
Developer tools, Network
(note the MIME type of each request)

URI and URL

Universal Resource Locator (URL) is a particular type of Universal Resource Identifier(URI) used to surf the web.

Universal Resource Locator (URL)

URL is powerful!

URL to a part of a document

Target of an HTTP request is called a resource
Each resource has a Uniform Resource Identifier (URI)
Location of a resource has a Uniform Resource Locator (URL)

The biggest library humanity has ever created, accessible to a paragraph amongst the trillions of documents growing by the second!

'The Web' and 'The Internet'

Layered Architecture

Prerequisites for Mobile Apps

Java Language and Memory Management

Android Platform

ActivityManager in the OS is in charge, not You!
Activity class is the entry point for UI
Where is the main thread? and is it MVC?

A walk-through hello world

manifest file

<activity android:name=".HelloWorld">
   <intent-filter>
      <action android:name="android.intent.action.MAIN"/>
      <category android:name="android.intent.category.LAUNCHER"/>
   </intent-filter>
</activity>

HelloWorldActivity

public class HelloWorldActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {

     /* call the super class onCreate to complete 
        the creation of Activity, such as the view hierarchy */
     super.onCreate(savedInstanceState);

     /* set the user interface layout for this Activity */
     setContentView(R.layout.activity_helloWorld);

   }
}

Resources & view definition

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
   …
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".HelloWorldActivity">

   <TextView
      android:id="@+id/textViewMessage"   
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/message_text"
      app:layout_constraintBottom_toBottomOf="parent"
      … />

</android.support.constraint.ConstraintLayout>

and a file strings.xml in the res folder defines:
<resources>
    <string name="message_text">Hello World</string>
    …
<resources>

Questions & Discussion

How many steps are there in the Hello World walk-through?
What is @override and callback function?
How is the Activity life cycle related to callback functions? Explain with rotation event as an example.
Is the MVC architectural design pattern useful for Android app development?

`Activity` and `Intent`

Activity and Intent

Activity — a single screen in an app
Intent — a message object to start an activity
Activity and Intent communicate via the OS ActivityManager
Pattern allows for Activity in one App to use Activity in another App

Activity

Creating an Activity

initialise Activity in onCreate() callback

setContentView( findViewById( R.layout.activity_example )

```
onSaveInstanceState( Bundle )
```

onPause() called when user leaves the activity — serialise
Declare the Activity in AndroidManifest.xml

Activity state, persistance, & lifecycle

Activity has four states

active (or running at the top of the activity stack)
paused — alive in memeory, visible, lost focus
stopped — obscured by another activity, alive im memory, not visible
paused or stopped — may lead to destroyed & restarted to previous state

Monitoring Activity ‐ three key loops

entire lifetime between onCreate to onDestroy
visible lifetime between onStart to onStop
forground lifetime between onResume to onPause

Example Callbacks

Source code: https://github.com/ebbi/helloToast

@Override
protected void onCreate(Bundle savedInstanceState) {
...
  Log.d(LOG_TAG, "-------");
  Log.d(LOG_TAG, "onCreate");
...
}
                           
@Override
public void onSaveInstanceState(Bundle outState) {
  Log.d(LOG_TAG, "onSaveInstanceState");
...
}

@Override
public void onStart(){
  super.onStart();
  Log.d(LOG_TAG, "onStart");
}

@Override
protected void onPause() {
  super.onPause();
  Log.d(LOG_TAG, "onPause");
}

@Override
protected void onRestart() {
  super.onRestart();
  Log.d(LOG_TAG, "onRestart");
}

@Override
protected void onResume() {
  super.onResume();
  Log.d(LOG_TAG, "onResume");
}

@Override
protected void onStop() {
  super.onStop();
  Log.d(LOG_TAG, "onStop");
}

@Override
protected void onDestroy() {
  super.onDestroy();
  Log.d(LOG_TAG, "onDestroy");
}

lifecycle & Saving Persistent State

Document type data (typically in SQLite)
Bundle key, value pairs

Example Persistence

Source code: https://github.com/ebbi/helloToast

@Override
protected void onCreate(Bundle savedInstanceState) {
   ...
  // Restore the state.
  if (savedInstanceState != null) {
      mCount = savedInstanceState.getInt("count");
      mShowCount.setText(String.valueOf(mCount));
  }
}
                           
@Override
public void onSaveInstanceState(Bundle outState) {
  super.onSaveInstanceState(outState);
  outState.putInt("count", mCount);
}

Lifecycle class & observer pattern

events — enumeration from framework and lifecycle class
lifecycle class events map to callback methods
Current state tracked by lifecycle object
LifecycleObserver allows for lifecycle-aware components (observer pattern to monitor lifecycle status)

Intent

Intent — messaging object to request an action from another app component
Intent — a passive data structure that holds an abstract description of an operation to be performed
late runtime binding between the code in different applications

How? Intent constructors

Intent()
Intent( String action )
Intent( String action, URI uri )
Intent( Context context, Class<?>cls )
Intent( String action, Context packageContext, Class<?>cls )

Explicit & Implicit Intent examples

Android predefined actions
helper methods: setAction(), putExtra, addCategory(), …

Implicit Intent — action is defined, target component is unkown

See Code & Demo

Intent intent = new Intent();
intent.setAction( Intent.ACTION_WEB_SEARCH );
intent.putExtra( SearchManager.QUERY,"search text" );

Intent browserIntent = new Intent( 
   Intent.ACTION_VIEW, 
   Uri.parse( "http://www.ecosia.com" )
);
browserIntent.addCategory( CATEGORY_BROWSABLE );

Explicit Intent — target component is known

Intent intent = new Intent( 
   packageContext, ExampleActivity.class 
);
intent.putExtra( "EX1","example value" );
intent.putExtra( "EX2","example value" );

late runtime binding between the code in different applications

Sequence Diagram — Todo App

How to organise intents?

Where shoud an intent be instantiated?

"from each according to their ability, to each according to their need"

Calling Activity has the Intent data
Called Activity uses the Intent data
static method in called Activity

public static Intent newIntent(
      Context packageContext, int todoIndex){

   Intent intent = new Intent(
     packageContext, TodoDetailActivity.class);

   intent.putExtra(TODO_INDEX,todoIndex);

   return intent;
}

The calling activity:

Intent intent = 
   TodoDetailActivity.newIntent(TodoActivity.this, mTodoIndex);

Getting the Intent result back

Activity method startActivityForResult(Intent, requestCode)

startActivityForResult(Intent intent, int requestCode);

Typical usage:

@Override
public void onClick(View v) {
  Intent intent = TodoDetailActivity.newIntent(
  TodoActivity.this, mTodoIndex);
  // requestCode = int constant for a single activity
  startActivityForResult(intent, IS_SUCCESS);
}

Setting a result

Activity implement two method for setting results

setResult(int resultCode);

setResult(int resultCode, Intent intent);

navigation logic — resultCode, is Activity.RESULT_OK or Activity.RESULT_CANCELED
extras in intent for more data

Typical usage:

Intent intent = new Intent();
intent.putExtra(IS_TODO_COMPLETE, isChecked);
setResult(RESULT_OK, intent);

Handling the result

Callback onActivityResult() to retrieve any set result.

onActivityResult

@Override
protected void onActivityResult(
      int requestCode, int resultCode, Intent intent) {
  if (intent != null) {
    // data in intent from child activity
    boolean isTodoComplete = 
    intent.getBooleanExtra(IS_TODO_COMPLETE, false);
    … 
  } 
}

Events and Listeners

Events, Listeners & Callbacks
- An event listener is an interface in the View class that contains a single callback method
- Android maintains and even queue and implements event listeners
- Event listener / Callback method:
```
View.OnClickListener             onClick()
View.OnLongClickListener         onLongClick()
View.OnFocusChangeListener       OnFocusChangeListener
View.OnKeyListener               OnKeyListener()
View.OnTouchListener             OnTouchListener()
View.OnCreateContextMenuListener OnCreateContextMenuListener()
```
- UI click event, the listener, View.onClickListener fires an event that results in the corresponding event handler, onClick call back method being called.

Register event listeners with event handlers

Listener defined as an annonymous inner class

Activity private data conveniently available to anonymous inner class
Seperate listener for each view object

buttonNext.setOnClickListener(new View.OnClickListener(){
  @Override
  public void onClick(View v) {
    // do something when the button is clicked
  }
});

Implement the interface in the class definition

public class ActivityMain extends Activity 
    implements View.OnClickListener {
  protected void onCreate(Bundle savedValues) {
    …
    Button button = (Button)findViewById(R.id.next);
    button.setOnClickListener(this);
  }

  @Override
  public void onClick(View view) {
    // do something when the button is clicked
  {
  …
}

Anonymous implementation of the interface for any view objects

/* Create an anonymous implementation of OnClickListener 
for all clickable view objects */

private View.OnClickListener mTodoListener = 
    new View.OnClickListener() {

  public void onClick(View v) {
    // get the clicked object and do something
    switch (v.getId() {
    case R.id.checkBoxIsComplete:

    default:
        break;
    }
  }
};

And the usage would be:

CheckBox checkboxIsComplete = 
(CheckBox)findViewById(R.id.checkBoxIsComplete);
checkboxIsComplete.setOnClickListener(mTodoListener);

Define the listener in the XML view definition.

MVC & SoC — avoid

/*
listener implementation with the method name 
defined in the view definition
*/
android:onClick = "onCheckboxIsCompleteClick"

with Activity method:

public void onCheckboxIsCompleteClick(View view) { … }

Fragments

Fragments & MVC — Decoupling & Cohesion
- Original architecture coupled Activity & View
- Tablets and future Wareables
- A Fragment represents a behavior or a portion of user interface, has its own lifecycle, receives its own input events, and can be added or removed while the activity is running
- Native Android or Support Libraries?
  - Google support-v4 library includes fragment support
  - The single support library is now a group of libraries: support-v7, appcompat-v7, recyclerview-v7 etc.
  - Avoid the native Android OS implemetations and use the Support library versions. Many more releases and easier to update.
- FragmentManager
  - View decoupled by delegating UI to Fragment
  - Activity uses placeholder views for fragments
  - Activity uses a FragmentManager to dynamically add and remove Fragments from Views in a fragmentManager transaction.
  - FragmentManager transactions can change fragment combinations for different screen sizes
  - Once added, a fragment lives in a ViewGroup inside the activity's view hierarchy and affected by the Activity lifecycle
- Fragment Lifecycle
  Commonlifecycle methods implemented:
  - onCreate() initialize components of the fragment to retain when the fragment is paused or stopped, then resumed
  - onCreateView() called for fragment to draw its user interface and return a view
  - onPause() first indication user is leaving the fragment; persist session data
- Getting results with fragments
  - Fragments equivalent to startActivityForResult() is Fragment.startActivityForResult()
  - Instead of overriding Activity.onActivityResult() overide Fragment.Activity.onActivityResult()
  - Fragments do not have results, there is no Fragment setResult, only Activity has Activity.setResult()
  - Simple code with getActivity method to access the parent Activity's intent data directly leads to coupling.
    Avoid: getActivity().setResult(Activity.RESULT_OK, null);
  - Instead, Activity Static method to bundle any arguments and return the fragment
    (leads to decoupling as any activity can pass its data and receive the fragment)

Todo Controller & Views with fragments

Todo mvc object diagram

An Activity's view is a container FrameLayout and remains the same throughout the lifecycle

TodoActivity layout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/fragment_container"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
</FrameLayout>

add the fragments to the activity's layout ‐ avoid coupling!

TodoFragment: controller object that interacts with view and model.

TodoFragment

public class TodoFragment extends Fragment {
  private Todo mTodo;
  private CheckBox mCheckBoxIsComplete;

  @Override
  public void onCreate(Bundle savedInstanceState){
    super.onCreate(savedInstanceState);
    mTodo = new Todo();
  }

  @Override
  public View onCreateView(LayoutInflater inflater, 
      ViewGroup container, Bundle savedInstanceState) {

    View view = inflater.inflate(
      R.layout.fragment_todo, container, false);
    mCheckBoxIsComplete = (CheckBox) 
      view.findViewById(R.id.todo_complete);

    mCheckBoxIsComplete.setOnCheckedChangeListener(
        new OnCheckedChangeListener() {

      @Override
      public void onCheckedChanged(
        CompoundButton buttonView, boolean isChecked) {
        mTodo.setComplete(isChecked);
      }

    });

    return view;
  }
}

Note, Activity.onCreate had protected scope, Fragment.onCreate is public (reusable by any activity)
Similar to Activity, a Fragment has a Bundle to save state.
The previous Activity setContentView() is no longer called in the onCreate method
Instead the onCreateView() explicitly inflates the fragment's view: inflater.inflate(R.layout.fragment_todo, container, false)
(the false parameter indcates the host Activity will add the fragment)
Referencing a view object is now with an int reference; view.findViewById(R.id.todo_complete)

reuse fragment in any activity
TodoActivity
```
public class TodoActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_fragment);
    FragmentManager fm = getSupportFragmentManager();
    Fragment fragment = 
      fm.findFragmentById(R.id.fragment_container);
    if (fragment == null){
      Fragment todoFragment = new TodoFragment();
      fm.beginTransaction()
        .add(R.id.fragment_container, todoFragment)
        .commit();
    }
  }
…
```
- The FragmentManger keeps a Back stack of FragmentTransactions that can be navigated and a list of Fragments.
- FragmentTransactions are used to add, remove, attach, detach or replace fragments.
- The FragmentManager.beginTransaction creates and returns an instance of FragmentTransaction and not void, hence it can be chained together.
- The .add method has two parameters, the container view ID and a fragment. The ID serves two purposes:
  - it identifies where in the Activity's view the fragment should appear.
  - it is a unique identifier for the fragment in the FragmentManager list
Why check for null?
- The fragment may already be in the in the FragmentManager list due to events such as destoyed on rotation or to reclaim memory.
What happens if the Activity has resumed and a Fragment is added?
- The FragmentManager calls all the necessary methods to synchronise with the Activity state.
- For example, adding a fragment to a resumed activity results in the fragment getting calls to onAttach(Context), onCreate(Bundle), onCreateView(…), onActivityCreated(Bundle), onStart() and onResume.

Todo Fragment Arguments

Simple code with getActivity method to access the parent Activity's intent data directly leads to coupling
Static method to bundle any arguments and return the fragment leads to decoupling as any activity can pass its data and receive the fragment

Fragment Arguments example

See todo-component-app

In TodoFragment
public static TodoFragment newInstance(UUID todoId) {
    Bundle args = new Bundle();
    args.putSerializable(ARG_TODO_ID, todoId);

    TodoFragment fragment = new TodoFragment();
    fragment.setArguments(args);
    return fragment;
}
/*
Any Activity (such as TodoActivity) can 
call the static method and pass it's intent data 
to be bundles and recieve the decoupled fragment
*/
protected Fragment createFragment(){
    UUID todoId = (UUID) getIntent()
      .getSerializableExtra(EXTRA_TODO_ID);
    return TodoFragment.newInstance(todoId);
}

The same pattern was applied to decouple 
intents with data being passed and a static
method returns the intent.

In TodoListFragment
public void onClick(View view) {
  Intent intent = TodoActivity
    .newIntent(getActivity(), mTodo.getId());
  startActivity(intent);
}
and in TodoActivity:
public static Intent newIntent(
    Context packageContext, UUID todoId) {
  Intent intent = new Intent(packageContext, 
   TodoActivity.class);
  intent.putExtra(EXTRA_TODO_ID, todoId);
  return intent;
}

TodoModel for Fragments

The model provides data to the fragment controller
singleton provides a simple implementation

public class TodoDS {
  private static TodoDS sTodoDS;
  private List<Todo> mTodoList;

  public static TodoDS get(Context context) {
    if (sTodoDS == null) {
      sTodoDS = new TodoDS(context);
    }
    return sTodoDS;
  }

  private TodoDS(Context context){
    mTodoList = new ArrayList<>();
    // simulate some data for testing
    for (int i=0; i < 3; i++){
      Todo todo = new Todo();
      todo.setTitle("Todo title " + i);
      todo.setIsComplete(false);
      mTodoList.add(todo);
    }
  }

  public Todo getTodo(UUID todoId) {
    for (Todo todo : mTodos) {
      if (todo.getId().equals(todoId)){
          return todo;
      }
    }
    return null;
  }

  public List<Todo> getTodos() {
    return mTodoList;
  }
}

And the Todo class

public class Todo {
  private UUID mId;
  private String mTitle;
  private boolean mIsComplete;

  public Todo() {
      mId = UUID.randomUUID();
      mDate = new Date();
  }
  public UUID getId() {
      return mId;
  }
  public void setId(UUID id) {
      mId = id;
  }
  public String getTitle() {
      return mTitle;
  }
  public void setTitle(String title) {
      mTitle = title;
  }
}

Architecture

Model‐View‐Controller(MVC)

View (Layout files), Controllers (Activities/Fragments), Models (data and persistence)?
Business logic in Activity / Fragment
Code closely coupled to Android Framework & lifecycle events difficult to test
- Activities/Fragments and Views should be the View in MVC
- Controllers should be seperate classes that do not extend Android classes
- Passive Model and Active Model (model notifies the view)

Model‐View‐Presenter(MVP)

Activities/Fragments are part of the View layer
Activity has corresponding Presenter for access to Model
Code example TodoMVP
Google case study, upday app

Model‐View‐ViewModel

Android final architecture, MVx! to MVVM

Android Data Binding Framework ‐ ViewModel retrieve data from model when requested from the view
Data binding pattern reduces code and Activities/Fragments become very light weight
Unit testing made easier ‐ ViewModel are decoupled from the view
ViewModel have process scope
MVP the Presenter calls the view to display
MVVM the ViewModel exposes stream of events for Views to bind to. No need for all the MVP interfaces.
Seperation of concerns (MVC, MVP, MVVM), MVVM advantage is data binding making event driven apps easier by delegating to Model and minimizing logic in Views
Google guide to app architecture

MVVM Implementation

https://github.com/ebbi/TodoMVVM
Practical: IDE, Gradle plugins, RxJava library Observable (Java 9 deprecated Observable)
Google case study, upday app

hidden article replaced by JS based on user navigation

Hidden articles displayed by JS after nav selection

Website Development

Introduction to HTTP and Security

Website Development

Your full name

Lab exercises

Getting started with the web

HTML — Structuring the web

CSS — Styling the web

Accessibility — Make the web usable by everyone

JavaScript — Dynamic client

HTTP & Security

Website project

HyperText Markup Language (HTML)

HTML Syntax

Element types

XML — Extensible Markup Language

HTML — validation and debugging

Cascading Style Sheet (CSS)

Temporal data (Audio, Video)

JavaScript

The internet

HTTP & Security

Client—Server

Hyper Text Transport Protocol (HTTP)

Universal Resource Locator (URL)

URL to a part of a document

Layered Architecture

Android Overview

Books

Articles (Android Developer)

A first todo app

MVC pattern, Activity class, XML Layouts and View objects

Landscape view

A todo detail app

A Todo Fragment App

A Todo Component App

A Todo Persistence App

Room Persistence Library

A Todo Persistence App — MVVM

Model‐View‐View‐Model (MVVM)