More features are on the way.

This is my first android app. I’m developing on the Motorola Droid, but if anyone has issues on other phones please leave me a comment.

Here’s the java object that we’ll be calling methods on from Flex:

public class MyRemoteService {
	public MyRemoteService() { }
 
	public String getSessionId() {
		String sessionId = FlexContext.getFlexSession().getId();
		System.out.println("returning sessionId "+sessionId);
		return sessionId;
	}
 
	public String[] getMyData() {
		return stuff from database or whatever
	}
}

Our RemoteObject will be called remoteService and will call the two methods getSessionId() and getMyData(). The following is the mxml for remoteService that has the two methods. Each method has a name attribute and attributes to set handlers for a fault and result.

<mx:RemoteObject id="remoteService" destination="remoteServiceDestination">
	<mx:method name="getSessionId" fault="handler_getSessionIdFault(event)" result = "handler_getSessionIdSuccess(event)" />
	<mx:method name="getMyData"    fault="handler_getMyDataFault(event)"    result = "handler_getMyDataSuccess(event)" />
</mx:RemoteObject>

This next code block does the same thing as our above code, except it’s an actionscript class. It handles the same two methods.

public class ConnectionManager
{
	import mx.controls.Alert;
	import mx.rpc.events.FaultEvent; 
	import mx.rpc.AsyncToken;
	import mx.rpc.Responder;
	import mx.rpc.events.ResultEvent;
	import mx.rpc.remoting.mxml.RemoteObject;
	import mx.messaging.Channel; 
	import mx.messaging.ChannelSet; 
	import mx.messaging.channels.AMFChannel;  
 
	private var blazeUrl:String = "http://localhost:8080/BlazeServer/messagebroker/";
	private var remoteService:RemoteObject = new RemoteObject;
 
	public function ConnectionManager()
	{
		var cs:ChannelSet = new ChannelSet(); 
		var myAMF:Channel = new AMFChannel("my-amf", blazeUrl + "amf"); 
		cs.addChannel(myAMF); 
		remoteService.channelSet = cs; 
 
		remoteService.destination = "remoteServiceDestination";
		remoteService.showBusyCursor = true;
		var rpcCall:AsyncToken;
 
		rpcCall = remoteService.getSessionId();
		rpcCall.addResponder(new Responder(handler_getSessionIdSuccess, handler_getSessionIdFault) );
 
		rpcCall = remoteService.getMyData();
		rpcCall.addResponder(new Responder(handler_getMyDataSuccess, handler_getMyDataFault) );
	}
 
	private function handler_getSessionIdSuccess(event:ResultEvent):void {
		trace(event);
		Alert.show("sessionId: "+event.message.body.toString(), "handler_getSessionIdSuccess");
	}
 
	private function handler_getSessionIdFault(fault:FaultEvent):void {
		trace(fault);
		Alert.show(fault.toString(), "handler_getSessionIdFault");
	}
 
	private function handler_getMyDataSuccess(event:ResultEvent):void {
		trace(event);
		Alert.show(event.message.body.toString(), "handler_getMyDataSuccess");
	}
 
	private function handler_getMyDataFault(fault:FaultEvent):void {
		trace(fault);
		Alert.show(fault.toString(), "handler_getMyDataFault");
	}
}

For a good book about Flex check out Flex 3 in Action

You can paste this into pretty much any function, like an init():

var soundReq:URLRequest = new URLRequest("someSound.mp3"); 
var sound:Sound = new Sound(); 
var soundControl:SoundChannel = new SoundChannel(); 
sound.addEventListener(Event.COMPLETE, completeHandler);
sound.addEventListener(Event.ID3, id3Handler);
sound.addEventListener(IOErrorEvent.IO_ERROR, ioSoundErrorHandler);
sound.addEventListener(ProgressEvent.PROGRESS, progressHandler);
sound.load(soundReq); 
soundControl = sound.play(0, int.MAX_VALUE);

Notice the line:
sound.play(0, int.MAX_VALUE);
The second parameter is the number of times to loop. Set it to zero to play the sound one time. There’s no real way (that I have found) to play the audio infinite times, so I put in int.MAX_VALUE which is a 32-bit signed integer of the value 2,147,483,647. Sure this won’t loop forever, but given a one second audio clip it would loop for about 68 years!

