Angular Github viewer

Here is result of a class I just took on angular

http://plnkr.co/edit/PJHy3cC6fK9i1nPnYfvE?p=preview


Github api:
https://api.github.com/users/angular
https://api.github.com/repos/angular/angular-component-spec
https://api.github.com/repos/angular/angular-component-spec/collaborators

Android Mobile Coursera class has started

I am signed up with 140,000 other students for  the "Programming Mobile Applications for Android Handheld Systems" training class starting now.

The teacher is Dr. Adam Porter

Preview lectures

Asignments

Lecture 1 slides

3 Applications
2 Application Framework
1 Native System Libraries (Native DK) / Runtime (Davlik - Core Libraries)
0 Linux Kernel

3 : Contacts, Phone, Browser, Home app, etc

2: reusable software that many applications will need like Package Manager , Window Manager, View System (common user interface elements such as Tabs, Lists, grids, text boxes, buttons, textview ), Resource Manager (non-compiled code resources: strings, graphics, & layout files), Content Providers, Activity Manager,  Location Manager

1 : core performance sensitive activities on device (native dev kit) such as C library, surface manager, media manager webkit etc. / File packaged with other resources and installed on device. Dalvik VM executes the Dex Bytecode file when invoked on device. Dalvik VM designed to be resource constrained environment with slower cpu, less memory, limited battery life System C library .

0 : Standard services - Provides infrastructure mechanisms to manage mobile device resources. Android specific such as power management, Android Shared memory, Binder, etc

Use the Hierarchy Perspective after the program is launched :

here is some sample output(click on your activity on the left):

The Traceview within DDMS can be pressed to start when a debug tracepoint is hit, which starts the profiling. After profiling is started, let it run through, and then click the same button to end the profiling.  The botton to start/stop is shown:

After hitting the end button, the output is shown (timeline view on top and profile view on bottom):

Method profiling - select class, start it, then do something on device with app, click stop:

https://github.com/aporter/coursera-android

This first week includes:
 1. The Week 1 Quiz. Sixteen or so questions to help you make sure you've followed my lectures.

2. Two Labs.
 a) Lab - Learn to Submit - A very simple assignment designed to make sure that you can submit work to the Coursera system for grading

"To do this assignment, simply create a one-line text file with the name of your home country and nothing else. Make sure you are creating a real text file, not, for example a .rtf file" Then click on the submit button to select and upload that text file."

 b) Lab - Development Environment - A more involved Lab to help you set up your Development Environment and to familiarize yourself with it.



Intel Hardware Accelerated Execution Manager(HAXM)

• About: http://software.intel.com/en-us/android/articles/speeding-up-the-android-emulator-on-intel-architecture 
• Downloads: http://software.intel.com/en-­‐us/articles/intel-­‐hardware-­‐accelerated-­‐execution-­‐manager 

AndroidManifest.xml:

Define your package :

package="course.examples.theanswer"

Define your Actvity:

<activity
            android:name="course.examples.theanswer.TheAnswer"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

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

Define your layout in answer_layout :

<RelativeLayout...

<TextView
        android:id="@+id/answer_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="24sp" />"

set your layout and access your widget

   setContentView(R.layout.answer_layout);
   TextView answerView = (TextView) findViewById(R.id.answer_view);
   answerView.setText("The answer to life, the universe and everything is:\n\n"+ output);

calculator  with 2 EditText , TextView widgets and a Button with on click listener:

        final EditText value1 = (EditText) findViewById(R.id.value1);
        final EditText value2 = (EditText) findViewById(R.id.value2);

        final TextView result = (TextView) findViewById(R.id.result);

        Button addButton = (Button) findViewById(R.id.addValues);
        addButton.setOnClickListener(new OnClickListener() {

            public void onClick(View v) {
                try {
                    int val1 = Integer.parseInt(value1.getText().toString());
                    int val2 = Integer.parseInt(value2.getText().toString());

                    Integer answer = val1 + val2;
                    result.setText(answer.toString());
                } catch (Exception e) {
                    Log.e(LOG_TAG, "Failed to add numbers", e);
                }
            }
        });

