Ji's Technology Learning

XML Parsing

2010-06-03T15:36:00.000-07:00

Last few hours, I have struggled to resolve some issues on below format data(html into XML and then, encode some special characters.

Example xml structure:

This is test1 with £3355 change and else

another test

more and more

You should consider how to get the refund £3355

ok

The end

</A>

It is combination with text & element. So, here , I want to encode £ properly. The below sample code shows how to resolve my problem.

Real sample string:

<Text>

%20%20%20%20The%20adoption%20fee%20is%20£3355%20and%20if%20you%20want%20to%20become%20a%20

member%20then%20there%20are%20three%20levels%20of%20sponsorship:%20B%20 ronze%20&pound;50%20per%20year,%20Silver%20&pound;100%20per%20year%20and%20Gold

%20&pound;150%20per%20year.

%20%20But%20thats%20entirely%20up%20to%20you.%20%20

</TEXTFORMAT>

%20%20

</TEXTFORMAT>

</RichText>

<PlainText>The adoption fee is &pound;3355 and if you want to become a member then there are three levels of sponsorship: B ronze &pound;50 per year, Silver &pound;100 per year and Gold &pound;150 per year. But thats entirely up to you.</PlainText>

</Text>

public static function parseXMLForEncode(obxml:XML):XML

{

for each (var t:XML in obxml.children()){

if (t.hasComplexContent()){

var iIndex:int = 0;

for each(var sc:XML in t.children()){

if(sc.nodeKind()=="text")

{

var sString:String = t.children()[iIndex].toString() ;

if(sString != ""){

var uString:String = StringUtil.encodeHTMLCharacter(sString);

if(sString !=uString){

delete t.children()[iIndex].toString() ;

t.children()[iIndex] = uString;

}

iIndex = iIndex + 1

}

parseXMLValueForEncode(t);

}

else{

if (t.text().length() > 0){

var sOriginalText:String = t.text();

var sReturnText:String = StringUtil.encodeHTMLCharacter(t.text());

if(sOriginalText !=sReturnText){

t.setChildren(sReturnText);

}

return obxml;

}

Google Maps for mobile Support Comparison

2010-05-28T23:46:00.001-07:00

Supported phones

Feature	Android	BlackBerry	iPhone	Nokia S60	Windows
Navigation
Labs
Search by voice
My Location
Business listings
Business reviews
Driving directions
Transit and walking directions
Biking directions
Latitude
Layers
Street View
Satellite view
Traffic
My Maps
Starred Items
Buzz

GoogleMap API KEY & Android

2010-05-12T11:29:00.001-07:00

When I wrote Android app. I thought that I could reuse GoogleMap API key that I used for flex application. Unfortunately, I couldn't. So, here is the sample steps how to get GoogleMap API Key for Android App.

1. Locate the path to the KeyStore

Eclipse ==> Preference ==> Android ==> Build

2. Generate MD5 fingerprint of the certificate

run the below sample on your teminal

keytool -list -alias androiddebugkey \

-keystore /Users/jikimlucas/.android/debug.keystore \

-storepass android -keypass android

3. Now, you can see your MD5 fingerprint, for example,

Certificate fingerprint (MD5): 94:1E:43:49:87:73:BB:E6:A6:88:D7:20:F1:8E:B5:98

4. Register

http://code.google. com/android/maps-api-signup.html

5. Once registration is completed, google will give you the key with a sample XML layout

Your key is:

008s-BqgAn1DqnIy4hOeGMoEmKbrfEl9pN8N3lg

This key is good for all apps signed with your certificate whose fingerprint is:

3A:02:58:2A:F9:6C:8D:0E:CC:08:98:3E:96:20:3D:5B

Gallery Widget

2010-05-10T22:33:00.000-07:00

Gallery is a layout widget used to display items in a horizontally scrolling list and positions the current selection at the center of the view.

Create a new XML file in the res/values/ directory named attrs.xml. Insert the following:

xml version="1.0" encoding="utf-8"?>

    name="HelloGallery">
        name="android:galleryItemBackground" />

This is a custom styleable resource that can be applied to a layout. In this case, it will be applied to the individual items placed into the Gallery widget. The element defines a specific attribute for the styleable, and in this case, it refers to an existing platform attribute, galleryItemBackground, which defines a border styling for gallery items. In the next step, you'll see how this attribute is referenced and then later applied to each item in the gallery.

import android.app.Activity;
import android.content.Context;
import android.content.res.TypedArray;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Gallery;
import android.widget.ImageView;
import android.widget.Toast;
import android.widget.AdapterView.OnItemClickListener;
 public class HelloGallery extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Gallery g = (Gallery) findViewById(R.id.gallery);
        g.setAdapter(new ImageAdapter(this));
        g.setOnItemClickListener(new OnItemClickListener() {
            public void onItemClick(AdapterView parent, View v, int position, long id) {
                Toast.makeText(HelloGallery.this, "" + position, Toast.LENGTH_SHORT).show();
            }
        });
    }
     public class ImageAdapter extends BaseAdapter {
        int mGalleryItemBackground;
        private Context mContext;
        private Integer[] mImageIds = {
                R.drawable.sample_1,
                R.drawable.sample_2,
                R.drawable.sample_3,
                R.drawable.sample_4,
                R.drawable.sample_5,
                R.drawable.sample_6,
                R.drawable.sample_7
        };

        public ImageAdapter(Context c) {
            mContext = c;
            TypedArray a = mContext.obtainStyledAttributes(R.styleable.HelloGallery);
            mGalleryItemBackground = a.getResourceId(
               R.styleable.HelloGallery_android_galleryItemBackground, 0);
            a.recycle();
        }

     @Override
     public int getCount() {
       return mImageIds.length;
     }
      @Override
     public Object getItem(int arg0) {
      return arg0;
     }

     @Override
     public long getItemId(int arg0) {
      return arg0;
     }
      @Override
     public View getView(int arg0, View arg1, ViewGroup arg2) {
            ImageView i = new ImageView(mContext);
            i.setImageResource(mImageIds[arg0]);
            i.setLayoutParams(new Gallery.LayoutParams(150, 100));
            i.setScaleType(ImageView.ScaleType.FIT_XY);
            i.setBackgroundResource(mGalleryItemBackground);
            return i;
     }
    }
 }

Important!

R.styleable has been removed from android 1.5 and higher. There are a number of ways to get the sample to work, see the below

Correct :

        public ImageAdapter(Context c) {
            mContext = c;
            TypedArray a = mContext.obtainStyledAttributes(R.styleable.HelloGallery);
            mGalleryItemBackground = a.getResourceId(
               R.styleable.HelloGallery_android_galleryItemBackground, 0);
            a.recycle();
        }

Incorrect :

    public ImageAdapter(Context c) {
       mContext = c;
       TypedArray a = obtainStyledAttributes(android.R.styleable.Theme);
       mGalleryItemBackground = a.getResourceId(
               android.R.styleable.Theme_galleryItemBackground, 0);
       a.recycle();
   }

Basic Control samples

2010-05-10T18:59:00.000-07:00

I did FormStuff tutorial from Android.com. I think that this is a great sample to look up how to implement each basic control event. Of course, you should work on main.xml under layout folder and strings.xml under values folder to match the below java code


import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.RatingBar;
import android.widget.Spinner;
import android.widget.Toast;
import android.widget.ToggleButton;
import android.widget.RatingBar.OnRatingBarChangeListener;


public class HelloFormStuff extends Activity {
 private OnClickListener radio_listener = new OnClickListener() {
     public void onClick(View v) {
         RadioButton rb = (RadioButton) v;
         Toast.makeText(HelloFormStuff.this, rb.getText(), Toast.LENGTH_SHORT).show();
     }
 };
     @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);


        final Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                Toast.makeText(HelloFormStuff.this, "Beep Bop", Toast.LENGTH_SHORT).show();
            }
        });
 

        final EditText edittext = (EditText) findViewById(R.id.edittext);
        edittext.setOnKeyListener(new OnKeyListener() {
            public boolean onKey(View v, int keyCode, KeyEvent event) {
                if ((event.getAction() == KeyEvent.ACTION_DOWN) &&
                    (keyCode == KeyEvent.KEYCODE_ENTER)) {
                  Toast.makeText(HelloFormStuff.this, edittext.getText(), Toast.LENGTH_SHORT).show();
                  return true;
                }
                return false;
            }
        });


        final CheckBox checkbox = (CheckBox) findViewById(R.id.checkbox);
        checkbox.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                if (((CheckBox) v).isChecked()) {
                    Toast.makeText(HelloFormStuff.this, "Selected", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(HelloFormStuff.this, "Not selected", Toast.LENGTH_SHORT).show();
                }
            }
        });


        final RadioButton radio_red = (RadioButton) findViewById(R.id.radio_red);
        final RadioButton radio_blue = (RadioButton) findViewById(R.id.radio_blue);
        radio_red.setOnClickListener(radio_listener);
        radio_blue.setOnClickListener(radio_listener);


        final ToggleButton togglebutton = (ToggleButton) findViewById(R.id.togglebutton);
        togglebutton.setOnClickListener(new OnClickListener() {
            public void onClick(View v) {
                if (togglebutton.isChecked()) {
                    Toast.makeText(HelloFormStuff.this, "Checked", Toast.LENGTH_SHORT).show();
                } else {
                    Toast.makeText(HelloFormStuff.this, "Not checked", Toast.LENGTH_SHORT).show();
                }
            }
        });
         final RatingBar ratingbar = (RatingBar) findViewById(R.id.ratingbar);
        ratingbar.setOnRatingBarChangeListener(new OnRatingBarChangeListener() {
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                Toast.makeText(HelloFormStuff.this, "New Rating: " + rating, Toast.LENGTH_SHORT).show();
            }
        });


        Spinner spinner = (Spinner) findViewById(R.id.spinner);
        ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
                this, R.array.planets_array, android.R.layout.simple_spinner_item);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(adapter); 
    }
}

