March 25, 2010

Swapping View Divs

Posted in Android Development, Blackberry development, iPhone development, misc tagged , , , , , , , , at 10:44 pm by tetontech

Let’s say you want to display multiple information views in your app.  I’ll describe here how to to this with very few lines of code using HTML 5 principles.  These examples can also be found in the latest QuickConnectFamily download as hybrid applications.

There will be two examples.  The first is fading between views.  The second is sliding views over the top of others.  These examples work for both hybrid and web apps.

When a hybrid app is created it is often the case that you need to display several different views with different data being displayed.  This may be due to some sort of ‘drill down’ behavior you need in your app or for some other reason such as a display of some sort of a login or configuration view.

You could use Dashcode and it’s Stack part but that has a lot of overhead in both code size and execution speed or you could do something like is described here.

The first example shows how to display multiple divs and then fade from one div to another without any change of position for the divs.

We start by adding the divs and navigation buttons to the HTML.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd>

<html>

<head>

<title>QCXcodeTemplate</title>

<base href=“mobile/”>

<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>

<meta name=“viewport” content=“width=device-width, minimum-scale=1.0, maximum-scale=1.6”>

<meta name=“apple-mobile-web-app-capable” content=“YES”>

<link rel=“stylesheet” href=“main.css”>

<script type=“text/javascript” src=“Parts/parts.js” charset=“utf-8”></script>

<script type=“text/javascript” src=“../QCJSLib/setupQC.js” charset=“utf-8”></script>

<script type=“text/javascript” src=“main.js” charset=“utf-8”></script>

</head>

<body onload=“load();”>

<div id=‘view1’ class=‘view’>

<input type=‘button’ value=‘Show View 2’ onclick=‘showView(2)’ />

<p>Here is some text for display in View 1.</p>

</div>

<div id=‘view2’ class=‘view’ style=‘background-color:lightgreen;’>

<input type=‘button’ value=‘Show View 1’ onclick=‘showView(1)’/>

<p>Here is some text for display in View 2.</p>

</div>

</body>

</html>

Nothing special in this HTML code.  Notice the onclick handler ‘showView’.  We’ll look at that in a minute, but first lets look at the CSS for the divs.
Here is the CSS from main.css

body {

margin: 0px;

min-height: 356px;

font-family: Helvetica;

background-repeat: repeat;

}

.view{

position:absolute;

top: 50px;

left: 20px;

background-color:lightBlue;

z-index:0;

opacity:0;

-webkit-transition: opacity 1s linear;

}

You can see some very standard CSS in the view class that is applied to each of the view divs.  The only item that is different is the HTML 5 transition element.  It states that every time the opacity is changed by some Javascript call that the opacity change should be applied over one second and that the change should change consistently.
There are other transition types available other than linear such as ease-in, ease-out, ease-in-out, etc. but we will stick with linear for now.
Notice that the opacity of all of the divs is set to zero initially.  This means that all of the divs will be transparent when the application starts.  Also notice that the z-index of the divs are all set to zero.  Zero is the default value but this is added for clarity in the CSS.
The Javascript is very small.  When doing fading we need to track the current view so that we can cause it to fade out while the new view fades in.  This is why the currentView global variable is created and used.

function load()

{

showView(1);

}

var currentView = null;

function showView(viewNumber){

var nextView = document.getElementById(‘view’+viewNumber);

//if there is a view to change to

if(nextView){

//if at least one view has been displayed

if(currentView){

currentView.style.zIndex = 0;

currentView.style.opacity = 0;

}

nextView.style.zIndex = 10;

nextView.style.opacity = 1.0

//reset currentView

currentView = nextView;

}

}

In the showView method  we change the opacity.  This triggers the transition defined in the CSS.  The zIndex is also changed.  If the zIndecies of the divs being switched are not changed then the transparent div can end up still being on top of the opaque div.  If this is the case then the touches or clicks will not be registered by the visible div.
That’s it.  No more code needed.  That is a lot less code than Apple generates in Dashcode.
Example 2 pushes divs over each other and then pops them off.  It does this by moving the divs using CSS 5 abilities.
The HTML for this example is very similar but contains 4 divs.  The first div is a container I’m calling ‘stack’ and holds a ‘stack’ of the divs that are used as view divs.  The other three divs are view divs.  I created three instead of two divs to make it easier to see how you could use this functionality.

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd>

