HIT3328 - Chapter02 - Foundation and Tools

330 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HIT3328 - Chapter02 - Foundation and Tools

  1. 1. HIT3328 / HIT8328 Software Development forMobile DevicesDr. Rajesh Vasa, 2012Twitter: @rvasaBlog: http://rvasa.blogspot.com1Lecture 02Foundation andToolsR. Vasa, 20122Lecture Overview•Programs and Operating Systems•What is Android (for a programmer)?•Android - Device and Interaction Overview•Development Tools•Configuring the IDE for AndroidDevelopment•Using the Logger•Building a Simple App.•Building an Interactive App.R. Vasa, 20123Programs and OperatingSystems•All programs eventually execute onHardware•They all make use of services from O/SPrograProgrammOperatingOperatingSystemsSystemsHardwareHardwareR. Vasa, 20124We program to an API•Programs use services from O/S (via API)PrograProgrammOperatingOperatingSystemsSystemsHardwareHardwareAPIAPIR. Vasa, 20125API is good - but frameworksare better•Android and iOS are more than O/S•They are platforms and hence include,•Operating System (with primitive API)•Frameworks (incl. Components/Libraries)PrograProgrammOperatingOperatingSystemsSystemsAndroidiOSFrameworFrameworksksAPIAPIR. Vasa, 20126iOSCocoa TouchCocoa TouchMediaMediaCore ServicesCore ServicesCore O/SCore O/STouch UI, GesturesAudio, VideoData, Telephony,Networking, LocationPrimary programming language: Objective-C
  2. 2. R. Vasa, 20127AndroidImage Source: http://developer.android.comProgramming languages: Java, C/C++R. Vasa, 20128We write to aframework/library•We are developing programs to use aframework•Knowledge of framework is very important•Android / iOS have very differentframeworks•Different data structures & algorithms•Different nuances and culture•But ... broad concepts are similar•You can learn iOS faster if you know Android(vice-versa)R. Vasa, 20129Lecture Overview - Where arewe?•Programs and Operating Systems•What is Android (for a programmer)?•Android - Device and Interaction Overview•Development Tools•Configuring the IDE for AndroidDevelopment•Using the Logger•Building a Simple App.•Building an Interactive App.R. Vasa, 201210Android is a bi-lingual platformImage Source: http://www.tbray.orgJavaC/C++R. Vasa, 201211What is Dalvik?•Dalvik is a Virtual Machine•Dalvik executes the compiled Java code•Dalvik uses a ‘register-based architecture’•It is NOT a stack machine like the JVM•Stack machine Vs Register machines•Data is loaded and manipulated differently•Register based -> quicker load andexecution, but slightly larger program sizeR. Vasa, 201212What is in the AndroidFramework?•All of these are available via Java (or C/C++)Image Source: http://www.tbray.org
  3. 3. R. Vasa, 201213Android Standard Libraries•Java & C/C++ code can access theselibrariesBackground Image Source: http://www.tbray.orgRDBMS Web PageRenderingXMLFontsCryptoR. Vasa, 201214Where do we start withAndroid? Simple GraphicalApplicationsR. Vasa, 201215Some Assumptions (from nowon...)•You know how to build Java programs•You also know,•Package organisation system of Java•Aware of commonly used standard libraries•Can use a command interface (Terminal inOSX, MS Dos console in Windows)•Can read Java code and understandlogic/flow•Interface inheritanceR. Vasa, 201216If your Java is rusty•You have some catching up to do....Free e-Book at http://www.mindview.net/Books/TIJ/R. Vasa, 201217If you know these, you willlearn faster•Event handling•By implementing listener interfaces•By use of anonymous inner classes•Hash Tables / Maps (concept + code)•Singleton, Factory, Visitor design patterns•Have built user interfaces in anotherlanguage/framework (incl. Swing/AWT)•Call-backsR. Vasa, 201218Lecture Overview - Where arewe?•Programs and Operating Systems•What is Android (for a programmer)?•Android - Device and InteractionOverview•Development Tools•Configuring the IDE for AndroidDevelopment•Using the Logger•Building a Simple App.•Building an Interactive App.
  4. 4. R. Vasa, 201219Android Device UserInteraction•Android has a three key buttonsMenuHomeBackApart from thesebuttons, vendors canadd more buttons (ifthey wish)R. Vasa, 201220Vendors can add additionalbuttonsR. Vasa, 201221There are variations in physicalformBut all phones have Home, Menu, & Back ButtonsR. Vasa, 201222Home Button...•Typically, this will take you back to theHome Screen of the phone•Same (default) behaviour as the iPhone /iPad buttonHomeR. Vasa, 201223Back Button•This will take you back to the previousscreen•If app. has only one screen, this will exitapp.•R. Vasa Personal Note: I miss this button themost when I use the iPhone / iPad)BackR. Vasa, 201224Menu Button•This will show a contextual menu for ascreen (if one is available)•Developers can write their own menu forany screen in their app.•Quite handy (iOS should borrow this idea)Menu (asopen)
  5. 5. R. Vasa, 201225Honeycomb (Android 3.0) isdifferent...Back, HomeWhere is menu button?(Buttons need not be physical in Android)Action BarR. Vasa, 201226Menu Visibility is contextual(Android 3.0+)MenuSadly, menu position is not mandated (yuk?)R. Vasa, 201227Short Problem 1•This is UX (User Experience) related•What is the likely rationale for discarding the‘menu’ button from being always available?•Would you have made a similar choice?•Menu position is not mandated (can be top-right, bottom left etc.)•As a developer do you prefer the freedom?•btw. Google’s choices were intentionalR. Vasa, 201228Lecture Overview - Where arewe?•Programs and Operating Systems•What is Android (for a programmer)?•Android - Device and Interaction Overview•Development Tools•Configuring the IDE for AndroidDevelopment•Using the Logger•Building a Simple App.•Building an Interactive App.R. Vasa, 201229Development Tools•iOS - XCode IDE + iOS SDK (from Apple)•Offers a robust/powerful Visual UI Builder•Android•Android SDK (Compiler and Emulator)•Eclipse IDE + Android Plug-in•Ant (Build System)•Debugger is powerful•Visual UI Builder (is getting better)R. Vasa, 201230IDE, SDK and Emulator•IDE - Editor where we write the code•SDK - Tools that will compile our code•Emulator - Runs the code•Emulator runs as a separate application•IDE communicates to this emulator todeploy the code•Debugger (in IDE) also works with emulator
  6. 6. R. Vasa, 201231Eclipse IDER. Vasa, 201232Eclipse IDE - Graphical UIEditorR. Vasa, 201233Android EmulatorPermits checkingPortrait andLandscape viewsR. Vasa, 201234Emulator is nice .. but phone isbetter•The emulator runs the Android O/S (you canrun any version from 1.6 up)•Emulates the phone hardware (likeVMWare)•Emulator does not have sensors (e.g. GPS,Gyro, Accelerometer, Cell phone etc.)•Offers ways to simulate sensor dataR. Vasa, 201235Emulators Vs Simulator•iOS offers a simulator•Android has gone down the emulator path•Trade-offs (pros and cons),•Simulators start-up faster, good enough•Emulators allow checking against rel. 1.6 ofthe O/S easily + closer to phone hardware•Emulators and Simulators cannot mimic realCPU speed, disk speed, network speed etc.(yet!)R. Vasa, 201236You need a phone (for seriouswork)•Emulator + Simulators are great to learnwith•Commercial (or serious work) - Need Phone•Why?•Mobile apps. are context based (& mobile)•Best way to test them is in their naturalenvironment•Sticky message: “Cannot get users to walkaround with an emulator to their head”
  7. 7. R. Vasa, 201237Short Problem 2 (True Story)•An app. to learn Japanese•Built around Flash Cardmetaphor•Database of 145k words•During development,•Search was super-quick•When tested on phone,•Search was taking too long•Why?R. Vasa, 201238Lets get our feet wetR. Vasa, 201239Demo 1•Run IDE + Create Simple Hello World•Send it to Emulator•Watch what happens on Console View•Send an SMS to the EmulatorR. Vasa, 201240Lecture Overview - Where arewe?•Programs and Operating Systems•What is Android (for a programmer)?•Android - Device and Interaction Overview•Development Tools•Configuring IDE for Additional Insight•Using the Logger•Building a Simple App.•Building an Interactive App.R. Vasa, 201241Developers need moreinsight...•You need a lot of information whendeveloping apps:ViewsNeed these to see program behaviour(there is no console or MS-DOS prompt)R. Vasa, 201242What do developers need?•Ability to control the Emulator•Ability to watch the messages between IDEand Emulator (things are not alwaysperfect)•Ability to inspect the processes running onthe emulator (or phone)•Ability to watch the threads and resourcesused by various apps.•Ability to inspect “LOG” messages
  8. 8. R. Vasa, 201243Lecture Overview - Where arewe?•Programs and Operating Systems•What is Android (for a programmer)?•Android - Device and Interaction Overview•Development Tools•Configuring IDE for Additional Insight•Using the Logger•Building a Simple App.•Building an Interactive App.R. Vasa, 201244Can you program withoutprintln?•Guess what? We cannot do ...• System.out.println(“I am here!”);•Same issue in iOS and Android•These devices do not have a console•But, we can log messages and watch them•In Android, we can do,• Log.d(“TAG”, “I am here!”);R. Vasa, 201245Log Messages in AndroidR. Vasa, 201246Demo 2•Logging a message in Android•Multiple levels of logging•Verbose (Log.v(“TAGTAG”, “MethodX Called”);•Debug (Log.d(“BLAH”, “x should be 34” );•Information (Log.i(“TAGBLAH”, “Socket open”);)•We also have Warning, Error, Fatal, Silent•You can stop log messages from showing• http://developer.android.com/reference/android/util/Log.html(See last few methods .. you may say@#$)R. Vasa, 201247Logging•Android has Log class, iOS has NSLog•When shipping production/final code -- weshould remove these Log methods•iOS -- Use a #define in the make script•Android -- Adjust configuration of ProGuard•What is ProGuard?•Code optimisation/obfuscation tool (we willdiscuss later...)•Bundled as part of Android SDKR. Vasa, 201248Concept Recap•Key Buttons -- Home, Back, Menu•IDE, SDK, Emulator•Customising IDE to show additional info.•Logging, Emulator Control, Console•Sending messages to emulator•Use of the Log class
  9. 9. R. Vasa, 201249Lecture Overview - Where arewe?•Programs and Operating Systems•What is Android (for a programmer)?•Android - Device and Interaction Overview•Development Tools•Configuring IDE for Additional Insight•Using the Logger•Building a Simple App.•Building an Interactive App.R. Vasa, 201250Building a Simple App.R. Vasa, 201251What is involved?•Place UI controls (Text and Image)•Layout the controls•Centre text•Make text large font•Display Image to take up all spaceR. Vasa, 201252Knowledge Needed to Build it...•What UI Controls available?•How do we place/layout the UI controls?•How do we set the start screen?•How is the UI Constructed & Destroyed•How exactly do we start/exit the app.?R. Vasa, 201253Android Offers a number of UIControls•Offers all standard controls and lot more...ProgressTheseare asmallsubset ofavailablecontrolsR. Vasa, 201254Each Screen is an Activity•Android app. is made up of ActivitiesActivity
  10. 10. R. Vasa, 201255Views are Android’s Key UIBuilding Block•We need two views on the ActivityTextViewImageViewR. Vasa, 201256Views are Placed inside a ViewGroup•Different types of View Groups are provided•Each View Group offers a different methodto layout the ViewsView Group(LinearLayout)R. Vasa, 201257View Groups and Layouts•Android offers the following View Groups,•Linear Layout (Horizontal or Vertical)•Absolute Layout (You set X, Y for each View)•Table Layout (Rows and Columns)•Relative Layout (Position relative to otherViews)•Frame Layout (Show only one view at atime)•Scroll View (Permits scrolling of the screen)•View Groups can be nestedR. Vasa, 201258Linear Layout•Two Linear Layouts with 4 Views each•Nested View Groups•Activity contains,•Linear Layout (Vertical)•Linear Layout (Horizontal)•Linear Layout (Vertical)•8 Text ViewsSource code:http://developer.android.com/resources/tutorials/views/hello-linearlayout.htmlR. Vasa, 201259How do we program theLayout?•Layout can be written as an XML file•Layout can be also be written in Java•XML file is easier to start off withLayout Definition XML FileR. Vasa, 201260Concept Recap•We use a View Group to place and controlwhere Views are shown•An App. can have one or more ActivitiesActivity View Group Views(Layout)
  11. 11. R. Vasa, 201261Demo 3 - Linear Layout Control•The layout manager offers control on howmuch a View will stretch•You can set width / height of each Viewto,•Match Parent (same width/height as parent)•Fill Parent (cover up parent)•Wrap Content (use only what is needed)•You can use Gravity to position View•You can combine using bit masking•You can also assign weight to ViewsR. Vasa, 201262Common Layouts•Recommended Reading:• http://developer.android.com/guide/topics/ui/layout-objects.html•Layouts take some time to learn•Try different layouts and adjust options•Change the background colour of the viewsto see how the layout works•Remember -- gravity and weightadjustmentR. Vasa, 201263Generated Code, Layout &Resources•How did Australia image get into the App.?•How did we set the text to “Australia”?•Recall: Convention Over Configuration•Layout Defined in /layout/main.xml•Resources Placed in /res/drawable-•String values defined in/values/strings.xmlR. Vasa, 201264Resource Definition•All images (and media) are placed in “res”directory -- within subfolders•Android SDK tools will generate R.javawhich contains a reference to theseresourcesR. Vasa, 201265Resources and Generated CodeA reference tothese getsautomaticallygenerated by theAndroid SDK toolsR. Vasa, 201266Resources and Generated CodeGenerated Codestatic final int australia=0x7f020000;
  12. 12. R. Vasa, 201267A Reference to Layout alsoGeneratedAll References are IntegersR. Vasa, 201268Concept Recap•We use a View Group to place and controlwhere Views are shown•An App. can have one or more ActivitiesActivity View Group Views(Layout)R. Vasa, 201269How does Activity know aboutlayout?Reference to the layoutThis is the Activity Class(Android Runtime will Render this Layout)R. Vasa, 201270Who writes the Activity code?This block of code is created byIDE/SDK when we create newAndroid projectYou can also write you own -- more on that later insemesterR. Vasa, 201271Activity CreationMethod called (by the ApplicationLauncher) when Activity is firstcreatedR. Vasa, 201272Activity Creation - LayoutRendeingMethod call will pass the reference tothe layout that needs to be renderedon the screen(We will discuss the “rending model” later in thesemester)
  13. 13. R. Vasa, 201273What is the “root” Activity?•How does Android know which Activity tocreate first?Answer: Application Manifest FileR. Vasa, 201274Application Manifest FileActivity NameApplication Icon ReferenceCategoryR. Vasa, 201275Concept RecapActivityView Group(Layout)Activity Class (Java)Layout Definition(main.xml)R. Vasa, 201276Layouts and Resources•How did the Australia image get intolayout?Layout can refer to resources@drawable is a special tagR. Vasa, 201277Layouts and String Information•How did we set the text to “Australia”String constantR. Vasa, 201278Layout and String Information•String information can come from constantvalues defined in values.xmlContext Helpshowsrecommendations
  14. 14. R. Vasa, 201279String Constant ValuesDefined as aresourceRefer using an @string tagR. Vasa, 201280What is it with the @ tag?•Constant Resources in Android can bereferred using the “@” tag in XML layout•Example: @drawable, @string ...@drawable/australia@drawable/botsR. Vasa, 201281Significance of hdpi/ldpi/mdpiHigh-Res, 240 dpi screenLow-Res, 120 dpi screenMed-Res, 160 dpi screenDifferent resolution imagesR. Vasa, 2012@ Tag and Multiple ScreenResolutions•Dealing with multiple screen resolutions@drawable/iconAndroid Runtime decides best resource to usebased on hardware capabilitiesR. Vasa, 201283Drawable at DifferentResolutionsHighLowMediumR. Vasa, 201284Drawable at MultipleResolutions•You should ideally provide these images•Runtime will try to•Scale down Highest resolution available, (or)•But, Low may need scaling up (yuk!)•Images at different resolution must becalled the “same name”•SDK convention based tools will select bestoption
  15. 15. R. Vasa, 201285Lecture Overview - Where arewe?•Programs and Operating Systems•What is Android (for a programmer)?•Android - Device and Interaction Overview•Development Tools•Configuring IDE for Additional Insight•Using the Logger•Building a Simple App.•Building an Interactive App.R. Vasa, 201286Building an App with SimpleInteraction•Temperature Conversion (C -> F)R. Vasa, 201287What is involved?•Place some UI controls•Write a simple function (C -> F)•When Button is clicked,•Use (C->F) function•Pass it the Celsius value•Display the Fahrenheit ValueR. Vasa, 201288Demo 4•Walk through of (C->F) Conversion App.•Recap: Activity, Layout and Views•Event HandlingR. Vasa, 201289Recommended Reading•What Android Is, Tim Bray• http://www.tbray.org/ongoing/When/201x/2010/11/14/What-Android-Is•Android Developers Guide• http://developer.android.com• Common Layouts• http://developer.android.com/guide/topics/ui/layout-objects.html

×