Weather Forecast in Windows Phone 7

I wrote a new article to Nokia Developer Wiki. In this article, I will show how to create Windows Phone application which loads Weather Forecast from World Weather Online 's XML service. You can add your own favourite cities to application and it will display weather forecasts in Panorama Views in Windows Phone application.

Weather Forecast Panorama Weather Forecast Panorama Weather Forecast Panorama Weather Forecast Panorama Weather Forecast Settings Page

You can read the whole article here: Weather Forecast in Windows Phone 7

More XML Based Articles in Nokia Developer Wiki: Movies in Finnkino Theatre’s

I wrote a new article to Nokia Developer Wiki. In that article, I will show how to create Windows Phone application which loads Movie's information from Finnkino's XML service. Loaded Theatre's and Movie's data will be parsed and displayed in a few different Pages in Windows Phone application.

Finnkino Elokuvat - Theatre Area List Finnkino Elokuvat - Theatre Shows Finnkino Elokuvat - Show Details

You can read the whole article here: Movies in Finnkino Theatre's

Nokia Developer Wiki administrator added this article to Nokia Developer Wiki "Featured" articles at 29.1.2012.

Article in Nokia Developer Wiki: Employees from XML in Windows Phone 7

I wrote a new article to Nokia Developer Wiki. In that article, I will show how to create Windows Phone application which loads Employee's information from server with XML data. Loaded Employees XML data will be parsed and displayed (image 1) in ListBox Control. Selected Employee's details will be shown in a new Employee Page (image 2). You can call, send SMS or Email messages to selected Employee.

Employees in ListBox Delails of the Employee Delails of the Employee

You can read the whole article here: Employees from XML in WP7

Nokia Developer Wiki administrator added this article to Nokia Developer Wiki "Featured" articles at 22.1.2012.

Flex 4.6 and SplitViewNavigator in AIR : Demo application – Finnkino Movies

Adobe Flex 4.6 includes several new and updated mobile-optimized Spark components (for example SplitViewNavigator, CallOutButton, SpinnerList, DateSpinner, Text Enhancements and ToggleSwitch).

In this example I used SplitViewNavigator to show Finnkino's Theatres in the first view of the SplitViewNavigator. Second view shows the selected Theatre's movies (what are running at this day) or all movies that are running in Finnkino's Theatres.

<s:SplitViewNavigator id="splitNavigator" width="100%" height="100%" autoHideFirstViewNavigator="true">
  <s:ViewNavigator id="areasView" width="200" height="100%" firstView="views.AreaCategory"/>
  <s:ViewNavigator id="detailView" width="100%" height="100%" firstView="views.MoviesTileView">
    <s:actionContent.portrait>
    <s:Button id="navigatorButton" label="Valitse Teatteri"
         click="splitNavigator.
         showFirstViewNavigatorInPopUp(navigatorButton);"/>
    </s:actionContent.portrait>
  </s:ViewNavigator>
</s:SplitViewNavigator>

Movies in Landscape mode

SplitViewNavigator is working very nicely and it hide's the first view in navigator when tablet is rotated to Portrait. You should add resize event handling to your application and use states in ActionContent in ViewNavigator.

<s:Application resize="resizeHandler(event);">
protected function resizeHandler(event:ResizeEvent):void {
  currentState = aspectRatio;
}
<s:states>
  <s:State name="portrait"/>
  <s:State name="landscape"/>
</s:states>

Movies in Portrait mode

List and ItemRenderers
I have used List to show all the movie items and own made ItemRenderer to display some basic information (or just movie image when all the movies are selected from the main list).

<s:List id="moviesList"
    dataProvider="{data}"
    itemRenderer="comps.MovieAreaTile"
    horizontalCenter="0"
    verticalCenter="0"
    width="100%" height="100%"
    contentBackgroundColor="#FFFFFF"
    change="moviesList_changeHandler(event)"
    >
  <s:layout>
    <s:TileLayout id="tileList"
     paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5" horizontalGap="5" verticalGap="5"
    columnAlign="justifyUsingWidth"
   />
  </s:layout>