<html>

<head>

<title>QCXcodeTemplate</title>

<base href=“mobile/”>

<meta http-equiv=“content-type” content=“text/html; charset=utf-8”>

<meta name=“viewport” content=“width=device-width, minimum-scale=1.0, maximum-scale=1.6”>

<meta name=“apple-mobile-web-app-capable” content=“YES”>

<link rel=“stylesheet” href=“main.css”>

<script type=“text/javascript” src=“Parts/parts.js” charset=“utf-8”></script>

<script type=“text/javascript” src=“../QCJSLib/setupQC.js” charset=“utf-8”></script>

<script type=“text/javascript” src=“main.js” charset=“utf-8”></script>

</head>

<body onload=“load();”>

<div class=“stack”>

<div id=‘view1’ class=‘view’>

<input type=‘button’ value=‘Show View 2’ onclick=‘slideIn(2)’ />

<br/>

<input type=‘button’ value=‘Show View 3’ onclick=‘slideIn(3)’ />

<p>This is View 1.</p>

</div>

<div id=‘view2’ class=‘view’ style=‘background-color:lightgreen;’>

<input type=‘button’ value=‘Done’ onclick=‘slideOff()’/>

<p>This is View 2.</p>

</div>

<div id=‘view3’ class=‘view’ style=‘background-color:lightyellow;’>

<input type=‘button’ value=‘Done’ onclick=‘slideOff()’/>

<p>This is View 2.</p>

</div>

</div>

</body>

</html>

The CSS is also very similar to the previous example.  The major difference is that I have defined the width and height of the view and stack divs.  This allows me to move the view divs outside the viewable portion of the stack div.  Thus it appears that they disappear when they move.

body {

margin: 0px;

min-height: 356px;

font-family: Helvetica;

background-repeat: repeat;

}

.stack{

position:absolute;

top: 50px;

left: 20px;

width: 200px;

height:200px;

border: solid 1px black;

overflow: hidden;

}

.view{

position:absolute;

left: 320px;

width:100%;

height: 100%;

background-color:lightBlue;

-webkit-transition: left .5s linear;

}

Notice that the transition is now activated when the left CSS value is changed.
The JavaScript is also very similar to what you saw before.  Instead of Changing the opacity and the z-index all that has to be changed is the left value.  This triggers the CSS 5 transition and the div moves to the new location in .5 seconds.

function load()

{

slideIn(1);

}

var viewStack = new Array();

function slideIn(viewNumber){

var nextView = document.getElementById(‘view’+viewNumber);

//if there is a view to change to

if(nextView){

nextView.style.zIndex = viewStack.length;

nextView.style.left = ‘0px’;

//add the displayed view to the stack

viewStack.push(nextView);

}

}

function slideOff(){

var currentView = viewStack.pop();

currentView.style.left = ‘320px’;

}

You can see that it doesn’t take much to do some very interesting stuff using the HTML 5 transitions.
I hope this helps those who want to improve their user interfaces.
Advertisements

5 Comments »

  1. cody said,

    you don’t include the files, like the js files that you call in your tags. would be nice if you gave a link to demos of each.

    • tetontech said,

      Cody,

      Parts.js is a Dashcode generated file not used in the example. It is included in the HTML file only for compatibility reasons for those who use Dashcode.

      setupQC.js is a QuickConnect Javascript file used to load all of the js files for the QuickConnect framework. This file is found in all of the examples in the examples directories in the QuickConnectFamily download.

      main.js contains only the code listed in this posting.

      Are there other js files you need?

  2. Emili said,

    Demo please.

    • tetontech said,

      Emili,

      A demo of this already exists in the QuickConnectFamily 1.6 beta download. Take a look there in the iPhone Examples folder.

      Thanks.

  3. restalyn said,

    Thanks , I’ve just been looking for info approximately this topic for ages and yours is the best I have found out till now. However, what about the bottom line? Are you positive concerning the source?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: