MVC Apps Basic Widget Lifecycle Logging Debugging Dialogs

Transcription

1 Overview MVC Apps Basic Widget Lifecycle Logging Debugging Dialogs Lecture: MVC Model View Controller What is an App? Android Activity Lifecycle Android Debugging Fixing Rotations & Landscape Layouts Localization MVC Model, View, Controller Architecture Pattern Very common, many variants Concept - breakdown all objects into either: Models (data) Views (user interface) Controller (application logic) Benefits: Breaks App into manageable chunks Can swap logic, user interface, or data easily MVC - Model The Model holds application data Examples are user data, product information, questions, profile data, etc These will usually be custom classes Examples include: SQLite JSON XML 1

2 MVC - View MVC - Controller Views handle the user interface, such as drawing themselves They may also handle user input (although variations of MVC don t) If you can see it, consider it a view! Application view objects make up the view layer Our view objects are inflated from XML in the controller using setcontentview() This is the glue that binds the Model and View Contains application logic and handles the flow of information from the view to the model and back For Android, controllers usually inherit from Activity, Fragment or Service We ll talk about Fragments and Services later in the course MVC All Together Now User Input User presses something View sends message to controller View Controller Model Controller updates the view with data Controller updates model Controller takes data from model What is an App? We ve mentioned activities and apps, they are NOT the same thing The application is contained in an.apk file, and used to install onto a device Every app is isolated into it s own sandbox (linux process) and even has it s own Java virtual machine If any of an app s components are needed, the app is started and then shut down by the user or the system to recover memory 2

3 What is an App? What is an App? An App is made up of components: 1. Activities single screen with a UI suiting a single purpose 2. Services an app that runs in the background such as playing music or network activity 3. Broadcast Receivers Allows for the system to deliver events (messages) to registered apps such as low power or alarms 4. Content Providers manages an app meant to share datasets such as contacts Components (activities, services, broadcast receivers) are activated by intents An intent defines a message to activate a specific component (explicit intent) or a type of component (implicit intent) You can use intents with startactivity() or startactivityforresult() You can start service with a JobScheduler or startservice() You can broadcast with sendbroadcast() The Apps definition - Manifest Before an app starts, Android knows every component through the App s Manifest Manifest is located at the root directory, and all components must be in this file Purposes: 1. User permissions the app requires (normal & dangerous) 2. Minimum API level for the app 3. Hardware and software features used by the app 4. API libraries beyond the Android API Looks like: <activity> <services> <receiver> <provider> We will cover each if these in more detail in future lectures Lets create a new empty app Add a button to our layout from the GUI Interface, make sure it has a resource ID This looks ugly left justified, click View all properties at the bottom of the properties tab Find the property gravity and press center to align Gravity impacts how views within the view layout are arranged and placed 3

4 We don t want our button to span the entire extent of the screen Select the button and look for layout_width and layout_height Select wrap_content for layout_width Note that this property has the layout_ naming convention, this means it is instructing its container object We need a reference to the button to use it public class MainActivity extends AppCompatActivity { private TextView textview; private Button button; protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); textview = (TextView)findViewById(R.id.textView); textview.settext("we are changing text!"); button = (Button)findViewById(R.id.button); Create a variable to hold a reference to the button, grab it with findviewbyid() and cast to a Button To control the button s functionality we have two options: 1. Declare a Method in our Class &/or link in xml 2. Anonymous Class Anonymous Class a one shot class that doesn t have a name, usually implements some interface (functionality) If we don t want to use an anonymous class, we can use the interface and then generate it with help from Android Studio button.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { //purposely left empty ); If we use the method approach, we can also hard-code the name into the XML This forms a connection between the button and the actual code to occur during pressing 4

5 Android Studio can do much of the work for you if you remember what you want to do and are fine with a little searching public class MainActivity extends AppCompatActivity implements View.OnClickListener{ private TextView textview; private Button button; public void onclick(view v) { //Left blank Let s randomly change the color of our Text View whenever the button is pressed, we ll use an Anonymous class for this: button.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { Random rand = new Random(); textview.settextcolor(color.argb(rand.nextint(255), rand.nextint(255), rand.nextint(255), rand.nextint(255))); ); Many of the text input widgets are just variations of how text is displayed / if a keyboard is expected to be used Add a Plain Text field to our application, make sure we have an ID Hint text is a suggestion on what to enter Input Type restricts what can be placed inside or how the field reacts Jump into code and add an Edit Text private variable How did I know what class to use? Check the XML! Grab the edit text by ID & attach a listener to work with the EditText object: addtextchangedlistener each time a field is changed setoneditoractionlistener when action button is clicked on keyboard 5

6 edittext.addtextchangedlistener(new TextWatcher() { public void beforetextchanged(charsequence s, int start, int count, int after) { public void ontextchanged(charsequence s, int start, int before, int count) { public void aftertextchanged(editable s) { ); Let s take the input after the action button is pressed and apply it to the text of our button edittext.setoneditoractionlistener(new TextView.OnEditorActionListener() { public boolean oneditoraction(textview v, int actionid, KeyEvent event) edittext.setoneditoractionlistener(new TextView.OnEditorActionListener() { public boolean oneditoraction(textview v, int actionid, KeyEvent event) { return false; ); ); { button.settext(v.gettext()); return false; Toasts If we need to temporarily inform the user about something we can use toasts Toasts don t require any user interaction, think of them as brief messages to the user Toasts The Toast class has a public static method called maketext() There are two versions of maketext: Toast.makeText( Context context, CharSequence text, int duration); This is a toast Toast.makeText( Context context, int resid, int duration); 6

7 Toasts Put a toast in the button listener: There is a problem try rotating your device edittext.setoneditoractionlistener(new TextView.OnEditorActionListener() { public boolean oneditoraction(textview v, int actionid, KeyEvent event) { button.settext(v.gettext()); Toast.makeText(MainActivity.this, "A button has been pressed.", Toast.LENGTH_LONG).show(); Notice how everything resets? Your app was created and destroyed. return false; Android Activity Lifecycle Android Activity Lifecycle The lifecycle of an activity goes through several stages This diagram shows the possible states of your activity When states are changed, methods are automatically called by the Activity Manager The oncreate method starts up the activity, it is called before it become visible to the user We can cause lifecycle changes easily: Home button I m going to do something else for a moment but I will come back to the activity Back button I m done with this activity 7

8 Android Activity Lifecycle Android Debugging We are going to use android.util.log class to understand activity state changes The log has multiple levels for filtering: use d for debug Log methods use two strings, a TAG meant to identify the source class and the MESSAGE (a string or a resource can be used) Methods of Debugging: LogCat & Dalvik Debug Monitor Service (DDMS) Breakpoints & Debug Perspective Android Lint It is highly recommended to create a private static final String for each class to uniquely identify messages: private static final String TAG = LifecycleTest ; Android Debugging LogCat and DDMS You can see Log Cat in 2 ways: Android Debugging LogCat and DDMS LogCat has 5 log levels 1. Error: Log.e( ) Errors 2. Warning: Log.w( ) Warnings 3. Info: Log.i( ) Information 4. Debug: Log.d( ) Debug output 5. Verbose: Log.v( ) Dev only! Verbose Debug Information Warning Error 8

9 Android Debugging LogCat and DDMS Filters can be used to view by Package Name, Tag or content (this is important since your phone will be spitting out tons of data) Click the green + button Android Debugging LogCat, DDMS,Debug Dalvik Debug Monitor Service (DDMS) handles debugging We can also access the debug menu to see application information Android Debugging LogCat and DDMS To add a break point, click in the grey space near the left side of your code Swap to the debug perspective in the device manager You need to debug the app, not run the app Android Debugging Android Lint Lint saves you on Android (not java) specific problems Issues with XML, versions, resource IDs, etc Every once and a while, lint and auto-complete will fail miserably, restart Android Studio Use the resume, disconnect, step over, return Use variables and breakpoints tab to find things quickly 9

10 Device Configurations When the device is rotated, the device configuration is changed Configurations are composed of: Screen Orientation Screen Density Screen Size Keyboard Type Dock Mode Language And more Screen Orientation change the device config Multiple Layouts Create a new folder under res called: layout-land Or, in the Design panel for the layout: Design panel s Create Landscape Variant will make a new version with all the same widgets and Ids Multiple Layouts Both layouts need the same filename for this to work (they get assigned the same resource) *layoutname*-land is a configuration qualifier so Android can figure out what layout to use based on the device Multiple Layouts We will cover how to save data in another lecture. There are multiple means: Bundles Files / Databases JSON / XML 10

11 Localization Localization Android devices are used worldwide Localization the process of providing the appropriate resources for your app based on the device s language settings Customization of your app to handle various locales and spoken languages increases the number of potential customers Localization can be for any resource, we will be focusing on text Language settings are part of the device s configuration Localization is handled through configuration qualifiers You create folders within res with names specific to the language you are supporting Folders with no qualifier ( the ones you normally see) will be the default when no folder is found for the current settings Localization Android Studio features an easy way: Localization Setup Folders Config qualifiers for folders come from ISO codes: French and Spanish values can be supported by creating the following folders under res values-fr raw-fr values-es raw-es Regional differences can also be supported: values-en-rus values-en-rgb 11

12 Localization Setup Folders Localization Setup Folders Use a translator to create some basic text across English, French and Spanish To see the changes on your device, you ll need to set the language in Settings->Personal->Language & input Create your strings in your native language in a strings.xml file Copy and paste this file into the other language folders or let Android Studio do it for you Paste in your translated text for each Localization Setup Folders Localization A Note on Configuration Qualifiers You may feel tempted to throw all your resources is a folder specifically for English DON T DO THIS! You need a default directory, otherwise a qualifier can t be found, it will crash the application Keep your native language in default, because displaying something is always better than a crashed app! There is a hierarchy of configuration qualifiers used by android to determine what resources to use: 1. Mobile Country Code 2. Language Code 3. Layout Direction 4. Smallest Width 5. Available Width 6. Available Height 7. Screen Size

13 Localization A Note on Configuration Qualifiers Homework Android determines the resources to use by REMOVING resources that don t meet the needs of the configuration first It steps down the hierarchy and remove those that don t fulfill the current level When one configuration is left, it uses that one (which very well might be the default) You can have multiple qualifiers on a folder: values es land (Spanish language with landscape) Note that the order must follow the hierarchy! Create an app that: 1. Logs debug information for each of the Activity lifecycle changes 2. Features a button and input text field 3. Uses a toast 4. Has a separate layout for vertical and horizontal layours 5. Features 1 other language Dialogs Small window that does not fill the entire screen prompting the user to make a decision We use one of the provided classes: AlertDialog title, three buttons, selectable items, custom layout DatePickerDialog/TimerPickerDialog predefined UI to selected date/time ProgressDialog - deprecated Android recommends using a DialogFragment to contain the Dialog, but we haven t learned fragments yet so ignore for now. Alert Dialogs Alert Dialogs are modal dialogs, a subset that allow for up to 3 buttons of input from the user They block interaction with the application until the user performs some function They are capable of displaying: Negative Action Pressing Cancel / No Positive Action Pressing OK / Yes Neutral Action Do not continue, ignore! Extended Alert Dialogs can feature views such as: Buttons Checkboxes Radio buttons Lists of items 13

14 Alert Dialogs The parts of an Alert Dialog: 1. Title Optional, only necessary when content area is complex 2. Content Area A message, list or custom layout 3. Action Button Up to three action buttons setpositivebutton() setnegativebutton() setneutralbutton() Alert Dialogs Steps to create an Alert Dialog: 1. Instantiate an AlertDialog.Builder() 2. Chain setter methods: Setting the message/title and buttons Creating any listeners to the buttons 3. Create the AlertDialog from the builder 4. Show the AlertDialog Alert Dialogs Alert Dialogs Returning Information button.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setmessage("this is the message"); builder.settitle("this is the title"); builder.setpositivebutton("positive button pressed", null); builder.setnegativebutton("negative button pressed", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { Toast.makeText(MainActivity.this, "Example text", Toast.LENGTH_SHORT); ); builder.setneutralbutton("neutral Button", null); ); AlertDialog dialog = builder.create(); dialog.show(); Since we are dealing with a nested class, we have access to our parent Create methods in the parent class to handle each Alert Dialog case protected void onpositivepress() { textview.settext("positive Press"); protected void onnegativepress() { textview.settext("negative Press"); protected void onneutralpress() { textview.settext("neutral Press"); 14

15 Alert Dialogs Adding a List Available List Types: 1. Single-choice list 2. Persistent single-choice list (radio buttons) 3. Persistent multiple-choice list (checkboxes) Lists require usage of the setitems() method, a list of objects and a callback to handle selection The list is stored in the message area, so the title bar should be used to communicate to the user Alert Dialogs Adding a List Available List Types: 1. Single-choice list 2. Persistent single-choice list (radio buttons) 3. Persistent multiple-choice list (checkboxes) Lists require usage of the setitems() method, a list of objects and a callback to handle selection The list is stored in the message area, the title bar is used to communicate to the user In the future we will discuss adding ArrayAdapters for dynamic data Alert Dialogs Adding a List AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.settitle("list Example").setItems(R.array.faculty_names, new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { switch(which) { case 0: textview.settext("polikar"); break; case 1: textview.settext("schmalzel"); break; case 2: textview.settext("krchnavek"); break; case 3: textview.settext("head"); break; ).create().show(); Alert Dialogs Adding a List We can create a custom layout for our dialog, in addition to the buttons that a normal layout would have Create a new custom layout however you see fit public void onclick(view v) { AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setview(r.layout.dialog_test).setpositivebutton("ok", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { ).setnegativebutton("cancel", new DialogInterface.OnClickListener() { public void onclick(dialoginterface dialog, int which) { ).create(); builder.show(); 15

16 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=" xmlns:app=" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:adjustviewbounds="true" android:scaletype="fitxy" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:fontfamily="cursive" android:gravity="center" android:paddingbottom="20sp" android:text="love Craft" android:textsize="36sp" android:textstyle="bold" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:adjustviewbounds="true" android:croptopadding="true" android:scaletype="fitxy" /> </LinearLayout> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:gravity="center" android:hint="user Name" android:inputtype="textpersonname" android:text="name" /> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:gravity="center" android:hint="password" android:inputtype="textpassword" /> </LinearLayout> Android Activity Lifecycle Mini Lab (25 minutes) 1. Create a new activity called LifecycleTest 2. Override the following methods: public void onstart() public void onpause() public void onresume() public void onstop() public void ondestroy() 3. Add a static string for the tag 4. Add a Log.d() to each method telling when the method is executed 5. Make sure you call the super class methods FIRST! 6. Press Home then press Back 16