Prototyping Windows Phone 7 Applications using SketchFlow

 

I should actually say “Prototyping Windows Phone 7 / 7.1 Applications using SketchFlow” since let it be ver. 7 or 7.1, The way we are going to do prototyping will remain the same.

What is Prototyping and SketchFlow and why to use that? :

Those hardcore developers who are not involved in Designing phase of application usually not much aware of Prototyping and SketchFlow and power of both.Like we see Movie Trailer before actual Movie comes to Cinema Hall, There we get glimpse of Movie and what it will be all about. On the same line, SketchFlow which is the new way of doing Prototypes using Microsoft Expression Blend give glimpse of your application and how it will look like. So being a developer question may come to your mind that why we should use this? Well to answer you, I have already done a series on Prototyping and SketchFlow for Silverlight in past, Those articles will give you more better idea about these,so take some time out and visit those articles as well, you can find them below :

Part 1:

http://pendsevikram.blogspot.com/2009/10/expression-blend-3-sketch-flow-new-era.html

Part 2:

http://pendsevikram.blogspot.com/2009/10/expression-blend-3-sketchflow-new-era.html

Part 3:

http://pendsevikram.blogspot.com/2009/11/expression-blend-3-sketchflow-new-era.html

SketchFlow for Windows Phone :

When you install Expression Blend Designer for Windows Phone or Expression Blend in general you will not get any special or additional Project Template for SketchFlow which you usually get for Silverlight. So I am using the SketchFlow Project Template published on Codeplex site here :

http://wp7sketchflow.codeplex.com/

Creating SketchFlow for your Windows Phone Application :

After installing you will find Windows Phone SketchFlow Project Template inside your Microsoft Expression Blend 4 instance like this :

Once you select this template, Then your design works start,To start with, You can pick few Mockups from Mockup option and also can make use of Controls in sketchflow like this :

For my demo, I am making use of Pivot Control and Pivot Item, you can always connect multiple screens to each other and navigate between them. Designer will look like this :

Once I took Pivot it was looking like this :

If you have multiple screens, you can always track them with the help of SketchFlow Map given with Expression Blend 4 SketchFlow,It will help you to give Macro view of your Design / Prototype, It looks like :

Once you are done with the Design you can Press F5 and Run that in Browser and it will look like this in your Browser :

Inside that, you have various options like Map,Feedback etc. You can give feedback like this :

If above things I mentioned looks difficult for you to understand, Take a look at 5 mins Video below which I have recorded via Microsoft Expression Encoder Screen Capture Utility (Check this post which will guide you how to use that utility)

Using SketchFlow for Windows Phone by Vikram Pendse–MVP Silverlight

The beauty of SketchFlow is that it allows you to export your project as “Word Document” So for that all you need to do is go to File->Export to MS Word option and you are done ! The word document generated by SketchFlow looks like this :

Well, That all today from me, Hope you like this post and I am sure you will try this out and make best use of the same in your Windows Phone 7 Projects. I am going for weekend Bike Ride and will back from there with great ideas for upcoming posts, Till that time you guys enjoy and try this out,See you soon.

Vikram.

Mango : Using DeviceStatus in Windows Phone 7.1

First of all “Thank You” for your wonderful response and comments on my last article on Silverlight Vs HTML5 ,I hope you like the points I raised there and I will soon write more about it in future.Today I am going to share information on DeviceStatus API and how it helps to give more information about Windows Phone Device.

Information :

DeviceStatus is a static class and you can find the same in Microsoft.Phone.Info Namespace. DeviceStatus exposes bunch of static properties and two events of keyboard and powersource respectively. Properties are like below :

• ApplicationCurrentMemoryUsage
• ApplicationPeakMemoryUsage
• DeviceFirmwareVersion
• DeviceHardwareVersion
• DeviceManufacturer
• DeviceName
• DeviceTotalMemory
• PowerSource

and two more boolean properties with events I mentioned above.

XAML :

I have taken TextBlocks to display information as shown above which I am assigning from Code Behind,So XAML will be like this :

