2012年9月27日

Monaca Transitions

Hi, Katsuya here.

Anyway in this article I'd like to continue telling you about our new development environment Monaca, while at the same time hopefully giving it a bit of a plug! I hope you enjoyed my previous article about Monaca native components. In this article I'm going to tell you about transition functionality which was released at the same time.

If you're wondering what Monaca is please have a look here.

Since its difficult to show you everything with screenshots for real-time information please check the debugger.

* We want to make a multiple screen application

If you use an iPhone or Android application you've probably noticed an option like "go to next screen". These include things like


・From a list screen to a detail screen
・From an application administration screen to a settings screen
・From the main screen to the settings screen

..and so on, there are lots of examples where content that can't be displayed on one screen has to be moved to another.

Unfortunately in an HTML-based application you can't configure interfaces to use multiple screens. This is because the standard doesn't support it, and also because the screen display (WebView) is different from screens that draw HTML.

We address this problem as follows


・substitute 'a' tag
・using a library such as jQuery to represent screen transition animations

..and so on,
Of course, its possible to create something reliable using this method

...however, if that's the case the screen with the 'a' tag will change abruptly, eventually jQuery will become aware that the page has changed and complete the HTML... some people would find this interruption unsettling... 。。

Therefore we have introduced a feature called 'transition'

* Transition

This term refers to a native application supports screen transitions.
By using this feature it becomes possible to perform transitions.


・It becomes possible to develop applications with multiple screens
・You can use native screen transition animations

Well sorry for spending so long on the explanation, let's jump in and see how we do this in Monaca!

* A practical example

As before we start by creating a project

Next, open the IDE for this project, as well as index.html we'll create another html file.
As I explained at the start we need a detail screen, for example an application settings screen
so here is detail.html

As you can see there are several entries

index.html


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Plain Project Skeleton</title>
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 640 pixels
            monaca.viewport({width: 320});
        </script>
    </head>
    <body>
        <h1>First screen</h1>
    </body>
</html>

detail.html


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <!-- Please do not remote the following line -->
        <script type="text/javascript" src="plugins/plugin-loader.js"></script>
        <script type="text/javascript">
            // Set virtual screen width size to 320 pixels 
            monaca.viewport({width: 320});
        </script>
    </head>
    <body>
        <h1>following screen</h1>
        <a href="index.html">Back</a>
    </body>
</html>

Important：to use the transition this tag is important...


<script type="text/javascript" src="plugins/plugin-loader.js"></script>

Please don't modify it!

Within the application we are going to transition from index.html to detail.html
To do that please add the following tag to index.html


<a href="javascript:void" onClick="monaca.pushPage('detail.html');">transition to detail screen</a>

If possible, try tapping the link in the debugger
....so how did it go?
Did the screen slide across and get replaced?
That was a transition! Pretty cool don't you think?

Just as a test let's try doing the screen refresh the conventional way.


<a href="detail.html">Detail page with no transition

Don't you feel much more connection with the application when you use a transition?
Of course, it's quite acceptable to use both methods but you'll find most users strongly prefer transitions.

For more information on this method...


monaca.pushPage('detail.html');

...for more information please check out the documentation here.

and one more thing...
So you're on the detail page and now you want to get back to the first screen? No problem! Just add this tag to your detail.html file.


<a href="javascript:void(0);" onClick="monaca.popPage();">Go back with transition</a>

Practice by tapping this link...
You should find an animation takes you back to index.html

or how about this?


monaca.popPage();

...for more information please check out the documentation here.

Using the method above you can transition back and forth between multiple screens.

* Conclusion

Using transition functionality it's possible to move between multiple screens.
In practice by using the "onTap" descriptors in the .ui file it's possible to use transitions when you press the native component button
By using native screen transitons,

..and thats about it for now!