Tutorials&Documents Collection – Start from here :)

Here is the Tutorials and Documents Collection, start your journey with Dolphin App Template here, enjoy :)

[1] SAY HELLO TO DOLPHIN APP TEMPLATE

[2] Dolphin App Template Highlight Video

[3] XML EDITING and Server Side XML

[4] XML EXPLANATION – Collections

[5.1] XML EXPLANATION FOR GLOBAL TAG

[5.2] XML EXPLANATION FOR UP_TOOLBAR & BOTTOM_INDEX TAG

[5.3] XML EXPLANATION FOR PAGE&LAYER TAG

[6] ASSETS MANAGE AND UPDATING

[7] Image Layer Introduction

[8] Multiple Image Layer and Page Zoom/Scroll Property

[9] Video Layer Introduction

[10] iPhone&iPad and portrait&landscape view Compatibility

[11] Album/Category Function

For those new with XCode, these two tutorial give you guide on test app on physics device and submit app to iTune Store.

[a] How to test app on your iPad/iPhone

[b] How to submit app to iTunes Store

Posted in Documents - Dolphin App Template, Tutorials - Dolphin App Template | 1 Comment

[Tutorials]How to submit app to iTunes Store

Before you read tutorials on how to submit app to iTunes Store, it’s strongly recommend that you have successfully test your app on real device, since that step covers lots of concepts like certification, provision file. If you have not successfully test app on real device, read here

Submitting app to iTunes Store could simply be described as uploading a file(.ipa) and its information to iTunes Store. What’s the most complex part is that you should embedded your distribution file into your ipa. Since you have successfully test you app on real device, this step should not be painful here.

1. Add your App Id (http://developer.apple.com -> ios provision portal)

An App Id is a unique code which for itunes store to distinguish your app from others, it looks like this:

com.yourdomain.yourproductname

com.handymood.dolphin

If you have successfully create the app id, it should look like this:

In your project plist, you will find the place for the id, that is the “bundle identifier”, just assign it with exactly what you have successfully created in developer profile page.

2 Distribution Provision File

Ok, next big thing is that you should prepare the “Distribution Provision File”, if you have successfully test app on real device, you should be familiar with “Development Provision File”, so now, what you need to prepare is something like “Distribution  File” for itunes store to sell your app with unique legal information.

After you have successfully install distribution provision file on you mac, you could has the “iPhone Distribution” option in XCode, select that option, click Product->Archive for generating the ipa file with your Distribution Provision File information.

3.Upload

Now things goes quite easy now, that is  fill up your app information in itunes connect and upload your app to itunes store (using application loader)

For using App Uploader, please refer this tutorial: http://tinyurl.com/3bkaszr

After your app has been uploaded to itunes store, itunes store will check its binary status, if there is some binary error while uploading, you should upload the app again.

If everything is fine, your app status will be “Wait for Review”, and after 1 week for reviewing, if there no issue with the content (not too simple contents or have copyrights issue …), it will be lived in iTunes Store!

We can say that uploading app to itunes store is not a easy task, you may need 1-2 hours to work it out for the first time. But no doubt that iTunes Store is quite good place to shining your branding&products, maybe even make your rich:) Thus all your effects is really worth. We are waiting to see your app live in iTunes Store, good luck!

Posted in Tutorials - Dolphin App Template | Leave a comment

[Tutorials] How to test app on your iPad/iPhone

For those who are new to ios develop fields, test app on real device is an exciting thing, but the fact is, test on real device is not easy task that you can work out in 5 minutes. So, just be a little bit patients to follow the steps, you will try it out at the end.

Step 1: Apply your apple developer 99$ account -> http://developer.apple.com

Step 2: After your apple developer account has been activated, you need to install your development certificate and installing provision file which contains your device udid.

All these steps is done in iOS Provisioning Portal page on your developer page.

And Apple has just prepared the great tutorials for these steps(at the right of iOS Provisioning Portal page)

Step 4: After you have successfully installed development certificate and  provision file on your mac, it’s time to use code sign to test your app on your iphone/ipad. In XCode, building setting, you will see the code sign option:

Click run, now wonder happens, you app are running on your iphone/ipad! Enjoy :)

Here is some great tutorials for your reference:

