The Space For App Developers

Beyond Plain Old HTML Objects

Archive for the ‘iOS’ tag

Drag and drop support in WebKit/HTML5/PhoneGap on iOS/Android mobile devices

without comments

I just thought I will share some of my findings around drag and drop support in WebKit, HTML5 and PhoneGap apps running on iOS and Android devices.

To make the story short drag and drop is NOT support out of the box in the current versions of WebKit that run on iOS or Android devices although you can simulate it using mousedown, mousemove and mouseup events.

When I clean the code a bit you can expect and update to this post ;)

Written by Piotr Walczyszyn

February 15th, 2012 at 6:02 pm

Posted in Examples,Recording

Tagged with , , , , ,

iOS style buttons in Flex 4.5 mobile applications

with 5 comments

Ever wondered how you can make Flex 4.5 ActionBar buttons look like native buttons on iOS? This is actually very simple to achieve, what you need are just a few lines of CSS code. Checkout the snippet below:

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
 
@media(os-platform:"IOS")
{
	s|ActionBar
	{
		defaultButtonAppearance:beveled;
	}
 
	.backButton
	{
		skinClass:ClassReference("spark.skins.mobile.BeveledBackButtonSkin");
	}
}

As you can see in the code above I also used CSS media queries to have the proper style and skin class applied only when running on iOS devices. Below you can see the end result:

The code that implements the view above is as simple as this:

 
<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="iOS buttons">
 
	<s:navigationContent>
		<s:Button label="Back" styleName="backButton"/>
	</s:navigationContent>
 
	<s:actionContent>
		<s:Button label="Button"/>
	</s:actionContent>
 
</s:View>

Written by Piotr Walczyszyn

May 27th, 2011 at 3:29 pm

Posted in Examples

Tagged with , , ,

Packaging AIR application for iOS devices with ADT command and ANT script

with 26 comments

As you may know AIR 2.6 SDK was released yesterday. It brings a lot of improvements especially for iOS devices (you can find the release information here). Now if you already have a certificate and provisioning profile from Apple and want to try out your existing code to deploy on an iOS device you can use the following ADT command:

[AIR_SDK_HOME]/bin/adt -package -target ipa-test -provisioning-profile [MOBILE_PROVISION_FILE_PATH] -storetype pkcs12 -keystore [CERTIFICATE_FILE_PATH] ./MyApplication.ipa ./bin-debug/MyApplication-app.xml -C ./bin-debug MyApplication.swf -C ./bin-debug assets

Of course, replace the capitalized blocks with your appropriate paths, and then execute it from the root folder of your AIR application project. It will package the app SWF file and any accompanying assets from the bin-debug folder. Bear in mind that this is not a final build ready to be published to the App Store. In order to do that you want to package a release build from the bin-release folder and also use ipa-app-store target parameter instead of ipa-test. UPDATE: Flash Builder may overwrite an application ID in -app.xml with a “.debug” suffix; you should remove it prior to packaging. The ID should match the one registered with your mobile provisioning.

You can achieve the same thing with the following ANT script:

<?xml version="1.0" ?>
<project>
    <!-- SDK properties -->
    <property name="SDK_HOME" value="PATH TO AIR SDK"/>
    <property name="ADT.JAR" value="${SDK_HOME}/lib/adt.jar"/>
 
    <!-- Project properties -->
    <property name="APP_NAME" value="MyApplication"/>
    <property name="APP_ROOT_DIR" value="."/>
    <property name="BUILD_DIR" location="${APP_ROOT_DIR}/bin-debug"/>
    <property name="APP_ROOT_FILE" value="${APP_NAME}.swf"/>
    <property name="APP_DESCRIPTOR" value="${APP_NAME}-app.xml"/>
    <property name="IPA_NAME" value="${APP_NAME}.ipa"/>
    <property name="STORETYPE" value="pkcs12"/>
    <property name="KEYSTORE" value="PATH TO YOUR CERTIFICATE"/>
    <property name="STOREPASS" value="CERTIFICATE PASSWORD"/>
    <property name="PROVISIONING_PROFILE" value="PATH TO PROVISIONING PROFILE FILE"/>
 
    <target name="package">
        <java jar="${ADT.JAR}" fork="true" failonerror="true">
            <arg value="-package"/>
            <arg value="-target"/>
            <arg value="ipa-test"/>
            <arg value="-provisioning-profile"/>
            <arg value="${PROVISIONING_PROFILE}"/>
            <arg value="-storetype"/>
            <arg value="${STORETYPE}"/>
            <arg value="-keystore"/>
            <arg value="${KEYSTORE}"/>
            <arg value="-storepass"/>
            <arg value="${STOREPASS}"/>
            <arg value="${APP_ROOT_DIR}/${IPA_NAME}"/>
            <arg value="${BUILD_DIR}/${APP_DESCRIPTOR}"/>
            <arg value="-C"/>
            <arg value="${BUILD_DIR}"/>
            <arg value="${APP_ROOT_FILE}"/>
            <arg value="-C"/>
            <arg value="${BUILD_DIR}"/>
            <arg value="assets"/>
        </java>
    </target>
 
</project>

Written by Piotr Walczyszyn

March 22nd, 2011 at 2:52 pm

Posted in Examples

Tagged with , , ,