teaching machines

CS 491 Lecture 5 – Easier GUIs and Callbacks

September 17, 2013 by Chris Johnson. Filed under cs491 mobile, fall 2013, lectures.

Agenda

• the GUI development algorithm
• ClickAndSee on iOS
• ClickAndSee on Android

TODO

• Read sections Overview, Layouts, Input Controls, and Input Events in the Android documentation.
• Read Apple’s UI element documentation.
• 1/4 sheet.

Code

ViewController.m

//
//  ViewController.m
//  ClickAndSee
//
//  Created by Johnson, Christopher R on 9/17/13.
//  Copyright (c) 2013 Johnson, Christopher R. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()
@property (weak, readonly, nonatomic) IBOutlet UIButton *alertButton;
@property (weak, readonly, nonatomic) IBOutlet UIActivityIndicatorView *progressView;
@property (weak, readonly, nonatomic) IBOutlet UIImageView *imageView;
@end

@implementation ViewController

@synthesize alertButton = _alertButton;
@synthesize progressView = _progressView;
@synthesize imageView = _imageView;

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self.alertButton addTarget:self action:@selector(didPressAlert) forControlEvents:UIControlEventTouchUpInside];
}

- (IBAction)didPressLoad {
    [self.progressView startAnimating];
    
    // go out to the interwebs
    // grab image
    // set image
    
    dispatch_queue_t q = dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_HIGH, 0);
    dispatch_async(q, ^{
        NSURL *url = [NSURL URLWithString:@"http://www.twodee.org/imgs/blog/mural.png"];

        NSData *bytes = [[NSData alloc] initWithContentsOfURL:url];
        
        dispatch_async(dispatch_get_main_queue(), ^{
            UIImage *image = [UIImage imageWithData:bytes];
            self.imageView.image = image;
            [self.progressView stopAnimating];
        });
    });
}


- (void)didPressAlert {
    UIAlertView *view = [[UIAlertView alloc] initWithTitle:@"TITLE" message:@"MESSAGE" delegate:nil cancelButtonTitle:@"Okay" otherButtonTitles:nil];
    [view show];
}

@end

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
  package="org.twodee.clickandsee"
  android:versionCode="1"
  android:versionName="1.0">

  <uses-sdk
    android:minSdkVersion="8"
    android:targetSdkVersion="17" />
  
  <uses-permission android:name="android.permission.INTERNET" />

  <application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme">
    <activity
      android:name="org.twodee.clickandsee.MainActivity"
      android:label="@string/app_name">
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>
  </application>

</manifest>

activity_main.xml

<RelativeLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:paddingBottom="@dimen/activity_vertical_margin"
  android:paddingLeft="@dimen/activity_horizontal_margin"
  android:paddingRight="@dimen/activity_horizontal_margin"
  android:paddingTop="@dimen/activity_vertical_margin"
  tools:context=".MainActivity">
  <ImageView
    android:id="@+id/imageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/ic_launcher" />
  <Button
    android:id="@+id/loadButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="16dp"
    android:text="Load" />
  <Button
    android:id="@+id/alertButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="16dp"
    android:text="Alert" />
</RelativeLayout>

MainActivity.java

package org.twodee.clickandsee;

import java.io.IOException;
import java.io.InputStream;
import java.net.MalformedURLException;
import java.net.URL;
import java.net.URLConnection;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {
  private ImageView imageView;
  
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    Button alertButton = (Button) findViewById(R.id.alertButton);
    alertButton.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        Toast.makeText(MainActivity.this, "You clicked Alert.", Toast.LENGTH_LONG).show();
      }
    });
    
    Button loadButton = (Button) findViewById(R.id.loadButton);
    loadButton.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        loadImage();
      }
    });
    
    imageView = (ImageView) findViewById(R.id.imageView);
  }
  
  private void loadImage() {
    new AsyncTask<Void, Void, Bitmap>() {
      @Override
      protected Bitmap doInBackground(Void... arg0) {
        Bitmap bitmap = null;
        try {
          URL url = new URL("http://www.twodee.org/imgs/blog/mural.png");
          URLConnection connection = url.openConnection();
          InputStream in = connection.getInputStream();
          bitmap = BitmapFactory.decodeStream(in);
        } catch (MalformedURLException e) {
          e.printStackTrace();
        } catch (IOException e) {
          e.printStackTrace();
        }
        return bitmap;
      }

      @Override
      protected void onPostExecute(Bitmap bitmap) {
        imageView.setImageBitmap(bitmap);
      }
    }.execute();

    
  }
}

Haiku