JUNIT Test of Layout

 LayoutTests extends ActivityInstrumentationTestCase2<MainActivity>

    public LayoutTests() {
        super("com.mamlambo.article.simplecalc", MainActivity.class);
    }

    protected void setUp() throws Exception {
        super.setUp();

        MainActivity mainActivity = getActivity();

1 – Log.i(…, …) – Sends an INFO LogCat message
2 – Log.d(…, …) – Sends a DEBUG LogCat message
3 – Log.e(…, …) – Sends an ERROR LogCat message
4 – Log.v(…, …) – Sends a VERBOSE LogCat message

http://developer.android.com/reference/android/util/Log.html

import android.util.Log

 private final String TAG = "TheAnswer";

 Log.i(TAG, "Printing the answer to life");


settings custom locale:

http://developer.android.com/training/basics/supporting-devices/languages.html

values/ strings.xml
  <string name="hello_world">Hello world! My Name is David.</string>

values-es/ strings.xml 

   <string name="hello_world">Hola Mundo! Me llamo es David!</string>

layout/activity_main.xml:

TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" 

https://code.google.com/p/simple-calc-unit-testing/downloads/detail?name=FullCodeDownload.zip&can=2&q=

3. The Getting to Know You Survey - This is only graded activity for the week. We'd like to get some information about you to help us know more about who you are, your background and your expectations for the course.
http://help.coursera.org/customer/portal/articles/1329059-how-can-i-keep-track-of-course-deadlines-
https://class.coursera.org/android-001/api/course/calendar

Polymer

Polymer approach:

Elements are pretty great. They’re the building blocks of the web. Unfortunately, as web apps got more complex, we collectively outgrew the basic set of elements that ships in browsers. Our solution was to replace markup with gobs of script. In that shift, we’ve lost the elegance of the element. Polymer returns to our roots. We think the answer is not gobs of script, but rather to build more powerful elements. A set of powerful new technologies called Web Components makes this possible.

Custom Elements:

Embracing the philosophy means a web app becomes a collection of well-defined, reusable components.

• custom elements polyfill
• creating elements

Using Elements

• Core Elements
• Paper Elements - implements the Material Design [demo]

Creating Elements

https://www.youtube.com/watch?v=5b5O5cclPbk (web components overview)

- https://github.com/KamiQuasi/wc-overview
- natively without polyfills



Intro Polymer
- easier to create custom elements
- quiz application demo app w paper elements
- inimation 60 frames / sec

https://www.youtube.com/watch?v=3CJcHJGZfws (web components and polymer overview)

https://github.com/kylebuch8/PolymerTutorial

http://www.polymer-project.org/resources/video.html




http://www.polymer-project.org/docs/start/tutorial/intro.html
http://www.html5rocks.com/en/tutorials/webcomponents/template/
https://www.youtube.com/watch?v=eJZx9c6YL8k
http://www.polymer-project.org/docs/polymer/polymer.html#altregistration
http://www.polymer-project.org/docs/polymer/databinding.html
http://www.polymer-project.org/docs/polymer/databinding-advanced.html#autobinding

https://github.com/Polymer/observe-js

Android information and devlopment resources

The Android javadoc is great reference material:
http://developer.android.com/reference/packages.html

The Android Application components another important resource: 
http://developer.android.com/guide/components/index.html

The Android Welcome page
http://developer.android.com/about/index.html

The Android Open Source Project
http://source.android.com/


Linux Kernel: Standard services - Provides infrastructure mechanisms to manage mobile device resources
 •  Security
•  Memory, process, & thread management
 • Network & File I/O
 • Device driver framework (pluggable devices)
Android specific includes power management, Android Shared memory, low memory killer, Binder (Inter Process communication) , alarm driver, debugger, logger
http://en.wikipedia.org/wiki/Android_(operating_system)#Linux_kernel


Native System Libraries (C/C++ Native DK) core performance sensitive activities on device
System C library - (std os system calls such as process/thread creation, memory allocation, mathemetical) bionic libc
• Surface Manager  - (updating the display) display management
• Media Framework  - (playback) audio/video streaming
• FreeType  - library for rendering fonts
• Webkit - (rendering and display web pages ) web browser engine
• OpenGL ES, SGL - graphics engines
• SQLite - relational database engine
• SSL  - secure sockets layer
http://developer.android.com/tools/sdk/ndk/index.html

Runtime (part of System libraries layer)
Davlik virtual machine executes the android apps, code written in java compiled into series of bytecode files , Davlik dx program transforms java classes into single Dex bytecode file  (classes.dex). File packaged with other resources and installed on device. Dalvik VM executes the Dex Bytecode file when invoked on device.
Dalvik VM designed to be resource constrained environment with slower cpu, less memory, limited battery life
http://en.wikipedia.org/wiki/Dalvik_(software)
Core Libraries
• Core Java classes (building blocks)
• android.* (application lifecycle)
• java.*, javax.* (data structures, concurrency, I/O)
• junit.* (unit testing)
• org.*  (internet/ web services)
org.json.*, org.xml.*
http://en.wikipedia.org/wiki/Comparison_of_Java_and_Android_API

Application Framework - reusable software that many applications will need
Package Manager  - Manages application packages on device such as info about apps
Window Manager  - Manages top-level window’s look & behavior (notification bar, main application window, sub-menus/dialogs)
View System  - common user interface elements such as Tabs, Lists, grids, text boxes, buttons, textview
Resource Manager - Manages non-compiled code resources: strings, graphics, & layout filesContent Providers  - Inter-application data sharing (i.e. databases)
Activity Manager - Application lifecycle & common navigation stack
Telephony Manager - State of telephony services
Location Manager - Access to system location services
Notification Manager - Notify users when events occur
https://sites.google.com/site/io/inside-the-android-application-framework

Application - built in apps. Can substitute apps.
Home, Contacts, Phone, Browser, Email

Activity : Represents a single screen with a user interface (view user interface) - see Activity class
- activity lifecycle or http://developer.android.com/reference/android/app/Activity.html
- Can be started by creating an Intent object & passing it to startActivity()
- Parameters can be passed as “extras” to the Intent used to start the Service
- Apps can have multiple Activities

Service -operation in background, can bind to other services or Activities. For performing long-running operations or to access remote resources. Extends the Service class.
Started Service – Often performs a single operation & usually doesn’t return a result to the caller directly
Bound Service – Offers a client-server interface that allows components to interact with the Service
http://developer.android.com/guide/components/services.html

Content Provider - Manages a shared set of application data , Never accessed directly,
but via a Content Resolver
Consistent access to data (i.e. Rest, Crud operations)
Data store backing options like SQLite, Web, File systems
Can consume data from other content providers
Extends the ContentProvider class
http://developer.android.com/guide/topics/providers/content-providers.html

Broadcast Receiver - A component that responds to system-wide Intent broadcast announcements
- Supports complex Intent filtering
- delivered asynchronously to all receivers
Extends BroadcastReceiver class
http://developer.android.com/reference/android/content/BroadcastReceiver.html

Intents - messages (i.e. events) that link application components together
http://developer.android.com/guide/components/intents-filters.html

https://sites.google.com/site/io/anatomy--physiology-of-an-android

http://developer.android.com/guide/components/fundamentals.html

ADT Bundle:
latest android platform
eclipse and ADT plugin
latest image for emulator
additional dev tools
http://developer.android.com/sdk/index.html

Emulator:
network/speed latencies
battery power
location coordinates

telnet localhost port# (i.e. 5554)

slow network:
network speed edge
network speed full
power capacity 5

power status not-charging

geo fix 0.0 40.0

sms send 3015555555 "msg"

call port number other emulator
http://developer.android.com/tools/devices/emulator.html

Davlik debug Monitor service (DDMS) perspective

- file explorer
- logcat
- button in ddms to start and stop profiling at debug tracept

Open perspective -> Hierarchy view





http://developer.android.com/guide/index.html
http://developer.android.com/training/index.html
http://www.androiddevtools.com/
http://www.dre.vanderbilt.edu/~schmidt/cs282/
http://www.cs.swarthmore.edu/~aviv/classes/s13/cs71/
http://www.cs.odu.edu/~cs495/
http://www.vogella.com/tutorials/android.html
http://www.cs.unibo.it/projects/android/2013/index.html#links
http://liisp.uncc.edu/mbapps/
http://www.stanford.edu/class/cs193a/
http://cs76.tv/2012/spring/
https://www.youtube.com/watch?v=RNaOWBBvAGo

Web Components 101

I recently watched Eric Bidelman's talk from Google I/O 2013 on Web Components.  This talk was on the Future of the web platform. This talk reminds me of Angular methodology where you are adding custom tags to HTML.

4 main areas (Shadow DOM gives encapsulation, templates or chunk of markup that later you can stamp out your elements, custom tags, html imports that can be reused via CDN URLs):

HTML templates:
Template out your markup 

Put dom in it

Parsed not rendered - won't run until you stamp it out, same for media

Hidden from document, cant traverse into,  its in its own context

Content property - document fragment , clone it, stamp it out, see whats in it

Example:

Clone it is what stamps it out (here it runs script when that happens):

See example in plunkr.

New spec for html templates  : chrome supports it.

Shadow dom (Secret markup in elements):

markup encapsulation, DOM encapsulation, css style boundary protection, no bleeding in, style boundaries, exposes to developers mechanics browser vendors use to create their html elements

iframe has it but bloated, hard to use  (extra network requests needed, multiple rendering contexts)

Dom nodes can host hidden dom

hidden dom  can't be accessed by outside  javscript

Show shadow dom in web tools under wrench:

Hidden document fragment

Using markup to control it

Browser vendors been holding out

See example in plunkr.

Filled in markup

Shadow dom gets rendered

Style things

This time add styling make it red

@host

Host element provide default styles

http://html5-demos.appspot.com/shadowdom-visualizer

Custom elements (require hyphen)

Ability to define new elements

Plunkr example 

Using js html.prototype 

Html imports

http://ericbidelman.tumblr.com/

related [web components ]

Plunker

http://plnkr.co/

Launch the editor

On right side in the initial display (or click on second button down on the right that looks like a book), you can add external libraries into your javascript. Either search for a library or click the button of an an already displayed library.

Note that the top icon on right is to preview on the right the generated output.

You can click the save button on top left to save your script to a generated web URL.

Double click a file name on left to rename it, click x icon to delete a file , or click the add file hyperlink to add a file.

There is preview button on right for a large  display of the displayed output.

Check mark button on the right is for lint integration.

Th gear icon is personal seetings like font and auto-refresh which runs the script again at interval selected . Or turn auto-refresh off.


Dev tools invocation will show you any JavaScript errors in console tab.

Right click on console and click options to clear console

To debug go in the sources tab.

ctrl-o to open your js file by entering file name in the input box.

debugging resume f8

Great conference

NCDEVCON 2014



Angular -

Ionic -

Less -

js in real world -


http://www.raymondcamden.com/2014/9/3/Speaking-at-NCDevCon-2014


 http://www.iterateme.com/blog/index.cfm/2014/8/15/Speaking-at-NCDevCon-2014-and-Why-NCDevCon-Rocks

https://github.com/mujimu/D3-Hands-On

http://matthewbusche.com/blog/index.cfm/2014/9/16/NCDevCon--Responsive-Web-Design-slides-and-video

http://www.cfgears.com/index.cfm/2014/9/17/NCDevCon-2014--SQL-Server-Tips-for-Everyday-Programmers-slides-and-video

http://matthewbusche.com/blog/index.cfm/2014/7/27/NCDevCon--Getting-Started-with-Responsive-Web-Desgin

http://www.webonise.com/webonise-lab-at-ncdevcon-2014-feed-your-brain/

http://www.slideshare.net/deesadler/ux-and-the-mobile-app

http://www.iterateme.com/blog/index.cfm/2014/9/15/Slides-and-Recording-from-My-NCDevCon-2014-Presentation-on-AWS-and-ColdFusion

https://docs.google.com/presentation/d/1XqkzqasqiVFb_7PX1B-3djCpC1ELcPzlKnJZf9qMlhc/edit#slide=id.p

http://anant5.com/

http://java.dzone.com/articles/take-look-developers-action?utm_content=buffer62cc3

http://www.cfgothchic.com/presentations/ncdc2014_vc/#/

https://github.com/adrianpomilio/javascript-vs-skynet

http://eventifier.com/event/ncdevcon14/popular

http://eventifier.com/event/ncdevcon14/slides
- http://www.slideshare.net/ericcarlisle/the-new-ui-staying-strong-with-flexbox-sass-and-mustachejs
- http://www.slideshare.net/deesadler/ux-and-the-mobile-app
- http://www.slideshare.net/BenMcCormick/component-based-development