Toast Examples

2010-05-09T19:26:00.000-07:00

A toast is a message that pops up on the surface of the window. It only fills the amount of space required for the message and the user's current activity remains visible and interactive. The notification automatically fades in and out, and does not accept interaction events.

If user response to the notification is required, consider using a Status Bar Notification.

A toast can be created and displayed from an Activity or Service. If you create a toast notification from a Service, it appears in front of the Activity currently in focus.

The Basics

First, instantiate a Toast object with one of the makeText() methods. This method takes three parameters: the application Context, the text message, and the duration for the toast. It returns a properly initialized Toast object. We can display the toast notification with show(),

Context mContext = getApplicationContext();
CharSequence mTextMsg = "Hello toast!";
int mDuration = Toast.LENGTH_SHORT;

Toast toast = Toast.makeText(mContext, mTextMsg, mDuration);
toast.show();

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
     GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(new ImageAdapter(this));

    gridview.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView parent, View v, int position, long id) {
            Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT).show();
        }
     });
 }

We can also chain your methods and avoid holding on to the Toast object, like this:

Toast.makeText(context, text, duration).show();

Positioning your Toast

A standard toast notification appears near the bottom of the screen, centered horizontally. You can change this position with the setGravity(int, int, int)method. This accepts three parameters: a Gravity constant, an x-position offset, and a y-position offset.

For example, if we decide that the toast should appear in the top-left corner, you can set the gravity like this:

