Microsoft Build 2016 Live Streaming (March 30 – April 1)

Those who are not able to attend Microsoft’s event, which is pretty much every regular person in the world, Microsoft provided an official live stream on its website.

To watch the //build conference, build live streaming option added in our blog in below of this article, and don’t miss a single announcement by Microsoft from the conference.

//build

We have //build Key Note streaming in local offices of India(Bangalore, Delhi and Mumbai), and you can also get a list of local Microsoft office locations from here.

You can also download Microsoft Build official mobile app for all three major mobile platforms from below links:
1. Windows
2. Android
3. IOS

Please read more about MS Build 2016 from here.


 

Xamarin.Forms Label Renderer for Displaying many lines

I am back again with a post on Xamarin.Forms Custom Renderer. My earlier post was on the creation of a Custom Renderer for Entry.

Well, this time, we are going to solve something different which might not have been faced by many users. Sometimes, it happens that you want to display some lines of Text to the user like Read Me or just some Random text. For instance, consider the following code snippet:

<Label Text="{Binding SomeText}" HorizontalOptions="Fill">

Here, when the App is run, the text will be filled in the Label. However, if the number of lines crosses 100, the text will get clipped. In case, you want some more lines, you can always create a Custom Renderer for Label.

You can try to create something like this:

In Android

public class CustomLabelRenderer: LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);
        Control.SetMaxLines(500);
    }
}

In iOS

public class CustomLabelRenderer : LabelRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Label> e)
    {
        base.OnElementChanged(e);

        if (Control != null)
        {
            UILabel label = Control;
            label.Lines = 500;
        }
    }
}

Hope this helps someone.

Happy Coding!
 

Trying Xamarin.Forms Entry Renderer for Corner Radius

I am always amazed by the capability of Xamarin.Forms Custom Renderer. I wanted to try something and thought of extending the Entry Custom Renderer for Windows Phone App initially to try and provide Corner Radius for Textbox.

If you are a Windows Phone developer, then you already know the complexities. Generally, the TextBox element in Windows Phone, doesn’t have the property of CornerRadius. Corner Radius, generally provides the Curved borders, which in this case would provide for the Textbox control. Anyways, in order to provide a separate border, we generally have to nest the TextBox inside a Border element to provide the Corner Radius.

<Border Margin="5" Padding="5" BorderThickness="1" BorderBrush="Red" Background="AntiqueWhite" CornerRadius="10">
    <TextBlock Text="Lorem ipsum"/>
</Border>

Now I have tried to achieve somewhat same in Xamarin.Forms using Custom Renderers for Windows Phone.
The code is currently checked-in here.

Happy Coding!

Windows 10 UWP App templates for Adobe Photoshop

Microsoft has now released the UWP App Design Templates for Adobe Photoshop.

What does this mean?

Say you are a designer or a developer who wants to get their dirty on the design side [Pun Intended], can now make use of this design template and create stunning designs. It is said that, in order to build something good, you need to first have a rough design as it gives the idea of what exactly needs to be done. Even helps in order to work out the flow required between the pages. This was generally done either using Pen & Paper or on a Drawing Board. Nowadays, we have the designers who try and create these designs or rather Wireframes. But the problem was that for every  segment they have to go and create a duplicate of all the controls like Buttons, Textbox etc. As a practise, every developer tries and creates some control templates from where they can be taken and used.

Earlier, these templates were only available for Microsoft Powerpoint and Adobe Illustrator. Now Microsoft has released the template for Adobe Photoshop as well. It seems to have happened because of the feedback provided during the Build 2015 Event. For more information, please visit this link.

Download the UWP App Design Templates for Adobe Photoshop

Controls - 1

Controls – 1

Controls - 2

Controls – 2

Fonts

Fonts

Colors

Colors

Screens

Screens

 

Check if Browser supports WebP

WebP is a new image format that provides lossless and lossy compression for images on the web. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.

Since, WebP reduces the size of the image to almost 25%-30% which is a big deal when it comes to websites employing large images. The current trend is that almost every site is either based on responsive design or is trying to employ a similar mechanism so that it can be opened in the Mobile Browsers. If you look at the Smart Phones nowadays, they have a huge processing power, however, the internet speed is still behind and thus creates an issue when it comes to the loading of numerous images. Because of this we try things like gzip or caching or something else.

Anyways, moving on, I know you might say that still WebP is not supported. No issues, what you can do is keep copies of images in various formats like WebP as well as Jpg. This way, if the browser doesn’t support WebP you can always make use of JPG.

Here is a small script that I have got and use in my sites:

function testWebP(callback) {
    var webP = new Image();
     webP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw' + 
'AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA';

     webP.onload = webP.onerror = function () {
          callback(webP.height === 2);
     };
};

testWebP(function(supported) {
     // Probably add css class like 'webp' or 'no-webp'
     console.log((supported) ? "webP 0.2.0 supported!" : "webP not supported.");
});

