BY Ajay Singh17 Aug 2021 Edit
WebAtoms - AtomXFToggleButton Bar

Today we are going to have a look on the WebAtoms Xamarin.Forms AtomXFToggleButtonBar user interface control.

Let's first briefly check what is WebAtoms?


WebAtoms is an advanced MVVM framework to write cross platform applications in Xamarin.Forms. Unlike other frameworks, WebAtoms lets you divide User Interface logic in strict MVVM fashion and separates View in XAML. Benefit of separating User interface logic in ViewModel is you can individually unit test view model to make sure your logic is consistent across platforms.

Xamarin Fiddle


Check out this

Now we will see the actual implementation of WebAtoms Xamarin.Forms user interface control AtomXFToggleButtonBar. This control allow users to take actions, and make choices, with a single tap.
View

export default class MainPage extends AtomXFContentPage {

    public viewModel: MainPageViewModel;

    public create() {

        this.viewModel = this.resolve(MainPageViewModel);

        this.render( <XF.ContentPage title="Toggle Button Bar" backgroundColor="white">
                <XF.StackLayout padding="20">

                      <XF.Label horizontalTextAlignment="center"
                        fontSize="40"
                        text="GENDER"
                        />

                    <AtomXFToggleButtonBar
                        items={this.viewModel.genderList}
                        value={Bind.twoWays(() => this.viewModel.gender)}
                        />
                    <XF.Label padding="10"
                        fontSize="25"
                        text={Bind.oneWay(() => `Selected gender is ${this.viewModel.gender.toUpperCase()}`)}
                        />
                </XF.StackLayout>
            </XF.ContentPage>
              );
    }

}

This above code snippet is easy to understand, items property of control bind the items which will come from ViewModel and the value property will tell us the toggle button selected by the user. There are different ways of bindings available in WebAtoms Xamarin forms.

ViewModel

import { AtomViewModel } from "@web-atoms/core/dist/view-model/AtomViewModel";

export default class MainPageViewModel extends AtomViewModel {

     public genderList = [
        { label: "Male", value: "male" },
        { label: "Female", value: "female" }
    ];

    public gender = "female";}

The public property gender and the genderlist will be bound to the AtomXFToggleButtonBar control in above view.
So now you know how to create a AtomXFToggleButtonBar in WebAtoms.

BY Ajay Singh
LikeCommentSave
LikeCommentSaveShare
0

POPULAR POSTS
17 Mar 2021
LATEST ACTIVITY
srikanth.naidu
liked this post.
malli
saved this post.
Show more
ARCHIVES
2021
2020
2019
2018
TAGS
javascript (41)
developer (25)
javascriptdeveloper (15)
coding (10)
Xamarin.Forms (10)
webatoms (8)
arrays (7)
xamarin (7)
android (6)
typescript (6)
function (5)
csharp (4)
iOS (4)
methods (4)
object (4)
update (4)
web-atoms (4)
arrayoperation (3)
decorators (3)
programming (3)
prototype (3)




Web Atoms: JSX (TSX + TypeScript) for Xamarin.Forms, Hot Reload Your App in Production Environment

PlaygroundSamples Repository