Monday, April 29, 2013

Change Netbeans Java Swing Applications Interface Look-and-Feel to System Native Look

For some or other reason people at Oracle/Netbeans want us to use the horrendous (IMHO) Nimbus theme.

You can change that quite easily, this is one of the first things I do.

Alter your main class (don't put an interface on it), so look like the snippet below, which also shows you how to add an icon to your application.

Put the icon.png file in the same folder as the source, this Init class will call the MainForm (or whatever) and show it with the specified icon:
public class Init {
 
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        setLookAndFeel();
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                MainForm m = new MainForm();
                m.setTitle("EncodingConverter");
                m.setIconImage(new ImageIcon(getClass().getResource("icon.png")).getImage());
                m.setVisible(true);
            }
        });
    }
    public static void setLookAndFeel() {
        try {
            UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
        } catch (Exception e) {
            System.out.println("Error setting native LAF: " + e);
        }
    }
}

This does not however make the icon show on Windows, so add this: Right-click Form, Properties, set 'iconImages' to 'none', click 'iconImage'->'Value from existing component', click 'Property' then '...' then 'iconImage'

Now your Java application should look pretty much like other applications that run on the same OS, and yes, I WANT it to look like the other applications. :-)


Sunday, April 28, 2013

iPad & iPhone Viewport Rotate Screw-up

If you've designed a mobile site before (or if you're about to...) you would have seen or used this before:

<meta name="viewport" content="width=device-width, initial-scale=1">
That's all fine & dandy, until someone rotates their screen and then flips it back again. This is one way to solve that little irritating issue:

You can disable scalability with javascript until gesturestart with this script:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}


Saturday, April 27, 2013

Prevent Pinch-zoom on a Div or Whole Body


Sometimes you just don't want people to go pinch-zoom your site into oblivion, luckily, there is a way to do that :-)

     $("body").bind('touchstart', function preventZoom(e) {
        var t2 = e.timeStamp
          , t1 = $(this).data('lastTouch') || t2
          , dt = t2 - t1
          , fingers = e.originalEvent.touches.length;
        $(this).data('lastTouch', t2);
        if (!dt || dt > 500 || fingers > 1) return; // not double-tap
        e.preventDefault(); // double tap - prevent the zoom
        // also synthesize click events we just swallowed up
        $(this).trigger('click').trigger('click');
      });

Mobile Device Detection & Touch Screen Desktops

Not too long ago, I thought that this type of script was a pretty solid way of making sure that you redirect your traffic to a mobile site:

if( ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window && ('ontouchstart' in window || window.DocumentTouch && document instanceof DocumentTouch) ) || navigator.userAgent.indexOf('IEMobile') > 0){

location.replace('YOUR MOBILE SITE'); }

I originally got it from here: http://roughlybrilliant.com/jquery_mobile_best_practices#9

The question I've been asking myself lately is, with touch interfaces coming to desktop screens, this type of code that detects a touch interface will no longer just apply to mobile screens.

Due to this & the fact that mobile browsing growing exponentially, the best approach I believe is to just go for Responsive Design & one of the easier ways to do that is to use something like Twitter Bootstrap - http://twitter.github.io/bootstrap/scaffolding.html#responsive


Happy Coding!