Embedding Crosswalk in Android Studio

Crosswalk is a web runtime that replaces the built in WebView used by Android. Crosswalk is based on Google Chromium. Why use Crosswalk and not the built in WebView? The built in WebView varies greatly with each Android OS version. I’ve run into many problems because of the differences between the two. When you use Crosswalk you can work with a consistent WebView across all Android OS versions. Besides that, it has better HTML5 support. Read this article for more reasons “Why use Crosswalk for Android Builds?

The instructions for embedding Crosswalk in your application are based on ADT and they are complicated. Adding Crosswalk to Android Studio is much easier if you use the maven2 releases.

Here are steps for creating a new Android application in Android Studio and embedding Crosswalk.

Create a new Android Project

From the menu choose “File > New Project”

Give your application a name “CrosswalkDemo”

Give it a domain and project location and press “Next”.

Select “Phone and Tablet”, Minimum SDK “API 19″ and press “Next”.

Select “Blank Activity” and press “Next”.

Use the defaults for the Activity name and press “Finish”.

Configure Crosswalk

Identify which Crosswalk release you want to install. You can find the releases here:
https://download.01.org/crosswalk/releases/crosswalk/android/maven2/

For this demo I choose version 10.39.235.15, which is found here:
https://download.01.org/crosswalk/releases/crosswalk/android/maven2/org/xwalk/xwalk_core_library/10.39.235.15/

Open the file:
CrosswalkDemo/app/build.gradle

First we need to add the Maven repository like this:

repositories {
    maven {
        url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
    }
}

Then add this to your dependencies:

compile 'org.xwalk:xwalk_core_library:10.39.235.15'

The finished file should look like:

apply plugin: 'com.android.application'

