ThoughtFaqtory @ AppsWorld Africa 2011 in Cape Town

Posted by Joanna in Adobe, AIR, Android, Apple, Conferences, Enterprise, Flash, iPad, iPhone, Java, Mobile, RIA, Tablets on May 30th, 2011 | 0 comments

“AppsWorld” – powerful word wouldn’t you say… makes me think of how our world is changing and revolving more around Apps in the IT Industry… hence the reason we didn’t want to miss out on the opportunity to a be a part of an exciting conference happening this week. ThoughtFaqtory is thrilled to have the chance to exhibit our thoughts and experiences at the AppsWorld Africa 2011 in Cape Town at the CTICC on Wednesday, 1^st June and Thursday, 2^nd June 2011.

This conference will offer you and us the opportunity to engage with leading developers and a whole host of different specialists involved in the Mobile Apps Development industry, who will be able to swop useful information and find out more about what is actually happening in that world some of us know a pinch of salt about….!!!

Our founder, Simon of ThoughtFaqtory will be on the Enterprise App Developer Panel & the MD, Phillip will be chairing the Developers Workshop Stream.

We will have some exciting new mobile apps to showcase.

For more information about the conference go to AppsWorld Africa 2011.

 

Adobe Flash Builder 4.5 and Flex 4.5 now available

Posted by Simon in Adobe, AIR, Android, Flash, Flash Builder, Flash Catalyst, Flash Mobile, Flex, Mobile, RIA on May 3rd, 2011 | 0 comments

A year after Flash Builder 4 and Flex 4 SDK were released, new versions are available with Flash Builder 4.5 and Flex 4.5 SDK! The main focus for Flex 4.5 SDK and Flash Builder 4.5 is the ability to build mobile applications that target the Google Android, Blackberry Tablet OS, and Apple iOS operating systems. Additionally, Flex 4.5 SDK introduces new Spark components and improvements for large application development while Flash Builder 4.5 introduces dozens of new coding productivity features for faster ActionScript and MXML development.

Adobe have really focused on mobile development for this release, offering developers one tool, one development framework and one codebase to build mobile applications on Android, BlackBerry Tablet OS and iOS. Flash Builder 4.5 also helps developers make these applications ready to deploy for an app store/market. You can immediately develop applications for Android, and support for BlackBerry Tablet OS and iOS will be available through free Flex and Flash Builder updates in June.

Here are a few resources to get things started:

Build your First Mobile Application in Flash Builder 4.5

Build your First Flex 4.5 Application

Flex Developer Center

Mobile development using Adobe Flex 4.5 SDK and Flash Builder 4.5

Examples and case studies

Juxio Project featured on TechCrunch

Posted by Simon in Adobe, AIR, Apple, Development, Flash Builder, Flex, iPad, iPhone, Mobile, RIA, Services on Dec 7th, 2010 | 0 comments

In August 2010, Juxio was released in beta and so far has had quite a good reception from the public. The word Juxio [juhk-see-oh] comes from the word juxtaposition, the placement of two or more elements together to create new meaning. The company is based in Burlington, MA, USA.

The best way to describe the services is as follows:

“Juxio is a new visual way to communicate. Individuals and businesses use Juxio to combine images, text and more into mashable, visual streams called Juxes to share across social media and in print. Juxes are created on both our Web and iPhone apps. In the future we will support additional mobile devices. By making Juxio available anywhere at any time, we hope you find more ways to create new meaning.”

ThoughtFaqtory have been involved in the development of Juxio since the beginning of 2009. We were brought on-board to develop the web application, using Adobe Flex, Flash and ColdFusion. The biggest challenge in developing the web application was the client wanted the Juxios to be a maximum of 72″ x 36″ in size. One of the challenges we faced in the design phase was how we were going to handle the memory issues. We designed the application with these potential issues in mind.

The first idea we had was to use a tile layout and only render the tiles which were on the screen. This would reduce the memory load because only a portion of the Juxio would be stored in memory. But when zooming out so that the entire Juxio is shown we would have to store the entire Juxio in memory anyway. We could not afford to have the entire Juxio in memory because it could cause the application to crash due to insufficient resources. The team had to find a way to use less memory per inch of the Juxio. The biggest consumer of this was the images, so we looked at optimizing the system used to load and store images.

We worked on a system that would download an image stored in the cloud, scale and crop it to best fit the component it belongs to. A snapshot was taken of the transformed image and the original one is discarded. The smaller image is then rendered and kept in memory. Depending on the size of the original image we saved a significant amount of resources. The disadvantage of this approach is that when scaling an image we lose image quality. But because we are scaling down and not up, the loss is not as great. We also found that by taking the snapshot with Adobe Flash’s highest quality rendering mode we limited this loss.

One of the requirements was to render a 76” x 36” at 300 pixel per inch (PPI) PDF for print. Standard web graphics are 72 PPI to put this into perspective. An image of this size and quality would be 744 MB. While we could compress the image for the PDF, we would still need to create all of the pixels in order to compress them. It would be unfeasible to allow the Juxio to be edited at this quality. The team had to find a way to edit the Juxio at a low resolution and output it into a high resolution.