</s:List>
// MovieAreaTile
<s:HGroup>
  <s:Image source="{data.Images.EventSmallImagePortrait}" />
  <s:VGroup>
    <s:Label id="title" styleName="title" text="{data.Title}" />
    <s:Label id="startTime" styleName="data" text="{data.dttmShowStart}" />
    <s:Label id="length" styleName="data" text="{data.LengthInMinutes} min" />
    <s:Label id="theatre" styleName="data" text="{data.TheatreAndAuditorium}" />
    <s:Label id="genre" styleName="data" text="{data.Genres}" />
  </s:VGroup>
</s:HGroup>

All the Movies in Finnkino's Theatres

SQLite: Automatically display same Theatre which was used in previous time
In this example I store theatreID and theatreName to SQLite database every time when a new Theatre is selected. Those values are used when application is started again.

Connection to database:

private function connect(type:Number):void {
  dbConn = new SQLConnection();
  if (type == CREATE_DB) dbConn.addEventListener(SQLEvent.OPEN, createTable);
  else dbConn.addEventListener(SQLEvent.OPEN, getTheatreData);
  dbConn.addEventListener(SQLErrorEvent.ERROR, errorHandler);
  dbConn.openAsync(dbFile);
}

Create a table:

private function createTable(event:SQLEvent):void {
  var dbStatement:SQLStatement = new SQLStatement();
  dbStatement.sqlConnection = dbConn;
  dbStatement.addEventListener(SQLEvent.RESULT, theatreTableCreated);
  dbStatement.addEventListener(SQLErrorEvent.ERROR, errorHandler);
  dbStatement.text = "CREATE TABLE IF NOT EXISTS movieTable (id INTEGER PRIMARY KEY AUTOINCREMENT, theatreID TEXT, theatreName TEXT);";
  dbStatement.execute();
}

Table is created a first time -> add some sample data to table

private function theatreTableCreated(event:SQLEvent):void {
  var dbStatement:SQLStatement = new SQLStatement();
  dbStatement.sqlConnection = dbConn;
  dbStatement.addEventListener(SQLEvent.RESULT,theatreDataAdded);
  dbStatement.addEventListener(SQLErrorEvent.ERROR,errorHandler);
  // just set default data when table is created
  theatreID = 1015;
  theatreName = "Jyväskylä";
  dbStatement.text = "INSERT INTO movieTable (theatreID, theatreName) VALUES('"+theatreID+"','"+theatreName+"');";
  dbStatement.execute();
}

Theatre (id and name) data is added first time, load events with HTTPService

<fx:Declarations>
  <s:HTTPService id="finnkinoArea" showBusyCursor="true" url="{url}"
      result="areaHandler(event)"
      fault="areaFaultHandler(event)"
   />
</fx:Declarations>

private function theatreDataAdded(event:SQLEvent):void {
  loadEvents(theatreID);
}

private function getTheatreData(event:SQLEvent):void {
  var dbStatement:SQLStatement = new SQLStatement();
  dbStatement.sqlConnection = dbConn;
  dbStatement.addEventListener(SQLEvent.RESULT,theatreResult);
  dbStatement.addEventListener(SQLErrorEvent.ERROR,errorHandler);
  dbStatement.text = "SELECT theatreID, theatreName FROM movieTable where id=1";
  dbStatement.execute();
}

TheatreID and name is loaded from SQLite, start loading XML data from Finnkino's service

private function theatreResult(event:SQLEvent):void {
  var dbResult:SQLResult = SQLStatement(event.target).getResult();
  theatreID = dbResult.data[0].theatreID;
  theatreName = dbResult.data[0].theatreName;
  // load previous used theatre
  loadEvents(theatreID);
}
public function loadEvents(theatreID:uint):void {
  // one Teatre
  if (theatreID != -1) url = urlBase + theatreID;
  // all events from Finnkino
  else url = "http://www.finnkino.fi/xml/Events/";
  // call HTTPService
  finnkinoArea.send();
}

