You'll need the following software to use this project:

• Eclipse
• M2 Maven Eclipse Plugin

The project uses a Maven pom.xml file to define Hadoop Map Reduce dependencies, and an ANT build.xml file to perform automated jar building, and output directory cleanup. These replace the normal task of manually creating jar files, and deleting output directories between debug cycles.

The HadoopMapReduceTemplate class in this project includes a single line of code that causes that Map Reduce job to run in "local mode". This enables the use of the eclipse debugger for the map and reduce classes; in non-local mode the map and reduce code would be executed in a separate container, even on the local computer, so the debugger would not be connected. Before deploying any project based on this template, you should remove the following line.

The HadoopMapReduceTemplate class includes a simple job that uses the
TextInputFormat to map over lines in the input/test.txt file. The output of the reduce step
writes back the same file with the byte offset at the beginning of each line. The run method in this class includes all of the necessary configuration setup for the average job; though its overkill for this simple example.

Hadoop's GenericOptionsParser is used to parse out Hadoop specific command line arguments. This allows the job to be configured using the command line, which is a best practice for production Hadoop.

Both the ExampleMapper and ExampleReducer classes include the setup and cleanup methods, which are a best practice for instantiating Writable instances and making outside connections.

Project Download

Separation of Design

The biggest design consideration is that while some of the UI components can certainly be shared, some must be unique to tablets and others to phones. Therefore it is important to identify which components are device type specific, and which can be shared. Generally speaking, device type specific components will be those that are for navigation, and layout. Shared components will generally be the main content views.

There is always that possibility that no components can reasonably be shared; and that's ok. The decision to have two completely separate applications can greatly simplify the process of producing a combined application. The result will be a larger application size, and double the work to maintain common feature sets; which can be perfectly acceptable in some cases.

Separation of Control

Because tablet and phone UIs vary mostly around navigation and layout, a combined app must provide for separation of control for shared components. For example, a tablet interface often provides a left-side list with a right side content view. A phone interface for the same application would generally provide a full screen view of the list, and a separate full screen view of the content selected from the list. Clearly there must be separate logic for what occurs when the user selects from the list on a tablet versus a phone. The list and content view components can be shared, but the logic around the navigation must be separate.

Implementing a Combined Application

The first step of implementation is to determine on which device type the application is being executed. Flex Mobile does not provide a built-in method for detecting tablet vs. phone, so we must derive our own. My application use the simple test that if a screen is greater than 5" in either width or height, it must be a tablet. Here is the code for that:

Determining Tablet or Phone

		/** Measures the screen size, and then returns true/false based on whether

		 * the width or height of the screen is greater than 5 inches. */

		protected function screenIsGreaterThan5Inches():Boolean {

			// Find the physical size in inches, using the devices real DPI

			var width:Number = application.stage.stageWidth / application.runtimeDPI;

			var height:Number = application.stage.stageHeight / application.runtimeDPI;

			

			//this will resolve to the physical size in inches...

			//if greater than 5 inches, assume its a tablet

			return ( width >= 5 || height >= 5);

		}

Instantiating Control with an Application Manager Singleton

Using the singleton design pattern, I have created an "ApplicationManager" class that detects and starts the correct UI controller. The main Flex Application class simply instantiates the first reference to the ApplicationManager singleton when it first starts.

The ApplicationManager then uses the above logic to determine whether a executing device is a tablet or a phone. For a tablet, the ApplicaitonManager passes control to the TabletController, and for a phone the PhoneController. Both of these classes implement the IController interface.

Designing Control for Common and Dissimilar Events

You will probably immediately notice that I choose not too define many functions in the IController interface. I could have easily made the IController interface a central function list of all of the navigation methods possible; for example "personListItemClicked". While this would have made initial definition and implementation easier, it would have strictly implied that all navigation actions on a tablet have a corresponding action on a phone and vice-versa. I find that this is not the case. Therefore I choose to use custom event classes, dispatched off the top level application, as the main method of detecting navigation commands from the user. This has the benefit that the tablet and phone can share some similar events, and have dissimilar events as well.

You could easily use an MVC framework like Cairngorm or PureMVC to provide control logic across both the tablet and phone interfaces.

Example Code

Here is a link to a Flex Builder 4.6 Mobile application archive with the above code and debug configurations for iPad and iPhone.

