OnsenUI for mobile cross-platform front-end

This is an example of how to develop a nice mobile app for Android and iOS with a responsive template, which renders differently on desktop, tablet and smartphone screens.

mobiledoc1

A possible solution for the responsive part is a flexbox layout and a CSS3 with media queries.

Here it is a fiddle and a demo.

Now let’s see how to develop the app based on the OnsenUI framework.

First of all, you need to study some documentation and start from the classical to-do list example… Ready?!?

Ok, now define a menu item like a button to activate the responsive table

<ons-list>
    <ons-list-item data-filter="all" tappable>All</ons-list-item>
    <ons-list-header>Status</ons-list-header>
    <ons-list-item data-filer="uncompleted">Pending</ons-list-item>
    <ons-list-item data-filter="completed">Completed</ons-list-item>
    <ons-list-header>Responsive</ons-list-header>
    <ons-list-item id="resptab" >
        <ons-icon icon="ion-pie-graph" size="28px"></ons-icon>RxTable
    </ons-list-item>
</ons-list>

and set the event handler in the menu init

document.addEventListener('init', function(event) {
    var view = event.target.id;
    if (view === 'menu' || view === 'list') {
        todo[view + 'Init'](event.target);
    };
}, false);

which calls

todo.menuInit = function(target) {
    document.querySelector('#resptab').addEventListener('click',
        this.setRespTable.bind(this));
}

Well, now you can wrap the list in a nice navigator

  <ons-splitter id="splitter">
      <ons-splitter-side id="splitter-menu" page="menu.html" side="left" width="220px" collapse swipeable></ons-splitter-side>
      <ons-splitter-content>
          <ons-navigator id="myNavigator" animation="slide" page="list.html"/>
      </ons-splitter-content>
  </ons-splitter>

pushing a new page from a script through an event listener

document.querySelector('#resptab').addEventListener('click',
    this.setRespTable.bind(this));

and a function

todo.setRespTable = function() {
    ons.notification.prompt('Switch to responsive table view',{
        title: 'Responsive Table',
        cancelable: true,

        callback: function(label) {
            document.querySelector('#myNavigator').pushPage('table.html')
        }.bind(this)
    });
}

Onsen with REACT framework

In this case we can’t use the online IDE but we have to setup the monaca cli with npm. Follow the docs. My local IDE is Visual Studio Code.

Here it is the App.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {Splitter, SplitterSide, SplitterContent, Page, Button,
List, ListItem, Toolbar, ToolbarButton, Icon, title} from 'react-onsenui';

var App = React.createClass({
    getInitialState: function() {
    return {
        isOpen: false
    };
    },

    renderToolbar() {
    return (
    <Toolbar>
        <div className='left'>
        <ToolbarButton onClick={this.show}>
        <Icon icon='ion-navicon, material:md-menu' />
        </ToolbarButton>
        </div>
        <div className='center'>{this.state.title || 'Open Tweet Search'}</div>
    </Toolbar>
    );
    },

    hide() {
        this.setState({isOpen: false});
    },

    hide2title(d) {
        this.setState({ title: d, isOpen: false});
    },

    show() {
        this.setState({isOpen: true});
    },

    render: function() {
    return (
        <Splitter>
        <SplitterSide
            style={{
            boxShadow: '0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)'
            }}
        side='left'
        width={200}
        collapse={true}
        isSwipeable={true}
        isOpen={this.state.isOpen}
        onClose={this.hide}
        onOpen={this.show}
        >
        <Page>
        <List
            dataSource={['Searching', 'Lists', 'Twitting', 'Google Drive','Settings']}
            renderRow={(title) => (
                <ListItem key={title} onClick={() => this.hide2title(title)} tappable>{title}</ListItem>
            )}
        />
        </Page>
        </SplitterSide>
        <SplitterContent>
        <Page renderToolbar={this.renderToolbar}>
            <section style={{margin: '16px'}}>
            <p>
            Swipe right to open the menu.
            </p>
            </section>
        </Page>
        </SplitterContent>
        </Splitter>
        );
    }
});

export default App

Notice the array function to pass value to method

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s