Movie Details
Movie details are shown when user clicks MovieTile from TileView. Finnkino's Service offers a lot of information about the movie. In this example I only display some sample data and movie trailer. Movie trailer can be played in fullscreen mode too (use this only in Landscape - there a some issues in portrait mode - in this example :-)

<s:Scroller width="100%" height="100%">
  <s:VGroup width="100%">
    <s:HGroup>
      <s:Image source="{data.Images.EventLargeImagePortrait}" />
      <s:VGroup>
        <s:Label text="{data.Title} ({data.OriginalTitle})" styleName="title"/>
        <s:Label text="{data.RatingLabel}" styleName="data" />
        <s:Label id="startTime" styleName="data" text="{data.dttmShowStart}" />
        <s:Label id="length" styleName="data" text="{data.LengthInMinutes} min" />
        <s:Label id="genre" styleName="data" text="{data.Genres}" />
        <s:Label id="showUrl" styleName="dataBlue" text="{data.ShowURL} - (osta liput)" click="showUrl_clickHandler(event)" />
        <s:Label id="eventUrl" styleName="dataBlue" text="{data.EventURL} - (lisätietoa elokuvasta)" click="eventUrl_clickHandler(event)" />
     </s:VGroup>
   </s:HGroup>
   <s:Label text="{movieData.Synopsis}" width="100%" styleName="synopsis" />
   <s:VideoPlayer id="myVideo" source="{movieData.Videos.EventVideo.Location}" autoPlay="false" visible="{isVideo}" width="{this.width-20}"/>
   <s:Button label="Takaisin" id="takaisin" click="takaisin_clickHandler(event)"/>
   </s:VGroup>
</s:Scroller>

Movie details in Landscape mode

Movie details in Portrait mode

Movie trailer in fullscreen

Source codes
- Movies.fxp, Movies.zip

Note
There are a few bugs in this example (too). Sometimes the date is missing from first views, and VideoPlayer is messing up if it is in fullscreen mode in Landscape and you turn the device to portrait.. but now it is working for my purposes :-) and finally I have only tested this in Samsung Galaxy Tab 10.1 not in mobile...

This example uses Finnkino's Services

Developing AIR application to run in different screen sizes

A few days ago I got Samsung Galaxy S 2 and Tab 10.1 in my hands and I want to test how to make an AIR application that runs in both of these (with different screen sizes). This demo application uses SQLite database to collect information about Interesting Places (place information and picture).

I decided to make mobile application with s:Application and first test is application running in mobile or tablet. After that different states are used in s:ViewNavigator to launch MainPhoneView or MainTabletView view depending on used device (mobile or tablet). (Michael Chaize has wrote excellent article about Adaptive UI: Mobile vs. Tablet).

<s:ViewNavigator
  id="mainNavigator"
  left="0" top="0"
  right="0" bottom="0"
  firstViewData="{places}"
  firstView="views.MainPhoneView" firstView.tablet="views.MainTabletView"
  resize="mainNavigator.scrollRect = new Rectangle(0, 0, mainNavigator.width, mainNavigator.height)">

MainPhoneView
MainPhoneView
draws PlaceList component (which is used in the left side of MainTabletView view also) which displays some already embeded Interesting Places from SQLite database (title and time) by default. PlaceView is opened when users clicks PlaceList item and place information data is show with PlaceComp component (which is used in the right side of MainTabletView view also). Sample SQLite database is embeded into Flex Project.

<comps:PlacesList id="placesList"
  places="{data}"
  width="100%" height="100%"
  click="placeslist1_clickHandler(event)"/>


MainTabletView

