Plugin 05: Accelerometer

In our series on plugins, today we’re going to cover plugin which can help us to work with Accelerometer sensor. This sensor is responsible to detect X, Y, Z co-ordinates of the devices. Using data received from this sensor, you can build games like TempleRun, where users can collect the coins by tilting the device.

There are different APIs for different platform and their usage is different too. First, lets see how we can use this sensor in different platform and then we’ll use plugin in Xamarin.Forms application.

Being Windows Runtime API, the API and its usage is same in Windows and Windows Phone. Here, you create object of the sensor and register for ‘ReadingChanged’ event. Whenever device position is changed, it is reported through that event and UI can be updated using Dispatcher.

In case of Android, it is again similar to Windows platform. Create object of SensorManager and register for SensorChanged event.

iOS is not any different. You create object of CMMotionManager and then listen to sensor for changes.

As you can see, for three different platforms the APIs are totally different. But with Plugins for Xamarin.Forms it becomes easy. You can use DeviceMotion plugin which can work across all these platforms. And the code for same looks like:

In this series on plugin we’ve seen how particular concept can be implemented in all the three platforms and how we can use plugin to make life easier. This will be be last post in this series, but there are many plugins available which you can explore and use in your projects. Do let me know if you want to cover any specific plugin. We’ll start with a new series in couple of weeks. Till then… happy coding :)

Namaste
Mayur Tendulkar

Advertisements

Xamarin.Forms for Windows Phone –Differences You Must Know

Xamarin.Forms is cross platform solution to create native apps. Whilst Xamarin allows us to build native apps for each platform (Android, iOS and Windows) with maximum code sharing, Xamarin.Forms goes one step ahead and allows UI code sharing as well. That means, I can create a TabbedPage and it will be rendered natively on each platform as ActionBar, UITabView and Pivot.

Xamarin.Forms allows creating UI in both C# as well as XAML. To keep things simple and less confusing across different platforms, there are new properties, new elements. XAML as a language is still the same. So we get to create objects from XAML, initialize them using InitializeComponent(). Everything is still the same. You just need to know the small differences. For example there is no Margin property, but there is Spacing property <grin>

While you can add a XAML page from XAML project template category, you should add one from Code -> Forms Xaml Page

image

The first thing to notice here is namespace

image

And this actually makes the difference. The two lines define the XAML page. First two are for Xamarin.Forms whereas last two are for normal XAML page in Windows app.

When creating User Interface, Xamarin.Forms provides Views (controls in our language) which abstract away the different controls in different platform. So, to create a TextBox on Windows Phone and a button which will be right aligned within StackPanel, following code will do the magic:

image

As you can see here, rather than StackPanel, StackLayout is used to represent controls positioned in stack (horizontal or vertical) and to avoid confusion with any stack in these platforms. This StackLayout will internally render native Stack of controls on each platform.

Also, in above code, Entry element is used, which is new to us. However, this entry represents a single line text-input control. That is, on Windows Phone it will become a TextBox.

Along with control names, some properties are named differently. For example Margin is now Spacing. We have left 25px space from each side in our code. Padding is still the same.  HorizontalAlignment is changed to HorizontalOptions. And possible values for that will be: Start [Left], Center and End [Right], with option to mention Expand which will take-up the space available. It also has FillAndExpand option, which is similar to Stretch mode.

While working with Font, usually we’ve different properties for FontFamily, FontSize, FontWeight etc. In Xamarin.Forms, we get one Font property which accepts multiple values (comma separated), which is parsed at runtime (Type Converters). So, below code can render TextBlock (label) with specified font details:

image

One thing to notice here is OnPlatform element. This element helps to override certain values (in above code, label renders with different font setting on different platform) for specific platform. There is a Device class with methods to work on platform specific code in XAML or C#.

The data binding concept is still the same as it was in traditional XAML.

image

The code above mentioned, with details is available at ‘An Introduction to Xamarin.Forms’ i.e.: http://bit.ly/1l1zg06 on Xamarin.com site.

Having said that XAML syntax is still the same. The features like code behind in partial class (with InitializeComponent), Type Converters, Property Element syntax, Attached Property syntax, Content properties, external library declarations (xmlns : somedifferentype=”uri”), adding event handlers, ResourceDictionary, StaticResources, etc… are still the same.

With this, I’m sure Xamarin.Forms will help C# and XAML developers to do Rapid Application Development on multiple platforms.

