PDA

View Full Version : ExtTouch



mitchellsimoens
10 Jun 2010, 6:02 PM
I'm starting a project that will change the components into "touch" size components. I mean if someone has a touchscreen computer, components need to be resized in order to be able to use with fingers. I am not working on problems (like dragging), just the UI part of the components for now. My touch screen will be here in 2 days so I will test to see if things work and will look great.

First component done is the Window component!
20904

Have a simple Panel component:
20915

And a simple TabPanel component:
20916

I will be working on other components and if you'd like to help, let me know!

mitchellsimoens
11 Jun 2010, 8:59 AM
Have added a simple panel and simple tab panel. These are just simple changes so we'll see if they are what I need them to actually be.

aw1zard2
11 Jun 2010, 11:32 AM
Really its mostly just changing the css themes to be bigger for fingers to hit them. My current project already uses a touch All-in-one and Ext JS 3.2.1. But until browsers can detect a touch screen which is coming in some and already there for others I just made 2 css themes one for regular browsers with mouse and another for touch.

=)

mankz
11 Jun 2010, 5:56 PM
@aw1zard2: Care to share some of your CSS magic for touch-capable browsers? :)

mitchellsimoens
12 Jun 2010, 5:33 PM
@aw1zard2: Care to share some of your CSS magic for touch-capable browsers? :)

Yeah, no reason to reinvent the wheel. If you cannot then I will continue and release the "theme" with no license.

aw1zard2
14 Jun 2010, 7:11 AM
I'm not able to, cause all of our graphics we used in special areas was made in house all icons, etc.
I'd have to tear apart the css and what not.
For some of the buttons to have a common look I did make new components as well as using a container.

I'll post some of the early preview shots I have in the forums.

I made a transparent gif in grayscale to add depth to the buttons, then using css I change the background color and size I need. I have 2 sets of the shading images one square and one round corners for IE or for other browsers.

The select Employee is a custom tpl dataview and the welcome guest user image with black buttons is my custom container that changes to different layouts depending on the number of buttons but the buttons stay the same size. The welcome guest user image with gray buttons is using Ext JS Buttons with scale of 90px by 90px.