Monday, 23 November 2009

Altair; An iTunes MP3 player built with Flex 4

About a month ago when my friend Cenk showed his brand new web site to me, all I had in my mind was to build an iTunes style MP3 player for his work. The site's design was nice but the player he was using was quite ordinary. So I holster my brand new Flex Builder 4 Beta2 and offered to build a better one to him.
I start for searching a coverFlow component so I wouldn't need to code it from strach where I end up with a nice one on Doug McCune's blog. I built some category shelves to support multi coverflow lists, add a regular list and some regular controls.
After several small and serious bugs (after intense testing by Cenk and Sinem) here is Altair with the initial version, which is named after the great game Assasin's Creed. Besides coordinating the coverflow, the list and the mp3 player I also try to recode the existing code (the most i could) with Flex4.
I am going to submit the full code very soon after refactoring and rewriting the rest but still feel free to contact me for the current source code if you need it immediately.

Ladies and gentleman here is Altair performing Cenk's great scores..

Monday, 9 November 2009

FlexJava on 79 countries


It has been quite a while since Yunus and I decided to post here. Later his brother Yusuf also joined us. For the last few months I had been using Google Analytics to watch our visitors. Actually we are not obsessed with visitor counts or bounce rates since we would really prefer quality on quantity but it still nice to see that we had visitors from so many countries so far.
However it is nice to watch the map at analytics. Day by day it had become more green.


This is the map showing the 79 countries we had visitors from. US leading and followed by Turkey, India and France. Thanks everyone hope we could manage to answer some questions of yours or inform about some news..
We will be here and you are always welcome :)

Update: ok its 84 countries, by last time I checked..

Friday, 6 November 2009

J2SE 5.0 End of Service Life Notice

The sky is red, I don't understand,
Past midnight I still see the land.
These are the opening lyrics for the album titled Burn by Deep Purple. It is considered to be one of the most underrated albums of the history just because it was the follower of the famous album titled In Rock.

This came up to my mind just after I read End of Service Life statement about Java5 on Sun's site. Java5 was the follower of most popular and widely accepted version of Java 1.4, even today it is still standart JVM used in many places.
I still remember the presentations introducing JavaSE 5, I attended. Actually with JavaSE 1.4 the JVM was already quite mature so JavaSE 5 aimed to make enhancements and to simplfy the language. However, with SE 5 many new features were also released which made this a major version.

I am sure most of you will list annotations, autoboxing, generics, enhanced (for-each) loops, varargs and enums as the major changes. Some may add Scanners, Formatters and Static imports to that list. For most of the Java developers, even using those changes took a long time (may be even later than JavaSE 6 released) because most vendors took it very slow to move to Java 5. Since the JVM stuck at version 1.4 most of these new APIs and enhancements was burried for a long time.
Actually Java 5 also offered more advanced features to the world but since even the simple ones could not have implemented on most projects tied to Java 1.4, the advanced had even less chance.

Java 5 was much more than bringing enums and generics to the language, Java 5 introduced JSR-166; The Executor framework, Concurrent collections, BlockingQueues, Decks, Atomic Variables, ThreadPoolExecutors and more which are all underrated by the end developers (even though most of the servers, frameworks or libraries already using them under the hood). Java 5 was a big major step and even though the vendors took it very slow to migrate, it changed the whole destiny of Java.

Thank you Java 5, although most of us could not make use of you through whole your "Service Life", still we are aware how important it was to have you...

Thursday, 5 November 2009

Java Developer Diaries; Learning iPhone Development with Objective-C

Few days ago I have seen a tweed from an iPhone developer who I met during a Google meeting in San Francisco. I am quite used to hear comments from Java developers about how complicated Objective-C is, however, this time it was the opposite. She was just out of a Java session and was complaining about Java for too many import statements, not providing built in patterns for ease of development.
This reminded me Episode IV, A New Hope, where Han Salo was making fun of lightsabers and Obi-Wan saying;
This is the weapon of a Jedi Knight. Not as clumsy or random as a blaster. An elegant weapon for a more civilized time.

Don't get me wrong I am not saying Objective-C is elegant where Java is clumsy (actually still I am much more comfortable in Java). I like both Objective-C and Java just like I like both Obi-Wan and Han Solo, but the thing is they are different than each other.