Now all you have to do is use this script in your site and update the image sources accordingly for some of the bigger images.

Happy Coding!

Azure Mobile Service with Windows Phone

Are you a Windows Phone or Windows Store App developer?
If yes, then this is for you.

When we create an app, we try to store as much possible data on the phone. But with the advancement of data services, it is now easy to store the data on the services. But the question comes as What is Azure Mobile Services and Why do we need it?

What is Azure Mobile Services and Why do we need it?
As stated in the documentation, it allows to add a cloud backend to your app in minutes with the following features:

  • Host a .NET or Node.js web API with 24×7 monitoring and management
  • Use single sign-on with Active Directory, Facebook, Twitter, and Google
  • Push notifications to individual users and dynamic audience segments
  • Store data in SQL, Table Storage, and MongoDB
  • Access on-premises systems, Office 365, and SharePoint
  • Use cloud-based sync to build apps that work offline

How to create Azure Mobile Service? Please note we are going to make use of the .Net backend and Visual Studio.

Step 1: Open the Azure Management Portal and sign in with your Microsoft Live Account.

Step 2: From the left pane, select the third item, Mobile Services. Here you will see your existing Mobile Services, if any.

Step 3: We will try and create the Mobile Services from within Visual Studio.

Step 4: Open Visual Studio and click on File -> New -> Project

AMS1

Project Template

Step 5: Select Cloud from the Left Pane and then select Azure Mobile Service on the right and click OK

Step 6: Once the project is created, you will notice that the project is mostly making use of Web API. This will create all the methods required for CRUD operations.

AMS2

Sample Files

Step 7: In the project, you will get a demo template for a Todo Application. You can go ahead and create Models and Controllers as per your choice as it is done for the Todo Sample.

Step 8: After adding the respective Models and Controllers, you can go ahead and publish the Mobile Service on cloud.

Step 9. But wait, if you want to debug it, you can always do that before publishing. Remember this is a normal MVC Web Application. So our old friend from Keyboard still holds good. So let’s go ahead and press F5

Step 10: If everything goes well, then you will see a page with a smiley. Something like this.

Azure Mobile Service

Azure Mobile Service

Step 11: Now that the Mobile Service is created, you can always play around with it after clicking on the try it out link.

Step 12: It presents with a clean and simple UI showing all the methods available for Rest Calls.

API Documentation

API Documentation

Step 13: If you want to test the Rest Calls, you can click on the links and it will easily allow you to test all the operations. But we are here to go to the next step in connecting this service with a Windows Phone App.

Step 14: Assuming that you have an existing Windows Phone App or you have just created a new Windows Phone App, we will go ahead and open the project.

Step 15: In order to make use of our new Azure Mobile Service, there are some pre-requisites. You have to install Windows Azure Mobile Services package using NuGet.

Step 16: Once installed, we need to add just one line and our App is connected with the Mobile Services. For this open the App.xaml.cs and add this line after the

public partial class App : Application
{
    // Use this when trying to debug locally
    public static MobileServiceClient MobileService = new MobileServiceClient("http://localhost:23846/");
    // Use this when deployed on cloud
    //public static MobileServiceClient MobileService = new MobileServiceClient("", "");
    ...
}

Step 17: Now that our App is ready to make use of Azure Mobile Service, we have use this Code to access Azure Mobile Service

public partial class MainPage : PhoneApplicationPage
{
    private MobileServiceCollection items;
    private IMobileServiceTable speakerTable = App.MobileService.GetTable();

    // Get list of items from the database using AMS
    private async void RefreshCandidateItems()
    {
        items = await speakerTable.ToCollectionAsync();
        ListItems.ItemsSource = items;
    }

    // Insert item to database using AMS
    private async void InsertTodoItem(Speaker speaker)
    {
        await speakerTable.InsertAsync(speaker);
        items.Add(speaker);
    }
    ...
}

Step 18: You can now publish the Azure Mobile Service and get the Application Key.

Step 19: Update the Azure Mobile Service Client in the App and update the Mobile Service Url and Application Key.

Step 20: You App is now successfully connected with the Azure Mobile Service.

Happy Coding!!! 🙂

TechEd India 2014 Recap – Migrating your WP8 Silverlight App to WP8.1 RT

I am very happy to say that I got the chance to present a session on Migrating your WP8 Silverlight App to WP8.1 RT. It was mostly based on the post which I had written earlier. Though, this time I had a good audience who have already tried migrating and faced certain kind of issue. In this post, all I am going to do is push the top 5 questions which I had got there.

Q1: What is the need to migrate? or Why should I migrate?
Though this is the very basic question, but this was one of the most asked questions. Whenever, we here words like Migrating or Upgrading, we start to get a bit scared. Well the only reason is that we as developers want our app to have lots and lots of features and we don’t want to go back one step and then upgrade our code to get the same or even older kind of look. But what we forget is that, deep down when the architecture and platform are released and our apps are already migrated then we can have various advantages. I can name a few:

  • Page Transitions are now native
  • Universal App readiness
  • Debugging