toast.setGravity(Gravity.TOP|Gravity.LEFT, 0, 0);

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    GridView gridview = (GridView) findViewById(R.id.gridview);
    gridview.setAdapter(new ImageAdapter(this));

    gridview.setOnItemClickListener(new OnItemClickListener() {
        public void onItemClick(AdapterView parent, View v, int position, long id) {
          Toast toast = Toast.makeText(HelloGridView.this, "" + position, Toast.LENGTH_SHORT);
          toast.setGravity(Gravity.TOP, 0, 0);
          toast.show();
         }
    });
}

Chicago Code Camp 2010

2010-05-03T07:19:00.000-07:00

Saturday, May 1st, 2010, I attended Chicago code camp 2010 that was sponsored by .net user group. The conference had full of professionals from different groups. .net user groups, SharePoint, Azure, windows7, window phones, Android & processing ... I also had a honor to speak about flex & Google technology during the conference. I really had a great time to share my knowledge and saw different technologies and met great people during the conference. I can't wait to see 2011 chicagocodecamp.

Here is my presentation side and the link to the demo application for the session. Please feel free to read and to use the code for your experiment.

Thank you for attending my session.

Prsentation Slide : http://docs.google.com/present/edit?id=0AezTqtKyBIISZGZqM3B4M21fMTZkajc3dHJneA&hl=en

Demo Site : http://jiflexapp.appspot.com/

how to check whitespace in flex

2010-04-08T10:14:00.000-07:00

The following example shows how you can check whether a character is a whitespace character by using the isWhitespace() method

in the mx.utils.StringUtil class.

Also, it shows how you can do the same thing using regular expressions (RegExp) with POSIX character classes.

< <?xml version="1.0" encoding="utf-8" ?>

- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" viewSourceURL="srcview/index.html">
<mx:Script>