http://tinyurl.com/qklut6

http://tinyurl.com/y8mdzrw

http://tinyurl.com/444o97p

Posted in Tutorials - Dolphin App Template | Leave a comment

Category/Album Function

Category/Album function release the power for multiple galleries/slideshows.

Watch demo video here:

Using category/album is just as easy as with some lines of xml setting:

a) The album xml

The album’s xml is not mixed up with each gallery/slideshow’s xml, it’s an individual xml, the tag is easy to be understood, quite self-explaining:

<root>
<global>

<!–album unit layout setting for ipad–>

<!–album icon unit width&height–>
<unit_width>160</unit_width>
<unit_height>200</unit_height>
<!–the gap width and height between album icon image–>
<unit_between_width>40</unit_between_width>
<unit_between_height>30</unit_between_height>
<!–the offset x, y with top-left corner–>
<unit_start_off_x>20</unit_start_off_x>
<unit_start_off_y>20</unit_start_off_y>
<!–the white border size for the image icon–>
<border_width>6</border_width>
<border_height>6</border_height>
<!–the font size for the album title–>
<font_size>20</font_size>

 

<!–album unit layout setting for iphone–>

<unit_width_iphone>80</unit_width_iphone>
<unit_height_iphone>100</unit_height_iphone>
<unit_between_width_iphone>40</unit_between_width_iphone>
<unit_between_height_iphone>30</unit_between_height_iphone>
<unit_start_off_x_iphone>10</unit_start_off_x_iphone>
<unit_start_off_y_iphone>10</unit_start_off_y_iphone>
<border_width_iphone>3</border_width_iphone>
<border_height_iphone>3</border_height_iphone>
<font_size_iphone>16</font_size_iphone>
</global>

 

<!–each album’s setting:icon, slideshow xml path(web path supported), title–>

<album>
<album_icon>s1.jpg</album_icon>
<album_path>config_photo.xml</album_path>
<album_name><![CDATA[default demo]]></album_name>
</album>
<album>
<album_icon>s2.jpg</album_icon>
<album_path>multiple_layer.xml</album_path>
<album_name><![CDATA[multiple layer demo]]></album_name>
</album>
<album>
<album_icon>s3.jpg</album_icon>
<album_path>http://www.yourdomain.com/config_photo.xml</album_path>
<album_name><![CDATA[web demo]]></album_name>
</album>
</root>

The category page will auto adjust the album icon’s position (both for portrait&landscape view), no need the setting for the column and row number.

b) Link with album xml

For the xml setting with each slideshow/gallery, there is <album> tag in global setting:

<!–the album path(web path supported)–>
<album>album.xml</album>

This means for each slideshow/gallery, they can link with same or different album in a flexible way.

If you no need the album function, just leave it blank, like this:

<album></album>
Posted in Documents - Dolphin App Template | Leave a comment

Documents – iPhone&iPad Compatibility with Dolphin App Template

For Dolphin App Template, the screen size is the only part you should pay attention with iPhone&iPad compatibility.

The screen size for iPhone (including Retina) in pixels is 360×480

The screen size for iPad in pixels is 768×1024

Device Option in XCode:Universal,iPhone and iPad. You can set the device type in XCode, then XCode will build app with the specified option.

Universal: this option allows your app to be installed on both iPhone and iPad, but it will not take response for screen size resize. (In Dolphin App, you can use <align> and <auto_screen_fit> tag in XML to set screen adjust re-size)

iPhone: allows your app to be installed on both iPhone only.

iPad: allows your app to be installed on both iPad only.

For simple image gallery/slideshow or single layer eBook

If you want to use Dolphin App Template to build image gallery/slideshow or simple one layer eBook (like the App – Attractions of Nanjing), this option is suitable for you.

With device option set to universal, <align> and <auto_screen_fit> for the global set in XML need to be set like below:

<!–align mode:v:portrait view, h:landscape view, g: both protrait view and landscape view–>
<align>g</align>
<!–when align mode is g:whether all ui to auto-adjust to fit the screen, recomand to set with 1–>

<auto_screen_fit>1</auto_screen_fit>

For multiple layer(image/video) eBook