Here’s the handlers to go along with it:

private function completeHandler(event:Event):void {
    trace("completeHandler: " + event);
}
 
private function ioSoundErrorHandler(event:Event):void {
    trace("ioSoundErrorHandler: " + event);
}
 
private function id3Handler(event:Event):void {
    trace("id3Handler: " + event);
}
 
private function progressHandler(event:ProgressEvent):void {
    trace("progressHandler: " + event);
}

I’m still new to Flex so if anyone notices anything that isn’t right, please let me know. Also if anyone is looking for a decent BlazeDS tutorial, I’ve found one here. Also been reading Programming Flex 3: The Comprehensive Guide to Creating Rich Internet Applications with Adobe Flex which isn’t bad, if anyone else recommends a book let me know.

The quick fix:
Going through the iBatis docs can sometimes be tedious.  Fortunately, the solution is simple.  If you open your xml file dealing with the object in question, and go to your resultMap element for the class, you’ll typically have a result element for each column you’re dealing with.  Add an attribute called nullValue with a value to give the object in question in case a NULL is present.  It’s that simple. 

Here’s an example…
You have a table called Employee with several columns and create a POJO like below to hold that data:

public class Employee {
    private int id;
    private String login;
    private String password;
    private int authorityType;
    private boolean passwordExpired;
 
    // ... constructors and setter/getter methods here...
}

Let’s say that authorityType and passwordExpired were NULL values in the database.  Adding the nullValue attribute to the xml file like so would solve your issue:

<resultMap id="EmployeeResult" class="Employee">
  <result property="id"              column="id"                               />
  <result property="login"           column="login"                            />
  <result property="password"        column="password"                         />
  <result property="authorityType"   column="authorityType"   nullValue="1"    />
  <result property="passwordExpired" column="passwordExpired" nullValue="false"/>
</resultMap>

Sure I need to see basics on the PHP syntax, but nothing in depth and not a million pages covering if/then, looping, etc. What I need to know is:

• how can I quickly parse some XML
• how can I read and parse a file from a web URL
• basics on session handling
• how to select some mySQL database rows
• a rundown on security and making a PHP app more secure

This book covered all of this with nice clean short examples.  One of the things that I also like about this book is the layout.  It’s kind of setup like a cookbook, so you don’t have to read straight through front to back (although I did).  If you want to read up on manipulating images and CAPTCHA you can flip to that section and you won’t feel confused because you skipped several chapters.  Hands down the best chapter in the book is Chapter 3 PHP Security.  This chapter discusses hashing, SQL injection , and XSS attacks , but this chapter also has the most important section in the book title “Recommended Security Configuration Options“.  This, less than a page, section was a bulleted list of what you need to change in your php.ini to get your PHP installation ready to run on a production server.  This was gold.

Who should read this book

If you’re new to programming then this probably isn’t the book for you.  In fact, if you’re new to PHP it may not be the book for you.  This book is for intermediate PHP developers that want to get things done fast.  All in all I give the book a 5 out of 5 because not only is it a good learning tool but becomes a great reference book.  If I had to pick a weak point it would be the last chapter which gave several large examples to pull the book’s code together, which might be what others like but wasn’t what I needed.

Lastly, if anyone can recommend some good books on frameworks (MVC or other) for PHP to use with larger projects, please leave a comment with the book name.

Creating your certificate

• Go to your JRE bin folder and there will be a file called “keytool”.
• Type keytool -genkey -alias tomcat -keyalg RSA -keystore c:/.keystore The “keystore” parameter is optional.  It’s the location where the certificate keystore will be stored.  By default it will be stored in the current user’s home directory.
• Upon executing, you will be prompted with a number of questions like name, location, organization, etc.  For name I recommend using the domain or if need be the machine name.

Modifying the server.xml file

• Locate the server.xml in $CATALINA_HOME/conf/server.xml
• Open it and look for a section dealing with the SSL Connector.  The section will look something like this:

<-- Define a SSL Coyote HTTP/1.1 Connector on port 8443 -->
<!--
<Connector 
           port="8443" minProcessors="5" maxProcessors="75"
           enableLookups="true" disableUploadTimeout="true"
           acceptCount="100" debug="0" scheme="https" secure="true";
           clientAuth="false" sslProtocol="TLS"/>