MainTabletView holds Placelist and PlaceComp components in a same view in tablet. So there are not View changes in tablet version of this application. All needed information can be show in one View.

<s:HGroup width="100%" height="100%">
  <comps:PlacesList id="placesList" places="{data}"
	width="33%" height="100%" click="placesList_clickHandler(event)">
  <comps:PlaceComp id="place" width="67%">
<s:HGroup>


Add Place

User can write some lines from interesting place and take one picture. All of these information are saved into SQLite database. Same component are used in mobile and tablet view.

Conclusion
Using your own made components in different views helps application development into different screen sizes. This is working quite a nicely in AIR development. Like in this small example same components are used in Tablet and Mobile views to build this example.

Files
- MobileInterestingPlaces.apk
- MobileInterestingPlaces.fxp

Note
There are a few bugs and limitations in this example.. I did this just for a testing purposes :-)

Adobe Developer Week 2011 – June 20-24

During developer week you can learn how to build expressive mobile, web, and desktop apps with the newly released Flash Builder 4.5 and Flex 4.5. Live eSeminars are free and those are presented by Adobe technology experts.

Sessions:

  • Introduction to Flex 4.5 and Flash Builder 4.5
  • What’s new in Flex 4.5
  • New Features in Flash Builder 4.5
  • Flex and PHP Integrated Development with Flash Builder 4.5 for PHP
  • Build Your First Mobile Application With Flex 4.5
  • Architecting Flex Applications For Re-Use Across Web, Desktop and Mobile
  • Multi-Density and Multi-Platform Authoring for Smart Phones and Tablets With Flex 4.5 SDK
  • Migrating from Flex 3 to Flex 4.5: Understanding Changes from Halo to Spark
  • Creating Expressive Applications with Flash Builder and Flash Catalyst
  • Building Mobile Applications for BlackBerry Playbook
  • Coding Productivity Features in Flash Builder 4.5
  • Next Generation Application Development for the Enterprise
  • Building Data Driven Flex and Java Applications
  • Flex and BlazeDS Integration with Spring
  • Maximizing Flex Application Performance (Mobile and Desktop)
  • Creating Performant Skins and Item Renderers for Mobile Applications
  • Anatomy of an Enterprise Mobile Application Built with Flex 4.5

You can register here: Adobe Developer Week 2011

Adobe Launches CS5.5

New version of Adobe CS5.5 is launched. A lot of is happening specially in mobile and device world - Flash Builder 4.5 developing mobile applications for Android, iOS, and Blackberry Tablet OS. It is time to start write some new tutorials, but meantime you can go with these links and see what's new there actually is:
- Adobe Introduces CS5.5 Product Line
- What's new in Flash Builder 4.5
- Adobe And Zend Launch Flash Builder 4.5 For PHP Development
- Adobe Flash Builder 4.5 and Flex 4.5 Accelerate Mobile App Development for Android, BlackBerry Tablet OS and iOS
- Adobe Technology Sneaks 2011 - Adobe TV
- What's new in CS5.5 Design Premium
- Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5

Publish AIR applications from Adobe Flash CS5 to RIM PlayBook

There is a quite a many steps to follow to get AIR applications from Flash CS5 published to BlackBerry App World for distribution. I will cover here all needed parts in one blog post. Hope you find these information useful and get your application published to BlackBerry App World.

1 Create your content with Adobe Flash CS5 and publish to Adobe AIR
- go and get Adobe Flash CS5 from Adobe and create your application
- stage size: 1024x600, Publish settings: Adobe AIR 2.5, AS 3.0
- Adobe AIR 2.5 Settings: Normal AIR settings to generate SWF and XML file

2 Download the BlackBerry® Tablet OS SDK for Adobe® AIR®
- go to http://us.blackberry.com/developers/tablet/adobe.jsp (a lot of useful information)
- install SDK (for example to Adobe Flash Builder Burrito folder if you have that one and want to use SDK with Burrito too)
- blackberry-tablet-sdk-0.9.4 will be stored to Burrito's sdks folder

