Post on 13-Apr-2017
CloudInteraction Design
Android
READ
It’s no longer about Building
Learn and Measure Don’t just Build
Why do you want this?
IMPACT.
Web apps
vs.Native apps
iOS
vs.Android
Objective-C/ Swiftvs.
Java
HTML5 and JavaScript
<!DOCTYPE html><html> <head> <link rel="stylesheet" href="styles.css"><meta charset="utf-‐-‐8"><script src="scripts.js"></script>
<title>hello, world</title></head><body>hello, world </body>
</html>
JavaScript
<script type="text/JavaScript"> function loadFile(url){
var script = document.createElement('SCRIPT');script.src = url; document.getElementsByTagName('HEAD')[0].appendChild(script);
}</script>
XML Simple Email
<note><to>Tove</to><from>Jani</from><heading>Reminder</heading><body>Don't forget me this weekend!
</body></note>
Ajax andXMLHttpRequest
jQueryhttp://jquery.com/
Frameworks• jQuery Mobile• PhoneGap• Sencha Touch• Xamarin• AngularJS + iconic• … etc
Gaming
Games (OpenGL, Metal and the rest)
How we are gonna do it.
Googling StackOVerFlow
Android
Cloud
User ExperienceInteraction Design
User Experience
User Experience
Java Primer
InstallJRE, JDK
JavaJVM – Java Virtual Machine
APIhttp://java.sun.com/javase/6/docs/api/
Tutorial http://java.sun.com/docs/books/tutorial/java/TOC.html
JavaWrite once, run anywhere
JavaWrite once, run anywhere
Reserved Words
abstract continue for new switch
assert*** default goto* package synchronized
boolean do if private this
break double implements protected throw
byte else import public throws
case enum**** instanceof return transient
catch extends int short try
char final interface static void
class finally long strictfp** volatile
const* float native super while
http://java.sun.com/docs/books/tutorial/java/nutsandbolts/_keywords.html
Primitive Types
byteshortintlongfloatdoublebooleanchar
Variables Naming
• Subsequent characters also can be numbers• Case sensitive• No spaces• Examples:
namefirstNamephoneNumber
Arrays
int[] grades;grades = new int[15];
Control flowif (boolean) {
// perform this code} else {
// otherwise, run this}
Referencing
int hoursePower = 100;
Car myCar = new Car(hoursePower );Car yourCar = new Car(hoursePower + 50);
myCar = yourCar;
Print(myCar.HorsePower);
Packagesvs
Namespaces
void main(string[] args)
Instance vs Classmethods
void shootBall(Point point)static void main(string[] args)
Inheritance and Polymorphismextends, super, @Override
Some diff.protected in a form of package scope not class scope
Some diff.final vs const vs readonly
interfaces
Collections
Example
ArrayList<String> arrList = new ArrayList<String>();arrList.add(“A”);arrList.add(“AB”);arrList.add(“ABC”);arrList.add(“ABCD”);// using indicesarrList.set(0, arrList.get(1));arrList.set(1, “foo”);
Example
• What does the following mean?
ArrayList<String> A1;// bla blaList<String> list = new ArrayList<String>(A1);
for-each
• Looping by indices• for-each, parallel execution
for (Object o : collection) System.out.println(o);
Collection Operations
List<Type> list1 = new ArrayList<Type>();// …List<Type> list2 = new ArrayList<Type>();// …List<Type> list3 = new ArrayList<Type>(list1); list3.addAll(list2);
List Algorithms
• sort — sorts a List using a merge sort algorithm, which provides a fast, stable sort. (A stable sort is one that does not reorder equal elements.)
• shuffle — randomly permutes the elements in a List.• reverse — reverses the order of the elements in a List.• rotate — rotates all the elements in a List by a specified distance.• swap — swaps the elements at specified positions in a List.• replaceAll — replaces all occurrences of one specified value with
another.• fill — overwrites every element in a List with the specified value.• copy — copies the source List into the destination List.• binarySearch — searches for an element in an ordered List using the
binary search algorithm.• indexOfSubList — returns the index of the first sublist of one List that
is equal to another.• lastIndexOfSubList — returns the index of the last sublist of
one List that is equal to another.
See more @ http://docs.oracle.com/javase/tutorial/collections/interfaces/list.html
Iterators
Lambdajlambda expression
LambdajLINQ-like
Lambdajhttps://github.com/ooxi/lambdaj
Multithreadingsynchronized, wait, notify, notifyall
IntoAndroid!
IDEsEclipse, Android Studio
Android versions and versions and versions
Android Developerhttp://developer.android.com
Tools
• android - Android SDK manager. Create/delete/view Android Virtual Devices and update the SDK with new platforms/add-ons.
• ddms - Dalvik Debug Monitor Server. Screen caps, thread/heap info, process/state info, ..
• emulator - The application responsible for opening AVDs instances.
• sqlite3 - manage SQLite databases.
SDK – Cont.
• # adb - Android Debug Bridge. A client/server program that manages the state of an emulated device.
• # aapt - Android Asset Packaging Tool.• # dx - The converter; converts .class files to Android
bytecode.
Creating Your First Android App
Create Project with Android Studio
• Build SDK is the platform version against which you will compile your app. By default, this is set to the latest version of Android available in your SDK.
• Minimum Required SDK is the lowest version of Android that your app supports
Hello World
Hello World
Activity Life Cyclehttp://developer.android.com/reference/android/app/Activity.html
File System
File System
Conventions
USB Debugging
Try it. Just run it.
activity_main.xml<RelativeLayoutxmlns: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" >
<TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"android:layout_centerVertical="true"android:text="@string/hello_world"tools:context=".MainActivity" />
</RelativeLayout>
Adding your first button
• res > values > strings• Add toggle_message to strings file.• And in the activity_main.xml file<Button
android:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@+id/textView1"android:layout_centerHorizontal="true"android:layout_marginBottom="18dp"android:text="@string/toggle_message" />
Adding your first button
• res > values > strings• Add toggle_message to strings file.• And in the activity_main.xml file<Button
android:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@+id/textView1"android:layout_centerHorizontal="true"android:layout_marginBottom="18dp"android:text="@string/toggle_message" />
Adding your first button
• res > values > strings• Add toggle_message to strings file.• And in the activity_main.xml file<Button
android:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@+id/textView1"android:layout_centerHorizontal="true"android:layout_marginBottom="18dp"android:text="@string/toggle_message" />
Adding a Click Event
• MainActivity.javapublic void toggleMessageOnClick(View view) {
TextView textView = (TextView)findViewById(R.id.textView1);textView.setText("Bonjour Monde!");
}
• activity_main.xml<Button
android:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_above="@+id/textView1"android:layout_centerHorizontal="true"android:layout_marginBottom="18dp"android:text="@string/toggle_message“android:onClick="toggleMessageOnClick" />
[OR] Adding a Click Event
• MainActivity.java@Override protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);setContentView(R.layout.activity_main); Button btn = (Button)findViewById(R.id.button1);btn.setOnClickListener(new onClickListener() {
@Override public void onClick(View arg0){
TextView textView = (TextView)findViewById(R.id.textView1); textView.setText("Bonjour Monde!");
} });
}
• activity_main.xml<Button
..android:onClick="toggleMessageOnClick" />
[OR] Adding a Click Event
Run and see!
Debug
Debug LoggingLog.d(“MY_TAG", ”Any message here.");
UIElements
What do you think is better/faster?
What do you think is better/faster?
faster slower
Menushttp://developer.android.com/guide/topics/ui/menus.html
Menus
Options Menu Context menu Popup Menu
References
READ
Always!http://developer.android.com/
Attend Harvard’s OpenCourseWare 201[2]!Building Mobile Applications, http://cs76.tv/2012/spring/
Mobile Software Engineering, http://cs164.tv/2012/spring/
Or Lynda, Udacity, Coursera
Design Patterns, Gang of four