Since iPhone/iPad screen size is not the same, even one App, you may want use different layout for iPhone and iPad individually. So, in such situation, you can use two xml, one xml for iPhone, and another xml for iPad.

With multiple layers, 2 issue you need pay attention to:

1. Portrait&Landscape View, when you set your app’s layout in one view, for example: portrait view, then you rotate your screen to landscape view, but your App has not set a layout with multiple layers in that view.In such situation, it means double of the layout workload if you want to use both portrait&landscape view with multiple layers.

In recent version, Dolphin App does not support two version of layout. But even many top level digital magazine app have only one type of view, like Our Choice , Oprah Magazine and Esquire. Since two version layout is not that necessity and time costing for creation.  So, if you do not want your page rotate when you use multiple layers, you need to set <align> with v or h, and <auto_screen_fit> to 0.

2. Page fit screen function, with new argument <fit_page_size>(Released 7/23/2011), it released the power that whole page fit with the screen size, check the demo video:

 

For fit screen function go to work, <align> need to be set to g,<auto_screen_fit> need to be set to 1, and <page_width> and <page_height> are also necessary:

<align>g</align>
<auto_screen_fit>1</auto_screen_fit>
<page_width>768</page_width>
<page_height>1024</page_height>
<fit_page_size>1</fit_page_size>

For <page_width> and <page_height>, they should be the same size with page size, in general, for ipad, it will be 768 x 1024 or 1024 x 768, for iphone, it will auto-fit the screen size with ipad page size ratio.

With these arguments, you can view your multiple layer content in both landscape and portrait view(fit with page size, keep ratio):

Sometimes, you still have specific needs, for example, you have a single image with size 1024 x 768, but your page size have been set with 768 x 1024. In such condition, when in a landscape view, your single wide image will limit width size to 768 (keep size ratio). If you still want to view that single wide image in landscape view with full size, you could set <fit_page_size> to 0 in that page’s <page_prop> tags, in such way, this single page will omit the global <fit_page_size> setting, like this:

<page_prop>
<fit_page_size>0</fit_page_size>
</page_prop>

 

Reference Tutorials&Articles

Multiple Layers Introduction http://handymood.com/blog/?p=88
Image Layer Introduction http://handymood.com/blog/?p=81
Video Layer Introduction http://handymood.com/blog/?p=94

Posted in Documents - Dolphin App Template | Leave a comment

Documents/Tutorials – Video Layer Introduction

Video layer release the power of media content. With multiple layer solution, you could mixed video with image in one page, which makes your App looks more colorful.

Watch the highlight video first:

XML DEFINITION FOR VIDEO LAYER TAGS

<layer>
<type>video</type><!– TYPE DEFINITION–>
<src>video_1.mp4</src><!–VIDEO FILE NAME,supproted format .mov, .mp4, .mpv, and .3gp–>
<x>40</x><!–position x for video in one page–>
<y>290</y><!–position y for video in one page–>
<width>480</width><!–video width–>
<height>270</height><!–video height–>
<autoplay>0</autoplay><!–wether auto play when page loaded–>
<ratiomode>1</ratiomode><!–0:size fill,1:keep reatio when scale–>
<loop>1</loop><!–play video in loop–>
<style>0</style><!–0:simple style 1:embed video player style 2:fullscreen video player style–>
</layer>

Usage 1 - Fit Screen Video

And if you want to let the video keep fit with the screen size, you could omit the width and height property.

Fit Screen function highlight video:

Be sure you set global align mode to g and auto_screen_fit to 1 first.

<align>g</align>
<auto_screen_fit>1</auto_screen_fit>

The page contains the video could be like this:

<page>
<page_prop>
<!–optional parameter: the individual set for the page’s own zoom property–>
<single_page_zoom_min>1</single_page_zoom_min>
<single_page_zoom_max>1</single_page_zoom_max>
</page_prop>
<layer>
<type>video</type>
<src>video_1.mp4</src>
<x>0</x>
<y>0</y>
<autoplay>0</autoplay>
<ratiomode>1</ratiomode>
<loop>1</loop>
<style>0</style>
</layer>
</page>

The default demo in Dolphin App Template Package is just the fit screen one, you could run and check it.

Usage 2 - Multiple Layer Video