Source Code

Flex Mobile, using Adobe Air's android and iOS packager, supports these custom url schemes. The configuration for this custom scheme is done in the AIR application description XML file. The following shows an example custom url, use of that URL in regular HTML that would be placed on a website, and the configuration

Example Custom URL Scheme
myapp://

Example HTML Link

<a href="myapp://">Open MyApp</a>

Example XML for Android

<android>

        <manifestAdditions><![CDATA[

			<manifest android:installLocation="auto">

			    <uses-permission android:name="android.permission.INTERNET"/>

			    <uses-permission android:name="android.permission.CAMERA"/>

			    <uses-permission android:name="android.permission.RECORD_AUDIO"/>

				<application> 

                    <activity> 

                        <intent-filter> 

                            <action android:name="android.intent.action.MAIN"/> 

                            <category android:name="android.intent.category.LAUNCHER"/> 

                        </intent-filter> 

                        <intent-filter> 

                            <action android:name="android.intent.action.VIEW"/> 

                            <category android:name="android.intent.category.BROWSABLE"/> 

                            <category android:name="android.intent.category.DEFAULT"/> 

                            <data android:scheme="myapp"/> 

                        </intent-filter> 

                    </activity> 

                </application> 

			</manifest>

		]]></manifestAdditions>

    </android>

Example XML for iOS

 <iPhone>

     <InfoAdditions><![CDATA[

	<key>UIDeviceFamily</key>

	<array>

		<string>1</string>

		<string>2</string>

	</array>

              <key>CFBundleURLTypes</key>

		<array>

			<dict>

				<key>CFBundleURLName</key>

				<string>com.dreamingwell.myapp</string>

				<key>CFBundleURLSchemes</key>

				<array>

					<string>myapp</string>

				</array>

			</dict>

		</array>

	]]></InfoAdditions>

   <requestedDisplayResolution>high</requestedDisplayResolution>

 </iPhone>

Flex SDK 4.5 for mobile shipped with an IconItemRenderer that is extremely efficient at showing static images in a list. However, most enterprise and data driven applications are going to need to show dynamically created, interactive, and data driven content in the list; something IconItemRenderer simply can't do. The video in this article shows my implementation of a DisplayObjectItemRenderer and supporting list. This component supports all of the features of the standard Spark list, in addition to efficiently displaying a DisplayObject.

Flex Builder 4.5 Source Code

Flex SDK 4.5 mobile view navigator framework does not make use of the multi-touch features of the Flex 4.5 SDK. As stock, the framework provides 'navigation' buttons and an api to switch between views. The video above previews and explains my PanView implementation. The source code link below contains a Flex Builder 4.5 Project.

Flex 4.5 Project - Source Code

The Flex framework's UIComponent implements a standard invalidate/update pattern that relieves much of the UI's drawing impact in well written components. UIComponent also has the callLater method. However, there's no equivalent for simple back-end data processing.

The "Thread.as" ActionScript class in the Flex Project linked below can be used by any Flex class to implement a "threaded" worker. Simply create a "worker" function that does a single unit of work; usually from a queue of pending work. Then create an instance of this Thread class, supplying the worker thread as the first argument. Remember to keep the worker thread very lightweight, doing as little as is absolutely possible.

The worker function will be called repeatedly, until it returns a "true", indicating that the work is complete. The logic of this class will take care of exactly when to call the worker function, so as not to impede the timely advancing of the Flash Player's frames. Thus the appearance of "background processing" while the user is still able to interact with the UI.

You can optionally provide a "work complete" function, that is called once at the completion of work.

This implementation also takes multiple parallel executing threads into consideration. Note that the allotted time for execution is divided equally among all executing threads. However, you can still choke out the available computing resources with too many threads, or a worker function with a long execution time.

Running Example
Source Code

Working Example

Source Code

ASDoc supports excludes only by class name. You can use the -doc-sources command line option to specify a single sub directory/package, but then ASDoc will follow dependencies and generate documentation for those. There is an -exclude-dependencies command line option, but you can’t use it in conjunction with -doc-sources. There is also a -doc-classes, but exclude dependencies seems to have no effect.

The solution then is to specifically exclude all classes, by individual name. This would be too tedious to perform by hand, and wouldn’t be sustainable for development in teams.