Well, the most important of them all is Universal App readiness. We would love to push our apps to multiple platforms. The only reason we are not doing still is because we don’t have the time. But if you think about it, migrating from WP8 to WP8.1 RT already does more than half of your job. Once migrated, you get the advantage of WP8.1 and most of your code along with UI can be Shared in a SharedProject.

Q2: Any important points to keep in mind?
There are various important things to keep in mind. However, they all vary based on scenarios or the type of App you are migrating or even building new. Let’s jot down a few:

  • Scalability: Not talking about Cloud but Scalability in terms of pushing the same app in multiple platforms.
  • Code Reusability: Want to push your app for Windows Store? Well, the moment you migrated your app, your code is now ready to be shared across for Windows Store App. But what if, you want to make use of Xamarin and push the same code for Android and iOS. You can always extract the methods which can work with common .Net code like Models, HttpClient  etc and push them to a PCL (Portable Class Libraries). Once you do this, your code can easily be shared across platforms.
  • Mobile App and not Web App: Keep in mind that the App you are building is for Mobiles and not Web. When you think like that, then you will always think about the Data consumptions and speed. It is always better to make small Web calls than make a single call and wait for over a minute to get everything. Because, that way user will have to wait for a minute and you do not want to test their patience.
  • Activity Indicator: Activity indicators are anything like Progress Bar on the SystemTray or a simple Progress Image. The only reason to make use of this is to notify the user that something is happening. It’s like telling them “Please be patient”.

Q3: How often to update the App?
This is something that needs to be taken care by the developer. The general way of dealing this is by adding some or the other feature and keep your app updated. Rather than trying to release all the features at once, one should try releasing features coded properly without any issues. That way the user will appreciate your app as well.

Q4: What should I do for plug-ins not available for WP8.1 RT?
This is a tricky situation. It depends on what kind of plugin you have made use of. But still, when you reach a point where the plugin is not available, you can always tweak your design. If the design suits your need, then your app size will go down more because the plugin might be of some big size doing various kind of work but you were making it use for a single feature. Now that your design is tweaked, and your code is yours, you can always add new features to it without worrying about anything.

Q5: Once migrated, should I continue updating the WP8 App?
This is totally up to you. You are the developer. If you think that you have the time and energy to maintain the various version of the same app then there is no issue in that. However, if you are not able to then with a single update, you can notify the user that this will be a last update to this app because now the app is being migrated to WP8.1 and they should consider upgrading their Phone to WP8.1. Also, ensuring them of new features will get your users to come to your app. In case, you think there is a major bug in the WP8 app, then you can always fix that issue.

I believe the QnA had many more questions which were technical, but they were mostly based on my earlier post. This QnA is mostly theoretical where I just talk about the experience and sharing some knowledge based on my experience. In case, you have any questions, feel free to reach out.

Happy Coding!!!

Speech To Text in Android using Xamarin

On this fine day of Teacher’s Day, my mentor from Aditi asked me if I know any samples on creating a simple app for Speech to Text recognition in Android. I searched on the net but did not find much result. So then I thought, why not I create a sample, push it in Git and send him the link.

So after an hour the sample was done and pushed to Git. Xamarin allows the use of Android APIs to be utilized in a very easy way.

In just few lines of code I was able to use the RecognizerIntent to launch an activity that will prompt the user for speech and send it through a speech recognizer. The results will be returned via activity results in the event handler OnActivityResult.

The sample can be downloaded and used as is from here.

Share Mouse and Keyboard using ShareMouse

 

As a developer you tend to have multiple desktops or laptops with multiple monitors. Controlling each of these systems with their own keyboards and mouse is sometime tiresome and has some kind of limitations that can be considered as an advantage using some of the Screen Sharing software.

It becomes very tedious sometimes, if you want to copy paste some text but because of no clipboard sharing, you will either send that text in email or try to ping yourself somewhere to get the text. It becomes much more worse if you have to share the file. For these, I was using TeamViewer where I can ping my machine and send the text or I can connect in FileTransfer mode to share the file.

Now, I have installed and using this amazing software ShareMouse. It seems to have some unique features which other softwares do not provide. Some of the features that I like are:

  • Works with both Windows and Mac
  • Easily detects other clients
  • No concept of server or client – You can easily use either machine’s keyboard or mouse for the purpose
  • Allows multiple monitor support
  • Allows Clipboard sharing
  • Allows files haring via drag and drop
  • Screen switch as if it’s an extended display.

If you have not tried it out, you can always do that here. The free version is good enough if you are just using two machines as it provides the clipboard sharing functionality as well.

Will review some more softwares and write about them in the future posts.