We decided to edit the Juxio with the standard 72 PPI and then scale it to 300 PPI when outputting to PDF. In order to create a 300 PPI image we needed to scale the Juxio up 4 times. Adobe Flash Drawing API is done using vector graphics and wouldn’t lose quality when scaling them up to the desired size. We used embedded font’s so that Adobe Flash would scale the text without losing quality too. But the images obviously pose a problem when scaled up 4 times the size. So we had scale the original image up by 4 to fit into it’s image component (explained earlier). Now the image stored in memory would be the correct size for the required 300 PPI to output to PDF. Essentially we were storing a 300 PPI image in memory. When the Juxio is edited, the image is scaled down and rendered at 72 PPI. Once the Juxio is being outputted, the image maintains its 300 PPI.

The screen shot below shows a set of images that have been cropped to match the exact size of the rectangle, so memory usage is minimal.

The team were very happy with the results and the effort that went into prototyping the different scenarios, it definitely paid off. That was the first of many obstacles that we encountered in the design and implementation phases of the project. We are continually adding new features as users become more advanced which allows the creation of even greater content. In the next article we will dive deeper into the functionality of the web application that make it such a powerful and unique product.

Earlier this year Juxio asked us to develop an iPhone application that allowed users to create Juxes (*smaller versions of Juxios) based on selection of templates using there iOS devices. Designing a mobile application requires a different approach compared to a web application on the desktop. Firstly, the screen size is a lot smaller, you are required to think on a screen by screen basis when designing mobile applications. When we started to design the iPhone app with the client, we need to take into account the hardware, form factor, screen size, orientation, input methods and other capabilities such as GPS and camera etc.

The one major challenge when designing for a mobile device is to take into account the network connectivity. Users take their phones everywhere with them which means variable Internet connectivity or sometimes non at all. So ideally the application should work in offline mode and check whether a network connection is available before sending or receiving data from the device.

So that is exactly what our team did, we designed and developed the application to work with or without a network connection. The app is smart enough to know when a connection is available and sync the data appropriately. Implementing a robust syncing framework is quite challenging but when it’s working can be a very rewarding experience. This functionality was essential in keeping the users different devices and web application in sync. We kept the process very simple for the user, there was no conflict management, that was all handled within the framework.

The next biggest challenge was implementing a layout engine for the different templates that the user can choose from. This was developed using Core Graphics API and is a little more complicated compared to using Adobe Flex and the Adobe Flash Drawing API. Each template is rendered based on a data structure defined in XML, and both the web and iPhone apps understand this structure.

To enable cross device content creation, sharing and display, we persist XML which is used by the layout engine to render the Juxio. The XML used to create the Template is modified by the users when they add content to the Juxio. This XML which describes the user’s Juxio is persisted to the cloud and allows the iPhone or web application to load and render the persisted Juxio.

Link to the TechCrunch article on Juxio when it launched in August 2010 as a private beta.

* A Juxio is created using the web application

* A Jux is created using the iPhone application

Adobe Flex Mobile Overview – Part 1

Posted by Simon in Adobe, AIR, Android, Flash Builder, Flash Catalyst, Flash Mobile, Flex, Mobile, RIA on Nov 10th, 2010 | 0 comments

We recently had the pleasure of attending the Adobe MAX 2010 conference in Los Angeles at the LA Convention Center. Adobe showed off some exciting new technologies that are either available to use today or in the coming future. What interested me the most was the latest Adobe AIR 2.5 platform for Windows, Macintosh, Linux, Android, iOS and Blackberry Tablet OS. This allows us to develop applications using the next version of the Flex framework to build mobile and desktop applications using a common code base.

So once we got back to the office after 25 hours of flying, I handed our developers an Adobe MAX 2010 Adobe Flash Platform DVD with all the preview software. We dived straight into mobile development with the latest Flash Builder “Burrito” and Flex SDK “Hero” framework.

The result of our efforts was an iTunes Trailers application on the AIR for Android platform.

One thing that we noticed was, if you are already familiar with Flex, then you do not have to learn anything new. There are a few new components implemented to support mobile devices such as MobileApplication, TabbedMobileApplication and ActionBar. Also, you can have something up and running pretty quickly compared to other mobile platforms.

When you first create your project instead of extending Application, it extends MobileApplication. This class does a lot of work for you, including orientation support, persistence manager to save and restore state, listeners for the hardware buttons and the ViewNavigator (see description below).

“The ViewNavigator component is a container that consists of a collection of View objects, where only the top most view is visible and active. Views can be added and removed by using the popView() and pushView() methods on the navigator. When a new view becomes active, the old view’s instance is destroyed. When a view is pushed on top of navigator’s stack, the old view’s data property is automatically persisted and restored when it is reactived through one of the pop methods. ViewNavigator doesn’t provide index information about the Views that it is currently managing and strictly follows a stack navigation model. Jumping between a set of views similar to a ViewStack is not supported by this component. ViewNavigator displays an optional action bar that displays contextual information defined by the active view. When the active view changes, the action bar is automatically updated.”

