Tag Archive | mobile

Windows Phone 8 and 7 – Locking the aspect ratio to portrait or landscape

I love apps that support orientation changes, it helps the user see content when they’re tucked up in bed, or just busting a gut on the way to work on the train. Sometimes however they are not suitable, or there might be bugs with one mode and not the other, and disabling a troublesome orientation might be the wisest move rather than drop quality. Here’s how you can do it in Windows Phone apps.

In MainPage.xaml, in the phone:PhoneApplicationPage section, add or change the following properties to set the available orientations to one of:

SupportedOrientations=”Portrait” 

SupportedOrientations=”PortraitOrLandscape”

SupportedOrientations=”Landscape”

You can then set the initial orientation to one of:

Orientation=”Portrait”

Orientation=”Landscape”

Advertisements

Debugging CSS in Mobile Phone Applications – live

This post is focused on helping you debug CSS styles and DOM for HTML Apps while they are executing on the device or simulator.

The instructions originate from a Windows 8, Visual Studio 2012 and Windows Phone 8 perspective, but the mechanisms apply to Android and iOS development too.

We are going to use an open source tool called Weinre to connect the device and your favourite Webkit web browser together. You’ll be able to highlight DOM elements, and change styles live in Chrome if you follow these instructions.

1. First you need the node.js command line.

Visit nodejs.org/download

Download and install the windows package.

2. Install Weinre

Go to your Windows 8 start screen, or the Start Menu and run the Node.js command prompt.

Node.js command prompt

You should see this window:

Nodejsopen

In the command prompt type

npm -g install weinre

You should see it getting a number of packages.

3. Prepare to launch Weinre (pronounced Winery by many)

Before we launch weinre, we need some information. A port number and IP/hostname.

For LAN debugging, use an ip address or a machine name, for outside of the LAN, you’re going to have to use a fixed IP or accessible DNS name. On a command line use “ipconfig” to determine your IPv4 address.

You can pick a port number (in my examples below I used 1234), and Windows will prompt you to unblock the port (but if you run into trouble, configure it manually).

4. Launch Weinre

In your node command prompt, type

weinre --httpPort xxxx --boundHost y.y.y.y

Where xxxx is the port number of your choice (8080 if you don’t specify it) and y.y.y.y is your IP address (or accessible DNS name).

You should see some output like this, and probably a firewall rule request will popup (ok it).

WeinreRunning

5. Prepare your HTML app

In your HTML App, put the following line of code whereever you like (preferably early).

<script 
src="http://y.y.y.y:xxxx/target/target-script-min.js">
</script>

6. Run your app in the windows phone emulator (or ADT/iOS Simulator)

7. To view your mobile app’s browser styles/DOM and change them via Chrome

Open Chrome and type in

http://y.y.y.y:xxxx/client

You should be able to now use page inspection, Elements, console but not debug javascript. 😦

Allowing remote access to your IIS Express service

While developing an ASP.NET application with the IISExpress service, you might like to see how it looks on your mobile device connected to your LAN via Wi-Fi, or just any computer connected to your network.

If you do not happen to have the full IIS installed already, you can allow your IISExpress service to serve remote pages quickly and easily by following these steps.

Warning: By following these instructions you are solely liable for any security breach or problems you may face. Do not use this information if you do not agree with that statement.

Assume your machine name is ‘jedi’, and your port number is ‘16253’, replace appropriately.

1. Run a command prompt as administrator, and type in

netsh http add urlacl url=http://jedi:16253/ user=everyone

2. Open up the following file in Notepad or Visual Studio

MyDocuments\IISExpress\config\applicationhost.config

change the binding from:

<binding protocol="http" bindingInformation="*:16253:localhost" />

to:

<binding protocol="http" bindingInformation="*:16253:jedi" />

3. Restart the IISExpress service (use the tray icon or task manager, or a command prompt, type issreset).

4. In Visual Studio, change your Project->Properties->Web settings to launch http://jedi:16253 instead of http://localhost:16253

5. In a web browser on your development machine type http://jedi:16253/

6. Assuming all is good – Open up the port on the firewall.

        • Goto the Windows Firewall with Advanced Security panel
        • Create a new inbound rule
        • Click ‘Port’
        • Click ‘Next’
        • Click TCP
        • Enter a specific port 16253
        • Click ‘Next’
        • Click ‘Allow the connection’
        • Click ‘Next’
        • Click ‘Next’ (you could untick Public)
        • Give it a name “My MVC App” and press Finish.

7. You should now be able to access the page on the mobile device when connected to the Wi-Fi using http://jedi:16253/

For more advanced information see Scott Hansleman’s blog post. Also read some of the comments below where others have found problems and solutions.