You can read more here at:

  1. An Introduction to Xamarin.Forms
  2. Getting Started with Xamarin.Forms: Basics
  3. Xamarin.Forms Samples
  4. XForms Labs (Open Source Project)

Happy Coding & Namaste
Mayur Tendulkar

#365 Admin

I carpool to work with Dev. We enjoy our ~45 mins. ride and while traveling we listen to 80’s/90’s songs (If given a chance he would kill me for my choice of songs Smile) and also talk about various things at our day-to-day job and how those can be automated. One of the thing that we discussed was basic – User Management. E.g. adding a user, resetting password, etc.… So, we thought about enabling IT admins to manage their Active Directory remotely.

Recently, I was working on a project where we had to use Azure Active Directory for user management. And I thought it can add value if ported on mobile. So – #365 Admin.

Using this tool, IT admins can browse through users, reset their password or add a new user. This is v1.0 release and I’m planning to add more features and release updates once in a month or as and when ready/required.

Thanks to Girish, Aviraj and Vittorio for all their support while building this app.

The app is certified in the store and will be available in general in coming weeks.

Thanks,
Mayur Tendulkar

//PUBLISH – Global Event Updates

Microsoft is hosting a global event //PUBLISH. This event is in series with //build, //learn and will be called //publish. You can find more information about this event at: https://publishwindows.com/ 

The idea behind this event is to help you get your apps in the store. If you’re working on any existing app (Windows Store or Windows Phone) or have an app idea, we’ll help you to complete it and submit it on the store. We at Pune User Group are happy to say that, PUG will be hosting this event in Pune. As this is a global event, we’ll be hosting it on the same dates i.e. 16th and 17th May. This post will give you idea about the event.

In Pune, you can find agenda and registration details here: Pune Link. Once you register, we’ll send confirmation mail to registered users and they’ll be invited for the event.

As it is going to be session+coding+support event, please make sure that your machine is properly configured. Please get the latest version of Visual Studio and Windows Phone SDK installed on your machine to avoid confusion at the venue. If you need any help with it, please contact us. My email ID is mayur.tendulkar {at} puneusergroup.org

And have I mentioned, there will be prizes too (for eligible candidates Smile)

Till then.. register and happy coding.

Mayur Tendulkar

It’s All About Controls (Part 2)

Thanks for reading Part 1 of this multi-part blog post. If you’ve missed, in Part 1, we talked about what has been added (or converged with Windows) in Windows Phone 8.1 SDK. This part will mainly cover the changes that are included in this SDK. These are important changes and you must make a note of it to build stunning apps. Perhaps, later, there will be part 3, in which I’ll cover some 3rd party components, which can be used in Universal apps. Do let me know if you want to cover anything specific.

Panorama Is Now Hub

wp_ss_20140421_0003 wp_ss_20140421_00014

With Windows and Windows Phone convergence, Panorama control from Windows Phone is changed to Hub control. It is similar to Hub control available on Windows and gives effects like Panorama. It also, share the same XAML in both the platforms

image  

image


StatusBar (SystemTray) Changes

StatusBar or SystemTray is top-most component on page, which shows various details:

image

In Windows Phone 8 apps, you could show/hide system tray from XAML. For example:

image

Now, in 8.1 (WinRT) apps you’ll need to use code behind to do it. For example:

image


Flyouts, Flyouts Everywhere

Flyout is a new control in WP8.1 SDK. As MSDN says, use it to display lightweight UI. Also, unlike a dialog, a flyout can be lightly dismissed by clicking or tapping outside it. You can create a flyout by using following code. And actually add a flyout to any control which is a FrameworkElement.

1  

image


Command From Your Bar

With WP8.1, you do get your old AppBar.. but also get CommandBar. This command bar shares code with Windows. It also have Primary Commands and Secondary Commands. Which represents main buttons and menu on bottom app-bar in WP app. Whereas, on Windows, they have positions on app-bar as left and right.

image

image


Zoom – SemanticZoom

With WP8.1, LongListSelector is gone. However, it is replaced with SemanticZoom – in convergence with Windows. This control actually has two views which are shown in different way according to Zoom In/Out mode. It will be another topic for blog. But to put it into simple words: you’ll see a large list of photos in Grid. But when you *squeeze* it, you’ll see a list. OR vice a versa as you design your view.

image

With these controls, there are some more changes in controls are added. Like RichTextBLOCK (not Box), WebView (not Browser). But I would love to keep this post short.  

