Chapter 1. SlidingPanel

Overview

_static_/{GAMA_devGuide}_slidingpanel_html5.png

A widget enabling multiple overlaid views with sliding interaction for showing multiple depth data in one screen display effectively.

It is useful to make overlaid GUI application that shows the upper view and lower view into one display screen simultaneously. Thus, developer can easily develop the application having iPAD twitter and facebook style GUI.

  • It can contain various Tags and can be modifiable according to the GUI scenario of application.

  • Developer can control the minimum display size of uppermost Pane.

  • Pane can be added/deleted dynamically.

  • The width of Pane is modifiable.

  • It has default natural sliding motion by user flicking.

  • Developer can control the showing order of Panes dynamically.

You can check whole features of Sliding Panel component using GAMA iPad app in Apple App Store. This guideline describes how to use Sliding Panel by introducing simple example.

Definition

Pane

The unit of view managed by Sliding Panel. Developers can set any view including HTMLDivElement.

How to use

First, write the html file having HTMLDivElement as belows.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width,
                initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,
                user-scalable=no, target-densitydpi=medium-dpi">
        <title>SlidingPanel Developer Guide</title>
    </head>
    <body>
        <table width='600px' height='300px' border=1 bodercolor=black>
            <tr>
                <td>
                    <div id='slidingpanel'></div>
                </td>
            </tr>
        </table>
    </body>
</html>

Second, include Sliding Panel related javascript files to the html: the source files, SlidingPanel.js, SlidingPanelPane.js, and the dependent files of the source, jquery.js, digitalaria.js, AnimationFrame.js.

    <script type="text/javascript"
        src="jquery/jquery.min_1.7.1.js"></script>
    <script type="text/javascript"
        src="jquery/jquery_ext.js"></script>

    <script type="text/javascript"
        src="digitalaria/digitalaria.js"></script>
    <script type="text/javascript"
        src="digitalaria/util/AnimationFrame.js"></script>

    <script type="text/javascript"
        src="digitalaria/gama/widget/slidingpanel/SlidingPanelPane.js"></script>
    <script type="text/javascript"
        src="digitalaria/gama/widget/slidingpanel/SlidingPanel.js"></script>

Next, create Sliding Panel instance with constructor parameters: HTMLDivElement, width, height.

    <script type="text/javascript">
        var SlidingPanel = digitalaria.gama.widget.slidingpanel.SlidingPanel;
        $(document).ready( function(){
            var slidingPanel;

            slidingPanel = new SlidingPanel($("div#slidingpanel"), 600 , 300 );
        }
    </script>

Next, obtain the SlidingPanelPane Object by using getPane() function of created Sliding Panel object.

You can set the width by using setWidth() function of SlidingPanelPane.

Apply the views after obtaining HTMLDivElement Object and using getPane() function of SlidingPanelPane.

(In this example, add 5 Pane and set the background color of them by using JQuery css() of HTMLDivElement Object, and then print text by html() function.)

    <script type="text/javascript">
        var SlidingPanel = digitalaria.gama.widget.slidingpanel.SlidingPanel;
        $(document).ready( function(){
            var slidingPanel;
            var slidingPanelPane;
            var pane;

            slidingPanel = new SlidingPanel($("div#slidingpanel"), 600 , 300 );

            slidingPanelPane = slidingPanel.getPane(0);
            slidingPanelPane.setWidth(150);
            pane = slidingPanelPane.getPane();
            pane.css("background-color","#0000FF");
            pane.html("Pane 0");

            slidingPanelPane = slidingPanel.getPane(1);
            slidingPanelPane.setWidth(225);
            pane = slidingPanelPane.getPane();
            pane.css("background-color","#00FF00");
            pane.html("Pane 1");

            //skip/////////////////////////////////////////////////

            slidingPanelPane = slidingPanel.getPane(4);
            slidingPanelPane.setWidth(225);
            pane = slidingPanelPane.getPane();
            pane.css("background-color","#FF00FF");
            pane.html("Pane 4");

            slidingPanelPane = slidingPanel.getPane(5);
            slidingPanelPane.setWidth(225);
            pane = slidingPanelPane.getPane();
            pane.css("background-color","#FFFF00");
            pane.html("Pane 5");
        }
    </script>

Next, enable the display of the Pane by using setShowPane() function of the Sliding Panel instance.

    <script type="text/javascript">
        var SlidingPanel = digitalaria.gama.widget.slidingpanel.SlidingPanel;
        $(document).ready( function(){
            var slidingPanel;
            var slidingPanelPane;
            var pane;

            slidingPanel = new SlidingPanel($("div#slidingpanel"), 600 , 300 );

            //skip/////////////////////////////////////////////////

            slidingPanelPane = slidingPanel.getPane(5);
            slidingPanelPane.setWidth(225);
            pane = slidingPanelPane.getPane();
            pane.css("background-color","#FFFF00");
            pane.html("Pane 5");

            slidingPanel.setShowPane(slidingPanelPane);
        }
    </script>

The result of the example is like this.

_static_/{GAMA_devGuide}_slidingpanel_html5_sample.png

Beyond the example, developer can set the specific motion of the Pane when sliding to it. You can check additional functions and usage in API reference of Sliding Panel component and GAMA developer forum.