You can't change Java or Objective-C to act like the other. They have different approaches, traditions and ways to do things. Objective-C's roots go back to 1986 which is much older than Java. Objective-C is much tidy and clean when compared too languages of its time.

As Apple built their OS and systems on it, they also provide built in patterns for ease and tidyness of coding. Development for iPhone is not an exception, unlike most other mobile platforms Objective-C forces you to use some built in patterns (such as MVC) even you if you do not realize.

I don't really like hello world tutorials so this post will be a jump start in to iPhone development with Objective-C but I will still try to explain things in Java developers perspective...

Our mission (we should choose to accept) is to built an iPhone app making use of accelarator, GPS and the orientation of the device built on native iPhone UI components. We can build an application displaying our latitude and longitude when the device has shaken and the UI will rotate as we rotate out phone. This application will make use of most of the interesting built in APIs and still will be simple enough for a beginner (hopefully).

To develop iPhone apps you will definitely need the iPhone SDK and the built in IDE provided by Apple, the XCode. I am sure you will find it difficult to adopt to xcode but as you get use to it you are going to like it. Start XCode and click new project.

Picture 29

A new window will popup with several project templates. XCode contains pre defined templates. Choose iPhone from the list on the left and scroll until you see View-based Application on the right pane.

Picture 1This template gives you a single view built on MVC pattern. Click choose and name your project as MyTutorial. As you finish, XCode will create a bunch files. Your project should look like the following;

Picture 2

To summarize quickly, .h files are interfaces and .m files are implemantation classes. The files with .xib subfix are UI objects which are not text based code files. They are real visual design objects and you can tweak them with the Interface Builder tool which comes bundled with XCode. main.m is your manin class where your application is fired up, appDelegate classes are the delegation classes where your view (xib file) and your Controller is put in to action in harmony. You do not need to change the those so lets quicly move to contoller classes where the actual magic occurs.

Objective-C really makes use of interfaces so whatever you are going to built you should start with controller.h file. Click MyTutorialViewController.h once and the lower pane will display the codes. You will notice the interface and the UIKit imports are already defined. Unlike Java, in Objective-C imports are handles as frameworks which is a simpler way to control dependencies. Objective-C also makes heavy use of Delegates (which you should have noticed one already created so far). To add functionality from most of the APIs, you need to add the approciate Delegate, sadly there is no silverbullet here but a bit googleing, some guess and some code assist from IDE should work most of the time. Since we want the functionality from the acceloremeter and the GPS, we need to add the following Delegates to out interface.


@interface MyTutorialViewController : UIViewController


We also need to create some objects. Since location come with to values latitude and longitude, we need two UI objects to display them, also we need a locationManager which lets us to interact with the GPS and lets say an action method which we trigger from UI to clear the values and recheck the location. We need to create the action methods and UI outlets in the interface since our UI (xib) object will only interacts with this one. We also need another import to make use coreLocation libraries. The final code should look like this;


#import
#import

#define kThreshold 1.2
@interface MyTutorialViewController : UIViewController {
CLLocationManager *locationManager;
IBOutlet UITextField *latitude;
IBOutlet UITextField *longitude;
}
@property (retain, nonatomic) CLLocationManager *locationManager;
@property (retain, nonatomic) UITextField *latitude;
@property (retain, nonatomic) UITextField *longitude;

-(IBAction)clearContent:(id)sender;
@end


The first 2 lines are the import statements. Next we define a global constant kThreshold for checking the shake sthresholds. Next we have the CLLocationManager object which provides the GPS interaction. UI objects which are going to be binded to xib file are created with IBOutlet decleration. Here we created two UITextField objects, actually UILabel objects would be perfectly enough but to make use of different UI components I prefer to use editable text fields which we later define as uneditable. Next we need declare the @property lines for all thoe variables. I am not going to go in more detail with this, else this single post would become more complicated than a Objective-C book. Last we need to add the decleration of our action method, since again this would be something interacting with the UI -in this case receiving an action- we mark this with IBAction.

We are done with the .h file but we need to add a framework as a last step, if you expand the frameworks on the left pane you will notice there are some already imported frameworks.

Picture 6

Since we are going to make use of location services, we need to add to the framework associated with it. With a little help from google and some guess you can figure out its called CoreLocation.framework (you can also prefer to open the frameworks folder and try to find through them). Right click to your project, choose add and an existing framework.

Picture 7

