Accessing UI views, properties and methods in main app in Flex

This applies to both AIR and Flex project, in Flex SDK 3.3:

// Application.application refers to the top level application.
// But be aware that it's typed to Object as opposed to Application.
// According to Flex team, it's for the purpose of fast compilation and
// being able to access properties/methods in the <Script> of their
// <Application> without having to cast it to their application's real type.
// So this means you can get:
// var stuff:SomeStuff = Application.application.getStuff();
// but you would have to access the real application each time by saying
// Application.application. Or you can do it this way:

var app:MySubclassedApplication = mx.core.Application.application as
                                  MySubclassedApplication;

// UI components with id names are automatically declared as public
var contactList: ContactList = app.contactList;

// as long as you've declared them as public in your <Script>.:)
var dou:Dug = app.dug;
var stuff:SomeStuff = app.getStuff();

Documentation. Note when you are using SWFLoader to load a module into the main application, you can reference your main application as parentApplication.

Manually update T-Mobile G1 (Developers phone) to Android 1.5 (Cupcake)

1. Download JFv1.51_CRB43-US.zip (file size 36,614 kb).

2. Rename it to Update.zip and copy to the root of your SD card.

3. Shut down G1.

4. Reboot G1 by holding down Power+Home buttons at the same time, which should bring up the bootloader.

5. Bring out the key board, first Alt+L to display log, then Alt+S to apply patch; this should apply the update.

6. Once done, G1 prompts you to reboot.

7. Per my personal experience, I got stuck on the Android logo (the 3D chrome logo), which froze at the animation loop. What I did was a) Took out the battery and reboot, which doesn’t seem to fix the problem; b) Reboot the second time by going to 3, 4 again. On the bootloader screen, Alt+W to wipe data and reset to factory default.

8. Power up G1 once done. That’s it.

At least it worked for me:)

JumpStart Android 101 for absolute beginners

Running the examples that come with the SDK in Eclipse

Eclipse->Package Explorer->Right click->New ->Android Project->Contents->Create project from existing source->Location>Navigate to

<directory_of_your_android_SDK>/platforms/android-1.5/samples/ApiDemos>OK

Eclipse will populate other setting values such as “Project name” and “Build Target” for you.:)

Local resource page (index.html)

<directory_of_your_android_SDK>/docs/index.html

just in case you don’t have/just lost/are having creeping internet but are desperate to look up the documentation to get something done ASAP so that you can go home;)

Using Android SDK 1.5 emulator with proxy in Eclipse 3.45

Go to Package Explorer -> Right click your Android project ->Run As->Run Configurations.

Under Android Application on the left column, select your project -> on the right column, where you see Android | Target | Common tabs ->

Select Target -> on the bottom “Additional Emulator Command Line Options”->

-http-proxy http://wwwgateProxy.com:1080 -debug-proxy http://wwwgateProxy.com:1080

->Run/Close.

Tracking mouse movement in Flash Player

In a recent prototyping project, I attempted to simulate “shake” gestures in a desktop AIR application, i.e., using mouse cursor to simulate a hand grabbing some object on the screen…

Anyhow. I found out that Flash Player can send out the mouseMove event must faster than it can update the screen. In the case you want to keep track of the simulated gestural motion, you would want to track the mouse cursor position on the stage, instead of the display object the mouse cursor is dragging. This is because when you drag the object to the point Flash Player cannot keep up with, the redaw will then not necessarily reflect the real positional changes of it in between the frames.

Take a look here. Right click to for the code. Also note that when directly register Application.application as the currentTarget we seem to get smoother tracking than if we registered the display object, like so:

mButton.addEventListener(MouseEvent.MOUSE_MOVE, mButton_handleMouseMove);/** you got more stripped out points than if you do this:

addEventListener(MouseEvent.MOUSE_MOVE, mButton_handleMouseMove);// this is btter.*/


MVC revisit: Take two