I found a great article named Compiling Relevant Class in ASDoc at AMP-London.com, that thoroughly explains how to exclude a single directory/package. However, I wanted a script that would exclude all directories/packages but my own from any project. So I reworked their ANT build script and came up with my own.

The following ANT buildscript, which is based heavily on the one the one mentioned above, runs ASDoc on all classes in a single package, and excludes all others.

<project name="AsDocTest" default="main" basedir=".">

    <!-- The location of your FlexSDK directory -->
        <property name="FlexSDK.dir" location="/Applications/Adobe Flex Builder 3/sdks/3.4.0"/>

        <!-- The location of the ASDoc executable -->
        <property name="bin.dir" location="${FlexSDK.dir}/bin"/>        

        <!-- The output directory for your documentation -->
        <property name="output.dir" location="${basedir}/asdoc-output"/>

        <!-- SWC file library path -->
        <property name="swcLibraryPaths" value="libs"/>

        <!-- The root to your class package directory -->
        <property name="classesRoot" value="${basedir}/src"/>

        <!-- the directory/package that you'd like to document, all others will be excluded -->
        <property name="includedDirectory" value="/com/edge/" />

        <!-- the ant description of this script -->
        <target name="main" depends="clean,manifest,asdocme" description="full build of asdocs"/>

        <!-- erase all previous asdoc output -->
        <target name="clean">
                <delete dir="${output.dir}" failOnError="false" includeEmptyDirs="true"/>
                <mkdir dir="${output.dir}"/>
        </target>

        <target name="manifest">

                <!-- Get the list of all files, exclude those that we wish to document (not a typo) -->
                <fileset id="sources" dir="${basedir}/src">
                        <exclude name="**${includedDirectory}**"/>
                </fileset>

               <!-- convert the names of excldued classes to packages with class names -->
                <pathconvert property="classes" pathsep=" " refid="sources">
                        <chainedmapper>
                                <globmapper from="${basedir}/src/*" to="*"/>
                                <mapper type="package" from="*.as" to="*"/>
                        </chainedmapper>
                </pathconvert>

                <!-- echo the exlcusions for debugging purposes -->
                <echo message="manifest = ${classes}"/>

        </target>

        <!-- Run asdoc -->
        <target name="asdocme">

                <exec executable="${bin.dir}/asdoc" failonerror="true">

                        <!-- define the src path of the package directory -->
                        <arg line="-source-path '${basedir}/src'"/>

                        <!-- tell asdoc to include all sources under the root -->
                        <arg line="-doc-sources '${classesRoot}'"/>     

                        <!-- define the output directory --->
                        <arg line="-output '${output.dir}'"/>

                        <!-- define the location of any swcs we're using -->   
                        <arg line="-external-library-path=${swcLibraryPaths}"/>

                        <!-- define the excluded classes (all of them outside our included directory) -->
                        <arg line="--exclude-classes ${classes} --"/>

                </exec>
        </target>
</project>

-source-path=./src -doc-sources=./src -window-title="${project_name}" -main-title="${project_name}" -external-library-path=./libs

To generate ASDocs for any project in Flex Builder, click on the project in the "Flex Navigator" list, and then click the "External Tools" button (or Run->External Tools->Generate ASDoc).

The "Console" window will show the warning and error output from asdoc. The generated docs will be placed in a new folder named "asdoc-output" at the root of your project.

If you receive an error about "variable references ... ${project_loc}", you didn't click on your Flex project before clicking "Generate ASDocs".

Source: Hosting Fu

ChargeWell is a shopping cart that can be placed on your current website, in under 20 minutes! There's no software to install on your server, and you don't need a developer. ChargeWell is added to your site with just five lines of javascript; that we'll give you. The cart appears in a "lightbox" over your website. Be sure to checkout our demos!

ChargeWell is starting out with support for both Google Checkout and PayPal. If you offer Google Checkout, you'll also automatic Google Analytics integration. In the future we plan to add support for direct credit card processing and other 3rd party processors.

The beta already has tons of features like tax calculations, custom shipping options, inventory tracking, ordering options and a complete invoicing system. We're soliciting your feedback for new features, so please drop us a line or catch us on Twitter!

All of ChargeWell's future announcements will be made on ChargeWell's Blog.