<![CDATA[

         import mx.controls.dataGridClasses.DataGridColumn;

         import mx.utils.StringUtil;

private function isWhitespace_labelFunc(item:Object,column:DataGridColumn):String{

         var char:String = item.toString();

         return StringUtil.isWhitespace(char).toString();

  private functionisWhitespace_RegExp_labelFunc(item:Object,column:DataGridColumn):String {

      var char:String = item.toString();

      var re:RegExp = /^[[:space:]]$/;

      return re.test(char).toString();

private function charCodeAt_labelFunc(item:Object, column:DataGridColumn):String{

      var char:String = item.toString();

      return item.charCodeAt(0).toString();

]]>
</mx:Script>

<mx:String id="str">The quick brown fox jumped over the lazy dog.</mx:String>
<mx:ArrayCollection id="arrColl" source="{str.split('')}" />

<mx:ApplicationControlBar dock="true">

<mx:Text text="{str}" selectable="false" />

</mx:ApplicationControlBar>

<mx:DataGrid id="dataGrid" dataProvider="{arrColl}" width="100%" height="100%">

<mx:columns>

<mx:DataGridColumn dataTipField="lbl" headerText="Character" />

<mx:DataGridColumn labelFunction="isWhitespace_labelFunc" headerText="isWhitespace(char)" />

<mx:DataGridColumn labelFunction="isWhitespace_RegExp_labelFunc" headerText="[[:space:]]" />

<mx:DataGridColumn labelFunction="charCodeAt_labelFunc" headerText="charCodeAt()" />

</mx:columns>

</mx:DataGrid>

</mx:Application>

How to generate icon in flash and how to use in flex

2010-04-08T07:30:00.000-07:00

In Flash
To generate a brand new icon it is best to base it on an exiting icon (as it will act as a template)

Open the relevant Flash file
In the ‘Library’ select an existing movieclip (used as an icon)
Right-click and duplicate

Change the name
Check export for actionscript
Change the baseclass from ‘flash.display.MovieClip’ to ‘mx.flash.UIMovieClip’
Click OK

Click OK

Drag the new movieclip to the ‘Stage’
Double-check to edit it
Go into the ‘Timeline’ and edit the movieclip for all 4 states (using the standard flash tools etc)

Once happy with your edits

Select File > Publish Settings…
Under the Flash tab ensure the following settings are checked (particularly Export SWC)

Press publish

In Flex

Locate the newly generated SWC in your file system
Place it into your Flex project The movieclip name will be the name of the skin:

Embeding font in your CSS

2010-04-05T12:41:00.001-07:00

If you embed font in your project, you must define encode-range of your each font. If not, user won't be able to type Latin-1 Supplement characters.

You find all Latin-1 Supplement Unicode from http://en.wikipedia.org/wiki/Latin-1_Supplement_unicode_block

For this example, I have didn't include all of them.

        @font-face
        {
            font-family: Arial;
            src: url("assets/fonts/ARIAL.ttf");
            fontWeight: normal;
            unicode-range:
                U+0020-U+0040, /* Punctuation, Numbers */
                U+0041-U+005A, /* Upper-Case A-Z */
                U+005B-U+0060, /* Punctuation and Symbols */
                U+0061-U+007A, /* Lower-Case a-z */
                U+007B-U+007E, /* Punctuation and Symbols */
                U+00B0-U+00B9,
                U+2192-U+2192,
                U+25AB-U+25AB,
                U+00A1-U+00A9,
                U+00AA-U+00AA,
                U+00AB-U+00AB,
                U+00AC-U+00AC,
                U+00AD-U+00AD,
                U+00AE-U+00AE,
                U+00AF-U+00AF,
                U+00BA-U+00BA,
                U+00BB-U+00BB,
                U+00BF-U+00BF,
                U+2022;
        }

        @font-face
        {
            font-family: Arial;
            src: url("assets/fonts/ARIALBD.ttf");
            fontWeight: bold;
            unicode-range:
                U+0020-U+0040, /* Punctuation, Numbers */
                U+0041-U+005A, /* Upper-Case A-Z */
                U+005B-U+0060, /* Punctuation and Symbols */
                U+0061-U+007A, /* Lower-Case a-z */
                U+007B-U+007E, /* Punctuation and Symbols */
                U+00B0-U+00B9,
                U+2192-U+2192,
                U+25AB-U+25AB,
                U+00A1-U+00A9,
                U+00AA-U+00AA,
                U+00AB-U+00AB,
                U+00AC-U+00AC,
                U+00AD-U+00AD,
                U+00AE-U+00AE,
                U+00AF-U+00AF,
                U+00BA-U+00BA,
                U+00BB-U+00BB,
                U+00BF-U+00BF,
                U+2022;
        }

Encode htmlText to meet xml standard

2010-03-25T16:38:00.001-07:00

When I get data from custom rich editor, rich editor generates well-form html that has valid xml structure. So far, so good.

So, I assume that it is valid xml so that I passed this data to generate xml. Then, I found one issue. Rich editor needs some sorts of encoding.

For example, when I enter &, rich editor encode nicely & but, I type " or ' , unfortunately, rich editor component can't encode to meet xhtml standard.

So, I have to find the easy to encode based on html encoding.

I notice Rich Editor returns well-formed xml structure.
So, I just need to go through each node, get text, if text doesn’t meet xml standard, just encode it.

public static function parseHTMLForEncode(objHtml:XML):XML{

for each (var t:XML in objHtml.children()){

if (t.text().length() > 0){

t.setChildren(StringUtil.encodeHTMLCharacter(t.text()))

}

if (t.hasComplexContent()){

parseXMLValueForEncode(t);

}

return obxml;

}

t.setChildren(StringUtil.encodeHTMLCharacter(t.text()))

: this is way to update text

TextEvent

2010-03-20T14:05:00.001-07:00

1. Register Event :
this.textArea.addEventListener(TextEvent.TEXT_INPUT, checkInputData);

2. Write the proper method to handle text entry:

public

function checkInputData(event:TextEvent):void{

var currentHTMLText : String =this.textArea.htmlText;

var strEntered: String = event.text;

}

KeyboardEvent Handle to catch user's key entery

2010-03-20T14:02:00.001-07:00

If we want to know the value what users press on keyword, you can use KeyboardEvent.

1. Register event :

this.textArea.addEventListener(KeyboardEvent.KEY_UP.reportKeyDown);

2. Write the method to handle the event :

public function reportKeyDown(evt : KeyboardEvent):void{

Alert.show(event.currentTarget.name + " hears key press: " +

String.fromCharCode(event.charCode) + " (key code: " +

event.keyCode + " character code: " + event.charCode + ")");

}

flexformatter

2010-02-26T13:44:00.000-08:00

Since i start programming FLEXBuilder, there is always one feature that I really need. Formatter! Not like eclipse, Flex doesn't have automatic formatter. So, the code looks always ugly. Whenever I get code from other developers, flex project is getting messier and messier.

Today, I finally, found the flexformatter. Here is the link to get FlexFormatter http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite/

1. Open your eclipse
2. go to help ==> software update
3. add the http://flexformatter.googlecode.com/svn/trunk/FlexFormatter/FlexPrettyPrintCommandUpdateSite/ site
4. update eclipse
5. Once update is completed, go to eclipse ==> preference
6. Now, you can see Flexformatter
7. Configure it as your need

Using ActionScript expressions in Binding tags

2010-02-11T09:08:00.000-08:00

The source property of an <mx:Binding> tag can contain curly braces. When there are no curly braces in the source property, the value is treated as a single ActionScript expression. When there are curly braces in the source property, the value is treated as a concatenated ActionScript expression. The <mx:Binding> tags in the following example are valid and equivalent to each other:

<?xml version="1.0"?>

<!-- binding/ASInBindingTags.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>

        <![CDATA[

            public function whatDogAte():String {

                return "homework";

]]>

    </mx:Script>

    <mx:Binding

        source="'The dog ate my '+ whatDogAte()"

        destination="field1.text"/>

    <mx:Binding

        source="{'The dog ate my '+ whatDogAte()}"

        destination="field2.text"/>

    <mx:Binding

        source="The dog ate my {whatDogAte()}"

        destination="field3.text"/>

    <mx:TextArea id="field1"/>

    <mx:TextArea id="field2"/>

    <mx:TextArea id="field3"/>

</mx:Application>

Using an ampersand character in a data binding expression

Because of the parsing rules of XML, if you want to use an ampersand character, &, in a data binding expression in an MXML file, you must replace it with the hexadecimal equivalent character, &. For example, if you want to use a logical OR expression, written in ActionScript as &&, then you have to write is as &&, as the following example shows:

<mx:Button label="Test" enabled="{authorized && cc}" />

Hello Android

2010-02-08T19:13:00.000-08:00

1. Open your eclipse
2. Select File ==> New ==> Project
3. Select Android Project
4. Fill Project Property. see below screenshot.

Project Name

This is the Eclipse Project name — the name of the directory that will contain the project files.

Application Name

This is the human-readable title for your application — the name that will appear on the Android device.

Package Name

This is the package namespace (following the same rules as for packages in the Java programming language) that you want all your source code to reside under. This also sets the package name under which the stub Activity will be generated.

Your package name must be unique across all packages installed on the Android system; for this reason, it's very important to use a standard domain-style package for your applications. The example above uses the "com.example" namespace, which is a namespace reserved for example documentation — when you develop your own applications, you should use a namespace that's appropriate to your organization or entity.

Create Activity

This is the name for the class stub that will be generated by the plugin. This will be a subclass of Android's Activity class. An Activity is simply a class that can run and do work. It can create a UI if it chooses, but it doesn't need to. As the checkbox suggests, this is optional, but an Activity is almost always used as the basis for an application.

Min SDK Version

This value specifies the minimum API Level required by your application. If the API Level entered here matches the API Level provided by one of the available targets, then that Build Target will be automatically selected (in this case, entering "7" as the API Level will select the Android 2.1 target). With each new version of the Android system image and Android SDK, there have likely been additions or changes made to the APIs. When this occurs, a new API Level is assigned to the system image to regulate which applications are allowed to be run. If an application requires an API Level that is higher than the level supported by the device, then the application will not be installed.

Your Android project is now ready. It should be visible in the Package Explorer on the left. Open the HelloAndroid.java file, located inside HelloAndroid > src > com.helloandroid). It should look like this:

package com.helloandroid;

import android.app.Activity;

import android.os.Bundle;

public class HelloAndroid extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

}

}

Notice that the class is based on the Activity class. An Activity is a single application entity that is used to perform actions. An application may have many separate activities, but the user interacts with them one at a time. The onCreate() method will be called by the Android system when your Activity starts — it is where you should perform all initialization and UI setup. An activity is not required to have a user interface, but usually will.

now, let modify the default. see the below,

package com.helloandroid;

import android.app.Activity;

import android.os.Bundle;

import android.widget.TextView;

public class HelloAndroid extends Activity {

/** Called when the activity is first created. */

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

TextView tv = new TextView(this);

tv.setText("Hello Android! Welcome Ji!");

setContentView(R.layout.main);

}

}

The Eclipse plugin makes it very easy to run your applications:
Select Run > Run.
Select "Android Application".

Photoshop Secret Shortcuts

2010-02-03T09:20:00.001-08:00

It is proven that by using software shortcuts can boost up productivity. Here are 30 secret Photoshop shortcuts that I've learned from years of experience. Well, what I mean by "secret" is that these shortcuts are not documented in the menus. Keep reading and you will find how these shortcuts can speed up your productivity. I bet you don't know all of them.

Note: this article is written in Mac Photoshop format. If you are using PC, Cmd = Ctrl and Opt = Alt.

Drag selection
With the Marquee tool, drag on the document (do not release the mouse yet), now hold down Spacebar, it will let you drag the undefined selection.
Navigate the document left or right
Hold down the Cmd key and scroll up or down allows you to navigate the document left or right. For example, hold down Cmd + scroll up will navigate to right.
Browse the font list
Put your cursor in the font list dropdown, you can browse the font list by pressing arrow Up or Down key.
Scale font size
Select the text that you want to scale the font size, press Cmd + Shift + > or < to increase / decrease font size.
Zoom with the scroll wheel
You can zoom in / out by Cmd + Opt + scroll up or down.
Drag to adjust numberic value
Mouseover the input box, hold down Cmd + drag left or right to increase / decrease. Hold down Cmd + Opt or Shift key and drag can change the value in decimal or 10 interval. This shortcut works in all dialog palettes.
Scroll to adjust numeric value
Put the cursor in the input box, scroll up or down to increase / decrease value. This shortcut works in all dialog palettes.
Arrow up / down to adjust numeric value
Put the cursor in the input box, press arrow Up or Down to increase / decrease. Hold down Shift and press arrow Up or Down will change value in 10 interval.
Zoom to 100%
Double click on the Zoom tool will zoom document to 100%.
Collapse or expand all layer groups
You can collapse or expand all root-level layer groups by holding down Cmd + click on the triangle icon. Hold down Cmd + Opt + click on the triangle icon will collapse or expand all level layer groups.
Show / hide in a row
If you need to show / hide more than one layers, instead of clicking one by one, you can click on the visibility icon and drag in a row.
Hide other layers
Hold down Opt + click on the visibility icon will hide all other layers.
Navigate layer blending mode
Opt + Shift + "-" or "+" key allows you to navigate through the blending mode dropdown.
Set specific blending mode
Opt + Shift + C, N, M, S, D… allows to set layer to specific blending mode.
For examples:
Normal = Opt + Shift + N
Screen = Opt + Shift + S
Multiply = Opt + Shift + M
Color = Opt + Shift + C
Lock layer transparency
Press forward slash ("/") to lock layer transparency.
Load Channel selection
You probably know that Cmd + number keys (1, 2, 3) will activate the channels in sequent. Press Cmd + Opt + number keys will load the selection. For example, press Cmd + Opt + 4 will load Alpha channel 1.
Tool panels
Press Tab to toggle tool panels.
Precise cursor
Caps lock will display tool cursor in precise mode.
Navigate the tool list
You can navigate through the tool list by pressing Shift + tool shorcut. For example: B = Brush tool, if you press Shift + B again, you will switch to Pencil tool.
Increase / decrease brush size
With the Brush tool selected, you can increase / decrease the brush size by pressing [ or ] key (square bracket key). Press Shift + [ or ] will increase / decrease brush hardness.
Opacity
You can set the layer opacity by pressing the number keys (ie. 1 = 10%, 2 = 20%…). When you have the brush tool selected, pressing the number keys will adjust the brush opacity.
Duplicate layer
There are several shortcuts to duplicate layers.
1. You can hold down Cmd + Opt + drag to duplicate the active layer.
2. Cmd + Opt + arrow keys (Up, Down, Left, Right).
3. Cmd + J will duplicate the active layer in exact position.
4. Hold down Opt + drag within the Layers palette can also duplicate layers.
Copy visible and paste in a new layer
Press Cmd + Opt + Shift + E will copy the visible layers and paste in a new layer.
Change workspace background
By default Photoshop use grey for the workspace background color. You can change that by:
1. select your favorite color
2. choose the Paint Bucket tool
3. Hold down Shift + click on the working area (outside the document area)

Update: right-click on the workspace area to get a dropdown menu - allows you to set the background to black, grey, or a custom color (commented by Todd Patrick).
Fill background or foreground color
Opt + Delete (Backspace) = fill the layer with foreground color.
Cmd + Delete (Backspace) = fill the layer with background color

Update:
Cmd + Shift + Delete (Backspace) = Fill non-transparent pixels with background color
Opt + Shift + Delete (Backspace) = Fill non-transparent pixels with foreground color
(commented by André Dion)
Switch between document windows
Ctrl + Tab will switch between document windows.
Load layer transparent
Cmd + click on the layer thumbnail will load its transparency.
Scale proportionally from center
When you are using the Marquee tools or Free Transform, hold down Opt + Shift + drag will scale proportionally from the center.
Shortcut to Eyedropper
If you have the Brush tool selected, hold down Opt key will quickly activate the Eyedropper tool. Hold down Opt + Shift will activate the Color Sampler Tool.
Finally…
Finally, if you want to check or set your own custom shortcuts, press Cmd + Opt + Shift + K will bring up the Keyboard Shortcuts panel.

Information is beautiful

2010-02-01T18:57:00.000-08:00

Datagrid and itechClick Event

2010-01-29T23:19:00.001-08:00

1. On your datagrid, add itemClick method to handle event

<mx:DataGrid dataProvider="{ rstXML.event }" width="100%" itemClick="showToMap(event);">

<mx:columns>

<mx:DataGridColumn headerText="When" dataField="start_date" labelFunction="getFormattedDate" />

<mx:DataGridColumn headerText="Title" dataField="title" />

</mx:columns>

</mx:DataGrid>

2. Implementaion of itemClick event that will be fired when user clicks one item from datagrid

private function showToMap(event : ListEvent) :void

{

this.objIndex.lookupAddress(event.target.selectedItem.title);

}

Re: Google map event handling

2010-01-26T21:00:00.001-08:00

1. Add event listen

public function lookupAddress(address : String):void

{

removeMarkers();

if (address.length > 0)

{

var g:ClientGeocoder = new ClientGeocoder();

g.addEventListener(GeocodingEvent.GEOCODING_SUCCESS,

function doSuccess(event:GeocodingEvent):void{

var placemarks:Array = event.response.placemarks;

if (placemarks.length >0)

{

map.setCenter(placemarks[0].point);

var graphic:UIComponent = new ShinyGreen();

var d:DMarker = new DMarker(placemarks[0].point,graphic);

d.setInfo(address);

map.addOverlay(d);

_markers.push(d);

}

,false,0,true);

g.geocode(address);

}

2. on DMarker class, you can set up all configurations that you want to use on the map.

package com.sunild.markers
{
import com.google.maps.InfoWindowOptions;
import com.google.maps.LatLng;
import com.google.maps.MapEvent;
import com.google.maps.PaneId;
import com.google.maps.interfaces.IInfoWindow;
import com.google.maps.interfaces.IMap;
import com.google.maps.interfaces.IMarker;
import com.google.maps.interfaces.IPane;
import com.google.maps.overlays.MarkerOptions;
import com.google.maps.overlays.OverlayBase;

import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;

import mx.core.UIComponent;

public class DMarker extends OverlayBase implements IMarker
{
private var _latLon:LatLng;
private var _comp:UIComponent;
private var _strInfo : String;

public function DMarker(latLon:LatLng, comp:UIComponent)
{
super();
_latLon = latLon;
_comp = comp;

addEventListener(MapEvent.OVERLAY_ADDED,handleMapEvent,false,0,true);
addEventListener(MapEvent.OVERLAY_REMOVED,handleMapEvent,false,0,true);
addEventListener(MouseEvent.CLICK,handleMapEvent,false,0,true);
}

public function isHidden():Boolean
{
return false;
}

public function hide():void
{
}

public function show():void
{
}

public function setInfo(str : String) : void{
_strInfo = str;
}

public function openInfoWindow(opts:InfoWindowOptions=null):IInfoWindow
{
return pane.map.openInfoWindow(_latLon,opts);
}

public function closeInfoWindow():void
{
pane.map.closeInfoWindow();
}

// not using MarkerOptions
public function setOptions(arg0:MarkerOptions):void
{
}

public function getOptions():MarkerOptions
{
return null;
}

public function getLatLng():LatLng
{
return _latLon;
}

public function setLatLng(latLon:LatLng):void
{
_latLon = latLon;
}

override public function positionOverlay(zoom:Boolean):void
{
var p:Point = pane.fromLatLngToPaneCoords(_latLon,true);
_comp.x = p.x - _comp.width/2;
_comp.y = p.y - _comp.height/2;
}

override public function getDefaultPane(map:IMap):IPane
{
return map.getPaneManager().getPaneById(PaneId.PANE_MARKER);
}

private function handleMapEvent(event:Event):void
{

switch(event.type)
{

case MouseEvent.CLICK:
openInfoWindow( new InfoWindowOptions(
{ content: _strInfo} ) );
break;

case MapEvent.OVERLAY_ADDED:
addChild(_comp);
break;

case MapEvent.OVERLAY_REMOVED:
removeChild(_comp);
break;
}
}

}
}

DecaWave ScenSor in Action

2010-01-25T20:18:00.000-08:00

DecaWave ScenSor in Action

Mobile Web Meets Internet of Things: Barcode Scanning

2010-01-12T09:17:00.001-08:00

Two of the biggest trends we tracked last year were Mobile Web and Internet of Things. In a new series on ReadWriteWeb, which we're calling Mobile Web Meets Internet of Things, we'll explore how these two important trends are converging and look at some cutting edge example products. We start with barcode scanning...

Internet of Things is when everyday objects become connected to the Internet, via technologies such as RFID tags, sensors and barcodes. One trend we saw expanding in 2008-09 was

mobile phones being deployed as readers for barcodes.

Increasingly, smartphones such as the iPhone, BlackBerry and Android devices offer applications that allow you to scan a barcode on a product or object and get more information about it.

The Technology

Barcodes are similar to RFID tags, in that they both hold data. RFID tags are generally more functional and flexible than barcodes. Also RFID tags can be read/write, whereas barcodes cannot. However the big advantage for barcodes is that they're cheaper, therefore we're more likely to see scanning as a consumer activity ramp up in the U.S. via barcodes.

The most popular form of 2D barcode is the QR Code (the QR stands for "Quick Response"), which became popular in Japan and is now gaining traction in the U.S. and other markets.

The Products

In a series of posts written over September 2008, Sarah Perez analyzed the then burgeoning "scannable world." As Sarah explained, barcode scanning is not a new technology on the Web. One of the first examples was :CueCat, a cat-shaped barcode reader from the late 1990s. It linked a user to a website by scanning a barcode in an article or other printed matter. CueCat never took off because it required a separate piece of hardware, but now in 2010 smartphones are the hardware.

There's also no shortage of software circa 2010, such as ScanLife and the NeoReader app described in Part 2 of Sarah's Scannable World series. A variety of other barcode reading apps are listed in Part 3 of that series.

There are a variety of use cases for barcodes on the Web. They include Semapedia.org (a non-profit project that aims to augment the physical world with Wikipedia data), QRContact (contact management via barcodes), and barcode wearables such as p8tch ("Think of it as a TinyURL you can wear"). But none of these is likely to become widely used in the mainstream, at least in the near future.

What Will be The Tipping Point?

In Japan, barcode scanning is already a popular activity thanks to the culture of using mobile phones for just about everything. In the U.S., where the Mobile Web took longer to ramp up, barcodes are yet to catch on. However there's one market where barcode scanning could become a mainstream activity in the U.S. and other countries. No, not magazine publishing - although there are valid advertising use cases there. We're talking about scanning retail products using your mobile phone.

By the end of 2009, a lot of barcode scanning apps had gained popularity in the iPhone and Android, in particular. In November we listed our picks for scanning and other mobile shopping apps to test over Black Friday.

There is no clear winner yet in the shopping scanning market, but here are some applications you may want to try:

RedLaser (iPhone app getting rave reviews)

ShopSavvy (popular on Android)

The Amazon Mobile app; see also SnapTell, owned by Amazon

StoreXperience

CardStar

pic2shop

Point Inside (good review on CNET)

CompareEverywhere (Android)

ZXing Barcode Reader (Android)

Will Consumers Adopt Barcode Scanning?

As well as adoption by retailers, another big question is: will consumers want to interact with real world products using their mobile phones? I suspect they will, once they begin to see compelling reasons for doing so - which will probably involve getting the best deals and being able to do advanced shopping comparison very easily.

Finally, it's worth noting that Google is active in barcodes. Google's Favorite Places program allows local businesses to put a sticker on their products which features Google's logo, a scannable barcode and a message reading "We're a favorite place on Google."

Barcode scanning and its applications will grow during 2010, meaning more and more real world data will be connected to the Internet and accessed on your mobile phone. There are many apps trying to entice consumers to wave their mobile phone in front of products, so let us know your favorites in the comments.

25 User Experience Videos That Are Worth Your Time

2010-01-11T20:38:00.000-08:00

User Experience Videos

The State of User Experience
Jesse James Garett, founder of Adaptive Path and author of the book The Elements of User Experience, speaks on what UX and UX design is, what UX looked like before and what are some of the challenges people are encountering now. He cites engagement as the main goal of UX design and, through some fantastic examples, shows that engagement is an universal quality achieved through visuality, sound, touch, smell, taste, body and mind. One of the most impressive moments from the session is when Jesse compares Beethoven to an experience designer, accompanied by the Ninth Symphony. Duration: 40 minutes.

UX Best Practices
In this excellent video session, Nick Finck pries open the most popular websites today, including eBay, Amazon, Toyota, Flickr, Twitter and Netflix, to explain user experience best practices. Nick discusses both the good and bad experiences on these websites on the basis of visual design, information architecture, interaction and ease of use. For those unfamiliar with UX, Nick explains the basic concept and contributing factors. The last 20 minutes of the session are reserved for Q&A, and some very interesting questions and great answers come up. Duration: 1 hour 32 minutes. There is no video of the session, only 75 slides with an audtio track.

The Three Ways That Good Design Makes You Happy
In this short but fantastic lecture, Don Norman, known to many as the author of The Design of Everyday Things, explains visual, behavioral and reflective design and the ways in which each of them affects people. In his witty way, Done shows examples from everyday life. Duration: 13 minutes.

5 Minutes on Imitation in Design
In this brilliant short talk, Jeffrey Veen explains what is meant by “Good artists copy, great artist steal.” By way of an interesting short story about World War II and the American army’s contact with natives of the Pacific Islands, he also explains “cargo cult” and how it still present today. A truly brilliant video. Duration: 6 minutes.

UX Team of One
In this half-hour session held at the IA Summit 2008, Leah Buley of Adaptive Path shows what it means to be a UX team of one by telling her own story and recounting a real-life example. Leah explains the concept of generative design, which is the process of creating and sketching a lot of different ideas and then refining them. The slides are amazing because Leah drew them by hand. Duration: 32 minutes.

Experience Is the Product
Peter Merholz explains why it is important to focus not on technology or features but on the product and the experience you want to create. The session is rich in good and bad examples drawn from real life. Duration: 43 minutes.

Behavior Is Our Medium
In this fantastic session, Robert Fabricant talks about interaction design beyond computing technology. His examples include the family tree and one particularly interesting tree that his daughters drew. His examples from history, especially ancient history, are amazing and put interaction design in a broader context beyond the computer interfaces we’re so used to. Duration: 61 minutes.

Web Form Design
If you think Web forms suck (because you have to fill them in every day), then you must see this video. This talk by Luke Wroblewsky at MIX 09 is based on years of experience in usability testing and study. Luke shows examples from the real world and addresses the major problems with Web form design today. You will see how some of the biggest websites have failed and what you can do to prevent such failures in your Web forms. Duration: 75 minutes.

User Experience Design for Non-Designers
In this short mini-breakout session, Shawn Konopinsky explains what UX design is at a very abstract level. He shows three different types of user interfaces and how UX design applies to all three. He explains basic concepts such as concept ideation, interaction design and visual design and emphasizes the importance of an “Agile” approach to projects. Duration: 18 minutes.

The Importance of Identity and Vision to UX Designers on Agile Projects
If you watched the previous video, you will know why the Agile approach is important in UX design. This video and the slides go deeper into the Agile approach, relying on research done at London university. Johanna Kollmann explains the research and the results. Duration: 32 minutes.

Learning IxD from Everyday Objects
“Inspiration surrounds us in everyday objects.” This is how Bill DeRouchey begins this brilliant talk about interaction design. We use icons, words or shapes to create a language of interactions. If we use the wrong language, the interaction becomes confusing, and this is what Bill shows, using many common objects and devices. One of the most interesting slides is the one that shows how users “hack the interface.” Duration: 45 minutes.

Two videos: Information and Architecture
In these two short videos, Mickey McManus explains related concepts: information and architecture, using everyday objects, such as cup of tea, to illustrate his argument. The videos are part of a short article in which Mickey draws these concepts together to explain what information architecture is. Duration: a few minutes.

Wireframes for the Wicked
Nick Finck, along with Michael Angels and Donna Spencer, goes over wireframing basics via short easy questions. What are wireframes? Why use wireframes? What does the process of wireframing look like? The three of them also explain the different types of wireframes and show examples of their work. Duration: 1 hour 5 minutes.

Design Prototyping: Bringing Wireframes to Life
Dan Harrelson explains the purpose of prototyping, why it is important and how it differs from wireframes and visual comps. With wireframing, instead of seeing how a concept functions or works, we see how it actually feels, which contributes to better usability testing. The video, like all videos from MIX 09, has “double view”: while looking at the large slides, you have a synchronized inset video of the speaker. Duration: 60 minutes.

Journey to the Center of Design
Does user-centric design really exist? In this funny keynote, Jared Spool asks whether user-centric design (UCD) has lost its way and needs to evolve into something else. Ironically, as studies have shown, many great projects have succeeded without UCD. Jared suggests three key attributes of great experience design that can replace UCD. Duration: 1 hour 14 minutes.

User-Centered Design 101
In this Web seminar, Frank Spiller demystifies the paradigm of UCD. He explains the difference between usability and UCD, which has confused many. From the perspective of the development process, he compares UCD to the Agile and Waterfall processes. At the end, he shows some UCD success stories. Duration: 58 minutes.

The Mint.com Experience
Aaron Forth of Mint.com speaks of the importance of aligning your user experience and business objectives. He goes over the challenges of delivering such a user experience at Mint, what the company did to attract brand interest and how Mint became one of the best personal-finance software tools today. Interesting fact: Mint discontinued IE6 support because it spent almost 20% of its time designing for the browser. Duration: 40 minutes.

Mobile User Experiences
Rachel Hinman start her talk about mobile user experiences with a provocative thought: that technology disengages us from real life. She says we should rethink our relationship to devices and use them in the context of concrete tasks. Duration: 24 minutes.

Tap Is the New Click
“Several years ago, Minority Report was a sci-fi movie, and now we’re already there with [the touch wall].” At the beginning of his session, Dan Saffer shows a couple of examples of touch-screen technology that marks the beginning of a new era of interaction in which gesture and touch replace mouse clicks. He explains how to design for these technologies by going over how touch-screens differ from traditional websites and devices. Duration: 67 minutes.

10/GUI
This is a fantastic experiment that examines current mouse-driven user interfaces and their limitation while offering a completely new way of interaction. Although keyboard and mouse were really great innovations in past century, Clayton Miller think we shouldn’t stop there but rather innovate further. Duration: 8 minutes.

The Least You Can Do About Usability
Steve Krug, known to many as the author of Don’t Make Me Think, here tries to convince people to do their own usability testing. Confirming Jacob Nielsen’s advice, that developers can do it themselves, Steve identifies the minimum requirements to make usability testing meaningful. At the end of the session, Steve performs a short usability test right in front of the audience, which makes this session truly outstanding. Duration: 60 minutes.

AJAX Usability
Kelly Norton talks about a very interesting, and often forgotten, subject: AJAX usability. He covers usability basics and how to design AJAX applications for humans. Full of real-life examples, he offers several concrete suggestions on how to improve usability in AJAX applications. Duration: 55 minutes.

Jason Fried of 37signals Speaking at Business of Software 2008
In this short amazing session, Jason Fried shares his thoughts and experiences from 37Signals. Ideas are agile, some even radical. This video is interesting because many of Jason’s thoughts contrast with widespread opinion. In the second half of the session, Jason uses audience questions to explain his ideas in more detail. Duration: 55 minutes.

Bonus videos

Sketching User Experiences
In this keynote from MIX09, the first 25 minutes are taken up by Bill Buxton, known to many as the author of the book Sketching User Experiences. In an optimistic talk, he explains why now, in these days of crisis, is a good time to pay attention to design and what key factors are required to revitalize the user experience. Duration: 25 minutes.

Interview With Don Norman on UX Week 2008
In a relaxed atmosphere at UX Week 2008, Don Norman answers interesting questions and share his thoughts on various aspects of design. One of the best bits comes at the beginning, when Don speaks of his “crusade” to replace the word “users” with “people.” Will we ever have “People Experience”? Do we already have it? Find the answer in this fantastic interview. Duration: 53 minutes.