android {
    compileSdkVersion 21
    buildToolsVersion "20.0.0"

    defaultConfig {
        applicationId "org.diego.android.crosswalkdemo"
        minSdkVersion 19
        targetSdkVersion 21
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

repositories {
    maven {
        url 'https://download.01.org/crosswalk/releases/crosswalk/android/maven2'
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:21.0.0'
    compile 'org.xwalk:xwalk_core_library:10.39.235.15'
}

Update the Code

Add an XWalkView to your layout like:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000000">

    <org.xwalk.core.XWalkView
        android:id="@+id/xwalkWebView"
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#000000"
        />

</LinearLayout>

In your activity, find the XWalkView and then load a url like:

xWalkWebView=(XWalkView)findViewById(R.id.xwalkWebView);
xWalkWebView.load("https://crosswalk-project.org", null);

That’s pretty much it.

The entire activity looks like:

package org.diego.android.crosswalkdemo;

import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;

import org.xwalk.core.XWalkPreferences;
import org.xwalk.core.XWalkView;


public class MainActivity extends ActionBarActivity {
    private XWalkView xWalkWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        xWalkWebView=(XWalkView)findViewById(R.id.xwalkWebView);
        xWalkWebView.load("https://crosswalk-project.org", null);

        // turn on debugging
        XWalkPreferences.setValue(XWalkPreferences.REMOTE_DEBUGGING, true);
    }

    @Override
    protected void onPause() {
        super.onPause();
        if (xWalkWebView != null) {
            xWalkWebView.pauseTimers();
            xWalkWebView.onHide();
        }
    }

    @Override
    protected void onResume() {
        super.onResume();
        if (xWalkWebView != null) {
            xWalkWebView.resumeTimers();
            xWalkWebView.onShow();
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (xWalkWebView != null) {
            xWalkWebView.onDestroy();
        }
    }

}

You can download a sample project here:
https://github.com/dougdiego/CrosswalkDemo

More details about the AAR Crosswalk release can be found here:
https://crosswalk-project.org/documentation/embedding_crosswalk/crosswalk_aar.html

iOS File Size Formatter

iOS has a handy formatter for file sizes. Here is an example of formatting at long into a readable string:

// Get file size
unsigned long long size = [[NSFileManager defaultManager] 
  attributesOfItemAtPath:path error:nil].fileSize;
NSLog(@"size: %@", @(size));

// Format file size to a readable string
NSString * fileSize = [NSByteCountFormatter stringFromByteCount:size
   countStyle:NSByteCountFormatterCountStyleFile];
NSLog(@"fileSize: %@", fileSize);

Output:

size: 65346
fileSize: 65 KB

Filed under iOS

UIDocumentInteractionController vs UIActivityViewController

When I first released WebPDF, I used an UIActivityViewController to share the PDF. This only gave me a few apps to share to. I expected to see other apps that supported PDFs. Here is the code I used:

NSString* fileName = [NSString stringWithFormat:@"%@.pdf", 
  [self.detailItem valueForKey:@"pdfFilename"]];
NSString* filePath = [WebPDFUtils pathWithFilename:fileName];
NSArray *activityItems = @[[NSURL fileURLWithPath:filePath]];
    
UIActivityViewController *activityViewController = 
  [[UIActivityViewController alloc] initWithActivityItems:activityItems 
                                    applicationActivities:nil];
activityViewController.popoverPresentationController.barButtonItem = _shareButton;
    
[activityViewController setCompletionHandler:^(NSString *activityType, BOOL completed) {
  [self dismissViewControllerAnimated:YES completion:nil];
}];
    
[self presentViewController:activityViewController
                   animated:YES
                 completion:nil];

Here is what the share sheet looked like:
UIActivityViewController

After searching around I found the UIDocumentInteractionController. I updated my code:

NSString* fileName = [NSString stringWithFormat:@"%@.pdf", 
  [self.detailItem valueForKey:@"pdfFilename"]];
NSString* filePath = [WebPDFUtils pathWithFilename:fileName];
self.documentInteractionController = [UIDocumentInteractionController 
  interactionControllerWithURL:[NSURL fileURLWithPath:filePath]];
self.documentInteractionController.delegate = self;
self.documentInteractionController.UTI = @"com.adobe.pdf";
[self.documentInteractionController presentOptionsMenuFromBarButtonItem:sender 
                                                               animated:YES];

Here is what the share sheet looked like:
UIDocumentInteractionController

When should you use a UIActivityViewController vs a UIDocumentInteractionController. You should really read the Developer docs:

UIActivityViewController

The UIActivityViewController class is a standard view controller that you can use to offer various services from your application. The system provides several standard services, such as copying items to the pasteboard, posting content to social media sites, sending items via email or SMS, and more. Apps can also define custom services.

UIDocumentInteractionController

A document interaction controller, along with a delegate object, provides in-app support for managing user interactions with files in the local system. For example, an email program might use this class to allow the user to preview attachments and open them in other apps. Use this class to present an appropriate user interface for previewing, opening, copying, or printing a specified file.

In general if you’re sharing an image or url, you might want to use a UIActivityViewController. If you’re sharing a document, you might want to use a UIDocumentInteractionController.

WebPDF 1.0.0

me_icon
I needed an application that could create a PDF out of a webpage. I found a few apps on the AppStore, but none of them met my needs. I figured it would be a fun project and created WebPDF.

It’s a simple application that creates PDF’s out of webpages. The app saves the PDF, lets you view it and export it. It’s optimized for all iPhones (including the iPhone 6 and iPhone 6+) and the iPad.

I also made the source available on GitHUB: https://github.com/dougdiego/WebPDF

Serfas Thunderbolt USB Taillight Warranty

serfasThunderbolt I previous wrote about how much I liked the  Serfas Thunderbolt USB Taillight. Well now I have even more reason to like it.  A couple of weeks ago, a plastic piece inside the USB connector broke off.  This is the same plastic piece you see on all female mini USB connectors.  I think this is bad design on USB’s part, not Serfas.  I assume it broke because of the almost daily plugging in to be recharged.

I was about to order a new one, but decided to check out their warranty page: Serfas Warranty  I emailed their warranty email address about my problem and got a response within 30 minutes.  They said to mail it in and they would fix or replace it.

I mailed it in and about a week later I got a package at my door with a brand new Taillight.  This is an awesome product from a company who stands behind their product.   I highly recommend it. You can buy the Serfas Thunderbolt on Amazon I’ve already bought one for my kids.

Xcode 6 Prefix Header

Prior to Xcode 6, all new projects contained a prefix header.  In Xcode 6 a prefix header is no longer included in the default project. Instead of using a prefix header you should put your imports in the files that need them.  But in the case that you need one, you can still add one.

From the menu, select File > New > File…

xcode6_prefixHeader1

 

Choose iOS > Other > PCH File

xcode6_prefixHeader2

 

In the Build Settings, each for “prefix” to narrow down your choices.  Under “Apple LLVM 6.0 – Language” find “Prefix Header”.  Add “$(SRCROOT)/PrefixHeader.pch”.  Make sure the path is correct.  When you close the dialog, it shows the expanded path.

xcode6_prefixHeader3

 

Xcode 6 category

After updating to Xcode 6, I thought Apple removed the ability to create a category when creating a new file. I was wrong. They just moved it.

To create a category in Xcode 6, choose File > New > File
xcode6_category1

 

Then select iOS > Source > Objective-C File

xcode6_category2

 

Choose File Type: Category.  Then enter you File name and the class you want to create a category for.

xcode6_category3

How to get the main storyboard

Here’s how to get at the main storyboard from inside your view controller.

UIStoryboard *storyboard = [UIStoryboard storyboardWithName:
[[NSBundle mainBundle].infoDictionary objectForKey:@"UIMainStoryboardFile"] 
bundle:[NSBundle mainBundle]];

Most of the time you can just use self.storyboard. But if you are in a view controller that was not created by a storyboard, then self.storyboard will be nil.

Filed under iOS