<!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <TextBlock FontWeight="Bold" x:Name="txtApplicationCurrentMemoryUsage" Height="30" HorizontalAlignment="Left" Margin="0,62,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtApplicationPeakMemoryUsage" Height="30" HorizontalAlignment="Left" Margin="0,118,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtDeviceFirmwareVersion" Height="30" HorizontalAlignment="Left" Margin="0,172,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtDeviceHardwareVersion" Height="30" HorizontalAlignment="Left" Margin="2,227,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtDeviceManufacturer" Height="30" HorizontalAlignment="Left" Margin="0,281,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtDeviceName" Height="30" HorizontalAlignment="Left" Margin="6,331,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtDeviceTotalMemory" Height="30" HorizontalAlignment="Left" Margin="6,383,0,0" VerticalAlignment="Top" Width="450" />

            <TextBlock FontWeight="Bold" x:Name="txtPowerSource" Height="30" HorizontalAlignment="Left" Margin="6,435,0,0" VerticalAlignment="Top" Width="450" />

        </Grid>

C# Code :

General Declaration :

DispatcherTimer dptm = new DispatcherTimer();

Constructor :

// Constructor
public MainPage()
{
    InitializeComponent();
    dptm.Interval = new TimeSpan(0, 0, 5);
    dptm.Tick += new EventHandler(dptm_Tick);
    dptm.Start();
    this.Loaded += new RoutedEventHandler(MainPage_Loaded);
}

I have added DispatcherTimer just to get real time memory status and nothing else.

void dptm_Tick(object sender, EventArgs e)
{
     txtApplicationCurrentMemoryUsage.Text = "Application Current Memory Usage : " + Microsoft.Phone.Info.DeviceStatus.ApplicationCurrentMemoryUsage.ToString();
     txtApplicationPeakMemoryUsage.Text = "Application Peak Memory Usage : " + Microsoft.Phone.Info.DeviceStatus.ApplicationPeakMemoryUsage.ToString();
}

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
     WP7DeviceStatus();
}

public void WP7DeviceStatus()
{
     txtDeviceFirmwareVersion.Text = "Firmware Version : " + Microsoft.Phone.Info.DeviceStatus.DeviceFirmwareVersion.ToString();
     txtDeviceHardwareVersion.Text = "Hardware Version : " + Microsoft.Phone.Info.DeviceStatus.DeviceHardwareVersion.ToString();
     txtDeviceManufacturer.Text = "Manufacturer : " + Microsoft.Phone.Info.DeviceStatus.DeviceManufacturer.ToString();
     txtDeviceName.Text = "Device Name : " + Microsoft.Phone.Info.DeviceStatus.DeviceName.ToString();
     txtDeviceTotalMemory.Text = "Total Memory : " + Microsoft.Phone.Info.DeviceStatus.DeviceTotalMemory.ToString();
     txtPowerSource.Text = "Power Source : " + Microsoft.Phone.Info.DeviceStatus.PowerSource.ToString(); 
}

finally this will look like this on Device, As it is running on Emulator hence most of the information will be change after it goes on actual device.

Output :

Remember that its always good to notify user that your application is recording this information if at all your application is storing this information somewhere for some kind of analysis is getting perform on the same or using this data for application. Soon I will be posting full end to end application there I will be showing the exact use of this DeviceStatus.However I hope you will explore it and start using it in your Windows Phone application.As I shown above,it is very simple to implement. I am soon posting some advance tutorials on Mango in coming days. I don’t want to push to much which will create confusion for you, So I am posting basic articles to start with and then we will slowly go ahead at different higher levels.

So try out this API and I will be back soon with some more interesting demos on Mango, There is lot to show and talk on Mango and I am at background exploring lot many things,so keep visiting here as I will be posting some good stuff on Mango in coming days.

Vikram.

Silverlight, HTML5 & Windows 8 : Where we are heading to ?

This is not the post or yet another post on most happening debate of Silverlight and HTML5, This is just a visit to all of them to realize the potential in each and see what we can make best out of it.

I recently attended Microsoft MVP Open Day 2011 organized for South Asia in Microsoft IDC at Hyderabad, India. It was amazing to meet fellow MVPs and we had lot of learning and too much fun. During my visit, I met many glorious minds who are doing amazing stuff for Web and we had some discussions on this topic especially Silverlight and HTML5.By points raised in this discussion and overall stuff came out during my last year Communities and Customer interactions that I am going to put down for you.

Silverlight : Past,Present and Future

I have already posted about my thoughts on Silverlight Vs HTML5 here. Day by day situation is getting worst and confusing, So I thought to write this post actually. Initially even I was confused and frustrated about what happened in last PDC event. With recent Video which came up for Windows 8 added more fuel to the discussion of HTML5 and Silverlight. If you have not seen this video,please do once :