-->

• Uncomment the block, and add in another attribute for the keystore location.  We’ll add in keystoreFile=”c:\.keystore”, so when finished we’ll have:

<-- Define a SSL Coyote HTTP/1.1 Connector on port 8443 -->
<Connector 
           port="8443" minProcessors="5" maxProcessors="75"
           enableLookups="true" disableUploadTimeout="true"
           acceptCount="100" debug="0" scheme="https" secure="true";
           clientAuth="false" sslProtocol="TLS" keystoreFile="c:\.keystore">
</Connector>

For full workings of server.xml refer to the apache site.

Last step is to restart Tomcat and point the browser to:
https://localhost:8443
Remember the https and it uses port 8443 by default which can be changed in the server.xml

Here’s the basic code used:

long startTime = System.currentTimeMillis();
for (int i = 0; i < names.length; i++) {
    NameData nd = names[i];
    grid.setText(i, 0, nd.getName());
    grid.setText(i, 1, Double.toString(nd.getD1()));
    grid.setText(i, 2, Double.toString(nd.getD2()));
    grid.setText(i, 3, Integer.toString(nd.getRank()));
}
gridLabel.setText("Grid: "+(System.currentTimeMillis()-startTime)+"ms");
 
startTime = System.currentTimeMillis();
for (int i = 0; i < names.length; i++) {
    NameData nd = names[i];
    flex.setText(i, 0, nd.getName());
    flex.setText(i, 1, Double.toString(nd.getD1()));
    flex.setText(i, 2, Double.toString(nd.getD2()));
    flex.setText(i, 3, Integer.toString(nd.getRank()));
}
flexLabel.setText("FlexTable: "+(System.currentTimeMillis()-startTime)+"ms");

I’m pulling from an array of 100 which holds some data that’s used to populate the cells.  The creation of the tables is done before hand, I’m not sure if this gives an unfair advantage to the Grid, but that’s the way I’m doing it.

Try the test app yourself here .

Results
What I’m finding is that the Grid does beat the FlexTable, but not by much with a small data set.  Larger sets seem to widen the gap.  My guess for this is that since FlexTable has the ability to add rows (Grid is sized from the start) that it works much like how other resizable constructs work such as Java’s ArrayList. My reasoning for this is that the first time the test is run the speed is very slow on the FlexTable (especially in IE).  Repeated test runs after the initial are faster and I think this is because the table was being sized the first time as rows were added, and didn’t need to be resized during the following tests.

The other thing I’m finding is that performace varies based on browser.  I’m seeing FF run reasonably well.  With IE the Grid runs about the same as FF but the FlexTable runs considerably slower.  I also tested Opera and was stunned as it blew both others out of the water. 

Here’s some of the tests run with two different machines (one linux and one Windows):

MS Windows Machine

Linux Machine

Anyway, enough with the blabbing.  I’ve put together a simple example to add a right click context menu and override the default browser context menu using GWT. 

In the box below you can try it out, right-click in there and you can demo it.

In case the iframe doesn’t show up in your browser you can see and try the example here.
Now here’s how it’s done.

I used a DeckPanel to switch between several panels. The popup context menu is used to choose.  To allow the DeckPanel to catch the right-click event (and you can also listen for double-clicks and several other things) I extended the DeckPanel.   For simplicity I added “Adv” (Advanced) in front of the several classes I’ve extended so this one will be AdvDeckPanel.  The first thing to do in the constructor is add sinkEvents(). Then we’ll override onBrowserEvent() in the class.  Here’s the code:

public AdvDeckPanel() {
  super();
  sinkEvents(Event.ONMOUSEUP | Event.ONDBLCLICK | Event.ONCONTEXTMENU);
}
 