I find that MVC is much easier to understand both at the conceptual level and at the implementation level if you think about it from the perspective of how you communicate with the Model.

1. Control is the input to Model. Basically, the Control is responsible to take input from the user or the system and stransfer it to the changes in the Model; The View is merely there to render the changes from the Model; so it can be considered as the output from the Model. You should keep the business logic as much as possible inside the Model and leave Control/View simple and dandy.For Flex 3 (Halo) components, the way of input is realized by implimenting the “change” listener of the controls, like this:
   
<mx:TextInput id="mTxt" change="mVO.txtValue = mTxt.htmlText;"/>

   In Flex 3, when you bind a model to a control, it is one-way communication, meaning the control will reflect the change whenever there is one in the model; but the control would not be able to change the model. That’s why we need to wire through the change listener to make this happen.

   The output is hooked up by setter methods in the Model. Whenever you detect some changes that are historical, you would notify your listeners.
   
[Bindable]
public function set myValue(v:int):void
{
_myValue = v;
notifyListeners();
}

   In ActionScript 3, we normally implement “notifyListeners” by way of dispatchEvent. Your client listens to the event and updates the View by querying the changes from the Model. You may want to have different types of events so that your listeners can respond differently. For example, you normally would invalidate properties of your component and regenerate all the renderers when the data provider has changed, besides doing other updates; and you don’t want to do this kind of heavy-lifting each time when changes occur on the “less important” members of the Model.

2. Asynchronous data. Sometimes you may compose something like an HTTPService component into your Model so that it can request external data.The data that are requested by the Control at a lot of times are not immediately available, and normally you would not notify your listeners until they are ready (For example, parsed into an XMLList object that can be consumed by component’s dataProvider).
3. Static members are available before non-static members of the objects. You can use static members to set some initial values of your member variables.
4. When you smell spaghetti code in your Model, try to partition/refactor your Model into smaller Value Objects. Value objects are a good way to structure your data/make flat Model hierarchical.
5. For larger projects, you may want to duplicate Model (or value objects) so that multiple client can access the same data. For example, in your main window of your AIR application, you initialize your model like so:

   public var chatModel:ChatModel = new ChatModel();In another console window, you want to access the same model, like so:

   private var chatModel:ChatModel = Application.application.chatModel;

JSON to XML

A lightweight plugin for Eclipse. Works good for me on Flex Builder 3 (v3.0.1.2x).

JavaScript xml2json and json2xml.

Change Adobe AIR window size dynamically

This changes your AIR app (main app’s window) to 100 px by 100 px.

Application.application.width = 100;
Application.application.height = 100;

Android SDK 1.5 with Eclipse 3.4 on Ubuntu 8.x

1. I am on Ubuntu 8.10 which seems to only support Eclipse 3.2 from Synaptic Package Manager. Since I installed both Eclipse and the IcedTea OpenJDK/JRE from Synaptic, I found out later that Android Dev tool actually needed the Sun JDK in order to use its Layout Editor (otherwise you won’t be able to use Android Layout Editor to edit xml files under res/layout folder. The error was java.awt.font wasn’t found something like that.) What I ended up doing was I uninstalled both Eclipse and IcedTea distribution of JDK (openjdk-6-jdk) from Synaptic, otherwise the newly updated Eclipse will continue to use openjdk which prevented me from using Android Layout Editor.

2. Install Sun’s Java (both jre and jdk).

Every step described in the above article worked for me except I couldn’t get the first step work which was:

sudo apt-get install sun-java6-jdk

apt-get said it could not locate sun-java6-jdk something like that.

So I went with this:

sudo aptitude search sun-java

Which told also me it wasn’t able to find sun-java first time I ran it. But after I did

sudo aptitude

and ->Actions->Update package list

I got to install sun java:

sudo aptitude install sun-java6-jre sun-java6-jdk sun-java6-plugin sun-java6-fonts