The following image shows resource downloads as individual javascript files. As you can see, the requests for individual .js files are delayed, even though that may not be necessary.

View image

By combining the sources of JavaScript files, the we can reduce the total time to load the JavaScript code, and thereby dramatically decrease the total rendering time. The following image shows the same time graph after combining the JavaScript files.

View image

While speed is our goal in production environments, the ability to debug efficiently is a goal in development environments. Combining JavaScript files into a single long file makes debugging extremely difficult. Therefore we must make some logical choices and implement a system that allows for both.

The following PHP code takes an array of relative path's to desired JavaScript files, and creates a simple Memcached buffer of the combined result, only in the production environment. An MD5 hash of the concatenated filenames is used as the unique key.

Now create a "/js/collected" directory on your server and create the following .htaccess file. This redirects all HTTP requests for anything below /js/collected to an index.php file that we will create.

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} !index\.php$
RewriteRule .* ./index.php [L,QSA]
</IfModule>

Place the following code in an index.php file in the /js/collected directory. This file will be called, because of the .htaccess file. This file determines the Memcached key to use to find the requested javascript files and returns the combined output.

All client to server communication requires the server to perform a series of operations and return a result. For many communications, the server is performing the exact same series of operations, and returning the exact same result for every user. By caching (storing) the calculated results, and serving that cache back to the client, we can remove all of the repetitive processing out of the communications cycle.

So, applying this concept to a real world example, take a look at RIAStats.com. The data displayed on the front page spans 30 days, and includes millions of records. Calculating this data takes quite a bit of time. Fortunately, there's no need to recalculate the percentages for every single visitor. Instead, we can calculate the percentages once, and cache the result. We then serve visitors the cached result.

Handling Results per Argument:
Most server methods take arguments that change the response. We can use a key-value pair concept to handle this. Simply concatenate the arguments into a unique string, to form your "key". Then cache the appropriate response, associating it with this unique key.

So again, take a look at RIAStats.com, and see the drop down options at the top. Changing these clearly changes the arguments sent the server, and the results from the server. You'll probably notice when you hit an un-cached result, because the response takes a while. However, if you reload your browser, and ask for the same results a second time, the response will be much quicker.

Timing-out Results:
We probably don't want to keep cached results forever, because our data is likely to change. We'll simply set a cache timeout that will clear our results. With proper considerations, we can make our data both timely and efficient.

Installing MemCached

MemCached is an open source (and therefore cross-platform) executable that must be installed on your servers. Your first step will be to install and verify that the MemCached service is running on at least one of your test servers. Memcached has a website and a separate Google Code project. (Search google for install MemCached for your operating system. For linux, here's a link to a google cache of install instructions).

After installing the MemCached server, you'll need into add php-memcached to your server. This provides php some built-in memcached communications functions.

Example PHP

The following PHP code comes directly from RIAStats and implements all of the above concepts with Memcached. We'll return an AMF encoded response, using this AMF encoder class (zip file of a php class file).

I use the following user job in MythTV to transcode recorded videos to a format that is compatible for the PS3 over UPNP. My PCHDTV-5500 card captures audio in MPEG-PS and the PS3 will only play MPEG-TS formats (thus the requirement to transcode the video file).

This is script performs the following steps:

1. converts the already created commercial list into a "cut list"
• Requires that commercial flagging run before this user job
2. transcodes the captured video to a tmp file.


• this step also cuts commercials




3. overwrites the original capture file with the new file


4. rebuilds the commercial flags so that a normal myth frontend doesn't skip the commercials that have been cut in the transcoding

Enter the script above as a "User Job" and enable that user job on any recordings (under advanced options in MythWeb) you'd like to be able to view on your PS3.

Today, RIAStats.com supports Flash Player and Silverlight detection. I'm looking into adding JavaFX. Any other suggestions are welcome!

You can sort results by browser, operating system and language. Statistics are available as a pie chart of the last 30 days activity and a line chart that shows daily percentages. When Adobe or Microsoft releases a new version of their plugin, we'll be able to track its penetration.

If you like the service, try adding RIAStats to your site. Hopefully this will become a useful resource for better understanding the deployment of RIA plugins for your target audience.

WARNING: If you have silver light installed on your Mac and you use Firefox 3, be sure to get the latest updates! There was a bug in the first release that caused firefox to crash.