public void onBrowserEvent(Event event) {
  GWT.log("onBrowserEvent", null);
  event.cancelBubble(true);//This will stop the event from being propagated
  event.preventDefault();
  switch (DOM.eventGetType(event)) {
    case Event.ONMOUSEUP:
      if (DOM.eventGetButton(event) == Event.BUTTON_LEFT) {
        GWT.log("Event.BUTTON_LEFT", null);
        listener.onClick(this, event);
      }
 
      if (DOM.eventGetButton(event) == Event.BUTTON_RIGHT) {
        GWT.log("Event.BUTTON_RIGHT", null);
        listener.onRightClick(this, event);
      }
      break;
    case Event.ONDBLCLICK:
      break;
 
    case Event.ONCONTEXTMENU:
      GWT.log("Event.ONCONTEXTMENU", null);
      break;
 
    default:
      break; // Do nothing
  }//end switch
}

Notice the two lines in onBrowserEvent():
event.cancelBubble(true);
event.preventDefault();

These are the two lines that tell the browser not to show it’s default context popup menu. Also note that overriding the default context menu doesn’t work in all browsers, I’m not sure if this is a bug in GWT. If you’re using firefox then you’ll have no problems, with IE you may need to add the following to your html:

<body oncontextmenu="return false;">

Other than that there’s just a switch statement that checks the event type, in this case we’re interested with ONMOUSEUP, and we’ll call the listener’s onClick() or onRightClick() based on the Event’s fields.

AdvDeckPanel also has a reference to AdvClickListener which looks like:

public interface AdvClickListener extends ClickListener {
  void onClick(Widget sender, Event event);
  void onRightClick(Widget sender, Event event);
}

This reference is basically the same as ClickListener, but has a separate method to handle the right-click.  I also pass the Event object so I can get the x and y from the click so the context menu shows up at that location instead of the top-left of the screen.

AdvDeckPanel implements AdvClickNotifier which does the same thing as GWT’s SourcesClickEvents interface, but handles the AdvClickListener instead.

public interface AdvClickNotifier {
  public void addClickListener(AdvClickListener listener);
  public void removeClickListener(AdvClickListener listener);
}

So, once you have your widget (in this case the AdvDeckPanel) and the listeners set up to handle the right-click, then we add in the code to build the popup menu and commands that go with it.  I put all of this in the EntryPoint.  I have three widgets (panels) and a Command for each like this:

private AdvDeckPanel deckPanel = new AdvDeckPanel();
final private PopupPanel popupPanel = new PopupPanel(true);
private VerticalPanel defaultPanel = new VerticalPanel();
private SimplePanel imagePanel = new SimplePanel();
private SimplePanel sponserPanel = new SimplePanel();
 
Command showAlertCommand = new Command() {
  public void execute() {
    deckPanel.showWidget(0);
    popupPanel.hide();
    Window.alert("Hope this example helps.");
  }
};
 
Command showImageCommand = new Command() {
  public void execute() {
    deckPanel.showWidget(1);
    popupPanel.hide();
  }
};
 
Command showSponserCommand = new Command() {
  public void execute() {
    deckPanel.showWidget(2);
    popupPanel.hide();
  }
};

A Command is called when the MenuItem is clicked.

Now the code to build the menu, link the commands, and handle the right-click:

private void createPopupMenu() {
  MenuBar popupMenuBar = new MenuBar(true);
  MenuItem alertItem = new MenuItem("Show alert", true, showAlertCommand);
  MenuItem imageItem = new MenuItem("Show Oliver ", true, showImageCommand);
  MenuItem sponserItem = new MenuItem("Show sponser ", true, showSponserCommand);
 
  popupPanel.setStyleName("popup");
  alertItem.addStyleName("popup-item");
  imageItem.addStyleName("popup-item");
  sponserItem.addStyleName("popup-item");
 
  popupMenuBar.addItem(alertItem);
  popupMenuBar.addItem(imageItem);
  popupMenuBar.addItem(sponserItem);
 
  popupMenuBar.setVisible(true);
  popupPanel.add(popupMenuBar);
}
 
public void onRightClick(Widget sender, Event event) {
  int x = DOM.eventGetClientX(event);
  int y = DOM.eventGetClientY(event);
  popupPanel.setPopupPosition(x, y);
  popupPanel.show();
}

Lastly, to make the menu actually look like a popup menu I modified the CSS like so:

.popup {
  background-color: gray;
  border-color: gray gray gray gray;
  border-width: 1px 3px 3px 1px;
  border-style: solid solid solid solid;
}
 
