[mikeo007]

Another cascades question from me. Hopefully an easy one this time:

Which control can I use to achieve a "paged" horizontal scroller, like the one in the calculator app, or on the BB10 homescreen?




Posted via CB10

[pkcable]

I will pass this thread on to my developer friends.

[young_adam]

Mikeo007:

Have you tried anything thus far? Or just looking for guidance?

I'd suggest looking at BlackBerry's got hub samples; https://github.com/blackberry/Cascad...descookbookqml (just to start you off... there is a ton of samples there)

Beyond that, accomplishing the paginated/tabbed view like in the native calculator, you may want to look at TabbedPane / NavigationPane / Page.

--
young_adam

[mikeo007]

Thanks for the response Adam. I have looked through the github samples, but haven't found something that replicates what I'm looking for yet. I may not have been totally clear on what I meant from the calculator app though. I'm talking specifically about the section that has the numbers, and when swiped to the side it reveals the FN, M+, MR, etc buttons (circled in the attached screenshot). I will continue to look for examples, but any guidance is appreciated.

[abass]

I have been wondering how to do this for a while as well.. closest I could get is using a Listview with horizontal scroll and have it snap to each view.. doesn't function nearly as nicely as the calculator app does it though. Haven't tried to have the static buttons on the right either. But i think that could be done. As for doing exactly what the calculator app does, I personally believe that they are using something that we don't have access to. I'd be very curious though.

Here's where I use it in my app:
Attachment 192107
Attachment 192108
Attachment 192109

And

Attachment 192110
Attachment 192111
Attachment 192112

[jeroen_13]

source code of the app: http://cdn.fs.sl.blackberry.com/fs/q...-v7+signed.bar

Calculator.qml