Building “Windows 8”–Video #1

After this video and when there was mention of HTML5 + JS, Fumes started coming up and people’s reactions and anger was spontaneous.

I saw some deadly thread on Silverlight.net forums talking about the same, Check this.

What’s happening to Developers with this cold war of Silverlight & HTML5 :

With the Previews of HTML5 shown by Microsoft with IE9 and IE10 Platform preview and from other vendors, There is a great confusion among people that Microsoft is no longer focusing on Silverlight or they have stop investments on the same. We all agree that HTML5 came up with some jazzy stuff which can do better things with less lines of codes and without plugin.

There are so many things one can pick up for Web Development these days.

• ASP.NET MVC
• PHP
• HTML5 + JS
• Silverlight | RIA Services
• Adobe Flash | Air

JQuery goes well with many of them. If you look at cost wise effective solution, HTML and PHP comes out as a natural choice, If you look at flexibility, Value added features and rich tooling then ASP.NET and Silverlight are good choice. So as far as Web Apps which will get into use via Browser, There is less confusion. For very rich apps either one can go for Silverlight or Flash depending upon the client requirement and business scenarios.

Advantages :

• Silverlight comes here as Advantage due to its Out Of Browser capabilities along with similar availability from Flash/Air but they are clear winner over other languages.
• With Rich Tools like Expression Studio and features like Sketch Flow, Overall experience is way better
• Rich UI, Managed Code, Cross Browser and Cross Platform, Easy Development
• Great Capabilities and features for designing and developing Line of Business applications.
• Support with various new patters and frameworks like MVVM, MEF etc.
• Sandbox Architecture, Secure and lightweight framework

Some Disadvantages : I am not biased here…

• Plug-in based Architecture and dependent on Plug-in
• Cost involved in Tooling
• Not truly Cross Platform (See later section)
• Limitations due to Size of Plug-in and CoreCLR functionalities
• Learning Curve is bit high compare to HTML

Where exactly things are getting wrong ! :

• From IE9 and IE10 Platform Previews, People assumed that Silverlight is near death.Reality : Silverlight 5 is announced with tons of new features,Currently its in Beta stage.
• Microsoft created more Hype of HTML5 while showcasing IE9 and IE10 Preview.Reality: Yes ! Even I was confused that what they are exactly promoting Browser or HTML5 ? but the idea behind showing HTML5 is nothing but to showcase the Power of IE9 and 10 and how better they support HTML5,That’s it !
• HTML5 will replace many things that Silverlight is capable of giving. Reality : Yes ! ..but Wait ! for some of the functionalities and stuff it will really be less effort,I mean what you do in 10 lines of Code in Silverlight,HTML5 might do it in 3-4 lines/Tags or vice versa !
• HTML5 Standardization,OOB and LOB Apps capability.Reality : Till whatever little I heard of HTML5 and its capabilities, Nothing beats Silverlight here in first shot ! HTML5 may ease the overall process of Designing and Developing Business Apps, but the current feature set provided by Silverlight and RIA Services is far way Rich in all aspects.
• Silverlight OOB Vs WPF. Reality : Both have 2 common things, XAML and C# that does not mean they are equal,One is .NET Framework of around 200+MB and one is CoreCLR of around 6MB, Should I tell more differences? I don’t think so ! WPF is more strong especially on Desktop Apps (XBAP Story we all know ! ), So Role of OOB is always different and it was never to compete or replace WPF
• Availability on Tablets with upcoming Windows 8.Reality : Currently Microsoft is saying that you can design and develop Windows 8 Apps with HTML5 + JS (How they are going to give support to build native Windows apps using HTML5 + JS is also a puzzle for me) but during the course they never said that you cannot Design,Develop and Run Silverlight Apps on it or Silverlight is blocked or something. So let’s wait and let’s not waste time in thinking what will happen in near future, Since even if you think still you don’t know what will happen when.

Where HTML5 is getting ahead ?

• There are set of people who do not want Plug-in based development for their own reasons
• There are set of people (end users) who don’t wish to download any plug-in on their machines
• There are set of people who do not wish to invest in heavy tooling and want to get things done quickly with less cost
• HTML5 like its earlier versions runs smoothly in all browsers
• HTML5 support is available in Visual Studio 2010
• This is big one ! : You cannot view,read,watch Silverlight sites in Windows Phone 7’s IE Browser even after Mango Update but you can view,read and interact with HTML5 + JS pages on Windows Phone 7’s Browser.So if you develop Jazzy Silverlight Website and if your customer wish to view that on his Windows Phone 7..I have no words here !
• Silverlight presence on Windows 8 is not clear to anyone since Windows 8 itself is in very early stage,even its pre-preview stage you can say,So it will not good to comment on that at this point of time.