.popup-item {
  font-weight: normal;
  font-size: 80%;
}

What this does is makes it so the border isn’t the thick default GWT blue, and uses a thin border with the right and bottom borders a bit thicker.  This gives the popup that shadowed look.

A couple of books worth checking out are: GWT in Actionand GWT in Practice
Here’s the source and more links.

In case the iframe doesn’t show up in your browser you can see and try the example here.

First, let me explain how it’s all done.  Using a list of colors, in this case different shades of yellow, you add and remove styles (a color) of a widget.  The colors are stored in the CSS file.  The change is triggered by a timer.  The YellowFadeHandler class has an inner class called FadeObject which holds a color and a com.google.gwt.user.client.ui.UIObject. This UIObject is the super class of all major GWT widgets and has the methods:

addStyleName(java.lang.String style)
and
removeStyleName(java.lang.String style)

The FadeObject class

private class FadeObject {
	private UIObject uiObj = null;
	private int color = 0;
 
	public FadeObject(UIObject uiObj) {
		this.uiObj = uiObj;
		this.uiObj.addStyleName(yftStyles[color]);
	}
 
	public void nextColor() {
		if (color == transparent_color) return;
		uiObj.removeStyleName(yftStyles[color]);
		color++;
		uiObj.addStyleName(yftStyles[color]);
	}
	public int getColor() {
		return color;
	}
	public boolean isTransparent() {
		if (color == transparent_color) return true;
		return false;
	}
}// end class FadeObject

The YellowFadeHandler class

  private List<FadeObject> fadeObjectList = new LinkedList<FadeObject>();
 
  public YellowFadeHandler() {
    Timer t = new Timer() {
      public void run() {
        if (fadeObjectList.isEmpty()) return;
        for (Iterator<FadeObject> iter = fadeObjectList.iterator(); iter.hasNext(); ) {
          FadeObject fObj = iter.next();
          fObj.nextColor();
          if (fObj.isTransparent()) {
            //if it hits the transparent color then fading is done so remove it.
            iter.remove();
            GWT.log("fade object removed", null);
            continue;
          }
        }
      }
    };
    t.scheduleRepeating(120);
  }
 
  public void add(UIObject obj) {
    if (obj == null) return;
    FadeObject fo = new FadeObject(obj);
    fadeObjectList.add(0, fo);
    GWT.log("fade object added", null);
  }

My YellowFadeHandler class holds a List of these FadeObjects.  When the timer fires, it iterates through the list and changes (removes the old and adds the new) styles of the widgets.  When the style is changed to the last color in the chain (transparent), the widget is then removed from the list.  So to have a widget go through the yellow fade, all that needs to be done is call handler.add(widget);
Super simple. Here’s the source.
A couple of books worth checking out are: GWT in Actionand GWT in Practice

Assuming you already have Eclipse CDT, the first thing you need to do is create a new project.  After starting Eclipse, click on File->New->C Project and you’ll get a dialog box to choose the type of project (executable, static library, shared library, etc).  For this example, I’m choosing Executable and Hello World ANSI C Project.  Put in a name and click Finish.

Next you’ll see you have a new project in the left-side panel with a .c file containing a simple hello world program.

Now in my example I’ll add the line #include <avcodec.h> to set up my include.  If you need to add an include directory (where your header files are located) then in the Eclipse menu go to Project->Properties then open the C/C++ Build branch and click on Settings.  On the right side click on the Directories branch of GCC C Compiler.  You can then add directories to your include path.

In this same dialog you can click on Libraries in the GCC C Linker branch to add any libraries to the project for linking.  The library I’m adding is the libavcodec.so shared library.  To add this (notice in the screenshot) I only need to add avcodec, without the prefix lib and .so extension.  This might be new to Windows programmers.  Since you’re adding a library it’s assumed to have the lib and .so in the name.

Now let’s just add a couple of lines to the main() so we can test a compile with the libavcodec library.

#include <stdio.h>
#include <stdlib.h>
#include <avcodec.h>
int main(void) {
   avcodec_init();
   avcodec_register_all();
   return 1;
}

And then to run it, in the menu toolbar click on the run arrow and choose Run As->C/C++ Local Application.

Getting no errors means success.