How to add/modify button on Header in App Framework 3.0

How to add/modify button on Header in App Framework 3.0

I am using App Framework 3.0 in Intel XDK and I am unable to add button into Header.

I had followed example on website:

<header>
  <a id="backButton" class="button backButton">Back...</a>
  <h1>Custom Header</h1>
</header>

but it only works with App Framework 2.1 :(.

Thank you in advance!

16 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

Anybody here?? :(. 

Hi Nyugen,

Are you using app designer?

Yes, I am using app framework 3.0 to develop Android application :)

I asked about app designer. If your app is created with pure app framework or does it use the UI layout tool (with drag and drop controls) within Intel XDK. If you are using app designer, it is not yet made compatible with AF 3.0. However, using pure app framework, this code should work just fine.

 

Ah, I am so sorry. I am not using App designer. I use pure app framework 3.0. 

Check example from site, click on create snippet, they still use app framework 2.1. 

That is very strange. I have sample of app framework 3.0 with the header working just fine. 

    <div class="view" id="mainview">
        <header>
            <h1>List View Example</h1>
        </header>

Could it be that you have reference AF 3.0 wrongly? How are you doing so? Are other app framework components working fine?

^^

Could you please add a button into header and check again?

I am using header without button and it's working fine. Here my sample code:

<div class="view">
        <header id="headDriverLogin">
            <!-- <I want to add button here like: back or menu button> -->
            <h1> Driver Login </h1>
        </header>

        <div class="pages" data-footer="none">
            <div class="panel" id="driverloginpage">

                <form id="frmdriverlogin">
                    <input type="text" name="driver_name" id="driverloginname" placeholder="Username">
                    <input type="password" name="driver_pass" id="driverloginpass" placeholder="Password">
                </form>
                
                <div>
                    <input type="checkbox" id="driverremember" name="driverremember">
                    <label for="driverremember" style="font-size: 14px;color: deepskyblue;font-weight: bold;"> Remember Me </label>
                    <br style="clear:both" />
                </div>
                
                <br />

                <a class="button block" href="#" id="btndriverlogin"> LOGIN </a>
            </div>
        </div>
        
        <footer>
            <a href="#mainpage" class="icon home"> Index </a>
        </footer>
    </div>

 

Yes, me too.
Every <a> element with class="backButton" is always disappear when the page renders.
But class="button" is okay.

Hi,

With AF3.0, if you don't hide it, the "Back" button appears without additional coding. But, only after you have "some" history to go back. So, just after loading your app, the first panel/view doesn't have to where go "back" so the "Back" button correctly doesn't appear.

The samples mentioned by @Anusha and @Nguyen do both work fine using the AF3.0.

As for @Muhammad's question, i could not understand it, sorry.

Trying to help a little, bellow is a minimum html (with the needed CSS embedded to be easier). Important the referenced external CSS/JS are the minimum required to work (bear in mid AF must be v3.0)

If you would only the default Back button, you don't need to do anything. All behavior is already css/coded in AF3.0.

 

<!DOCTYPE html>
<html>

<head>
    <title>Button in header - Test</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
    
    <link rel="stylesheet" type="text/css" href="build/icons.css" />
    <link rel="stylesheet" type="text/css" href="build/af.ui.css" />

    <script type="text/javascript" charset="utf-8" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="build/appframework.ui.js" /></script>
    <style>
    /* Hide the "Back" button on the view->header */
    
    .view header .backButton {
        visibility: hidden;
    }
    /* Add some style to my button */
    
    .view header a.mybt {
        line-height: 44px;
        position: absolute;
        font-size: 25px;
        text-decoration: none;
    }
    </style>
</head>

<body>
    <div class="view" id="mainview">
        <header id="headDriverLogin">
            <!-- <I want to add button here like: back or menu button> -->
            <a href="#menu" class="mybt" data-left-menu="left"> &#9776; Menu </a>
            <h1> Driver Login </h1>
        </header>
        <div class="pages" data-footer="none">
            <div class="panel" id="driverloginpage" data-title="Main/Login" data-selected="true">
                </p>
                <form id="frmdriverlogin">
                    <input type="text" name="driver_name" id="driverloginname" placeholder="Username">
                    <input type="password" name="driver_pass" id="driverloginpass" placeholder="Password">
                </form>
                <div>
                    <input type="checkbox" id="driverremember" name="driverremember">
                    <label for="driverremember" style="font-size: 14px;color: deepskyblue;font-weight: bold;"> Remember Me </label>
                    <br style="clear:both" />
                </div>
                <br />
                <a class="button block" href="#" id="btndriverlogin"> LOGIN </a>
            </div>
            <div class="panel" id="2ndPanel" data-title="2ndPanel">
                <p> This is seccond panel </p>
            </div>
            <nav id="left" style="padding:30px; z-index:5">
                    <ul class="list">
                        <li><a href="#driverloginpage" data-transition="up-reveal">Login/main</a></li>
                        <li><a href="#2ndPanel" class="icon info"> 2ndPanel </a></li>
                        <li><a href="some_other_ref.html">yyyy</a></li>
                    </ul>
            </nav>
        </div>
        <footer>
            <a href="#driverloginpage" class="icon home"> Index </a>
            <a href="#2ndPanel" class="icon info"> 2ndPanel </a>
        </footer>
    </div>
</body>

</html>

-w

Hi bugre,

I've tried your code without the custom header button. The "Back" button appears when I switch to 2ndPanel.

It seems that the problem is when I create pages and navigation links with Intel XDK (the current version uses AF3.0). The "Back" button won't appear when I move to the next page. Even if I hardcode with class="backButton" like mentioned here, the "Back" button disappear from rendering.

Does anybody experience the same thing (using the latest version of Intel XDK)?

Hi Muhaimin,

I'm sorry, but i don't understand your problem. What is the "custom header you mention".

Add a complete code that run's on it's own, and try explain what id does or what is should do and doesn't do.

What i know is that the actual version of Intel AppDesigner (is that what you mean when you say "with Intel XDK"?) is not completly ported to work with the latest AF v3.0, as someone mentioned in another thread the next major release of the AppdEsigner is expected be be totally compliant with AF v3.0. I simply do the entire code in the bracket editor no using the AppDesigner when i  use AF v3.0.

I don't think that you can actually add a button with class "backButton" manually. Probably that documentation is somewhat copy/adjusted from the previous version of AF, i don't know. But why would you want adding a "Back" button manually and have all the work of controlling the history stack etc? If you want a button for only a specific interaction than the sample i made already has a "menu" button showing how it's done.

-

 

What I mean of "custom header button" is your "menu button in the header". I try to omit it and its CSS. And yes, the "Back" button appears in 2ndPanel and it can function normally.

In my own project, I use App Designer in the previous and current version of XDK.

In the previous version, it uses AF 2.1. There is an option to show the "Back" button, and it will be hardcoded (explicitly added to the code), like this:

<a class="button backButton">Back</a>

And in the current version, it uses AF 3.0. No option to show the "Back" button, but it should be rendered automatically, as mentioned in the documentation.

I do not know what's wrong. The "Back" button does not show whatsoever. It is not hidden, but completely not rendered in HTML when I try to inspect element in my browser. Even if I hardcode it, it is still not rendered in HTML.

But when I create a custom button, it shows!

Hi,

Considering that you're really using AFv3.0, i remember from looking at the af..ui.js code, the function that showBackButton() had some test at the beginning to define if it would add or remove (not show, but add/remove the element in the DOM).

you could try a debugging session, putting a breakpoint at the showBackButton() of the appframework.ui.js and see if your html code matches the expected one to show the "back" button.

sorry, but without seeing your code i have no other ideia.

-

 

 

 

I found the problem!

As described here, the history is only kept for each view. The "Back" button doesn't show because I create a cross view navigation. You can see the difference in modified code below:

<!DOCTYPE html>
<html>

<head>
    <title>Button in header - Test</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, minimal-ui">
    
    <link rel="stylesheet" type="text/css" href="build/icons.css" />
    <link rel="stylesheet" type="text/css" href="build/af.ui.css" />

    <script type="text/javascript" charset="utf-8" src="jquery.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="build/appframework.ui.js" /></script>
    <style>
    .backButton {
        cursor: pointer;
    }
    
    .no-backButton > .backButton {
        visibility: hidden;
    }
    
    .myMenu {
        line-height: 44px;
        position: absolute;
        font-size: 25px;
        text-decoration: none;
    }
    </style>
</head>

<body>
    <div class="view" id="mainview">
        <header id="headDriverLogin" class="no-backButton">
            <a href="#menu" class="myMenu" data-left-menu="left"> &#9776; Menu </a>
            <h1> Main View </h1>
        </header>
        <div class="pages" data-footer="none">
            <div class="panel" id="driverloginpage" data-title="Driver Login">
                </p>
                <form id="frmdriverlogin">
                    <input type="text" name="driver_name" id="driverloginname" placeholder="Username">
                    <input type="password" name="driver_pass" id="driverloginpass" placeholder="Password">
                </form>
                <div>
                    <input type="checkbox" id="driverremember" name="driverremember">
                    <label for="driverremember" style="font-size: 14px;color: deepskyblue;font-weight: bold;"> Remember Me </label>
                    <br style="clear:both" />
                </div>
                <br />
                <a class="button block" href="#" id="btndriverlogin"> LOGIN </a>
            </div>
            <div class="panel" id="2ndPanel" data-title="2ndPanel">
                <p> This is seccond panel </p>
            </div>
            <nav id="left" style="padding:30px; z-index:5">
                <ul class="list">
                    <li><a href="#driverloginpage" data-transition="up-reveal"> Login/main </a></li>
                    <li><a href="#2ndPanel" class="icon info"> 2ndPanel </a></li>
                    <li><a href="#anotPanel"> To the another view </a></li>
                </ul>
            </nav>
        </div>
        <footer>
            <a href="#driverloginpage" class="icon home"> Index </a>
            <a href="#2ndPanel" class="icon info"> 2ndPanel </a>
        </footer>
    </div>
    <div class="view" id="anotView">
        <header id="anotHeader">
            <h1> Another View </h1>
        </header>
        <div class="pages" data-footer="none">
            <div class="panel" id="anotPanel">
                <p> Welcome to another panel inside another view. </p>
                <p> Where is the "Back" button? </p>
                <a href="#nextPanel" class="button" data-transition="fade"> To the next panel </a>
            </div>
            <div class="panel" id="nextPanel">
                <p> We have moved to the next panel. </p>
                <p> Oh, there is the "Back" button. Let's click it! </p>
            </div>
        </div>
    </div>
</body>

</html>

 

Hello everyone!

Proceeded as follows (XDK 3400 - cordova html5 +):

I created two Headers

The first to main page

<Header class = "col-wrapping wrap-element uib_w_10 with-back" data-UIB = "app_framework / header" data-view = "2" id = "af-header-3">
        <a class="button BackButton btHome"> Back </a>
        <H1> News </ h1>
    </ Header>

The second to subpages

    <Header class = "col-wrapping wrap-element uib_w_10 with-back" data-UIB = "app_framework / header" data-view = "2" id = "af-header-4">
        <a class="button backButton"> Back </a>
        <H1> News </ h1>
    </ Header>

The difference is in the first class that has a style called btHome

.btHome {
            visibility: visible! important;
}

Thus the icon, but it will also be necessary to create a call within js to redirect to the page will be displayed.

 (Function ()

{
 "Use strict";

 register_event_handlers function ()
 {

    $ (Document) .on ( "click", ".btHome", function (evt) {

          window.location.href = "index.html";

    });
 }
 document.addEventListener ( "app.Ready" register_event_handlers, false);
}) ();

I have helped.

Ernani Torquato

Leave a Comment

Please sign in to add a comment. Not a member? Join today