You can use a single video layer mixed with multiple image layer, for example: a background image with a video on front of it:

<layer>
<type>img</type>
<src>desc_layer.jpg</src>
<x>0</x>
<y>0</y>
<width>1024</width>
<height>768</height>
<ratiomode>1</ratiomode>
</layer>
<layer>
<type>video</type>
<src>video_1.mp4</src>
<x>40</x>
<y>290</y>
<width>480</width>
<height>270</height>
<autoplay>0</autoplay>
<ratiomode>1</ratiomode>
<loop>1</loop>
<style>0</style>
</layer>

multiple video layer demo could be set in DolphinViewController.m, just like change other XML file path, set it like:

[mediaBook initBook:@"multiple_layer_demo.xml"];

 

Attention

For the hardware limitation of iPhone/iPad, you could only use one video in one page. The video’s original size should be limited to 640 x 480 at 30 fps.

Check more details about video restriction from Apple

Posted in Documents - Dolphin App Template, Tutorials - Dolphin App Template | 2 Comments

Documents – Multiple Image Layer and Page Zoom/Scroll Property

Multiple layers solution gives each page most potential chance to become special and unique. In this tutorials, we will show you how to work with multiple image layer and page zoom/scroll property, check the tutorial video first:

If you are not familiar with image layer or page layer for Dolphin App Template, check these two tutorials first:

XML EXPLANATION FOR PAGE&LAYER TAG

WORK WITH IMAGE

Ok, when you get familiar with image and page tags, let’s continue. There is already a multiple layer usage demo in the Dolphin App Template project folder, you can test “multiple_layer_demo.xml” showed as below, which is in DolphinViewController.m

The demo in “multiple_layer_demo.xml” is very similar with the demo video you watched here. You can click small image on the first page, and they will jump to the target page they have been set in the XML. The xml define for such function is like below, very easy to be understand:

<page>
<layer> <!– the bottom image layer for first page–>
<type>img</type>
<src>6.jpg</src>
<x>0</x>
<y>0</y>
<width>1024</width>
<height>768</height>
<ratiomode>2</ratiomode>
<target_page_id>-1</target_page_id>
</layer>
<layer><!–the small image above the bottom image layer for first page–>
<type>img</type>
<src>s1.jpg</src>
<x>125</x>
<y>275</y>
<width>200</width>
<height>200</height>
<ratiomode>2</ratiomode>
<target_page_id>1</target_page_id> <!– jump to page id 1 (page id counting from zero)
</layer>
<layer>
<type>img</type>
<src>s3.jpg</src>
<x>425</x>
<y>275</y>
<width>200</width>
<height>200</height>
<ratiomode>2</ratiomode>
<target_page_id>2</target_page_id><!– jump to page id 2–>
</layer>
</page>

Enough easy, right? Just add more layers you want within the page tag, if you want your specific image layer jump to certain page, set the target_page_id, otherwise, set the value with -1, or just delete target_page_id tag.

For each page’s own scroll and zoom property, it’s also easy to be understand, if you set page’s own zoom&scroll value, they will use their own, otherwise, the use global value for page zoom and scroll.

<page_prop>
<single_page_zoom_min>1</single_page_zoom_min>
<single_page_zoom_max>2</single_page_zoom_max>
<scroll_width>1024</scroll_width>
<scroll_height>1280</scroll_height>
</page_prop>

Both page and image have scroll_width and scroll_height property, but they have different meaning. Page’s scroll value means its movable area while image layer’s means its limit area. See below image for detail explanation:

The own scroll value provide your app more flexible use, for example, on one page, your left image be a static one, and right one is a long one that could move vertically.

By using these specific arguments for page and layer, your app will look different than a simple slideshow.

Posted in Documents - Dolphin App Template | Leave a comment

Documents – WORK WITH IMAGE [Dolphin App Template]

Image layer is the most important layer that you will work with Dolphin App Temlate, since this is the place your content shining out.

The definition for the image unit in the XML has been introduced in Documents – XML EXPLANATION FOR PAGE&LAYER TAG, check that article for XML define details.

For each image, below arguments decide its position and size:
x, y, width, height, originalsize, ratiomode
But some arguments are only necessity in certain situations, let’s discuss them in below:

