Mailing-List: contact user-help@ofbiz.apache.org; run by ezmlm
Precedence: bulk
Reply-To: user@ofbiz.apache.org
Received-SPF: neutral (athena.apache.org: local policy)
From: "Skip" <skip@thedevers.org>
To: <user@ofbiz.apache.org>
Subject: RE: getting screen.width in ftl
Date: Thu, 17 Jan 2013 13:26:24 -0800
Message-ID: <NIEHIAPGFLPDLIACIOBOMEOADBAA.skip@thedevers.org>
MIME-Version: 1.0
Content-Type: text/plain;
	charset="us-ascii"
Content-Transfer-Encoding: 7bit
Importance: Normal
In-Reply-To: <1358416105854-4638975.post@n4.nabble.com>

Thanks to everyone for this discussion.  Paul, I agree with Teds comment
"the signal to noise ratio is abysmal" when searching for responsive design.
I too would love to know your favorite resources.

Nick, thanks again for your input.  In my view, your approach for simple
content (CSS hidding of certain elements) is ideal.  Have a look at qz.com
to see it in action.

I have spent a month or so on the handheld aspect of this project and have
yet to find anything compelling for responsive design for data entry forms.
Lots of stuff for simple content, but structure form responsive design a
different matter.

What I do know from experience is this, responsive design is more than just
getting the screen to look right on a nearly unlimited number of devices.
Bandwidth, at least in the U.S. for handhelds is abysmal.  Nearly
instantaneous page loads on wired connections take upwards of 30 seconds on
a "fast" 3g connection.  So, loading a bunch of hidden content, especially
images is a bad thing.

Having said that, in my exprerience, @media queries are the absolutely best
choice when it works.

It doesnt work however for complex data entry forms that are used over and
over.  For example, lets say that you have a form with 16 input fields and
maybe a few dropdowns.  If you use jquery-mobile style css, this all comes
as a long list of entries, one per line on a small device.  If you need to
keep some of these fields grouped together, it is VERY difficult to achieve
like this.

Here, javascript was essential for me.  Using javascript, I can use ajax to
retrieve field labels that are abbreviated for small devices and more
informative for desktops.  The choice of those labels is made on the server
based on screen width.  Similiarly, I can use javascript to dynamically set
classes based on the screen size.

Thanks to all
Skip

-----Original Message-----
From: Paul Piper [mailto:pp@ilscipio.com]
Sent: Thursday, January 17, 2013 1:48 AM
To: user@ofbiz.apache.org
Subject: Re: getting screen.width in ftl


I would not recommend to do anything with Javascript in this case.
Responsive
design is the most obvious solution and should be the most preferrable.

There are alot of resources available that can show you how to do this
properly for the different standard solutions. In adddition to your own
solution, you should take care of more than just the max-width:800 sized
versions and focus on the different standards that are available.

If you were to go the alternative route, using js would not be an option,
since you do run js after the initial page load, so js based redirects would
only increase the heap. Rather, you could try to get the client from request
header and redirect based on that or, preferably, use your actual
httpd-server to handle the redirect.

With Apache you could use the following:

RewriteEngine On
RewriteBase /

RewriteCond %{HTTP_USER_AGENT}
android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ho
ne|od)|iris|kindle|lge\
|maemo|midp|mmp|opera\ m(ob|in)i|palm(\
os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vo
dafone|wap|windows\
(ce|phone)|xda|xiino [NC,OR]
RewriteCond %{HTTP_USER_AGENT}
^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a\
wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go
)|as(te|us)|attw|au(di|\-m|r\
|s\
)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|c
cwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|d
ica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os
|wa|ze)|fetc|fly(\-|_)|g1\
u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(
pt|ta)|hp(\
i|ip)|hs\-c|ht(c(\-|\ |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(\
|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi
|keji|kgt(\
|\/)|klon|kpt\ |kwc\-|kyo(c|k)|le(no|xi)|lg(\
g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|m
c(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|\
|o|v)|zz)|mt(50|p1|v\
)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|o
n|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|p
g(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\
-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|s
a(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-
|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v
\
)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-m
o|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|t
e)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-
|\
)|webc|whit|wi(g\ |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-)
[NC]
RewriteRule ^$ http://m.ilscipio.com [R,L]


Alternatively for java, you could use

android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ho
ne|od)|iris|kindle|lge\
|maemo|midp|mmp|opera\ m(ob|in)i|palm(\
os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vo
dafone|wap|windows\
(ce|phone)|xda|xiino

to detect within the request.getHeader("User-Agent").

Regards,
Paul


--
View this message in context:
http://ofbiz.135035.n4.nabble.com/getting-screen-width-in-ftl-tp4638951p4638
975.html
Sent from the OFBiz - User mailing list archive at Nabble.com.