Choose CoreLocation.framework, you will notice you can navigate through to see all available frameworks in this pane.

Picture 8and finally click add to add the framework to your project. With SDK 3 the option at the top of the window is dimmed. However if your version lets you to check this be sure that this option is not enabled. This is used to embed the framework which is already a part of the OS to your project (it is like embedding the rt.jar with your java application, simply you really don't need this unless you want to create pain to everyone who downloads your app).

Picture 9

Done, so lets go and finish the implementation, click MyTutorialViewController.m. Lets start with making use of the objects we defined in our interface. Objective-C has a different way to create getters and setters. You need to mark the objects you defined in the interface with the @synthesize keyword.


@implementation MyTutorialViewController

@synthesize locationManager;
@synthesize latitude;
@synthesize longitude;


Using predefined templates also provides some built in methods. If you scroll down you will notice methods which are commented out. most of those are ready to be used as you make them available.

Picture 4One of the most commonly used of them is viewDidLoad which is fired whenever the view associated with the controller is loaded. Uncomment that method and add the following;


- (void)viewDidLoad {
UIAccelerometer *accelerometer = [UIAccelerometer sharedAccelerometer];
accelerometer.delegate = self;
accelerometer.updateInterval = 0.1;
}


To explain what we did, we kindly ask iPhone to share the accelerometer with us and declare our class (self) as the delegate of that accelerometer. Last we provide an interval value, to tell the accelerometer how frequently we want to be informed about movements. Since accelerometer will think our class as a delegate which can handle the updates, it expects to fint out the methos where the values to be send. Scroll down to bottom of the file and just before the @end statement insert the following method.


- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {
if (acceleration.x > kThreshold || acceleration.y > kThreshold || acceleration.z > kThreshold) {
//shaken go and subscribe to location service
self.locationManager = [[CLLocationManager alloc] init];
locationManager.delegate = self;
locationManager.desiredAccuracy = kCLLocationAccuracyBest;
[locationManager startUpdatingLocation];
}
}


didAccelerate methos will be called by the accelerometer with the given interval and an acceleration parameter will be passed. What we do next is to check if any of the coordinates (x,y or z) goes higher than the given threshold. If it does than we initialize our locationManager object and declare our class as the delegate of it. As you should have noticed most of APIs in Objective-C are used via delegates. Last we need tell our locationManager that it can start updating the location info. Objective-C again offers a different syntax to send messages to objects as you see on line 7 (instead of dot notation). Again I am not going to go into detail in this.

To receive the location updates, we need to add the following method which the API is expecting to see in its delegate;


- (void)locationManager:(CLLocationManager *)manager didUpdateToLocation:(CLLocation *)newLocation fromLocation:(CLLocation *)oldLocation {

latitude.text = [[NSString alloc] initWithFormat:@"%g°", newLocation.coordinate.latitude];
longitude.text = [[NSString alloc] initWithFormat:@"%g°", newLocation.coordinate.longitude];

[locationManager stopUpdatingLocation];
}


didUpdateToLocation will be called and updates (the accuracy and intervals can be given as parameter however its not guaranteed that the GPS will respond those according to coverage) will be send via two parameters the newLocation and the oldLocation. Since what we care is the new location's attitude and longitude. We request those values as a new String object with the desired format and assign the to UI placeholders text values. Last, as we do not need any further updates once we receive the location (keep in mind you are using battery on a mobile devide) we kindly ask the locationManager to stopUpdatingLocation. Since our didAccelerate methos will reregister the location manager if the user shakes the phone.

We already had created an action method to clear the labels. Add the following for this purpose;


-(IBAction)clearContent:(id)sender{
latitude.text=nil;
longitude.text=nil;
}


We also wanted the user interface to rotate according to changes in the phone's orientation which is also already defined but commented out. Scroll, find shouldAutorotateToInterfaceOrientation method and uncomment it. We should let it return true for orientation changes, just change the return type. The method should look like the following;


- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
// Return YES for supported orientations
return YES;
}


Ok finally, we do not have a garbage collector and we are on a mobile platform so we need to collect our own garbage. Scroll to find dealloc method which has already been defined and release all the objects we had created so far.


- (void)dealloc {
[locationManager release];
[latitude release];
[longitude release];
[super dealloc];
}