My 0.02$ on this situation :

• As I said in my earlier Silverlight Vs HTML5 post, Customer is King ! Understand his business,Understand his requirements, Match them with technologies you have and go ahead, No matter if you may have to adopt HTML5 if it comes out to be better solution.
• If someone says in some event that HTML5 is future or we have change or shifted our focus that does not mean that Silverlight is dead after completing that statement. So keep your cool ! Microsoft Silverlight Team is working at their best (I am Silverlight MVP and Insider, So who else know better? :) )
• Do not worry about Windows 8 and what will happen, focus on your current development. Even if Windows 8 comes to market, there will be still tons and millions of apps still running on Vista and Windows 7.Everyone in the world will not get Windows 8 Tablet on Day One !
• Learn HTML5,See how you can combine HTML5 with JS and make simpler things more simpler and fast which might take time or painful to do in Silverlight.It will always add value to your Customer and you as well.
• I don’t see any other option but HTML5 if you wish your Browser App to be visible and interactive in browser of Windows Phone 7,So bit hard decision for you here.

Lastly :

Keep faith ! Silverlight is going smoothly and has very good future and it will be shining on various fronts. Take wise decisions before jumping to HTML5 from Silverlight and vice-versa.Do not blindly follow anyone’s opinion (including me) about Silverlight and HTML5. Build PoCs for HTML5 and for Silverlight 5, See what and how best you can give your Customers and End Users. Don’t get confuse between HTML5 and Silverlight,Both are way different in behavior. Feel free to buzz Silverlight MVPs, Silverlight Forums, Local Community Experts if you need any advice on Silverlight or making choice between Silverlight and HTML5, We will always help you at our best and guide you without having any bias in mind.

Why I wrote this post ?

This post is not written because I have no content to write on Silverlight or Windows Phone 7,I will be doing the next Technical post soon.This post is not written to defend or promote Silverlight or HTML5. This post is just written to touch some reality and ground level issues which one should keep in mind instead of getting confuse by what is going on other forums,blogs and news.

This post is never final answer to that endless debate of Silverlight and HTML5 but I am sure it will always give you better views and basic points which are important in future for your decision making.

These points are not already recorded or guided by someone,These are all outcome of my community interaction and what I see,feel and interact with people for Silverlight and Windows Phone 7.

Hope you will think positively over this topic, Take part in Silverlight Vs HTML5 threads and discussions actively but learn out of it and do not get lost in that ! Do not let your Silverlight Weapon down ! Respect compete technologies, Learn HTML5 slowly (I might help you in that via this blog in near future),Take HTML5 change happening with world positively,Give your customer what is best  and make people happy !

Remember ! Future is Bright because Future is Silverlight !!

Vikram.

*Please note that Images and Video used in this post are from Internet found during regular search, Images have their respective copyrights and they are part of this post just for demo/representation purpose.

Mango : How to use RichTextBox in Windows Phone 7.1

Today I am going to talk about RichTextBox, I know you must be having lot of expectations from this RichTextBox. Here I will try my best to make you aware of what will work and what will not work in this short post for RichTextBox in Windows Phone 7.1

RichTextBox control is not new for Silverlightians, We have already seen amazing implementation of the same in Apps developed using Silverlight on top of RichTextBox Control.It is supported in Silverlight ver. 4 & 5 and now in Windows Phone 7.1

Use of RichTextBox is to display text in rich format which includes images and hyperlinks and also various styles of font,font family and sizes in formatted form. You can find RichTextBox control in System.Windows.dll, v2.0.50727 and you can invoke the same using Namespace System.Windows.Controls where RichTextBox Class is inherited from Control Class and it exposes various properties and events.

To add RichTextBox control on your design layout of your Windows Phone 7.1 you don’t need to add any extra references and stuff however you will find that RichTextBox though its part of System.Windows.Controls does not sit in Toolbox. So all you need to do is put a Container as StackPanel and hit Control + Space and pick RichTextBox from intellisense.

<StackPanel>
       <RichTextBox … />
</StackPanel>

It will look like this on your Designer inside Visual Studio :

