Parsing PHP in .html Files

Add/Append the following lines in you .htaccess file in your web server.

RemoveHandler .html .htm
AddType application/x-httpd-php .php .htm .html

Source

JavaScript 101: Creating a custom object

// initialize the object
var MyOwnClass = {};

// define all the members for the object
(function(){

// declare and define a property
var foo = “hello world! I’m foo.”;

// define a method
this.init = function()
{
alert(“yo! ” + foo);
}

}).apply(MyOwnClass );

// hook up with the DOM event
window.addEventListener(“load”, MyOwnClass.init, false);

“Error #1088: The markup in the document following the root element must be well-formed.”

I was using PHP and curl as proxy to get some xml files from Basecamp for my Flex UI to consume and was successful (something like “return $response   = curl_exec($session);“. But after I refactored my little php functions into an object/class and included it in another delegation file, it suddenly stopped working. In Flex, I got the following error for the HTTPService fault event:

faultCode:Client.CouldNotDecode
faultString:’Error #1088: The markup in the document following the root element must be well-formed.’
faultDetail:’null’

In Firefox 3.5, the output XML file looked ok. But both Safari and IE gave error messages: There was an “*” in front of the <?xml ..?> header in Safari source code view; while IE gave the following error:

Invalid at the top level of the document. Error processing resource

After comparing the files before refactoring and the one after, I noticed that the refactored one was encoded in UTF-8 while the old one was in ANSI. After I converted my class file into ANSI, XML output became normal in all three browsers.

BTW, I used Notepad++. Not sure if that was an issue.

Anyhow, lessons learned: Make sure the source files are encoded in ANSI.

Any comments and thoughts are welcome!

Block statements in control flow constructs

There is no need to block (using braces to wrap) single line statements in a control flow (as-if, do-while, for/while); and you can mix blocks and non block statements together like this:

if(num > 0)
trace(num+” is positive;\n”);
else if(num <0)
{
trace(num+” is negative.”);
trace(num+” don’t be negative;\n”);
}
else if(num == 0)
trace(num+” is neutral;\n”);

This applies to all the control statements although the example here is just of if/else .

With this being said, The Elements of C# Style recommends Always us block statements in control flow constructs. Reason one is that it makes it easy to add additional statements in it; reason two is it’s easier to read than those without blocks.

Reference content from chrome in Mozilla Firefox

This is a snippet of text from Working with windows in chrome code:

In case of <browser type="content-primary" />, you can use the content shortcut property to access the Window object of the content document. You can use content.document in a browser.xul overlay to access the web page in the selected tab in a Firefox window. For example:

//alerts selected text in the main content
alert(content.window.getSelection());
// alerts the title of the document displayed in the content-primary widget
alert(content.document.title);

There is no shortcut for accessing document in the sidebar. You need to use

document.getElementById(“sidebar”).contentDocument

or

.contentWindow

,

like when Accessing content documents

Works in Firefox 3.5.5.

chrome.manifest cannot be encoded in UTF-8

I am following the awesome 2X45 minute video tutorial on the Firefox “helloworld” extension bootcamp (with copy-and-paste code).

The error console kept giving me the following warning:

“Warning: Ignoring unrecognized chrome manifest instruction.
Source file: file:///D:/Profiles/smallbug1960/Projects/hellowrold/chrome.manifest Line: 1″

(There was a couple of other messages/warnings/errors underneath this one which I failed to duplicate.)

I spent “significant amount of time”- a couple of hours, to be more precise – before finally figured it out. It turned out that I had the chrome.manifest encoded in UTF-8; once I turned it in ANSI, the errors/warnings went away and the long expected “Hello world!” button finally showed up under the status bar!

BTW, I am on Windows XP Professional/Firefox v3.5.5, if that matters.

ListView and ListActivity Demo

This is a slightly modified version at apiDemo. It demonstrates how you select multiple items on a ListView and display the results on a TextView.

main.xml layout (Note that the ListView has “choiceMode” set as “multipleChoice” and that the ListView has an id of “@android:id/list”):

<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”fill_parent”
android:layout_height=”fill_parent”
>
<TextView
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:text=” “
android:id=”@+id/selection”
/>
<ListView
android:id=”@android:id/list”
android:choiceMode=”multipleChoice”
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”/>
</LinearLayout>

Main java class:

package com.mh.android.test;

import android.app.ListActivity;
import android.os.Bundle;
import android.util.Log;
import android.util.SparseBooleanArray;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class ListAdapterTest extends ListActivity {

String[] items= {“lorem”, “ipsum”, “dolor”, “sit”, “amet”,
“consectetuer”, “adipiscing”, “elit”, “morbi”, “vel”,
“ligula”, “vitae”, “arcu”, “aliquet”, “mollis”,
“etiam”, “vel”, “erat”, “placerat”, “ante”,
“porttitor”, “sodales”, “pellentesque”, “augue”, “purus”};

TextView selection;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
setListAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_multiple_choice,
items));
selection = (TextView) findViewById(R.id.selection);
}
@Override
protected void onListItemClick(ListView parent, View v, int position, long id) {
// Clear the TextView before we assign the new content.
selection.setText(” “);
// get array of booleans for which positions are selected in the items.
// This SparseBooleanArray object contains an array of boolean values paired with keys,
// which can be accessed using valueAt(index) and keyAt(index) respectively.
SparseBooleanArray chosen = parent.getCheckedItemPositions();
for(int i=0; i<chosen.size(); i++) {
Log.d(“selection”, “index: “+i+”; key: “+chosen.keyAt(i)+”; value: “+chosen.valueAt(i)+”; “+items[chosen.keyAt(i)]);
// if the item is selected by the user, we display it on the TextView.
if(chosen.valueAt(i)) {
selection.append(items[chosen.keyAt(i)]+” “);
}
}
}
}