[1]Auto-resizing with landscape and portrait view
This is the best view set if you want your image gallery to work with both landscape and portrait view, to make such effect, you need to first set two arguments in global tags:
<!–align mode:v:portrait view, h:landscape view, g: both protrait view and landscape view–>
<align>g</align>
<!–when align mode is g:whether all ui to auto-adjust to fit the screen, recomand to set with 1–>
<auto_screen_fit>1</auto_screen_fit>

For the image layer: x,y and ratiomode is necessity in such situation, sample:
<layer>
<type>img</type>
<src>img_src.jpg</src>
<x>0</x>
<y>0</y>
<ratiomode>1</ratiomode>
</layer>

Attention, atuo_screen_fit argument will only work for the bottom layer image for each page, for the image layer above bottom layer, they will use their own arguments setting for position and size.

[2] No auto-resizing, use image’s own size limit or ratio mode
If you just want to use image’s own position, size or ratio mode, the align argument in global tag should be set either with v or h, since there is no solution for two size/position set for both two view, we will improve this later.
So, the global set here should be:
<align>v</align> or <align>h</align>
<auto_screen_fit>0</autoscreen_fit>

[2.1] Image use original size, no need to set with/height and ratiomode argument
<layer>
<type>img</type>
<src>img_src.jpg</src>
<x>20</x>
<y>30</y>
<originalsize>1</originalsize>
</layer>

[2.2] Image Use Limit Area, no need to set originalsize
<layer>
<type>img</type>
<src>img_src.jpg</src>
<x>725</x>
<y>275</y>
<width>200</width>
<height>200</height>
<ratiomode>1</ratiomode>
</layer>

3 different ratiomode explain check here:

0:keep size in the limitation with width and height,
1:keep ratio in the image’s limit size area,
2:crop mode,keep ratio and fill in the image limit size

For more usage with image’s own position&size, check the muliple layer demo in Dolphin project folder, showed as below:

By composing images with different arguments for image layer, will make your app beyond a simple slideshow&ebooks. We will show more cool usage tutorials to make your app unique.

Posted in Documents - Dolphin App Template | Leave a comment

Tutorials – ASSETS MANAGE AND UPDATING [Dolphin App Template]

Since XCode is a smart IDE, arrange assets with it is never panic things, check the short tutorial video first:

[1]Manage File with Group First, you drag the image to left sidebar in XCode. XCode will pop up a panel for you to check with some options, to the simple purpose, you need to choose options as below:

For Copy items into destination group’s folder (if needed), this option will copy your image file into the XCode project folder. By selecting this option, it will give project a lot benifits on portability, so most of the time, this option is recommanded to be selected.

Create groups for any added folds, this option use XCode’s inner group to organize files, while instead of the physics path. Use such solution is especially benfit for easy usage purpose. Just remember, no need to use image’s path, just use image’s name when you do configuration with the XML, no matter where you have put the image in XCode Organizer.

Then, you can try to edit the XML, replace some image tag’s src name or some thumbnail image name with the added image. Note, just as we have metioned, no matter where you have put your image in XCode organizer, what you needed in the XML is the image name only, no package path needed. This is to the purpose for simple usage, we will add package path support in later version.

After you have modified XML, build the project, you will see the result. If there is no change after you have modified XML, try to select Product->Clean in XCODE to refresh the project, build again, you will see the changes.

[2]Modify UI with your own

For those who want to modify UI(social buttons, play/pause button, etc.), ui images are located in “uiimages” in XCode category, you can delete the original ui image you want to replaced with first, and then drag your own ui image with the same name.

[3]Manage File with Physics Path And if  you want to use your  assets with physics path, it’s also easy, just select “Create folder references for any added folders” option when you drag your assets package in.        

The real physics path will have a different package color in XCode navigation panel:            

Use assets in physics path is just easy as use any relative path with assets:                             <src>img_folder/dolphin_preview.jpg</src>                                                                               <src>video_folder/video_2.mp4</src>                                                                                          <bg_snd_link>audio_folder/bg_2.mp3</bg_snd_link>

Posted in Tutorials - Dolphin App Template | Leave a comment

Video – Dolphin App Template Highlight Video

Posted in News - Dolphin App Template | Leave a comment