Please make a kind note that there is no design support for RichTextBox in Windows Phone 7.1, Also no default style present so I used Static Resource, Firstly I fumbled a lot and saw that output was not coming on the phone.

Well, Before I move ahead please make note of this :

• RichTextBox does not have Default Style
• It is not part of your Toolbox but also you don’t need to add any extra references,you can find it in intellisense
• It supports FlowDirect property so you can have RightToLeft and LeftToRight flow of text
• However by default it is in ReadOnly mode so at the moment with current bits you cannot play with it beyond limit
• Hyperlinks and Images can be part of content but since currently this control is in ReadOnly mode hence these features might not add value
• Indic does not getting displayed thought with Mango core platform goes as Silverlight 4. Indic simply breaks..Sorry for my friends in India for this
• Like Silverlight 5 Beta RichTextBox, It does not supporting any OverflowContentTarget so as to push text in next RichTextBox

Lets now see what all we can do with this :

XAML :

<StackPanel>
      <RichTextBox x:Name="txtMyRTBx" ... >
      <Paragraph>
      <Run FontFamily="Lucida Sans Unicode"
       Text="春が来た
                春が来た 春が来た どこに来た
                山に来た 里に来た 野にも来た

                花が咲く 花が咲く どこに咲く
                山に咲く 里に咲く 野にも咲く

                鳥がなく 鳥がなく どこでなく
                山でなく 里でなく 野でもなく"/>
      </Paragraph>
      </RichTextBox>
</StackPanel>

This will look like following on your emulator :

Kindly make note that though its Non English language here or symbolic that does not mean you cannot apply styles. You can very well make such text Bold,Italic and Underline.

To emphasize my bulleted point above about Language rendering capability and FlowDirection, here is a small piece of XAML to showcase Arabic text flowing from LeftToRight :

XAML :

<StackPanel>
      <RichTextBox x:Name="txtMyRTBx" ... >
      <Paragraph>
       <Run FontSize="24" FontFamily="Lucida Sans Unicode" 
         Text="مرحبا! أنا فيكرام من الهند وأنا أتعلم اللغة العربية" />    
      </Paragraph>
      </RichTextBox>
</StackPanel>

and it will look like this on your emulator :

As I mentioned above that you can make Text as Bold Italic and even you can insert Hyperlink, for that here is a small piece of XAML to showcase that area :

XAML :

<StackPanel>
      <RichTextBox x:Name="txtMyRTBx" ... >
      <Paragraph>
          <Run FontFamily="Lucida Sans Unicode" Text=" Windows Phone Developer Tools 7.1 Beta makes significant strides forward, and enables you to build many classes of applications that were not previously possible. "/>
            <Bold Foreground="Yellow">I am Bold !</Bold>
                <Italic Foreground="Green">I am Italic ! </Italic>
                <Underline Foreground="Gold"> Its line under me !! </Underline>
    A first look at the new <Hyperlink NavigateUri="http://www.buildwindows.com">"Windows 8"</Hyperlink> user interface.  
      </Paragraph>
      </RichTextBox>
</StackPanel>

and it will look like this on your emulator :

No wonder that we can always play with it from Code behind, Well if you want to see XAML behind this in your app then you can also use snippet like this :

void MainPage_Loaded(object sender, RoutedEventArgs e)
{
     MessageBox.Show(txtMyRTBx.Xaml.ToString());
}

This will show the Xaml piece of code on screen like this :

So that’s all I want to share on this topic at the moment,Being ReadOnly it pulls me back from lot of ideas but I am sure I will be putting up amazing and crazy samples in coming days, I don’t want to bombard you with <bold><italic> and <Underline> etc tags in the post so I pushed some language support in between which I hope you will like it very much. I know by looking at that language you will surely give try to your local language and build app on top of it. Go ahead and enjoy every bit of this control.

As I said above,I don’t want to waste your valuable time in small small snippets on <bold><italic> so if you still want to dig down on this, you can visit this MSDN Page where you will get all relevant stuff about usage of RichTextBox. So check that out, meanwhile I will go back and come here with some more cool stuff on Mango and Silverlight in coming week. So have a great weekend ahead with Mango and Silverlight 5 !

Vikram.

*Note : I used Translator tools for Arabic and Japanese demos here, I know Japanese because I learn that for 2 years but I do not know anyting about Arabic, So if you find the Arabic or Japanese Text in above demo irrelevant or not grammatically correct then please forgive me since its only used for demonstration purpose.