We are pretty done with coding now we need to build our interface via drag and drops and make necessary connections. You will be suprised that all of those can be done visually. Double click the MyTutorialViewController.xib to fire up the Interface Builder.

Picture 1Interface Builder consists of 4 different windows, which are consisted of different panes. tabs and options. Again I will not go all in detail just go straight and built the interface.

Picture 11

On the left window in the screenshot above, the window titled view is the view of your application, on the very right you can find the built in components provided for iPhone and in between there is a window where you can tweak the setting of your components you place on your view.

As you have noticed our view is gray, so lets plave a view component from components list. Scroll until you see view and simply drag and drop on top of your view.

Picture 12

Next place two labels, two text fields and a button to the view, you should notice guide lines will appear as you drag items. When you select an item you had replaced, the middle pane changes to properties of that item.

Picture 1

Your view should also be looking something like the image above. When you click on the labels you can change the text property by editing the test on the middle window. As you may have remember, we had used text fields to display the coordinates. However by nature those fields are editable and a default soft keyboard will appear when you focus on them. To stop this we need disable user interaction.

Picture 16

Be sure to uncheck 'User Interaction Enabled' for both of the text fields. You may also prefer to change other properties and see the effects. To check the layout in action you can save and go back to xCode to run your project.

Altough we have done coding and pretty finished visually, still we don't have any connection between them. We need to bind the visual components to IBOutlets we created in code. select the button, right click and drag to File's Owner icon in xib window as shown in the image below.

Picture 18

As you release the button, a popup will appear. You will notice the name of the action method you created before is listed. As you select the method and the visual component will be binded.

Picture 19Alternatively, you can select the button go to the middle window and select the second tab which show all avaible references of this outlet. You can click and drag touch up inside to again file's owner. Since you already did the first step this refernce should already be binded.

Picture 20

Next select View and go back to previous window bind the text fields the same way by dragging the connections to the UI components.Picture 21

If any of the steps, something is missing, can not be connected or unavailable go back and check again although iPhone development is heavily assisted, it is quite easy to skip something and once you skip it is hard to find out why something is missing.

Run the application, if you have chance to deploy it on a real phone do so since it is the only way to test the shake effect.

Picture 25

Actually there is a new shake API which came whith OS 3 and actually easier to implement than the one we did but for the sake of understanding the way Objective-C works I prefered to do it in the old way. Using the old way also gives you opportunity to work on OS 2 devices. However if we had chooe to use the new shake api we could be using the sake option provided with the simulator to test the shake action.

Rotota the phone and hold it in landscape mode, you will notice the screen changes the orientation.

Picture 24

Next if you have chance to deploy the app on a real device, or change the shake method with the new one provided with OS3 and use the shake command on the editor (again this option will not work with code given above but our code works fine on the phone and should give better understanding).

Picture 26For the last step, tap the button to clear the text fields.

It should be a little confusing, if you are new to Objective-C and xCode. Although it might look a bit confusing in the beginning, the structure, syntax and the APIs provided by Objective-C is not that hard and fun to use. Eventhough I didn't mention keep in mind there is talented full debugger built in xCode which can be life saving.

If you have troubles with understanding go and check basic Objective-C tutorials on Apple's site, since this post aims to show you the structure and how to make use of basic APIs of the Objective-C.

Sunday, 1 November 2009

JavaFX; the empire really strikes back?

Year 1996 was the introduction of Java Applets with a dancing duke animation which was something quite unusual for web pages of that time. Very soon many web sites had applets running in them, for menu interactions, forms, animations and much more.. and not very soon after those websites stop using applets because of version and jre plugin problems.

In 2006 I attented an Adobe meeting where I had seen Flex2 beta. The introduction was quite simple Adobe was saying we have Flash player in 98% of the clients which is all you need to run Flex applications. However (as a developer loyal to Java), I was thinking at least that many of the clients should also have JRE on their computers but the reality was different, applets had problems with versioning, plugin upgrade and plugin installiation. Even though Java started the revoluion of Rich Internet Applications, it has been left out of the play.

JavaFX is out to change that, it was first announced under the name F3 and very soon to support it, consumer JRE was announced. JRE was too big to download and to hard to upgrade for an end user which was a main reason for applets to fail. With the new JRE update, Sun let the end users to upgrade and install the JRE in a painless way.