Focus?

I am always confused by the word “focus” (in the context of user interface, which embarrasses me very much since I am making a living as a “user interface designer”.)  Now I think I am a little clear about the meaning of it so just a note for myself.

In the WIMP environment, for a pointing device such as a mouse, it’s always clear where the “focus” is: it’s always where you point your mouse towards. In this kind of paradigm, the spatial input is continuous.  But in the context of a non-desktop environment where you use a D-pad; or in the WIMP if you use the keyboard as your current input, it’s not always clear where the input is. The concept of “focus” is used to indicate where the spatial input is currently in the GUI. If a UI element has the focus, I guess it depends on what kind of control it is, it can behave slightly differently. For a button, it means it will react as if it “received a mouse click” if the user presses the enter key; For an editable text field, it means it has a caret cursor inside it and is ready to take keyboard input (if you type something they will go into the text field in focus); For a hyperlink, it does the same thing if you press the enter key as if you click directly on it (normally load the page it links to:).)

Note that the visual feedback and behavior for the keyboard input/”discrete spatial input” paradigm is normally different from that of the mouse input/”continuous spatial input” (and also different from that of the touch input — more on this later). In the picture below, it shows the “Go” button is in focus while the “Search” button has a mouse hover.

Fig 1.

Focus on tab vs. mouse hover

Here is some notes:

1. A UI element can be “disabled” but still receives focus. See figure 2-4.

Fig 2.

"Ok" button is disabled

Fig 3.

"Cancel" button is in focus

Fig 4.

"Ok" button is in focus

2.  In MSDN glossary, it says “input focus” means “The location where the user is currently directing input. Note that just because a location in the UI is highlighted does not necessarily mean this location has input focus.” I guess the scenario is when you are hovering the mouse over an UI element?

3. Touch screen paradigms. As in iPhone, Android opt not to deal focus (showing highlight or any other visuals) in “touch mode“. An interesting reflection is about potentially different interaction paradigms for capacitive touch vs. resistive touch. Can the level of pressure be reflected as whether the UI receives the focus as opposed to take a “click”? Will the “80 percent” of the users be surprised and/or confused?

4. Design guideline for “Input focus location” at MSDN.

5. Besides the keyboard, D-pad, mouse and touch, there is another scenario where the focus can be acquired: that is by code. When a focus is acquired programmatically, the UI behaves as if it’s acquired by a user tabbing the keyboard/D-pad.