In next series (rather, I’m planning to change the name Smile), I’m going to talk about API changes in Windows Phone 8.1 SDK. Meanwhile, do let me know your feedback and if you want anything more covered here.

Happy Coding

Mayur Tendulkar

What’s Next For Phone Developer?

If you’re a Windows Phone Developer, by now you might have heard about OR rather, upgraded your phone to Windows Phone 8.1. Microsoft, recently released Windows Phone 8.1 (Codenamed Blue) for Developers. To get these bits on your device, you need to a registered Windows Phone developer and need to install Preview For Developers app on your phone. You can find more information here Once you upgrade the phone, you’ll find lots of resources online to get to know what’s new in Windows Phone 8.1.

Now, as a developer, you’ve the phone to test and build apps for. However, to build applications for this latest version of Windows Phone, you need Visual Studio 2013 Update 2 (currently in RC). You can get these bits from here

As a developer, first, you need to unlock your phone. If you remember, there used to be Phone Registration Tool, which gets installed when you install Windows Phone SDK. Now, this tool is integrated into Visual Studio and you can launch it from Tools menu

Untitled

When you connect your phone, you can easily developer unlock it to test your applications on it.

image

Similarly, you can use, App Deployment tool to deploy XAP (or now Appx) to Phone.

image

New addition to these tools is ‘Windows Phone Power Tools’. And these tools does lot of work for you, right from verifying the app, checking the performance and what not.

image

Even thought, this release is titled as Windows Phone 8.1, there are so many features that *I* will personally call it Windows Phone 9 Smile

To give you idea about what’s new in this platform and how you can develop apps for it, Microsoft is hosting online events. These are all free online events. So, register now and get the benefits from it.

Building Apps for Windows Phone 8.1 Jump Start (April 29- May 1)
//Learn – Global Community Webcast (April 24)

Happy Coding,

Mayur Tendulkar

Localized Apps for Windows Phone 8.0

If you want your app to be used by millions, localize it. In countries like India, it is a must have feature. Think about having an app allowing farmers to sell their produce directly to the customers. In such scenario, many farmers don’t know English and are used to, to their native language. It doesn’t make any sense to build an app which can’t communicate and relate with them. Rather, having an app in their own language can help boost the productivity, sale and profit. Lets see how we can build such apps.

Normally, we use resource files to store strings and various resources pertaining to different locals. To help building such resources for different locals, Microsoft has provided Multilingual App Toolkit. Download and install the toolkit from here

Lets start with building a Windows Phone application, which will welcome users in their own language. For the sake of understanding, we’ll keep it simple, one page app. The design will look like the one as shown below:

image

For this, I’ve modified the code as shown below:image

To have text for both English and Hindi languages, lets first add a text for English in ‘AppResources.resx’ file under ‘Resources’ folder. After adding text, it should look like:

image

You can add as many resources as you want to have it displayed on the screen.

Now, to enable multilingual features (Hindi in our case), if you’ve installed the toolkit then from ‘Tools’ menu click on Enable Multilingual App Toolkit.

image

Now to add support for Indian language, right click your project and click on ‘Add translation languages’. This will bring following dialog. Select ‘Hindi’ and click on ‘OK’. Note: You can select as many languages as you want. So, your app can show data to any user in their own language supported by toolkit. :)

image

It will add another file named ‘AppResources.hi-IN.xlf’ in Resources folder (for each language selected above). Double click that file to open the toolkit. In this dialog, resource file for Hindi, will be already populated with content similar to AppResources file.

image

On this screen, click on ‘Translate’ > ‘Translate all’. It will automatically translate all the texts which can be translated. If anything fails, you can manually change it.

image

Now save the file and come back to Visual Studio.

Even though, we’ve added resource strings for English and Hindi, we haven’t bind it to actual text control. Modify the text control with following code:

image

This code, at runtime, binds the textblock to text in selected language’s resource file.

After this, first, try the app using default language i.e. English. When you run the app in emulator, it will look like:

1

Here, app shows text ‘Welcome friend’ in English. At this point, change the language and local to Hindi, India to test the app in Hindi language. To do this, go to Settings > Language+Region and change it to India with following setting.

1.2

Here, you may need to restart the phone. After restart, deploy the app again and you should see the following screen:

2

This is just the beginning of multilingual app. You can add as many languages as you want. And not just text, you can add any type of resource (image, icons sound, etc…) in your resource files.

By building multilingual apps, you can reach more users. This means more money and a successful app. Hope this helps.

Refer:

Cheers,

Mayur Tendulkar