You cannot define any visual components in the MobileApplication class, you will notice that it contains a property called firstView, which is the initial view your application will start with. Each view on the navigation stack must extend View. It extends Group and adds additional properties to communicate with it’s parent navigators’ various UI controls.

MobileApplication provides a way to persist your application’s view state and data when the application quits, so that the next time it starts, it can restore itself with the same current view and view history. This makes interruptions in your application’s life-cycle completely transparent to the user. This is very important on mobile devices, where the operating system can interrupt or kill an application at any time.

The ActionBar class defines a component that includes title, navigation and action content groups. In the context of a ViewNavigator and MobileApplication , the ActionBar is used as application chrome which is has content contributed by the active View. The screen shot above contains a back button in the navigation content group with the default title. The iTunes Trailers app we developed is using the default chrome and colors. Developers can however implement there own skins using ActionScript, FXG or bitmaps (recommended approach by Adobe for optimisation) rather than MXML and runtime MXML graphics. A good place to start would be to look at the ButtonSkin class under the package spark.skins.mobile. This will give you a good idea of how to go about developing your own mobile skins.

The List and Scroller components have added functionality to enable touch-and-throw scrolling. To enable touch scrolling, set the new property called interactionMode style to touch. If you are using the mobile theme, then this style is automatically set on all appropriate components for you, so no need to do anything explicitly. You may however, develop a desktop application using AIR for touch screens, which would require you to set the property. The default item renderer for the List component on mobile devices is MobileItemRenderer. This is a simple item renderer with a single text component.

There is a more advanced item renderer optimised for mobile devices called MobileIconItemRenderer, it contains four optional parts:

1. an icon on the left
2. single-line label on top next to the icon
3. multi-line message below label and next to the icon
4. a decorator on the right

The screen shot below is using all of these parts of the item renderer.

If you would like to create your own advanced item renderer then Adobe recommends that you create a new ActionScript item renderer that extends MobileIconItemRenderer. Most of the time you probably won’t need to create your own item renderers but on rare occasions you may need to extend the functionality.

In part 2 we will go into more detail on how we built the application and integrated the services using Flash Builder “Burrito”,  the design view to layout the views and how to package up the application for distribution on the Android Marketplace. Additionally, we will provide the source code for the application too.

For more information on Flex SDK “Hero” framework, check out these links:

• What’s new in Flash Builder “Burrito”
• Mobile development using Flex SDK “Hero” and Flash Builder “Burrito”
• Coding productivity enhancements in Flash Builder “Burrito”
• Introducing Adobe Flex SDK “Hero”
• Adobe Flex “Hero” sample applications and tutorials

PruHealth and ThoughtFaqtory deliver healthier interactive lifestyle online

Posted by Simon in Adobe, Development, Enterprise, Flash, Flex, Java, RIA on Jul 27th, 2010 | 0 comments

Award-winning health insurance provider uses the Adobe Flash Platform to create a unique interactive online service empowering customers to lead healthier, happier lives.

A new take on healthcare
For many people, the concept of wellness is relegated to an occasional visit to the doctor at the first sign of illness or for an annual check-up. But with climbing insurance premiums — particularly for employees who make contributions to employer-sponsored plans — and frequent coverage from news outlets about the dangers of an unhealthy lifestyle, more citizens are rethinking their approach to healthy living.

“We’ve always viewed ourselves as a leader and innovator in the insurance industry,” says Paulo dos Santos, CIO at PruHealth. “Encouraging and rewarding our customers with discounted premiums and other services for living a healthier lifestyle would certainly distinguish us from our competitors. We needed to create a unique program to deliver that message. Adobe software and technologies proved to be the most logical choice to achieve that goal.”

Working with our business applications development team at ThoughtFaqtory, PruHealth adopted the Adobe Flash Platform, including Adobe Flex Builder, to create an interactive online, incentive-based curriculum that encourages physical activity, healthy eating, and smoking cessation among the many ways for customers to earn redeemable points and valuable rewards. The challenge for us was to build a rich experience, that was easy to use, enjoyable to work through and be able to retain the users interest throughout the completion of the health and fitness goals process.

With the Adobe Flash Platform, PruHealth provides customers with richly detailed and dynamically animated graphs and charts, giving them a comprehensive understanding of how their habits affect their health and wellness.

Leveraging the Adobe Flash Platform and Adobe Flex Builder 3, PruHealth delivered its innovative online Vitality Interactive application, a secure online portal to accompany the long-standing Vitality Program. The dynamic portal features a range of interactive wellness tools that enable customers to create their own health and fitness goals and timelines.

“With the Adobe Flash Platform, we created a richly animated site that brings a unique visual perspective to show customers how their daily habits contribute to their overall health and wellness,” says Greg Peringuey, development manager for PruHealth Online.

The application provides customers with a questionnaire about their current lifestyle choices—exercise habits, calorie intake, and lifestyle choices, among many others. They can watch as rich-media charts and graphs update instantly with their answers to paint a comprehensive picture of lifestyle changes they can make to live healthier, and save money.

The full Adobe Success Story is available here.