Creating Content Using Panels with App Framework Actions

Tweet Like

Once you create a basic page structure described in Getting Started with App Framework 2.0, you can use panels to put information and controls that you want your app to manage. Panels are individual content areas for your app that reside within the content div. 

To create a panel, use a div with class attribute of "panel".

<div id="home" class="panel">
  <h3>home</h3>
  <p>Home panel</p>
</div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Place this div within the content div and set id and title. If accidently you place the panel div outside of content div, App Framework detects that and automatically places the panel div inside the content div when the App Framework starts up.

 <div id="afui"> 
            <div id="header">
              <h1>App Framework Panels</h1>
            </div>
            <div id="content">
                <div id="home" class="panel" selected="true">
                    <h3>home</h3>
                    <p>Home panel</p>
                </div>
            </div>
</div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Using selected="true" property you make the panel the default panel that gets loaded when App Framework starts up.

Now, lets add couple more panels.

 <div id="afui"> 
            <div id="header">
                    <h1>App Framework Panels</h1>
            </div>
            <div id="content">
                <div id="home" class="panel" selected="true">
                    <h3>home</h3>
                    <p>Home panel
                    </p>
                </div>
                <div id="sketch" class="panel">
                     <h3>Sketch Pad</h3>
                     <p>Sketch Pad panel
                    </p>
                </div>
                 <div id="picture" class="panel">
                     <h3>Pictures</h3>
                     <p>Pictures panel
                    </p>
                </div>
            </div>
 </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

To add navigation we add two things. Add a footer or navigation bar at the bottom and create a back button in the header to easily navigate between the panels.

  <div id="header">
                <a id="backButton" href="javascript:;" class="button" ></a>
                <h1>App Framework Panels</h1>
            </div>



  <div id="navbar">
                <a href="#home" id='navbar_home' class='icon home'>Home</a>
                <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>
                <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>
   </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Putting it all together for a complete app:

<!DOCTYPE html>
<html>
 
    <head>
        <title>App Framework Panels</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link rel="stylesheet" type="text/css" href="appframework/css/icons.css" />
        <link rel="stylesheet" type="text/css" href="appframework/css/af.ui.css" />
      <script type="text/javascript" charset="utf-8" src="appframework/ui/appframework.ui.min.js"></script>
     </head>
 
    <body>
        <div id="afui"> 
            <div id="header">
                <a id="backButton" href="javascript:;" class="button" ></a>
                <h1>App Framework Panels</h1>
            </div>
            <div id="content">
                <div id="home" class="panel">
                    <h3>home</h3>
                    <p>Home panel
                    </p>
                </div>
                <div id="sketch" class="panel" selected="true">
                     <h3>Sketch Pad</h3>
                     <p>Sketch Pad panel
                    </p>
                </div>
                 <div id="picture" class="panel">
                     <h3>Pictures</h3>
                     <p>Pictures panel
                    </p>
                </div>
            </div>
           
            <div id="navbar">
                <a href="#home" id='navbar_home' class='icon home'>Home</a>
                <a href="#sketch" id='navbar_pencil' class='icon pencil'>Sketch</a>
                <a href="#picture" id='navbar_picture' class='icon picture'>Picture</a>
            </div>
        </div>
    </body>
</html>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

This is how it would look on mobile device:

Autoscroll on/off:
Additionally, you can use other properties of panel. For example, if you want to turn off auto scrolling for your app to allow auto expand of the panel, setting overflow: hidden will turn the auto scrolling off. This is useful for carousels or map applications.

<div class="panel" id="panel1" style="overflow:hidden"> </div>

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

Creating a modal window using panel:
You can turn the panel into a modal window that takes up 100% of the screen. Use modal="true" property.

<div class="panel" id="login" modal="true"> </div> 

See the Pen %= penName %> by Intel IDZ (@intelidz) on CodePen

These are special attributes and CSS properties that does more than just affecting the style of the element. By changing these properties, logic within App Framework UI gets triggered and it changes the default behavior of the panel. Other special attributes are data-load, data-unload, data-nav, data-header, data-footer, data-defer and data-tab. We will explore those in the next article.

Apart from these special attributes, you can add any attribute to the panel and change the default behavior.

To learn more about App Framework and links to other related articles, visit Getting Started with App Framework.