Elements of action bar + back bar item

Hello

is it possible to combine the action bar items (buttons) and use a back button in the toolbar action (BBUI.js and BBUI.css).

Thank you

MobilityUser

Hello
If you need to add a back bar simply add the data-bb-back-caption in the action bar div as below:

Then you can simply add the other items in the action within this division bar

See the examples on https://github.com/blackberry/bbUI.js/wiki/Action-Bar for more information. He wiki is really informative for all queries bbui.

Tags: BlackBerry Developers

Similar Questions

  • OK, this is a really stupid question, but I'm trying to add a soundtrack to a project in first 10 elements, and the aide said section "click music in the action bar to display the Panel of music." I can't find a 'Music' box to click around. Can someone p

    OK, this is a really stupid question, but I'm trying to add a soundtrack to a project in first 10 elements, and the aide said section "click music in the action bar to display the Panel of music." I can't find a 'Music' box to click around. Can someone tell me please in the right direction?

    cdmw

    If your program is first items 10

    a. you are in help for first items 11, not 10, and his description of the Action/music bar tab.

    or

    b. more unlikely since first elements 11 was not yet released, there is a typing error in the

    First Elements 10 help.

    In first 10, chronology workspace Elements, see Audio Tools (speaker icon) above the timeline and his choice of SmartSound.

    Please review and study and then we can then what to do next.

    Thank you.

    RTA

  • enableBackButtonDrag - Action Bar back button drag-need help!

    All,

    Can anyone share please an example on how to implmenet the button back dragging in adobe air. I would like to put this in my application. And I couldn't get it working properly.

    There is a api for it: enableBackButtonDrag = true;  https://developer.BlackBerry.com/air/APIs/BB10/QNX/fuse/UI/ActionBar/ActionBar.html#enableBackButton...

    Thank you!

    Here's how I solved it. It's a little complicated, because when you drag the back button you also get an ACTION_SELECTED event, which probably you hung to close the current page (round trip), which must therefore be disabled during travel.

    So if anyone has a cleaner way to do it, please let us know!

    private function initActionBar():void
    {
        actionBar = new ActionBar();
    
        actionBar.backButton = new Action(Strings.BACK[lang], null, "back");
        actionBar.enableBackButtonDrag = true;
    
        actionBar.y = display.stage.stageHeight - actionBar.height;     
    
        actionBar.addEventListener(ActionEvent.ACTION_SELECTED, onActionSelected);
        actionBar.addEventListener(DragEvent.DRAG_BEGIN, onDragBegin);
    
        display.addChild(actionBar);
    }       
    
    protected function onDragBegin(event:DragEvent):void
    {
        actionBar.addEventListener(DragEvent.DRAG_MOVE, onDragMove);
        actionBar.addEventListener(DragEvent.DRAG_END, onDragEnd);
    
        firstMove = true;
    }
    
    protected function onDragMove(event:DragEvent):void
    {
        // move the ctrlPanel with the dragged button
        display.x += event.deltaX;
    
        if (firstMove) {
            // start intercepting ACTION_SELECTED events to prevent Back-button 'tap' to register during drag
            actionBar.addEventListener(ActionEvent.ACTION_SELECTED, ignoreBackButton, false, 100);
            firstMove = false;
        }
    }
    
    protected function ignoreBackButton(event:ActionEvent):void
    {
        // do nothing and stop the event to get to trigger the onActionSelected handler
        event.stopImmediatePropagation();
    }
    
    protected function onDragEnd(event:DragEvent):void
    {
        actionBar.removeEventListener(DragEvent.DRAG_MOVE, onDragMove);
        actionBar.removeEventListener(DragEvent.DRAG_END, onDragEnd);
    
        // depending on how far the user has dragged, close the current page or snap back
        if (display.x > display.stage.stageWidth/2) {
            close();
            restoreBackButton();
        } else {
            Tweener.addTween(display, {x: 0, time: .3, transition: "EaseOutCubic", onComplete: restoreBackButton});
        }
    }
    
    protected function restoreBackButton():void
    {
        // stop intercepting taps
        actionBar.removeEventListener(ActionEvent.ACTION_SELECTED, ignoreBackButton, false);
    }
    
    private function onActionSelected(actionEvent:ActionEvent):void
    {           // TODO: add other actions
        switch(actionEvent.action.data) {
            case "back":
                close();
                break;
            default:
        }
    }
    

    My app: Get set - get up!   Get ready for the revolution snooze.

  • Customize the action bar footer Android app

    Hello

    I know my question is the same with this question in July:

    http://supportforums.BlackBerry.com/T5/Android-runtime-development/customize-the-action-bar-from-an-...

    However, I would like to know is there a plan in future OS release, where we can Autohide the action bar or customize the action with the custom action bar and icon?

    Thank you..

    Now you can completely eliminate the bar through XML, but that in the next 10.2.1 OS version.

    http://devBlog.BlackBerry.com/2013/12/Android-developers-eliminate-the-back-bar-in-your-10-2-1-app/

    However I have not seen yet any method of customization.

  • Native UI in Flex Mobile Application action bar

    Hi all

    I managed to port sample WeatherGuesser of FDT Mobile AS Application and market.

    But how to do so that the port in Flex Mobile application.

    I would use native look of the action bar, back and all that.

    are there opportunities to achieve.

    Thank you

    Vedran

    Any QNX control should be wrapped in a Flex control that you want to include in the MXML. It works well as a control of AS3.

  • Is it possible to add part or refresh in the action bar.

    I have been seaching the forum but have not found anything, is there a way to add update and share on the action bar?

    The docs for jQuery Mobile / BlackBerry 10 can be found here, including the elements of the action bar:
    https://github.com/BlackBerry/jQueryMobile-BB10-theme/tree/master/docs

  • When you click on the 'Info' to the background action bar button, the application crashes.

    Hello

    Recently, we have brought successfully a BlackBerry 10 Android app.

    Everything worked fine, except the thing that when you click on the "Info" button in the action bar that appears at the bottom of the screen - the application crashes.

    I guess that this button should display a connection, or the help page. In our application, we have such a page (like an ActionItem in the ActionBar).

    Yes, is there a way we can fix it, so that when clicking on "Info" button to view our about page? Or at least to do something to prevent the application from crashing, for example hide this button.

    PS: We tested the app in the simulator of Alpha BB 10 Dev.

    Thank you.

    Hello

    Thank you for your comments. In fact, it is a known problem in the current Runtime Android on the Simulator release BlackBerry 10. It has nothing to do with your application, as this action bar fits into the Runtime Android and not your application. Normally when you section the 'Info' button you will see a screen showing you must use the gesture of back scanning used in applications Android Runtime. If you want your own topic button, you need to create your own menu.

    See you soon,.

    Matt

  • bbui action bar is not displayed

    Hey guys,.

    I'm new to bbui and may not know how to work the stock bars.

    I just put a definition of simple screen that works with the exception of the action bar. It is not using firefox, chrome, or Simulator. Did I miss something?

    Players
    Matches
    Players
    BBM

    see you soon

    OK, first attachment.

    It's the triangle because it is subject to the approval process. as soon as it is approved, everyone will see, here's the example is approved:
    http://supportforums.BlackBerry.com/T5/Web-and-WebWorks-development/add-exception-pop-up-on-first-TI...

    and to do so in Rich Text, simply click on the 5th icon (tree), just before the movie icon, then click Browse, select your image, then click on insert image, made.

    I also develop something and I don't use firefox because I don't know how to use it in the debugger, instead, I use chrome/chrome to serve as an inspector to debug. I never use browser to see a preview of my application.

    application with webworks development takes a lot of time? Yes, you could be rite. but there is a way of development more effective and safe time, follow this:

    Update your BlackBerry WebWorks application without recompiling

    Basically, it works like this:

    1. Create your project as usual
    2. "in the config.xml file to replace with something like this: http://192.168.1.125/notes/index.html ' / > where 192.168.1.125 is my server local apache
    3. in my case/var/www/notes in my local server apache, I put all the file from www
    4. deploy the application on my Z10
    5. debugging
    6. When I need to change something, I just change some necessary in my local web server, never touch deployed Z10 app ever, unless I have to change something in the file config.xml or add/remove plugins

    naked in mine, it's the former article of 2009, but it works, read this article to the end also comments, one of the developer shows its implementation:
    http://dborba.com/wow-no-more-re-packaging-when-testing-HTML5-apps-on-your-device/

    good hunting

  • bbUI Q10 and Z10/Z30 Action Bar text title

    Dear community,

    I use the BBui.js with an action bar. I have 4 buttons in the action bar. With a Z10 or Z30 the application displays the button with the icon and text. Q10/Q5 only shows the icon, without the title text.

    Y at - it a solution for this problem?

    It is designed to allow the Q5 and Q10 to get more space for the actual content.

  • Disable the Animation of the action bar while hiding

    BB10 photos Soft mask the action bar when you tap on the screen. When you do so, the action bar disappears immediately.

    In an application of Cascades, if you:

    Page-> setActionBarVisibility (ChromeVisibility::Hidden);

    ... the action bar to slide down until it is no longer visible.

    I would like to disable this animation, but I don't know how. For the standard controls, I do things like:

    ratingControl-> setImplicitLayoutAnimationsEnabled (false);

    ImplicitAnimationController = allDisabled
    ImplicitAnimationController::create (ratingControl)
    . Enabled (false);

    ... but I'm not familiar with a way to get a reference to the action bar itself, or how, independently of any reference to disable animation.

    Thank you
    Daniel

    Hi Daniel,.

    If you switch between hidden and visibility for the ActionBar overlay it will appear/disappear without animation. Overlay, that's what the photos app uses so the image should not resize when the ActionBar toggle visibility.

  • BBUI.js action bar problem press button menu contextual assessment "undefined is not an object.

    I was updating my file bbui.js to the latest version and my screen splash action bar buttons are now broken when I deploy my Dev Alpha b with the updated OS 10.2. However, when I imitate the ripple app, there is no error message and everything works.

    When I open web-insector to see what the console bed after I pressed a button:

    "TypeError: 'undefined' is not an object (evaluation of"blackberry.ui.contextmenu.CONTEXT_ALL").

    I have a button in the context menu which worked very well forward on each of the pages.

    All my code is available for viewing at https://github.com/InnovateorDieOnline/BOTE

    Thank you in advance.

    Hi there, don't you update extension WebWorks (described in the components section required here.)
    https://github.com/BlackBerry/bbUI.js/wiki/context-menus

    The latest version of bbUI.js handles the Menu differently and you will need to make some changes, in addition to updating the script files.

  • Hide action bar

    Is it possible to hide the action bar and show it again if necessary by programming?

    I see the image in the device application Gallery photo cache bar action when you touch the screen and show it again with a new plug.

    Best regards!

    say that your ID main nav is "mainPage".

    put this in:

    {Page}

    actionBarVisibility: ChromeVisibility.Hidden

    }

    you want to be present when the 'page2' page opens. in page2 coding do something like this:

    {Page}

    onCreationCompleted: {}

    mainPage.actionBarVisibility = ChromeVisibility.Overlay;

    }

    }

  • Change the color of the development of the action bar

    Hi all

    Please help me on how to change the color of the focus of the action bar, the default color of the action bar is blue I want to change it to yellow.

    Thanks in advance.

    Do not think, that can be done with the latest version of the SDK.

    See this http://supportforums.blackberry.com/t5/Cascades-Development/How-to-change-tabbed-pane-background-col...

    -Dishooom

  • Is it possible to have different text in action on the action bar menu?

    I want to have the text in the action menu such as 'start my session' and have a title on the tab of the action bar that says only: "Meeting" from the beginning of that meeting is difficult to adapt. Is this possible?

    Thank you once again.

    The code...

    Page {
        actions: [
            ActionItem {
                id: aiFirst
                ActionBar.placement: ActionBarPlacement.OnBar
                title: qsTr("First")
            },
            DeleteActionItem {
    
            }
        ]
    
        onActionMenuVisualStateChanged: {
            if (actionMenuVisualState == ActionMenuVisualState.AnimatingToVisibleFull) {
                aiFirst.title = qsTr("First and still the best")
            } else if (actionMenuVisualState == ActionMenuVisualState.AnimatingToHidden) {
                aiFirst.title = qsTr("First")
            }
        }
    
        [ ... ]
    
    }
    
  • Problem by placing the button in the action bar

    Hey

    I would like to add a button to the toolbar action and a few other actions menu antion. But the problem is that the button also appears in the action menu.

    Here is the code:

    actions:]
    {ActionItem}

    Title: "Option 1".

    onTriggered: {}
    page 1 of var = catalogue1.createObject ();
    Navigational.push (page 1);
    }
    },
    {ActionItem}
    Title: 'Option 2 '.

    onTriggered: {}
    page 2 var = history.createObject ();
    Navigational.push (page 2);
    }
    },
         
    ActionItem
    {
    Title: 'button '.
    ActionBar.placement: ActionBarPlacement.OnBar
                    
    onTriggered:
    {
    work here.
    }
                    
    }
    ]

    The button appeared on the action bar, as well as in the action menu.

    Can someone help me?

    This is 'normal' and what users would expect, this is why I would not recommend that you change it.

    Having said that trapping however the signal AnimatingToVisibleFull or VisibleFull in the menu then hide or remove the action would be the way to go if you must.

    http://developer.BlackBerry.com/Cascades/reference/bb__cascades__actionmenuvisualstate.html

    Of course, a by-product of this is that it will disappear from the bar thus (perhaps make your app look a bit unstable).

Maybe you are looking for