3 Download VMware® (required to run the BlackBerry PlayBook Simulator)
- go to https://www.vmware.com/tryvmware/?p=player&lp=1 and get VMware Player
- register and install player

4 Download the BlackBerry PlayBook Simulator
- go again to http://us.blackberry.com/developers/tablet/adobe.jsp
- install simulator and open (if you want to test it now) it to VMware player (mem 1GB, enable 3D acceleration)
- it took several minutes to launch simulator (just wait for it)
- enable Development Mode in Simulator (remember your password and device IP)

5 Register for Code Signing Keys (you have to sign your application)
- go to https://www.blackberry.com/SignedKeys/ and fill the form
- for me it took a few hours to get CSJ file via email

6 Initialize communication with the RIM® Signing Authority by using the blackberry-signer tool
- type: blackberry-signer -csksetup -cskpass <create_a_password>
- you should see: CSK file created message

The password you specify in the -storepass parameter allows you to access the RIM Signing Authority using your identity. You should protect the password. Remember include full path to blackberry-signer command if it is not in your PATH.

7 Register with the RIM Signing Authority using your CSJ registration file by using the blackberry-signer tool
- type: blackberry-signer -register -csjpin <PIN> -cskpass <csk password from step 6> <CSJ_file>
- you should see: Successfully registered with server message

When installing your keys, ensure that you have correctly entered the registration PIN number that you entered into the order form. If you enter an incorrect PIN 5 times, your keys will be deactivated.

8 Create a Developer Certificate by using the blackberry-keytool tool (if you don't have one)
- type: blackberry-keytool -genkeypair -keystore <output_file.p12> -storepass <create_a_password> -dname "cn=<company_name>" -alias author
- you should see generated p12 file in your directory

The value for cn in the dname parameter must match exactly the name you entered in the Company field on the web form when you requested permission to sign applications.

9 Package your application from the command line
- type: blackberry-airpackager -package <output_filename.bar> project_name-app.xml project_name.swf any_other_project_files

Include your additional files like icons (look your app-xml file). You should see your bar file in your directory.

10 Ask the RIM® Signing Authority to sign your BAR file
- type: blackberry-signer -verbose -cskpass <your CSK password> -keystore <your P12 file> -storepass <your P12 file password> <BAR_file.bar> RDK
- you should see bar signed message

11 Sign the BAR file using your code signing certificate
- type: blackberry-signer -keystore <your P12 file> -storepass <your p12 file password> <BAR_file.bar> author
- you should see bar signed message

12 Test your application with PlayBook Simulator
- start simulator
- type: blackberry-deploy -installApp -device <ip address of simulator> -package <BAR_file.bar> -password <simulator password>
- test your application in PlayBook Simulator

13 Publish the BAR file to BlackBerry App World™ for distribution
- create a vendor account to BlackBerry App World
- submit your application for evaluation by RIM

You can find more detailed information here:
- BlackBerry - Tablet OS SDK for Adobe AIR
- Signing your application
- Configure application signing from the command line
- Adobe AIR

Hope these steps helps you to publish your Adobe Flash CS5 made AIR content to BlackBerry App World.

Passed Adobe Flex ACE 4 Exam

I passed Adobe Flex 4 ACE Exam last week. Not so excellent score this time (only 77% score) - I missed mostly new design and skin stuff with Spark, but for example Programming with Adobe AIR was 100% score :-) If you want to certify, make sure to take a look new spark architecture, service integration with LCDS and general OOP topics with ActionScript.

With this exam I got new "Adobe Certified Instructor in Flex 4 and LiveCycle Data Services 3: Data Driven Development" ACI status also.

Here is a few links to study materials:
- Adobe Certifications
- Adobe Flex 4
- Adobe LiveCycle Data Services 3.1
- Adobe AIR
- Adobe Flex 4 ACE Exam