Creating Android Apps 5

font-family: Arial;

}

Selectors come in a variety of flavors. If you want all of your hyperlinks (the to display in italics, add the following to your stylesheet:
a element)

If you want to be more specific and only italicize the hyperlinks that are containedsomewhere within an

h1 tag, add the following to your stylesheet:

h1 a { font-style: italic; }

You can also define your own custom selectors by adding

your HTML tags. Consider the following HTML snippet:

id and/or class attributes to

<h1 class="loud">Hi there!</h1>

<p>Thanks for visiting my web page.</p>

<p>I hope you like it.</p>

<ul>

<li class="loud">Pizza</li>

<li>Beer</li>

<li>Dogs</li>

</ul>

If we add

.loud { font-style: italic; } to the CSS for this HTML, Hi there! and Pizza the a class of  in this snippet (or in HTML at all, for that matter).Applying CSS by tag, use the following rule:will show up italicized because they both have the loud class. The dot in front of.loud selector is important—it’s how the CSS knows to look for HTML tags withloud. If you omit the dot, the CSS will look for a loud tag, which doesn’t existid is similar. To add a yellow background fill to the highlight paragraph

#highlight { background-color: yellow; }

Here, the

To recap, you can opt to select elements by tag name (e.g.,

(e.g.,

get more specific by chaining selectors together (e.g.,

# symbol tells the CSS to look for an HTML tag with the ID highlight.body, h1, p), by class name.loud, .subtle, .error), or by ID (e.g., #highlight, #login, #promo). And, you canh1 a, body ul .loud).

There are differences between you have more than one item on the page with the same

Conversely,

When I first learned this, I figured I’d just always use class attributes so I wouldn’t have to worry about whether I was duping an ID value.However, selecting elements by ID is much faster than by class, so you can hurt your performance by overusing class selectors.class and id. Use class attributes whenclass value.id values have to be unique to a page.

a { font-style: italic; }

Read More

Creating Android App 4

Even if you aren’t running Mac OS X, you should use Chrome when

testing your Android web apps on a desktop web browser, because

Chrome is the closest desktop browser to Android’s mobile browser.

Chrome is available for Mac and Windows from http://google.com/.

chrome

Introduction to CSS

As you’ve seen, browsers render certain HTML elements with distinct styles (for example,

headings are large and bold, paragraphs are followed by a blank line, and so

forth). These styles are very basic and are primarily intended to help the reader understand

the structure and meaning of the document.

To go beyond this simple structure-based rendering, you use Cascading Style Sheets

(CSS). CSS is a stylesheet language that you use to define the visual presentation of an

HTML document. You can use CSS to define simple things like the text color, size, and

style (bold, italic, etc.), or complex things like page layout, gradients, opacity, and much

more.Example 1-4 shows a CSS rule that instructs the browser to display any text in the body

element using the color red. In this example, body is the selector (this specifies what is

affected by the rule) and the curly braces enclose the declaration (the rule itself). The

declaration includes a set of properties and their values. In this example, color is the

property, and red is the value of the color property.

Example 1-4. A simple CSS rule

body { color: red; }

Property names are predefined in the CSS specification, which means that you can’t

just make them up. Each property expects an appropriate value, and there can be lots

of appropriate values and value formats for a given property.

For example, you can specify colors with predefined keywords like red, or by using

HTML color code notation, which uses a hexadecimal notation: a hash/pound sign

(#) followed by three pairs of hexadecimal digits (0–F) representing (from left to right)

red, green, and blue values (red is represented as #FF0000). Properties that expect measurements

can accept values like 10px, 75%, and 1em.Example 1-5 shows some common

declarations. The color code shown for background-color corresponds to the CSS

“gray.”

Example 1-5. Some common CSS declarations

body {

color: red;

background-color: #808080;

font-size: 12px;

font-style: italic;

font-weight: bold;

Read More

Creating Android Apps 3

The body and head are always wrapped in an html element. Example1-3 shows the snippet in the context of a proper HTML document. For now the head section contains

a title element, which tells the browser what text to display in the title bar of the window.

Example 1-3. A proper HTML document

<html>

<head>

<title>My Awesome Page</title>

</head>

<body>

<h1>Hi there!</h1>

<p>Thanks for visiting my web page.</p>

<p>I hope you like it.</p>

<ul>

<li>Pizza</li>

<li>Beer</li>

<li>Dogs</li>

</ul>

</body>

</html>

Normally, when you are using your web browser you are viewing pages that are hosted on the Internet. However, browsers are perfectly good at displaying HTML documents

that are on your local machine as well. To show you what I mean, I invite you to crack open a text editor and enter the code in Example 1-3.Picking the Right Text Editor

Some text editors are not suited for authoring HTML. In particular, you want to avoid editors that support rich text editing, like Microsoft WordPad (Windows) or TextEdit

(Mac OS X). These types of editors can save their files in formats other than plain text, which will break your HTML. If you must use TextEdit, save in plain text by choosing

Format→Make Plain Text. In Windows, use Notepad instead of WordPad.

If you are in the market for a good text editor, my recommendation on the Mac is

If free is your thing, you can download Text Wrangler for Mac. For Windows, Notepad2 and Notepad ++ are highly regarded. Linux comes with an assortment of text

editors, such as vi, nano, emacs, and gedit.

When you are finished entering the code from Example1-3 , save it to your desktop as test.html and then open it with Chrome by either dragging the file onto the Chrome

application icon or opening Chrome and selecting File→Open File. Double-clicking test.html will work as well, but it could open in your text editor or another browser,

depending on your settings.

Textmate. There is a clone version for Windows called E Text Editor.

Read More

Android App Creation

You can also put HTML tags inside other HTML tags. Example 1-2

the li tags are children of the ul parent.

Example 1-2. Unordered list

<ul>

<li>Pizza</li>

<li>Beer</li>

<li>Dogs</li>

</ul>

The tags covered so far are all block tags. The defining characteristic of block tags is that they are displayed on a line of their own, with no elements to the left or right of

them. That is why the heading, paragraphs, and list items progress down the page instead of across it. The opposite of a block tag is an inline tag, which, as the name implies, can appear in a line. The emphasis tag (em) is an example of an inline tag, and it looks like this:

<p>I <em>really</em> hope you like it.</p>

The granddaddy of the inline tags—and arguably the coolest feature of HTML—is the

Text wrapped in an anchor tag is clickable, such that clicking on it causes the browser to load a new HTML page.

To tell the browser which new page to load, we have to add what’s called an attribute to the tag. Attributes are named values that you insert into an open tag. In an anchor

tag, you use the href attribute to specify the location of the target page. Here’s a link to Google’s home page:

<a href="http://www.google.com/">Google</a>

That might look like a bit of a jumble if you are not used to reading HTML, but you should be able to pick out the URL for the Google home page. You’ll be seeing a lot of

a tags and href attributes throughout the book, so take a minute to get your head around this if it doesn’t make sense at first glance.

There are a couple of things to keep in mind regarding attributes. Different HTML tags allow different attributes. You can add multiple attributes to an open tag by separating them with spaces. You never add attributes to a closing tag. There are hundreds of possible combinations

of attributes and tags, but don’t sweat it—we only have to worry about a dozen or so in this entire book.

The HTML snippet that we’ve been looking at would normally reside in the body section of a complete HTML document. An HTML document is made up of two sections: the head and the body. The body is where you put all the content that you want users to see. The head contains information about the page, most of which is invisible to the

user.

a tag. The “a” stands for anchor, but at times I’ll also refer to it as a link or hyperlink. shows an unordered list (ul) tag that contains three list items (li). In a browser, this appears as a bulleted list with each item on its own line. When you have a tag or tags inside another tag, the inner tags are called child elements, or children, of the parent tag. So in this example,

Read More

Creating Android Apps 2

Web Programming Crash Course

The three main technologies we will use to build web apps are HTML, CSS, and Java-Script. We’ll quickly cover each to make sure we’re all on the same page before plowing into the fancy stuff.

Introduction to HTML

When you are browsing the web, the pages you are viewing are just text documents sitting on someone else’s computer. The text in a typical web page is wrapped in HTML tags, which tell your browser about the structure of the document. With this information, the browser can decide how to display the information in a way that makes sense.

Consider the web page snippet shown in Example 1.1. On the first line, the string Hi there! is wrapped in a pair of h1 tags. Notice that the open tag and the close tag are slightly different: the close tag has a slash (/) as the second character, while the open tag does not have a slash.

Wrapping text in h1 tags tells the browser that the words enclosed are a heading, which will cause it to be displayed in large bold text on its own line. There are also h2, h3, h4,

h5, and h6 heading tags. The lower the number, the more important the header, so text wrapped in an h6 tag will be smaller (i.e., less important-looking) than text wrapped in

an h3 tag.

After the h1 tag in Example 1.1, there are two lines wrapped in p tags. These are called paragraph tags. Browsers will display each paragraph on its own line. If the paragraph

is long enough to exceed the width of the browser window, the text will bump down and continue on the next line. In either case, a blank line will be inserted after the

paragraph to separate it from the next item on the page.

Example 1-1. HTML snippet

<h1>Hi there!</h1>

<p>Thanks for visiting my web page.</p>

Read More

Creating Android Apps 1

Before we dive in, I’d like to quickly establish the playing field. In this chapter, I’ll define key terms, compare the pros and cons of the two most common development approaches,

and give a crash course on the three core web technologies used in this book.

Web Apps Versus Native Apps

First, I’d like to define what I mean by web app and native app and consider their pros

and cons.

What Is a Web App?

To me, a web app is basically a website that is specifically optimized for use on a smartphone. The site content can be anything from a standard small business brochure

site to a mortgage calculator to a daily calorie tracker—the content is irrelevant. The defining characteristics of a web app are that the user interface (UI) is built with web

standard technologies, it is available at a URL (public, private, or perhaps behind a login), and it is optimized for the characteristics of a mobile device. A web app is not

installed on the phone, it is not available in the Android Market, and it is not written with Java.

What Is a Native App?

In contrast, native apps are installed on the Android phone, they have access to the hardware (speakers, accelerometer, camera, etc.), and they are written with Java. The defining characteristic of a native app, however, is that it’s available in the AndroidMarket—a feature that has captured the imagination of a horde of software entrepreneurs

worldwide, me included.

Pros and Cons

Different applications have different requirements. Some apps are a better fit with web technologies than others. Knowing the pros and cons of each approach will help you

make a better decision about which path is appropriate for your situation.

Here are the pros of native app development:

• Millions of registered credit card owners are one click away

• You can access all the cool hardware features of the device

Here are the cons of native app development:

• You have to pay to become an Android developer

• Your app will run only on Android phones

• You have to develop using Java

• The development cycle is slow (develop, compile, deploy, repeat)

Here are the pros of web app development:

• Web developers can use their current authoring tools

• You can use your current web design and development skills

• Your app will run on any device that has a web browser

• You can fix bugs in real time

• The development cycle is fast

Here are the cons of web app development:

• You cannot access the all cool hardware features of the phone

• You have to roll your own payment system if you want to charge for the app

• It can be difficult to achieve sophisticated UI effects

Read More