I was very happy with aptitude as compared to Synaptic package manager because of the exotic flavor of the former. Besides it seems to be more stable and responsive to me based on my judgement.;)

However, during the adventure, I got confused as to how I could single/full-heartedly accept the license agreement which showed up as a pop up within shell. It turned out  I had to maximize the whole thing and scroll down and use TAB key to select “OK” in order to advance.

After all this settled down, I rebooted Ubuntu and made sure that icedTea no longer took over the java world:

java -version

I get

java version "1.6.0_13"

Java(TM) SE Runtime Environment (build 1.6.0_13-b03)

Java HotSpot(TM) Server VM (build 11.3-b02, mixed mode)

3. Install and setup Eclipse 3.4.

I manually downloaded Eclipse 3.4 from their site and unzip it into /usr/lib folder. Android dev page recommends Eclipse IDE for Java EE Developers, Eclipse IDE for Java Developers, or Eclipse for RCP/Plug-in Developers.

You may want to temporarily change the owner of the/usr/lib folder to yourself instead of root:

chown <user> /usr/lib

After you are done, go to Eclipse->Help->About Eclipse Platform->Configuration Details, you can see Eclipse is now using the Sun jdk/jre:

java.library.path=/usr/lib/jvm/java-6-sun-1.6.0.10/jre/lib/i386/client:/usr/lib/jvm/java-6-sun-1.6.0.10/jre/lib/i386:/usr/lib/xulrunner-addons:/usr/lib/xulrunner-addons:/usr/lib/xulrunner-addons:/usr/java/packages/lib/i386:/lib:/usr/lib

java.runtime.name=Java(TM) SE Runtime Environment

java.runtime.version=1.6.0_10-b33

and

java.awt.graphicsenv=sun.awt.X11GraphicsEnvironment

4. Install Android Development Tool for Eclipse. I personally found/suspected that the http url is faster/more stable(?) than the https one, esp if you are in slow connection. If you are behind some firewall, you may want to set Eclipse’s proxy. Eclispe->Window->Preferences->General->Network Connections->…

5. Configure BASH to export the JAVA_HOME env variable, as well as path to Eclipse like so:

sudo gedit /home/<user>/.bashrc

# ~~~~~~~~~~~~~~~~~ JAVA (JDK,JRE) ~~~~~~~~~~~~~~~~~~~~~

export JAVA_HOME=’/usr/lib/jvm/java-6-sun-1.6.0.10′

export ANDROID_HOME=’/usr/lib/android-sdk-linux_x86-1.5_r2′

PATH=.:$JAVA_HOME/bin:$JAVA_HOME/jre/bin:$PATH:$ANDROID_HOME/tools

alias eclipse=’java -jar /usr/lib/eclipse/startup.jar’

6. (Optional) Configure Eclipse JRE to the one we just installed from Sun. Eclipse->Window->Preferences->Java->Installed JREs->Add->Standard VM->/usr/lib/jvm/java-6-sun-1.6.0.10. And check this new one we just added.

7. You may want to run

Eclipse -clean

if you had some trouble with it during the process.

8. I guess that’s pretty much about it(?)!

9. Have a great weekend/holiday!

Android on Eclipse 101: Google MapView

I was right after the “Hello World” on google maps. So in order to get MapView, you will need to first have your application target Google API 1.5. Then you would abtain a google maps API for your android application:

1.  Generating MD5 Fingerprint of the SDK Debug Certificate . This is under Windows XP:

cd C:\Program Files\Java\jdk1.6.0_13\bin

keytool -list -alias androiddebugkey -keystore "C:\Documents and Settings\qmh684\.android\debug.keystore" -storepass android -keypass android

I got something like:

androiddebugkey, May 18, 2009, PrivateKeyEntry,
Certificate fingerprint (MD5): 94:1E:43:49:87:73:BB:E6:A6:88:D7:20:F1:8E:B5:98

Then I go to here:

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

to get the api key.