Getting Started with EPUB UI Component

Getting Started with  EPUB UI Component

Introduction

EPUB UI Component is a development kit with which EPub 3.0 applications can be developed easily. Referenced in your project, the component helps your parsing and displays the book.

Installation

The EPUB UI Component is distributed as a .zip archive. The file has the following naming convention: AnFengde-EPUB_UI_Component-<version>.zip, where

  • <version> is the version number, e.g. 20120704
  • for example: AnFengde-EPUB_UI_Component-20120704.zip

The distribution

After downloading and extracting the archive to the desired location, you will find the following contents:

  • android    directory containing the EPUB SDK resources for the Android platform
    • EPUB_SDK_Example    directory containing the EPub SDK example for android
    • UI_Example    directory containing the UI component project for android
    • lib    directory containing the EPUB_UI library project
  • ios     directory containing the EPUB_SDK resources for the iOS platform
    • EPUB_SDK_Example    directory containing the EPub SDK example for iOS
    • UI_Example    directory containing the UI component project for iOS
    • lib     directory containing the framework AnFengDe_EPUB_SDK.framework and AnFengDe_EPUB_UI.embeddedframework
  • README.md
  • GettingStartedwithEPUBSDK.pdf
  • GettingStartedWithEPUBUIComponent.pdf

Setting Up Development Environment

For the Android platform, this guide assumes that you are using Eclipse as your Android IDE, and that you have installed and configured the Android SDK and ADT plug-in for Eclipse.
For iOS platform, this guide assumes that you are using Xcode as your IDE.
If you are using other IDEs, please consult the documentation of your IDE.

Using EPUB UI Component in Your Application Project

Android Platform
Epub UI Component is a Library Project in android platform, and getting started with it is very simple. You just add the library to your project. Now look at the sample and it will tell you how to reference the Epub UI Component in your android project.
Importing EPUB_UI Project
To import EPUB_UI library project in you Eclipse(Version: Juno Release).

  • File-> Import->Existing Android Code Into Workspace->Browse our EPUB_UI project

Figure 1-import the EPUB_UI project

Referencing EPUB_UI Project
To create an android project:

  • File->New->Android Project, name the project as CallEPubUI
  • Right click on the CallEPubUI project->Properties->Android->Add->EPUB_UI->OK->OK

Figure 2-CallEPubUI project

Figure 3-reference the EPUB_UI project(1)

Figure 3-reference the EPUB_UI project(2)

Opening the EPub Book

If everything is OK, now add the code in the main.xml of the CallEPubUI project.

<com.anfengde.epub.ui.BookView
android:id=”@+id/bookView1”
android:layout_width=”match_parent”
android:layout_height=”fill_parent” >
</com.anfengde.epub.ui.BookView>

Add the code in the AndroidManifest.xml of the CallEPubUI project.

in the manifest tag add the code:
<uses-permission android:name=”android.permission.INTERNET”/>
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />    <uses-permission android:name=”android.permission.WRITE_SETTINGS”/>
<uses-permission android:name=”android.permission.ACCESS_NETWORK_STATE”/> <uses-permission android:name=”android.permission.ACCESS_LOCATION_EXTRA_COMMANDS”/>

in the application tag add the code:

<activity android:name=”com.google.ads.AdActivity”     android:configChanges=”keyboard|keyboardHidden|orientation|
screenLayout|uiMode|screenSize|smallestScreenSize”/>

Pay attention to space symbol. If some problems occur, please set project target in project.properties to android-13 or above and then clean the project.

As a last step, add some codes in the onCreate method of the CallEPubUIActivity.

BookView bookView = (BookView) findViewById(R.id.bookView1);
bookView.setPath(Constants.CACHE_PAHT);
bookView.initBook();
bookView.openShelf();

bookView1” is the EPUB UI Component ID, you can change it.
Constants.CACHE_PAHT
is the cache path.        

Note:
If you want to associate your project with ePub file type. You can add this code below to your <activity> tag in the AndroidManifest.xml.

<intent-­filter>
<action android:name=”android.intent.action.VIEW” />
<category android:name=”android.intent.category.DEFAULT” />
<category android:name=”android.intent.category.BROWSABLE” />

 
<data
android:host=”*” android:scheme=”file” />
<data
android:mimeType=”*/*” android:pathPattern=”.*\\.epub” />
</intent-­filter>
And then you can invoke openBookFromFileExplorer(Intent intent) to get the book path from the intent to open the book. Refer to our project.


Run the CallEPubUI project. Now you can add books to the bookshelf.

Figure 4-the book showing up


IOS Platform
Epub UI Component is the framework in iOS platform, and getting started with it is very simple. You just add the framework to your project. Now look at the sample and you know how to reference it in your iOS project.
Creating a Project
To create a new project and name it as CallEPubUI with Xcode(Version 4.2.1)

  • Create a new Xcode project -> Application->Single View Application

Figure 5-create a single view application

Figure 6-CallEPubUI project

Adding the Frameworks and Resources
To add the frameworks and resources to CallEPubUI project in Xcode:

  • Right click on the Frameworks in the CallEPubUI project
  • select “Add Files to “CallEPubUI””
  • select  AnFengDe_EPUB_SDK.framework and AnFengDe_EPUB_UI.embeddedframework, and then add them to CallEPubUI project.
  • In Build Phases option drag .js files from Compile Sources to CopyBundle Resources

Figure 7-add framework to CallEPubUI project

Add iOS framework
Add the following frameworks to your project:

  • MediaPlayer.framework
  • MessageUI.framework
  • SystemConfiguration.framework
  • AudioToolbox.framework
  • CoreGraphics.framework
  • libsqlite3.dylib

Figure 8-add iOS framework


Add -all_load under Other Linker Flags in the project build info: CallEPubUI target ->Build Settings ->Linking ->Other Linker Flags->Add “-all_load”.

Opening the EPUB Book

If everything is OK, the CallEPubUI project looks like this:


Figure 9-the resources list of CallEPubUI project


Now add some codes in the AppDelegate.h (not ViewController.h).

#import <UIKit/UIKit.h>
#import <AnFengDe_EPUB_UI/EPubUIHeader.h>
@interface AppDelegate : UIResponder <UIApplicationDelegate>
@property (strong, nonatomic) UIWindow *window;
@property (strong, nonatomic) EPubRootViewController *rootEpubView;

@end

And in the AppDelegate.m (not ViewController.m), some codes are added to the method:

@implementation AppDelegate

@synthesize window = _window;
@synthesize rootEpubView;

– (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
// Override point for customization after application launch.
self.rootEpubView = [[EPubRootViewController alloc] initWithNibName:@”EPubRootViewController” bundle:nil];
self.window.rootViewController = self.rootEpubView;
[self.window makeKeyAndVisible];
   return YES;
}

Note:
If you want to associate your project with ePub file type. You need to add the option in your project info.plist file like this:

It is different in the different version Xcode, so maybe you need to find the right way to do that.

And then you can invoke openBookFromSafari(NSURL *url) to get the book path from the url to open the book. Refer to our project.

 

Run the CallEPubUI project.

Figure 10-the book showing up

One comment on “Getting Started with EPUB UI Component

  1. Pingback: AnFengDe EPUB UI Component 20120810 is released. | AnReader – Multi-Platform EPUB 3.0 Reader Toolkit

Leave a Reply

Your email address will not be published. Required fields are marked *