So, what is JavaFX? JavaFX is an expressive scripting language built on Java Runtime. If you are familiar with competitive platforms such as Flex and Silverlight, JavaFX differs in the decleration syntax where others use XML based declerations, JavaFX follows a more CSS style.

With update 1.1 JavaFX also has built in mobile support which is a good plus compared to others. A JavaFX application runs on mobile platforms with the same set of components as long as you don't use wrapped swing components which is a great plus when compared to Flex which has totaly new and different components for mobile development.

If you are new to JavaFX development JavaFX site is a nice one stop source, actually other links you will come up with may contain deprecated packages and class (such as i did before). Also you may prefer to watch a screencast i published long before.

IDE support for JavaFX is still in progress, Currently Netbeans is the best supported and uptodate IDE for JavaFX, however, Eclipse has also became quite stable and usable. On eclipse there are two alternatives, official Sun version of the eclipse plugin can be downloaded from here , also Exadel has a very promising JavaFX plugin for eclipse. Also if you intend to code animations there is a suprisingly successful visual tool to generate JavaFX code just like using Flash CS which can be used as a webstart application. So enough about IDEs lets deep dive into coding...

JavaFX brings a similar approach to Flash-Flex couple with one major difference. Since there is no GUI and design tool like Flash, you have the control of the Flash counterpart of Stage and Timeline directly in the code.

If you create a new JavaFX application in Netbeans or Eclipse, it will create something like the following class;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;

Stage {
title: "Application title"
width: 250
height: 80
scene: Scene {
content: [
Text {
font : Font {
size : 16
}
x: 10
y: 30
content: "Application content"
}
]
}
}


Stage is your main window where you can declare your properies in CSS like style, the scene property of the stage has Scene object which holds an array of visual contents. The output should be something similar to this;

Picture 1

Suprisingly to run the same application on mobile does not need any further steps than choosing the mobile profile to run;

Picture 2

By deafult JavaFX applications would run on mobile as long as you prefer JavaFX visual components instead of wrapped Swing components.

To animate the text we previously add, drag n drop a timeline after the stage.

Picture 3

The Timeline should not be in the Stage since its not a visual component. Timeline controls the behaviours of the visual components according to time. Timeline's each KeyFrame has a values property where you can declare the changes you want to see on your pomponents properties. The text field we had declared does not have an instance id (since it was created inline). So lets add tweak our code and take the text components decleration out of the stage.


var text=Text {
font : Font {
size : 16
}
x: 10
y: 30
content: "Application content"
}
Stage {
title: "Application title"
width: 300
height: 200
scene: Scene {
content: [
text
]
}
}


By declaring our text property out of the stage, now we have class wide access by instance name. Developers of Flex and Silverlight must have noticed the syntax and approach differences so far. JavaFX syntax targets components and transitions to be handled decleratively since JavaFX mostly targets coders and it does not have a GUI tool like Flash CS. However the result is a platform where you can create transtions and animations easily by decleration.

Lets continue to add more KeyFrames and animate our Text. Just like adding the timeline you can drag and drop KeyFrames in the TimeLine. However its not much diffrent than typing since there is code assist both in eclipse and netbeans. Change the first Keyframe's time to 0 and initial values as translate values. Next add another KeyFrame with time value of 5s and add new translate and scale values. Translate values will be used to move the text object on x and y axis with the value given, where the scale values scale the component with the multiplier of the given value (2 in this case). Notice TimeLine has '.play()' call which starts the animation.


Timeline {
repeatCount: Timeline.INDEFINITE
keyFrames : [
KeyFrame {
time : 0s
values: [text.translateX =>10,
text.translateY =>30]
}
KeyFrame {
time : 5s
values: [text.translateX =>15,
text.translateY =>60,
text.scaleX =>2,
text.scaleY =>2]
}
]
}.play();


Finally run the JavaFX application and watch your text enlarging while moving. This transitions can be applied to any property of an object. JavaFX also has predefined animations like ScaleTransition, RotateTransition, FadeTransition... etc.

Transitions can be used to create timeline animation on desired effects. Also multiple transactions can be run parallel or sequentially. To add a FadeTransaction on our text component;


FadeTransition{
node: text
duration: 5s
fromValue: 1
toValue: 0.3
repeatCount: Timeline.INDEFINITE
autoReverse:true
}.play();


Run the application and add more keyframes or tweak the values. Animations and transitions is a powerful feature of JavaFX which has out of box compability with mobile applications.