/* Copyright (c) 12012 Research In Motion Limited.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import bb.cascades 1.0
import Custom 1.0

Page {
    id: rootPage

    property variant backgroundColor: Color.create("#121212")
    property string displayTechnology: settings.isOLED ? "oled/" : ""

    Container {
        id: rootContainer
        property variant currentView
        property int viewToBeShownIndex
        layout: StackLayout {
            orientation: LayoutOrientation.TopToBottom
        }
        horizontalAlignment: HorizontalAlignment.Fill
        verticalAlignment: VerticalAlignment.Fill
        onCreationCompleted: {
            switch (settings.activePane) {
                case CalculatorFramework.CALCULATOR_CONVERTOR:
                    {
                        showConverter()
                        segmentedControl.selectedIndex = 2
                    }
                    break
                case CalculatorFramework.CALCULATOR_TIP:
                    {
                        showTipCalculator()
                        segmentedControl.selectedIndex = 1
                    }
                    break
                default:
                    {
                        showCalculator()
                        segmentedControl.selectedIndex = 0
                    }
            }
            segmentedControl.selectedOptionChanged.connect(segmentedControl.handleSelectionChanged)
            fadeViewInAnim.play()
        }
        function handleContextMenuShownChanged(isShown) {
            if (isShown) segmentedControlShadow.opacity = 0.5
            else segmentedControlShadow.opacity = 0.0
        }
        Container {
            layout: DockLayout {
            }
            horizontalAlignment: HorizontalAlignment.Fill
            preferredHeight: 111
            topPadding: 5
            SegmentedControl {
                id: segmentedControl

                verticalAlignment: VerticalAlignment.Center
                Option {
                    id: option1
                    objectName: "nav_item_basic"
                    text: framework.changed + qsTr("Calculator")
                }
                Option {
                    id: option3
                    objectName: "nav_item_tip"
                    text: framework.changed + qsTr("Tip")
                }
                Option {
                    id: option2
                    objectName: "nav_item_unit"
                    text: framework.changed + qsTr("Converter")
                }
                function handleSelectionChanged() {
                    console.log("Segmented control selection changed to: " + selectedIndex)
                    rootContainer.requestFocus()
                    rootContainer.viewToBeShownIndex = selectedIndex

                    loadTimer.start()
                }
            }
            Container {
                id: segmentedControlShadow
                overlapTouchPolicy: OverlapTouchPolicy.Allow
                background: Color.Black
                opacity: 0.0
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill
            }
        }
        ControlDelegate {
            id: viewDelegate
            delegateActive: true
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Fill
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1
            }
            overlapTouchPolicy: OverlapTouchPolicy.Allow
        }
        function switchView() {
            switch (rootContainer.viewToBeShownIndex) {
                case 0:
                    rootContainer.showCalculator()
                    break
                case 1:
                    rootContainer.showTipCalculator()
                    break
                default:
                    rootContainer.showConverter()
            }
        }
        function showCalculator() {
            settings.activePane = CalculatorFramework.CALCULATOR_SCIENTIFIC
            viewDelegate.source = "asset:///BaseModeCalc.qml"
            viewDelegate.control.deferredKeyboardLoad()
        }
        function showConverter() {
            settings.activePane = CalculatorFramework.CALCULATOR_CONVERTOR
            viewDelegate.source = "asset:///CalcUnitsConverter.qml"
        }
        function showTipCalculator() {
            settings.activePane = CalculatorFramework.CALCULATOR_TIP
            viewDelegate.source = "asset:///TipCalculator.qml"
        }
        attachedObjects: [
            // Fade in animation played on application startup
            // at the end we call finalizeInitialization() to perform delayed calc keyboard loading for calculator
            // it allows to improve app startup time
            FadeTransition {
                id: fadeViewInAnim
                duration: 500
                easingCurve: StockCurve.Linear
                fromOpacity: 0
                toOpacity: 1
                onEnded: {
                    if (segmentedControl.selectedIndex == 0) {
                        viewDelegate.control.finalizeInitialization()
                    }
                }
            },
            ImplicitAnimationController {
                enabled: false
            },
            QTimer {
                id: loadTimer
                singleShot: true
                interval: 200
                onTimeout: {                    
                    rootContainer.switchView()
                }
            },
            ImagePaintDefinition {
                id: buttonBgBlue
                imageSource: "images/btn_blue.amd"
            },
            ImagePaintDefinition {
                id: buttonBgRed
                imageSource: "images/btn_orange.amd"
            },
            ImagePaintDefinition {
                id: buttonBgBlack
                imageSource: "images/btn_black.amd"
            },
            ImagePaintDefinition {
                id: buttonBgWhite
                imageSource: "images/btn_white.amd"
            },
            ImagePaintDefinition {
                id: buttonBgBluePressed
                imageSource: "images/btn_blue_pressed.amd"
            },
            ImagePaintDefinition {
                id: buttonBgRedPressed
                imageSource: "images/btn_orange_pressed.amd"
            },
            ImagePaintDefinition {
                id: buttonBgBlackPressed
                imageSource: "images/btn_black_pressed.amd"
            },
            ImagePaintDefinition {
                id: buttonBgWhitePressed
                imageSource: "images/btn_white_pressed.amd"
            },
            ImagePaintDefinition {
                id: textFieldOLEDBg
                imageSource: "images/oled/textfield_bg.amd"
            },
            ImagePaintDefinition {
                id: textFieldOLEDBgFocused
                imageSource: "images/oled/textfield_bg_focus.amd"
            },
            ImagePaintDefinition {
                id: textFieldOLEDBgDisabled
                imageSource: "images/oled/textfield_bg_na.amd"
            },
            ImagePaintDefinition {
                id: textFieldBgDisabled
                imageSource: "images/textfield_bg_na.amd"
            }
        ]
    }
    keyListeners: [
        KeyListener {
            onKeyPressed: {
                if (CalculatorFramework.CALCULATOR_SCIENTIFIC == settings.activePane) {
                    if (scientificCalMediator.onKeyPressedHandler(event)) {
                        if (rootContainer.currentView.isMemoListExpanded) rootContainer.currentView.startKeyboardAndScreenAnimationUP()
                    }
                }
            }
        }
    ]
}

[abass]

source code of the app: http://cdn.fs.sl.blackberry.com/fs/q...-v7+signed.bar

Calculator.qml

Hey, how did you get that? I'd be curious to see the calculator in 10.2, it's much more refined.

Thanks

[young_adam]

Flip4Bytes:

Using sachesi, or darcys tools, you can extract the bars from the OS' and from there, use any archive tool to extract.the bar (they're effectively glorified ZIP fiels)

[jeroen_13]

Hey, how did you get that? I'd be curious to see the calculator in 10.2, it's much more refined.

Thanks

Used sachesi to extract the individual app links this calculator is from OS 10.1

Sent from my HTC Sensation using CB Forums mobile app

[abass]

Flip4Bytes:

Using sachesi, or darcys tools, you can extract the bars from the OS' and from there, use any archive tool to extract.the bar (they're effectively glorified ZIP fiels)

Thanks! (both you and the comment below you)

:P

- Developer of 'Web Design Cheat Sheet' for BB10 (Posted via CB10)

[mikeo007]

Bingo.

It looks like this control was built from scratch.

KeyboardPane.qml contains the actual layout and animations.
First, Second and ThirdKeyboardPane.qml contain the actual keys
CalcKeyboard.qml looks like parent container and contains all the swipe handlers.
And NavigationPaneIndicator.qml draws the little dots.

Would be REALLY nice if BB built this control into Cascades.

[jeroen_13]

Bingo.

It looks like this control was built from scratch.

KeyboardPane.qml contains the actual layout and animations.
First, Second and ThirdKeyboardPane.qml contain the actual keys
CalcKeyboard.qml looks like parent container and contains all the swipe handlers.
And NavigationPaneIndicator.qml draws the little dots.

Would be REALLY nice if BB built this control into Cascades.

Try this: https://github.com/Macadamian/BB10/t...r/CarouselDemo

Sent from my HTC Sensation using CB Forums mobile app

[abass]

Bingo.

It looks like this control was built from scratch.

KeyboardPane.qml contains the actual layout and animations.
First, Second and ThirdKeyboardPane.qml contain the actual keys
CalcKeyboard.qml looks like parent container and contains all the swipe handlers.
And NavigationPaneIndicator.qml draws the little dots.

Would be REALLY nice if BB built this control into Cascades.

Agreed, it'd be very useful. So you can duplicate that then, right? Just a bit of a pain? :P

- Developer of 'Web Design Cheat Sheet' for BB10 (Posted via CB10)