Menu Close

Category: Mobile Development

Enable Kiosk Mode in Windows 8.1

by blogs.msdn.com

Windows devices are widely used for kiosks where the users should be able to use only an application and nothing else. This makes sure that an anonymous user can use the kiosk and the application, but not harm it in any way. To achieve this, you had to lock down the Windows device and harden it for obvious security reasons. But, locking down a Windows device traditionally was a difficult task.

 

Windows 8.1 comes with an excellent feature where you can lockdown the device allowing the user to use only one application. You need to keep in mind that this application needs to be a modern application and cannot be a desktop application. So, if you are going to use it for your customized company application (For e.g. ATMs, Flight Schedule), the application should be a modern application.

 

Let’s see how we can do that.

Checking for updates from inside a windows phone app

by pedrolamas.com

A few months ago, I started receiving some crash reports from one of my most successful apps, Geosense!

After fixing the issue and publishing an updated version of the app, until today I still get quite a few reports from the very same old version, but none from the updated one!

This has got me to think on the reason to why people don’t update their apps! Here are some reasons:

  • No constant internet connection
  • Removing the Store tile from the Home screen
  • Don’t care about updating apps!

iphone webapps 101: getting safari out of the way

by http://rakaz.nl

An iPhone Webapp is little more than a website specially build or adapted for the iPhone. It’s just a standard HTML page, sprinkled with some CSS and JavaScript. While browsing websites on a phone may sound quite limited and problematic, Safari – the browser on the iPhone – is perhaps one of the most advanced browsers around and surpasses on some areas even desktop browsers. Still, the Webapp runs in a browser and that causes some problems for those of you who want to make the application look and feel like a native app. Instead of making the application feel like a webpage we want to do away with the default behaviours and interface of Safari.

 

ADDING YOUR APP TO THE HOME SCREEN

One of the first problems web app developers will face is turning the app from a webpage that runs inside of Safari into a web app that can be launched from the iPhone home screen. Apple has made this easy for us; Safari has some build-in functionality for installing websites on your home screen. Just load the application in Safari and click on the + button in the bottom toolbar. Then select Add to Home Screen.

There are some things you may want to keep in mind if you want to run your Webapp on the home screen. First of all the title on the home screen can be customized by the user, but the default is the title of your webpage. There is limited space beneath each icon. I would suggest keeping the title of your webpage and thus the name of the home screen as short as possible. My own application is called MediatankController for iPhone and iPod Touch. You can imagine this will not fit on the home screen. So I simply use the title Mediatank which fits perfectly underneath the icon.

<title>Mediatank</title>

Icons

How the iPhone changes the icon for display on the home screenThis brings us to the icon itself. By default the iPhone will take a little screenshot of the application and turn it into an icon. Fortunately there is also a way to specify your own custom icon. First of all you will need to fire up Photoshop or your preferred application and create the action icon. The width and height of the icon must be exactly 57 pixels by 57 pixels. You don’t need to add the reflection or add the rounded corners to your icon that is something the iPhone will do itself. There are some good tutorials on the web so I will continue with the assumption that you have created the icon and saved it as a PNG file.

You can now tell the iPhone to use that icon by adding a link element to the head of your webpage. The link element has a custom rel attribute with the value apple-touch-icon.

<link rel="apple-touch-icon" href="index.png">

Precomposed icons

You can determine which part of the icon is shiny using precomposed iconsIf you want to add the reflection to the icon in only specific regions, you can also instruct the iPhone to leave the icon alone. In that case you can simply add the reflection in Photoshop instead; this is what Apple calls a precomposed icon. Even if you use a precomposed icon, the iPhone will still add the rounded corners. It is simply not possible to create rectangular icons. The example of a precomposed icon is only subtly different from the regular example above. Just take a look at the gray gradient on the background of the icon. In the normal icon the reflection extends into the background, while in the precomposed icon it is only visible in the black circle.

<link rel="apple-touch-icon-precomposed" href="index.png">

RUNNING YOUR APP FULL SCREEN

An Webapp running inside SafariWe’ve got our app on the home screen, but it still launches Safari and doesn’t run full screen. The trick is to add a custom meta tag with the name apple-mobile-web-app-capable that will tell the iPhone to launch this application as a Webapp instead of a normal web page. This will remove the top address bar and the toolbar at the bottom. This also means that you must supply the complete navigation of the application, because the back button will also be gone.

A side effect of this meta tag is that the application will also act differently if it is running inside of Safari. Instead of a fixed address bar, it will remove the address bar after each reload. You can get the address bar back by manually scrolling back to the top.

<meta name="apple-mobile-web-app-capable" content="yes">

REMOVING THE DEFAULT ZOOM AND PINCH GESTURES

The ability to zoom the user interface is something we want to preventThe Webapp runs full screen, but it still looks and feels like a normal website. You can use gestures to zoom in. This includes any interface elements that you created. If a native app allows you to resize the contents, such as a photo it will not resize the user interface components such as the toolbar and any buttons.

Secondly the width of the page is wider than the screen, which requires vertical scrolling. Most native apps that require scrolling only allow you to scroll in one direction. Most apps are taller than the screen instead of wider than the screen. The default Safari behaviour is different from how most native apps look, so we need to remove these behaviours. Luckily this is quite simple and requires that we add another meta tag with the name viewport.

<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=0;">

If you look closely at the viewport meta tag, you’ll notice that we give a couple of separate instructions:

  • width=device-width, which sets the width of the web page to the width of the screen. In case you hold the iPhone vertically this will be 320 pixels, if you hold the iPhone horizontally it will be 480 pixels.
  • initial-scale=1.0, when the application launches it will not be zoomed in or out.
  • user-scalable=0, turns of the ability to zoom in or out using gestures.

