How to convert extend UI project to implement View and make number pad pop

Hello, I want to implement a

NumberField

in my application i’m using
import com.vaadin.addon.touchkit.ui.NumberField;

I used that import because I wanted to model
Vaadin TouchKit Sampler
which provide a mobile view. When the android users touch that field area, instead of the onscreen keyboard I want the onscreen number pad to appear. So far this failed. Since i’m following the
Quicktickets Dashboard Demo,
and i’m new to Vaadin by the way plus this demo seem easy to follow, I am confuse about how to convert a class that
extends UI
to
implements View
. So I have two projects touchkit and quicktickets, and they both are different, but I want to combile the mobile view feature out of
Vaadin TouchKit Sampler
into
Quicktickets Dashboard Demo
so only the number pad appears. In touchkit I am also confuse about how I should deal with UIProvder, and the UIservlet. Is there an alternative for
extends VerticalLayout implements View
to work in
Quicktickets Dashboard Demo
like
Vaadin TouchKit Sampler.
[i]
Just to clearify I only want to use a NumberField in my application so when orders are made only the number pad popup appear on any android/mobile/tablet device.

Thank You.
[/i]