6. It’s safe to say for now, the rationale for designing co-existent interaction paradigms is that you should treat the UI as if the user has multiple input/pointing devices at hand (mouse, d-pad, keyboard tabs/arrow keys, fingers). UI shall give feedback respectively to each of the input mechanisms. One input device shall not interfere with the behaviors of the others. For example, tabbing to get another UI element in focus should not result in your mouse cursor changing its current location.

Refer to component in Flex with curly braces

Always use curly braces/brackets to refer to your component by id. Like this:

<mx:Panel …
showEffect=”{shake}”>

<pg:ShakeEffect id=”shake”/>

</mx:Panel>

You can probably do without the curly brace to refer to an effect component if you are in the main application mxml; but it won’t work for a component.

See also:

Curly Braces in Flex Control Properties

Notes for Building iPhone With HTML, CSS and JavaScript by Jonathan Stark

The book. Author: Jonathan Stark.

• Page scaling in iPhone
  By default Mobile Safari will zoom out for a page that is wider than 980px unless you specify “viewport” <meta> tag to tell it not to;
  
<meta name = "viewport" content = "user-scalable=no, width=device-width" />

• CSS for iPhone
  <link rel=”stylesheet” type=”text/css” href=”styles/iphone.css” media=”only screen and (max-device-width: 480px)” /><link rel="stylesheet" type="text/css" href="styles/desktop.css" media="screen and (min-device-width: 481px)" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styles/desktop.css" media="all" />
<![endif]-->
• Icon for iPhone home screen, a.k.a. “web clip icon”By default, this is a 57px by 57px named “apple-touch-icon.png” in your web root. iPhone will add gloss and 10px(?) radius rounded corner to it. If you don’t want the iPhone to add effects to your webclip icon, change the name of the file to “apple-touch-icon-precomposed.png“.In the case you want to add a web clip icon for an individual page that is different from the rest of the site, add one of the following lines to the of the page:


<link rel="apple-touch-icon" href="myCustomIcon.png" />
<link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />

• Full-screen modeAdd the following line to the of your page and your web app will in display full screen mode when launched from the web clip icon, which will give you an extra of 104 px in height:

  <meta name="apple-mobile-web-app-capable" content="yes" />

  Once you’ve added the apple-mobile-web-app-capable meta tag, you have the option to control the background color of the 20 pixel status bar at the top of the screen using the apple-mobile-web-app-status-bar-style meta tag. The normal gray Safari status bar is the default, or you can change it to black. You can also set it to black-translucent which makes it partialy transparent and additionally removes it from the document flow. In other words, your content will be shifted up by 20 pixels and behind the status bar the when page first loads, so you might have to position your header a little lower to compensate.

Here are some webkit(?)/Safari specific CSS or newer CSS3 attributes or confusing ones:

• text-shadow
  text-shadow: 0px 1px 0px #fff;
  The parameters: horizontal offset, vertical offset, blur, and color.
• -webkit-gradient
  background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
  a CSS gradient can be used anywhere you would normally specify a url() (e.g. background image, list style image). The parameters from left to right are as follows: the gradient type (can be linear or radial), the starting point of the gradient (can be left top, left bottom, right top, or right bottom), the end point of the gradient, the starting color, and the ending color.
• -webkit-border-top-left-radius, etc.
  #header ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
• first-child/last-child pseudo classes
  
  #header ul li:first-child a {
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
}
#header ul li:last-child a {
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
}
  The first-child and last-child pseudo classes can be a bit confusing. For example, li:first-child will select the first li that is the child of its ul parent. It does not select whatever is the first child of the li.
• rgb/rgba
  text-shadow: rgba(125,125,125,0.6) 0px -1px 0px;
  
• -webkit-border-image and border-width
  border-width: 0 8px 0 8px;
-webkit-border-image: url(images/button.png) 0 8 0 8;
  These two propoerties together allow you to assign portions of a single image to the border area of an element. They are similar to 9-slice scaling in Flash or 9-patch in Android. The parameters in border-width refer to top/right/bottom/left side of the image.