The result is a web page that is always 320 pixels or 480 pixels wide depending on how you hold the phone and cannot be zoomed in or out. However, if the page is taller than the screen is capable of showing, the user will still be able to use the default gestures to scroll to the bottom.

DISABLING THE CALLOUT SHEET

touch-calloutWe now have a Webapp that runs full screen and is always shown at the correct scale. Most tutorials stop here, but during the development of my own Webapp I ran into a couple more issues. The first is the fact that every time the user touches and holds a link or image a callout sheet will appear giving some options such as save the image, copy the link or opening the link in a new window. This is something we want to prevent, because while we may use links, those are only for internal navigation inside our Webapp and not links in the traditional sense.

Disabling the callout sheet is quite simple and can be achieved by adding the -webkit-touch-callout CSS property and setting it to none. Now you can hold any link or image for as long as you want without getting the default Safari behaviour.

<style type="text/css">
<!—-
    * {
        -webkit-touch-callout: none;
    }
-->
</style>

REMOVING THE HIGHLIGHT COLOUR FROM LINKS

No more ugly highlight coloursOne of the little things that bothered me quite a bit was the fact that Safari will add a transparent highlight colour to a link after it has been clicked. For a webpage that might be useful, but when I create a button I want to define the active state myself and I definitely don’t want some transparent colour to cover up my carefully created buttons.

Once again this can be achieved by a little CSS code. The highlight colour can be customized using the -webkit-tap-hightlight-color property, which supports all of the regular colour values. One colour value is particularly interesting to us:rgba, which allow us to specify the transparency of the colour. We don’t want it at all, so we can make it completely transparent.

<style type="text/css">
<!—-
    * {
       -webkit-tap-highlight-color: rgba(0,0,0,0);
    }
-->
</style>

PREVENT THE AUTOMATIC RESIZING OF TEXT

One particular handy feature of Safari is that it is able to resize text automatically and reformat it for use on the smaller screen of the iPhone. If we want to build a Webapp this feature will need to be disabled, because it is only useful for websites which are formatted for a large screen. Our Webapp is build for use on the iPhone and does not need any help from Safari to make it more readable.

<style type="text/css">
<!—-
    * {
       -webkit-text-size-adjust: none;
    }
-->
</style>

DISABLING OR LIMITING COPY AND PASTE

Ouch... By default you can select the user interfaceFinally there is one thing left to do. Disabling or limiting the most sought out feature of iPhone OS 3.0: Copy and Paste. Once again this feature makes sense on a web page, but for most interface elements of an application it is certainly not wanted. We don’t want our users to be able to select and copy the buttons, the header or the footer.

Using the -webkit-user-select property we can determine which elements can be selected and which cannot. My advice is turn it off completely by default and enable it only for those elements you want to be able to be copied.

<style type="text/css">
<!—-
    * {
        -webkit-user-select: none;
    }

    .instructions {
        -webkit-user-select: text;
    }
-->
</style>

 

Full Screen Web Apps

By http://mobile.tutsplus.com

One of the first problems encountered when building a mobile web app from scratch is the amount of space consumed by the browser’s address bar. This tutorial will demonstrate how to reclaim the screen real estate otherwise lost to the address bar while accounting for orientation changes, content height problems, and internal document links.

Defining the Problem

One of the most difficult aspects of designing for mobile devices is the limited amount of screen space available. Mobile web applications must be streamlined and intuitive in order to compete with native applications, and the presence of the browser’s user interface often only subtracts from the user experience and the site aesthetic as a whole.

For example, consider the following mobile web site screen shot:

Web site with browser chrome

The above screenshot was taken on an iPhone 4 with both the Mobile Safari address bar and toolbar displayed.

Creating a Horizontal ListBox in Silverlight and Windows Phone

By eugenedotnet

Creating horizontal ListBox element is obviously a pretty easy thing to do, but anyway I have decided to post XAML for that.

<ListBox ScrollViewer.HorizontalScrollBarVisibility="Auto">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
    <ListBox.ItemTemplate>
        <DataTemplate>
           <Your control... />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Debugging Your Android App Wirelessly on an Android Smartphone

By JesseChen.net

Developing for Android is very easy to set up and get started on your computer. However, a gripe shared among others, not just me, is that the Android emulator is too slow. On my old computer, it would take 1-2 minutes for it to boot up. In debugging mode, the response time is very slow.

There are two methods:

  1. Connect your phone to your computer and find the drivers online (if needed) to allow adb to recognize your phone as a running Android device. Eclipse and the ADT plugin will take care of the rest.
  2. The super dumb way is to take the .apk file that your Android project generates every time it compiles (at yourappfolder/bin/yourapp.apk), connect your phone to the computer via USB, push it to your phone, and install. But that is also very inefficient (and dumb)! What if you just wanted to test a small change real quick? You would have to keep your phone tethered to the computer, and constantly overwrite your .apk file and re-install your application each time you wanted to test it on your phone.

I have a way that allows you to test your Android application on your Android smartphone without physically connecting your phone to your computer. All it requires is a rooted Android smartphone, and a shared wifi network between the computer and the phone.

Note: This method requires a phone with root access, and accessing adb over a wifi network might be a security concern for some. Take this method for what it’s worth. If you are doing this on your own home network that is trusted and encrypted there shouldn’t be a problem, but I would avoid doing this in a public wifi network.