Geeks Portal

How to Debug CRM 2011 Plugin

cipto — Fri, 10 Feb 2012 06:33:36 GMT

Well there are a couple of ways and steps of doing it.

Like putting it in sandbox, enable it by registry editing.

and than attach debugger….

But it turns out you could do something like Die in PHP.

just throw new Exception(“Trace message”);

and you should see it when you Trigger it correctly

Share this post: | | | |

How to Capture WCF/HTTP Post using Fiddler on IIS server

cipto — Wed, 08 Feb 2012 06:14:50 GMT

This is very interesting. as I’ve got to examine whether a call is being made to a Services/WCF on external site.

on Localhost Fiddler which capture everything correct. because fiddler run under your local account.

If you test on IIS, it’s different though . Worker process run under network service.

you can change it to whatever. but that is a hassle, so complicated.

Since it’s during post back than call services.

When we do simple enabled Fiddler on firefox. it will just set that browser proxy to 127.0.0.1:8888 where Fiddler listen to.

But that is not enough it’s not capturing what are being post and what are the external UI.

The best approach is by adding on web.config

You can now see on fiddler

http://www.west-wind.com/weblog/posts/2009/Jan/14/Monitoring-HTTP-Output-with-Fiddler-in-NET-HTTP-Clients-and-WCF-Proxies

Share this post: | | | |

iTextSharp

cipto — Tue, 07 Feb 2012 09:12:45 GMT

iTExtSharp is a port from java iText. an open source to export things to PDF

you could actually export HTML to PDF. it’s very powerful as you can generate on the fly. just a bit of twist you can make report with PDF, or export things to PDF.

since PDF is like vector based. it’s very scalable meaning when printing it can scale to your preferred page size.

unfortunately there is not enough documentation. and the java thing seems to be a bit different in .Net one.

I am using the latest at this article is written, it’s 5.1.3. You could have the iText documentation in Java, or books like iText in action second edition.

things change a bit in property name. like to set the PageEvent actually it’s on writer.PageEvent=[your custom event]

To Export from HTML to PDF ,follow this pattern. this is also example for adding footer.

public class GeneratePDFHandler : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {

        context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
        context.Response.Cache.SetExpires(DateTime.Now.AddDays(-1));
        CultureInfo culture = new CultureInfo("en-AU");
        string ReferalID = context.Request.QueryString["id"];
           
        string contents = File.ReadAllText(context.Server.MapPath("~/template.htm"));
        // Create a Document object
        iTextSharp.text.Document document = new iTextSharp.text.Document(iTextSharp.text.PageSize.A4, 50, 50, 25, 25);
    
        // Create a new PdfWriter object, specifying the output stream
        var output = new MemoryStream();
        var writer = iTextSharp.text.pdf.PdfWriter.GetInstance(document, output);
        writer.PageEvent = new MYPdf();
        // Open the Document for writing
        document.Open();
       // var logo = iTextSharp.text.Image.GetInstance(context.Server.MapPath("~/Images/IoptixxGray.gif"));
        //logo.SetAbsolutePosition(10, 10);
        //document.Add(logo);
                   
      contents = contents.Replace("[Name]", "Cipto");
      var parsedHtmlElements = HTMLWorker.ParseToList(new StringReader(contents), null);


       foreach (var htmlElement in parsedHtmlElements)
           document.Add(htmlElement as IElement);
      
       
      
       document.Close();
       context.Response.ContentType = "application/pdf";
       context.Response.AddHeader("Content-Disposition", string.Format("attachment;filename=WorkOrder-{0}.pdf", ReferalID));
       context.Response.BinaryWrite(output.ToArray());
  }
}

Template.htm as you might guess has the html and a marker to be replaced in above example it’s [Name]

public class MYPdf : PdfPageEventHelper
{
    public override void OnEndPage(PdfWriter writer, iTextSharp.text.Document document)
    {

    Rectangle rect=new Rectangle(50, 50, 545, 792);
    var footerfont = FontFactory.GetFont("Arial",8);
    ColumnText.ShowTextAligned(writer.DirectContent,
    Element.ALIGN_CENTER, new Phrase("My Footer Message", footerfont),
      (rect.GetLeft(0) + rect.GetRight(0)) / 2,
      rect.GetBottom(0) - 45, 0);
    }
}

For images you can add logo. or embed it in your html template. but the source must be a full internet URL

Share this post: | | | |

MVVM Light Toolkit - 6 Creating SL-XNA project with MVVM Toolkit

De_Joker — Tue, 07 Feb 2012 03:23:57 GMT

Hi, in the 6th part of this MVVM toolkit post, I would like to share about integrating an SL-XNA project with MVVM Toolkit, as you know SL-XNA is a new addition to the Windows Phone 7 API, it combined the benefit of Silverlight and XNA. this project is really useful if you want to create a Silverlight Application which has a lot of animation and interaction which is performed using XNA

Creating a New SL-XNA Project then add MVVM Toolkit

Here is how to do it, first of all you need to create a Windows Phone Silverlight and XNA Application (only available if you have installed Windows Phone 7.5 SDK), give it a nice project name, and when you press OK, you will get the following solution

Please note that for an SLXNA project, it always generate a main project, followed by the Library and Content Library project, MVVM Light will only works on the Main Project, so add a reference to Galasoft.MvvmLight and Galasoft.MvvmLight.Extras, and then add a new MvvmViewModelLocator (WP7), named it ViewModelLocator.cs in ViewModel folder, and add a new MvvmViewModel (WP7), named GamePageViewModel.cs also in ViewModel folder.

Modify the App.xaml to add the ViewModelLocator in Application Resources, add mc, d, and vm namespaces, and then add the ViewModelLocator into Application Resources.

        1: <Application 

       2:     x:Class="SlXnaApp2.App"

       3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       

       4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       5:     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

       6:     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

       7:     xmlns:xna="clr-namespace:Microsoft.Xna.Framework;assembly=Microsoft.Xna.Framework.Interop"

       8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       9:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

      10:     mc:Ignorable="d"

      11:     xmlns:vm="clr-namespace:SlXnaApp2.ViewModel">

      12:    <!-- add the mc, d, and vm xmlns in application -->

      13:  

      14:    <!-- then add the View Model Locator in Application Resources-->

      15:    <Application.Resources>

      16:       <vm:ViewModelLocator x:Key="Locator"

      17:                              d:IsDataSource="True" />

      18:    </Application.Resources>

      19:    <Application.ApplicationLifetimeObjects>

      20:       <shell:PhoneApplicationService 

      21:             Launching="Application_Launching" Closing="Application_Closing" 

      22:             Activated="Application_Activated" Deactivated="Application_Deactivated"/>

      23:       <xna:SharedGraphicsDeviceManager />

      24:    </Application.ApplicationLifetimeObjects>

      25: </Application>

Now, the View Model Locator is still empty, since it’s a brand new View Model Locator, we need to add a View Model reference inside it, here`s what the source code look like when I add a GameViewModel inside it.

       1: namespace SlXnaApp2.ViewModel

       2: {

       3:    public class ViewModelLocator

       4:    {

       5:       /// <summary>

       6:       /// Initializes a new instance of the ViewModelLocator class.

       7:       /// </summary>

       8:       public ViewModelLocator()

       9:       {

         ////if (ViewModelBase.IsInDesignModeStatic)

         ////{

         ////    // Create design time view models

         ////}

         ////else

         ////{

         ////    // Create run time view models

         ////}

         CreateGame();

      }

  

      public static void Cleanup()

      {

         _game.Cleanup();

      }

      private static GamePageViewModel _game;

      public static GamePageViewModel GameStatic

      {

         get

         {

            if (_game == null)

            {

               CreateGame();

            }

  

            return _game;

         }

      }

      [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance",

          "CA1822:MarkMembersAsStatic",

          Justification = "This non-static member is needed for data binding purposes.")]

      public GamePageViewModel Game

      {

         get

         {

            return GameStatic;

         }

      }

      public static void ClearGame()

      {

         _game.Cleanup();

         _game = null;

      }

      public static void CreateGame()

      {

         if (_game == null)

         {

            _game = new GamePageViewModel();

         }

      }

   }

}

Now, with that, all we need to do next is just to set the DataContext of the GamePage.xaml into using a locator, which points to Game property like this

       1: <phone:PhoneApplicationPage 

       2:     x:Class="SlXnaApp2.GamePage"

       3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       5:     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

       6:     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

       7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       9:     FontFamily="{StaticResource PhoneFontFamilyNormal}"

      10:     FontSize="{StaticResource PhoneFontSizeNormal}"

      11:     Foreground="{StaticResource PhoneForegroundBrush}"

      12:     SupportedOrientations="Portrait" Orientation="Portrait"

      13:     mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"

      14:     shell:SystemTray.IsVisible="False"

      15:     DataContext="{Binding Game, Source={StaticResource Locator}}">

      16:     

      17:     <!--No XAML content is required as the page is rendered entirely with the XNA Framework-->

      18:  

      19: </phone:PhoneApplicationPage>

What we have done, is just prepare the groundworks, to show a text into the screen like all of the MVVM Light Toolkit example, modify the GameViewModel.cs to add some properties to it, like the following code

       1: using GalaSoft.MvvmLight;

       2:  

       3: namespace SlXnaApp2.ViewModel

       4: {

       5:    public class GamePageViewModel : ViewModelBase

       6:    {

       7:       /// <summary>

       8:       /// Initializes a new instance of the GameViewModel class.

       9:       /// </summary>

      public GamePageViewModel()

      {

         ////if (IsInDesignMode)

         ////{

         ////    // Code runs in Blend --> create design time data.

         ////}

         ////else

         ////{

         ////    // Code runs "for real": Connect to service, etc...

         ////}

      }

  

      public string ApplicationTitle

      {

         get

         {

            return "MVVM LIGHT";

         }

      }

  

      public string PageName

      {

         get

         {

            return "My page:";

         }

      }

  

      public string Welcome

      {

         get

         {

            return "Welcome to MVVM Light";

         }

      }

   }

}

And then modify the GamePage.xaml to look like the other MVVM Light Toolkit sample

       1: <phone:PhoneApplicationPage 

       2:     x:Class="SlXnaApp2.GamePage"

       3:     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       4:     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       5:     xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

       6:     xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

       7:     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       8:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       9:     FontFamily="{StaticResource PhoneFontFamilyNormal}"

    FontSize="{StaticResource PhoneFontSizeNormal}"

    Foreground="{StaticResource PhoneForegroundBrush}"

    SupportedOrientations="Portrait" Orientation="Portrait"

    mc:Ignorable="d" d:DesignHeight="800" d:DesignWidth="480"

    shell:SystemTray.IsVisible="False"

    DataContext="{Binding Game, Source={StaticResource Locator}}">

  

   <Grid x:Name="LayoutRoot"

          Background="Transparent">

      <Grid.RowDefinitions>

         <RowDefinition Height="Auto" />

         <RowDefinition Height="*" />

      </Grid.RowDefinitions>

  

      <!--TitlePanel contains the name of the application and page title-->

      <StackPanel x:Name="TitlePanel"

                    Grid.Row="0"

                    Margin="24,24,0,12">

         <TextBlock x:Name="ApplicationTitle"

                       Text="{Binding ApplicationTitle}"

                       Style="{StaticResource PhoneTextNormalStyle}" />

         <TextBlock x:Name="PageTitle"

                       Text="{Binding PageName}"

                       Margin="-3,-8,0,0"

                       Style="{StaticResource PhoneTextTitle1Style}" />

      </StackPanel>

  

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

      <Grid x:Name="ContentGrid"

              Grid.Row="1">

  

         <TextBlock Text="{Binding Welcome}"

                       Style="{StaticResource PhoneTextNormalStyle}"

                       HorizontalAlignment="Center"

                       VerticalAlignment="Center"

                       FontSize="40" />

  

      </Grid>

   </Grid>

</phone:PhoneApplicationPage>

Before you modify the code of GamePage.xaml, you see the notes saying “No XAML content is required as the page is rendered entirely with the XNA Framework”, that’s the default setting for a game page, In SL-XNA however, you have the ability to combine a silverlight content with XNA, the silverlight content will be rendered by XNA engine, but we need to tell the XNA engine to render the silverlight content, and here`s how we do it in GamePage.xaml.cs

First of all, add an UIElementRenderer
Then Implement to OnLayoutUpdated event, to make sure the UI ElementRender is not null when the rendering process begins
and then OnDraw method tell the renderer to begin rendering, and then use the spriteBatch to render the result into the screen

       1: namespace SlXnaApp2

       2: {

       3:    public partial class GamePage : PhoneApplicationPage

       4:    {

       5:       ContentManager contentManager;

       6:       GameTimer timer;

       7:       SpriteBatch spriteBatch;

       8:  

       9:       UIElementRenderer renderer;

  

      public GamePage()

      {

         InitializeComponent();

  

         // Get the content manager from the application

         contentManager = (Application.Current as App).Content;

  

         // Create a timer for this page

         timer = new GameTimer();

         timer.UpdateInterval = TimeSpan.FromTicks(333333);

         timer.Update += OnUpdate;

         timer.Draw += OnDraw;

  

         LayoutUpdated += new EventHandler(GamePage_LayoutUpdated);

      }

  

      void GamePage_LayoutUpdated(object sender, EventArgs e)

      {

         if ((ActualWidth > 0) && (ActualHeight > 0))

         {

            SharedGraphicsDeviceManager.Current.PreferredBackBufferWidth = (int)ActualWidth;

            SharedGraphicsDeviceManager.Current.PreferredBackBufferHeight = (int)ActualHeight;

         }

         if (renderer == null)

         {

            renderer = new UIElementRenderer(this, (int)ActualWidth, (int)ActualHeight);

         }

      }

  

      protected override void OnNavigatedTo(NavigationEventArgs e)

      {

         // Set the sharing mode of the graphics device to turn on XNA rendering

         SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(true);

  

         // Create a new SpriteBatch, which can be used to draw textures.

         spriteBatch = new SpriteBatch(SharedGraphicsDeviceManager.Current.GraphicsDevice);

  

         // Start the timer

         timer.Start();

  

         base.OnNavigatedTo(e);

      }

  

      protected override void OnNavigatedFrom(NavigationEventArgs e)

      {

         // Stop the timer

         timer.Stop();

  

         // Set the sharing mode of the graphics device to turn off XNA rendering

         SharedGraphicsDeviceManager.Current.GraphicsDevice.SetSharingMode(false);

  

         base.OnNavigatedFrom(e);

      }

  

      private void OnUpdate(object sender, GameTimerEventArgs e)

      {

         // TODO: Add your update logic here

      }

  

      private void OnDraw(object sender, GameTimerEventArgs e)

      {

         SharedGraphicsDeviceManager.Current.GraphicsDevice.Clear(Color.CornflowerBlue);

  

         // tell the renderer to begin rendering

         renderer.Render();

  

         // draw the rendering result to screen

         spriteBatch.Begin();

         spriteBatch.Draw(renderer.Texture, Vector2.Zero, Microsoft.Xna.Framework.Color.White);

         spriteBatch.End();

  

      }

   }

}

Here`s what the final application look like, when you press the Change to Game Page button, it will go to GamePage.xaml which has the Mvvm Light Toolkit installed and ready to rumble

Share this post: | | | |

CRM 2011 SDK explanation Part 1

cipto — Sun, 05 Feb 2012 13:54:00 GMT

if you are some one that is sitting between CRM 4 sdk, and 2011 SDK. you'll end up and should upgrade using the 2011 one.

Because 2011 support lot's of fix, improvement, easy to use API than 4th version.

since CRM 2011 use WCF there has to be lot's of improvement, also from the size compression being transported.

CRM 2011 SDK support backward compability,as when it deals with CRM 4. it point to the old asmx services , 2007/xxx.asmx

use organizationservice.LoadProperty to load your Lazy load relation property, for example invoices_products

CRM 2011 support Federation Authenticaiton/Claim based authentication.

You only need to use the crmHelperClass and provide username and password with out domain.

Solution is major improvement in 2011. a lot of thing are being simplefied because of this.

on 4th version you've got that metadata thing. but Solution means you can package you custom entity, Plugin and import it again to another CRM instance

Plugin also being enhanced. Now after you install the Developer Tools. which comes with the SDK

You'll get Solution template, Plus CRM Explorer. Plus when developing Plugin/Workflow you get what they called CRM Package, right click and Deploy :)

You'll get Default class called Plugin which provide you with localContext, you can access the servicecontext,organizationcontext,entity here.

It's a very good one, because now you can implement Base plugin for multiple entities, before you need to create class and another class

It's also recommend to deploy it to your Solution. that way when you moved from staging, to prod server. you only import the solution

the CRM 2011 service is also supporting for you to upload your CRM through SDK

most easy to use is Early bound, generate it using CRMSVCutil which will generate strong type for you.

to make sure things is there or not. think of solution.

CRM 2011 use WIF

LINQ to FetchXMl service request is deprecated

Share this post: | | | |

Google map is so god damn easy

cipto — Sun, 05 Feb 2012 13:51:00 GMT

Google map v3 is very easy to implement. it will take you just minutes to create great application

it's HTML5 and mobile compatible also. sadly again not showing on IE7.

You could add Markup , and "Controls" to the map . so that the map take 1 full screen, and your control (html element)

are shown as you choices, on top left, center , bottom right as you like.

you can change icon easily by defining the icon. so cool

all you have to do is have the geocode location.

like on mine it needs filter by post code, so search through the geolocation, set center and zoom in

Share this post: | | | |

Ninject and customMembership asp.net mvc 3

cipto — Sun, 05 Feb 2012 13:43:00 GMT

you use Custom Membership and Ninject and inside your custom membership you'd like to use Property Injection.

The result is always null. why? because asp.net has it's own static property for membership.

which is membership.provider. and this instance is not part of instance ninject management.

to workaround it , you need to use kernel.inject . but on the generate aspnetmvc.cs you would see that it's injection on PreApplicationStart event and won't let you.

so use on PostApplicationStartMethod

[assembly: WebActivator.PreApplicationStartMethod(typeof(TopRankFantasy.App_Start.NinjectMVC3), "Start")]
[assembly: WebActivator.PostApplicationStartMethod(typeof(TopRankFantasy.App_Start.NinjectMVC3), "RegisterMembership")]
[assembly: WebActivator.ApplicationShutdownMethodAttribute(typeof(TopRankFantasy.App_Start.NinjectMVC3), "Stop")]

public static void RegisterMembership()
        {
            bootstrapper.Kernel.Inject(Membership.Provider);
        }

Share this post: | | | |

MVVM Light Toolkit - 5 Integrating Model to View Model using DispatcherHelper

De_Joker — Fri, 03 Feb 2012 04:06:23 GMT

In this post, I would like to show how to integrate a Model into and MVVM Pattern by using a Helper class called Dispatcher Helper, its quite a handy method, since it can reduce your line of codes drastically. In this post, I would like to guide you to create a small application which retrieve data from an RSS Feed of this site.

First of all, create a new MVVM Light Project for Windows Phone, and then create a new Model called MainModel.cs in the Model Directory. We’re going to create 2 class in this file, the MainModel which is a model to be used for MainViewModel.cs and an RssData which is a data container for the content that we retreived from the site RSS Feeds.

the RetreiveData method requires Action<T> as an input, this method will be used to send back the result to ViewModel. and when the response start coming it will be turned into an XML Document so it can be easily parsed into the form of RssData, this method will return a List of RssData into the ViewModel

        1: using System;

       2: using System.Net;

       3: using System.Collections.Generic;

       4: using System.Windows;

       5: using System.Windows.Controls;

       6: using System.Windows.Documents;

       7: using System.Windows.Ink;

       8: using System.Windows.Input;

       9: using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

  

using System.Xml;

using System.Xml.Linq;

namespace Post5_MvvmLight002.Model

{

   // Data Container Class

   public class RssData

   {

      public string Title { get; set; }

      public string Creator { get; set; }

      public string Description { get; set; }

      public string Url { get; set; }

      public Uri Uri

      {

         get { return new Uri(Url, UriKind.Absolute); }

      }

   }

   public class MainModel

   {

      public void RetreiveData(Action<List<RssData>> callback)

      {

         // Create Request to a Rss Feed

         var asyncrequest = (HttpWebRequest)WebRequest.Create("http://geeks.netindonesia.net/blogs/MainFeed.aspx");

         // Sending Query then Try to get Response

         asyncrequest.BeginGetResponse(asyncresult =>

         {

            // Turn response into a stream

            var responsestream = (HttpWebResponse)asyncrequest.EndGetResponse(asyncresult);

            System.IO.StreamReader reader = new System.IO.StreamReader(responsestream.GetResponseStream());

            // convert the stream into a XDocument

            XDocument doc = XDocument.Load(reader);

            // Create the list of result

            List<RssData> Results = new List<RssData>();

            // Begin parsing the result into a more friendly data structure

            foreach (XElement element in doc.Descendants("item"))

            {

               RssData data = new RssData();

               data.Title = GetElementValue(element, "title");

               data.Creator = GetElementValue(element, "{http://purl.org/dc/elements/1.1/}creator");

               data.Description = GetElementValue(element, "description").Split('\n')[0];

               data.Url = GetElementValue(element, "link");

  

               Results.Add(data);

            }

            // send the result back

            callback(Results);

         }, null);

      }

      // Helper method to retreive a string from XML Element

      private string GetElementValue(XElement item, string elementname)

      {

         XElement firstordefault = item.Element(elementname);

         if (firstordefault != null)

            return firstordefault.Value;

         else

            return "";

      }

   }

}

On the View model part, I add another data container named PostData, the difference between RssData and PostData is that the RssData will store a raw data, but the PostData will store a modified RawData information which is more suitable to be shown, one of the example is to convert an Url into an Uri. in this class we create a GetDataCommand which will call OnGetDataFromRSSFeed method when activated, in this method we transform a RawData object into a PostData Object, and since this method is running on different thread than the UI thread, we need the help of DispatcherHelper class by calling the CheckBeginInvokeUI to add a newly created PostData on background tread to the ListOfPostData in UI thread. Since I use an ObservableList, I don’t have to call the RaisePropertyChanged method.

       1: using System;

       2: using System.Collections.ObjectModel;

       3: using GalaSoft.MvvmLight;

       4: using GalaSoft.MvvmLight.Command;

       5: using GalaSoft.MvvmLight.Messaging;

       6: namespace Post5_MvvmLight002.ViewModel

       7: {

       8:    public class PostData

       9:    {

      public string Title { get; set; }

      public string Url { get; set; }

      public string Creator { get; set; }

      public string Description { get; set; }

   }

   public class MainViewModel : ViewModelBase

   {

      public string ApplicationTitle { get; set; }

      public string PageName { get;set;}

  

      protected readonly Model.MainModel Model;

      public ObservableCollection<PostData> ListOfPostData { get; set; }

      public RelayCommand GetDataCommand { get; set; }

      public MainViewModel(Model.MainModel _model)

      {

         ApplicationTitle = "MVVM Light";

         PageName = "Main Page";

  

         Model = _model;

         ListOfPostData = new ObservableCollection<PostData>();

         GetDataCommand = new RelayCommand(() => OnGetDataFromRSSFeed());

      }

      private object OnGetDataFromRSSFeed()

      {

         Model.RetreiveData((result) =>

            {

               foreach (Model.RssData rawdata in result)

               {

                  PostData newdata = new PostData();

                  newdata.Title = rawdata.Title;

                  newdata.Creator = rawdata.Creator;

                  newdata.Description = rawdata.Description;

                  newdata.Url = rawdata.Url;

  

                  GalaSoft.MvvmLight.Threading.DispatcherHelper

                     .CheckBeginInvokeOnUI(() => 

                        this.ListOfPostData.Add(newdata));

               }

            });

         return null;

      }

   }

}

When using a DispatcherHelper, you need to Initiate it first, preferably on your App.xaml.cs at construction time to make sure that the DispatcherHelper object is initiated (line 32)

       1: public App()

       2: {

       3:    // Global handler for uncaught exceptions. 

       4:    UnhandledException += Application_UnhandledException;

       5:  

       6:    // Standard Silverlight initialization

       7:    InitializeComponent();

       8:  

       9:    // Phone-specific initialization

   InitializePhoneApplication();

  

   // Show graphics profiling information while debugging.

   if (System.Diagnostics.Debugger.IsAttached)

   {

      // Display the current frame rate counters.

      Application.Current.Host.Settings.EnableFrameRateCounter = true;

  

      // Show the areas of the app that are being redrawn in each frame.

      //Application.Current.Host.Settings.EnableRedrawRegions = true;

  

      // Enable non-production analysis visualization mode, 

      // which shows areas of a page that are handed off to GPU with a colored overlay.

      //Application.Current.Host.Settings.EnableCacheVisualization = true;

  

      // Disable the application idle detection by setting the UserIdleDetectionMode property of the

      // application's PhoneApplicationService object to Disabled.

      // Caution:- Use this under debug mode only. Application that disable user idle detection will continue to run

      // and consume battery power when the user is not using the phone.

      PhoneApplicationService.Current.UserIdleDetectionMode = IdleDetectionMode.Disabled;

   }

  

   GalaSoft.MvvmLight.Threading.DispatcherHelper.Initialize();

}

Before we go and work on the View, we will need to modify the ViewModelLocator.cs first, we need to modify the CreateMain method so that every time we create a MainViewModel, we also create a MainModel as the model for the ViewModel

       1: public static void CreateMain()

       2: {

       3:    if (_main == null)

       4:    {

       5:       _main = new MainViewModel( new Model.MainModel() );

       6:    }

       7: }

For the view part, I modify the existing View by removing the textblock and replace it with a StackPanel containing a button and a ListBox (line 42), the Button when clicked will activate the GetDataCommand, which will fill the ObservableList called ListOfPostData in ViewModel, And because the ListBox ItemSource is binded with the ObservableList, then everytime the list changes (due to add or remove) The ListBox will automaticly show the Content of the List;

       1: <phone:PhoneApplicationPage x:Class="Post5_MvvmLight002.MainPage"

       2:                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:                             xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

       5:                             xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

       6:                             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       7:                             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       8:                             FontFamily="{StaticResource PhoneFontFamilyNormal}"

       9:                             FontSize="{StaticResource PhoneFontSizeNormal}"

                            Foreground="{StaticResource PhoneForegroundBrush}"

                            SupportedOrientations="Portrait"

                            Orientation="Portrait"

                            mc:Ignorable="d"

                            d:DesignWidth="480"

                            d:DesignHeight="768"

                            shell:SystemTray.IsVisible="True"

                            xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

                            xmlns:Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71"                                              

                            DataContext="{Binding Main, Source={StaticResource Locator}}">

    <!--LayoutRoot contains the root grid where all other page content is placed-->

    <Grid x:Name="LayoutRoot"

          Background="Transparent">

        <Grid.RowDefinitions>

            <RowDefinition Height="Auto" />

            <RowDefinition Height="*" />

        </Grid.RowDefinitions>

  

        <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel"

                    Grid.Row="0"

                    Margin="24,24,0,12">

            <TextBlock x:Name="ApplicationTitle"

                       Text="{Binding ApplicationTitle}"

                       Style="{StaticResource PhoneTextNormalStyle}" />

            <TextBlock x:Name="PageTitle"

                       Text="{Binding PageName}"

                       Margin="-3,-8,0,0"

                       Style="{StaticResource PhoneTextTitle1Style}" />

        </StackPanel>

  

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

        <StackPanel Grid.Row="1">

         <Button Content="Get Data">

            <Custom:Interaction.Triggers>

               <Custom:EventTrigger EventName="Click">

                  <Command:EventToCommand Command="{Binding Path=GetDataCommand,Mode=OneWay}"></Command:EventToCommand>

               </Custom:EventTrigger>

            </Custom:Interaction.Triggers>

         </Button>

         <ListBox ItemsSource="{Binding Path=ListOfPostData}"

                  ScrollViewer.VerticalScrollBarVisibility="Auto">

            <ListBox.ItemTemplate>

               <DataTemplate>

                  <StackPanel>

                     <TextBlock Text="{Binding Path=Title}" TextWrapping="Wrap"></TextBlock>

                     <StackPanel Orientation="Horizontal">

                        <TextBlock Text="Created By : "/>

                        <TextBlock Text="{Binding Path=Creator}" TextWrapping="Wrap"></TextBlock>

                     </StackPanel>

                     <HyperlinkButton NavigateUri="{Binding Path=Uri}" FontSize="14" HorizontalAlignment="Left"> >>> Go To Link</HyperlinkButton>

                  </StackPanel>

               </DataTemplate>

            </ListBox.ItemTemplate>

         </ListBox>

      </StackPanel>

    </Grid>

</phone:PhoneApplicationPage>

Here`s what the application looks like when shown in the emulator

But, why go with all that trouble to create multiple class for just one application function, well before we discuss that, we need to make a list of most possible changes that usually happens in an application, and how doing this makes your life easier on maintenance phase of the application

Changes in data source –> you go to your Model and change the data source and Raw Data Accordingly
Changes in application UI –> you don’t have to do anything, let your designer friend do the work since the Model and View Model part is not disturbed
Changes in the business process –> go to the view model, and apply the new business process here.

so in other word, this makes your code more orderly, later on I will try to write about doing the test using MVVM Light Toolkit

Share this post: | | | |

MVVM Light Toolkit - 4 Sending Message from ViewModel to View

De_Joker — Thu, 02 Feb 2012 03:24:51 GMT

On one or more occasion, there are sometimes a need to send back a message from a view model to a view, since the business process is practically done in the view model or in the model there are some occasion where the view model need to tell the view to do something, one of the occasion that I can think of is to start an animation or play a sound. MVVM Light Toolkit provides a messaging scenario for such a case using its GalaSoft.MvvmLight.Messaging library, and its fairly simple to use too.

Preparing the Project

Before we get there, lets prepare the project first

Create a new MVVM Toolkit Project
Open MainViewModel.cs and add the following line, there`s nothing new here, we just create a Relay Command to be called from MainPage.xaml

        1: public MainViewModel()

       2: {

       3:    TestCommand = new RelayCommand(() => DoTestCommand());

       4: }

       5:  

       6: public RelayCommand TestCommand

       7: {

       8:    get;

       9:    private set;

      10: }

      11: private object DoTestCommand()

      12: {

      13:    return null;

      14: }

Open the MainPage.xaml and create a new button and add a Custom Interaction, just like we did in part 3

       1: <phone:PhoneApplicationPage x:Class="Post4_MvvmLight1.MainPage"

       2:                             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       3:                             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       4:                             xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

       5:                             xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

       6:                             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       7:                             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       8:                             FontFamily="{StaticResource PhoneFontFamilyNormal}"

       9:                             FontSize="{StaticResource PhoneFontSizeNormal}"

                            Foreground="{StaticResource PhoneForegroundBrush}"

                            SupportedOrientations="Portrait"

                            Orientation="Portrait"

                            mc:Ignorable="d"

                            d:DesignWidth="480"

                            d:DesignHeight="768"

                            shell:SystemTray.IsVisible="True"

                            xmlns:Custom="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

                            xmlns:Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP71"

                            DataContext="{Binding Main, Source={StaticResource Locator}}">

   <!--LayoutRoot contains the root grid where all other page content is placed-->

   <StackPanel>

      <Button>

         <Custom:Interaction.Triggers>

            <Custom:EventTrigger EventName="Click">

               <Command:EventToCommand Command="{Binding Path=TestCommand,Mode=OneWay}"></Command:EventToCommand>

            </Custom:EventTrigger>

         </Custom:Interaction.Triggers>

         Click Here

      </Button>

   </StackPanel>

</phone:PhoneApplicationPage>

Sending and Receiving Message

Now with that, we`re all set to explore the Messaging System in MVVM Light Toolkit, MVVM Light Toolkit provides a static class called Messenger that provides the method to listen to a message as well to broadcast a message. To Broadcast a message, you just need to call Send Message from a Messenger, here`s the modified DoTestCommand on MainViewModel.cs, ini this code I just send a message which type is a String, and filled it with todays timestamp. You can send different type of message, not just string, you can even send a Class if you need to.

       1: private object DoTestCommand()

       2: {

       3:    Messenger.Default.Send<String>(DateTime.Now.ToString());

       4:    return null;

       5: }

To Listen to a message, you need to register it first before the message was sent, the listener would be the View. One of the good way to register the class to listen to the message at the constructor, because the constructor would be the first method that was called when the class was initiated. On the constructor we need to register the type of variables which will be received, it has to be the same with the type of variable which were sent, and then we also informed the method that will be called when a message was received, in this sample it’s the onReceiveMessage method. the rest is fairly easy, everytime I receive a message, I just pop out a MessageBox which in this sample will show the current datetime.

       1: public partial class MainPage : PhoneApplicationPage

       2: {

       3:    // Constructor

       4:    public MainPage()

       5:    {

       6:       InitializeComponent();

       7:       Messenger.Default.Register<String>(this, (action) => onReceiveMessage(action));

       8:    }

       9:    private object onReceiveMessage(String sample)

      10:    {

      11:       System.Windows.MessageBox.Show(sample);

      12:       return null;

      13:    }

      14: }

Conclusion

So, with this post, I think that MVVM Light Toolkit provides a great simple framework to use when you intend to create an application that leverages the MVVM pattern. the sample are made simple, so it wont show the true benefit of using this framework, so I will try to create a simple application which will show how this framework can benefit you in the development of windows phone application.

Share this post: | | | |

MVVM Light Toolkit - 3 Creating New Page and Navigation

De_Joker — Thu, 02 Feb 2012 03:22:28 GMT

after a long reading (and typing on my part) on part 2, now we`re finally going to create a new page, and then navigate to it from MainPage.xaml. to make things interesting, lets put a textbox and a button, in which when the button is clicked, then the textbox will show current DateTime. we will do it in two different project using the Standard Windows Phone Application Project, and using a MVVM Toolkit Project

How To Do It in a Windows Phone Application Project

its fairly simple to do this, in Windows Phone Application Project, when created, you will already have a MainPage.xaml, which is the main page, you just need to create a new lets say a Windows Phone Potrait Page, and named it SecondPage.xaml

in MainPage.xaml change the grid into something more simple such as the following

<StackPanel>
   <Button Name="BtnGoToPage2" Click="BtnGoToPage2_Click">
      Go To Page 2
   </Button>
</StackPanel>

and in the code behind, add the following lines to navigate to page 2

private void BtnGoToPage2_Click(object sender, System.Windows.RoutedEventArgs e)
{
   NavigationService.Navigate(new System.Uri("/SecondPage.xaml", System.UriKind.Relative));
}

and then on the second page, you need to generate a textbox and a button, please note that you need give a name to the TextBox, since you will need to access it from behind the code

and in the code behind the following lines will set the value of current date time into the textbox

private void Button_Click(object sender, RoutedEventArgs e)
{
   TBResult.Text = DateTime.Now.ToString();
}

So wow, its quite simple isn’t it, lets see how MVVM Toolkit do that

How to do it in a MVVM Toolkit Project

Create a new MVVM Light Project, and then Add a New MVVM View (WP7) on main directory, named it SecondPage.xaml, and then add MVVM View Model (WP7) on View Model Directory, named it SecondViewModel.cs.

after that we need to register SecondViewModel on View Model Locator, follow the pattern which is explained on part to, so that you add the following line of code to the existing ViewModelLocator class.

private static SecondViewModel _second;
public static SecondViewModel SecondStatic
{
   get
   {
      if (_second == null)
         CreateMain();
      return _second;
   }
}
public SecondViewModel Second
{
   get { return SecondStatic; }
}
public static void ClearSecond()
{
   _second.Cleanup();
   _second = null;
}

/// <summary>
/// Provides a deterministic way to create the Main property.
/// </summary>
public static void CreateSecond()
{
   if (_second == null)
      _second = new SecondViewModel();
}

after the View Model Locator, then we will work on MainPage.xaml, change the content of MainPage.xaml and MainPage.xaml.cs to match the changes like the one we did in a Windows Phone Application Project, we need MainPage to be able to Navigate to SecondPage. Notes: the MainPage.xaml do not represents how MVVM pattern should be implemented, we will see how MVVM Pattern is implemented on SecondPage.xaml

Now, after we finish MainPage, before we go to SecondPage.xaml, we will go to SecondViewModel.cs first. before we write the code, we need to determine what action is available in the view, and what data will be shown or changed during that. from the description of the task, we need to Show a DateTime value to a textbox when a user click on a button, so we have a String Properties to be shown and changed, and we also have a UserClick Event.

Its fairly simple to create a String Properties, lets named it TextForTextBox, now for the UserClick Event, we need to declare a property with type of RelayCommand, which is used specially to send a message from View to the ViewModel whenever an action is performed, after creating a RelayCommand Property, we need to initiate it in the constructor, we bind an OnUserClick method to be executed wheter the UserClickCommand is active. on method OnUseClick, other than set the value to TextForTextBox property, we also call RaisePropertyChanged method, to signal the View to update

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;
namespace Post2_MvvmLight1.ViewModel
{
   public class SecondViewModel : ViewModelBase
   {
      public SecondViewModel()
      {
         UserClickCommand = new RelayCommand(() => OnUserClick());
      }
      public string TextForTextBox { get; set; }
      
      public RelayCommand UserClickCommand
      {
         get;
         private set;
      }
      private object OnUserClick()
      {
         TextForTextBox = System.DateTime.Now.ToString();
         RaisePropertyChanged("TextForTextBox");
         return null;
      }
   }
}

And finally, we can go to SecondPage.xaml, there are a few things that we have to do in SecondPage.xaml, the first is to bind the data context to a property named Second, as defined in ViewModelLocator. and then create the content of the page, basically it’s the same with the one in Windows Phone Application Project, but the difference is that now the TextBox doesn’t need to be named, but in return the Text Properties of the textbox need to be bind with the TextForTextBox Property from view model, as well as the Button doesn’t need to raise the OnClick Command directly, but it use the Custom Interaction Trigger event to execute the UserClickCommand in the View Model, don’t forget to add an additional definition for Custom and Command keywords

xmlns:Custom="clr-namespace:System.Windows.Interactivity;
                            assembly=System.Windows.Interactivity"
xmlns:Command="clr-namespace:GalaSoft.MvvmLight.Command;
                            assembly=GalaSoft.MvvmLight.Extras.WP71"
DataContext="{Binding Second, Source={StaticResource Locator}}"

<StackPanel>
   <TextBox Text="{Binding Path=TextForTextBox}"></TextBox>
   <Button>
      <Custom:Interaction.Triggers>
         <Custom:EventTrigger EventName="Click">
            <Command:EventToCommand 
               Command="{Binding Path=UserClickCommand}"/>
         </Custom:EventTrigger>
      </Custom:Interaction.Triggers>
      Show Date Time
   </Button>
</StackPanel>

Reviewing the two Development Style

If we review the 2 sample that we worked on, its pretty clear that development using a standard Windows Phone Application Template is faster and simpler, so the question is, why bother to use an MVVM Framework ?, from my point of view, here’s my answer

As Stated at the first part of the post, the MVVM Toolkit clearly separates the View (User interface) from the View Model (Business Process), so I can work in the View Model without concerning about how the view look like, and I don’t have to annoy my Designer Friend about what every controls should be named
I don’t have to put anything in my View Code Behind, no need to set, retrieve or clear the value of an input control.
the View Model Locator is actually a blessing in disguised because it looks like its quite complicated to used for the first time, there are lots of benefit of using a view model locator which is, all of the View Model is registered in one class so its easy to maintain, and then by using the Locator, I don’t need to initialize the View Model in the View’s constructor

In this post, I`m introducing the idea behind the MVVM Toolkit, so the sample is made quite simple and may not shown the full benefit of MVVM Toolkit, please look after the next post, which will show about the benefit of MVVM Toolkit on a real application

Share this post: | | | |

MVVM Light Toolkit - 2 Understanding MVVM

De_Joker — Thu, 02 Feb 2012 03:11:49 GMT

From the page of Wikipedia http://en.wikipedia.org/wiki/Model_View_ViewModel, which I think was a perfect description of MVVM

The Model View ViewModel (MVVM) is an architectural pattern used in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler.[1] Largely based on the model–view–controller pattern (MVC), MVVM is targeted at modern UI development platforms (HTML5 [2][3], Windows Presentation Foundation, or WPF, and Silverlight) in which there is a user experience (i.e., user interface) (UXi) developer who has requirements different from those of a more “traditional” developer (e.g. oriented toward business logic and back end development). The View-Model of MVVM is a value converter[4] meaning that the View-Model is responsible for exposing the data objects from the Model in such a way that those objects are easily managed and consumed. In this respect, the View-Model is more Model than View, and handles most if not all of the View’s display logic (though the demarcation between what functions are handled by which layer is a subject of ongoing discussion[5] and exploration).

MVVM was designed to make use of specific functions in WPF to better facilitate the separation of View layer development from the rest of the pattern by removing virtually all “code-behind” from the View layer. Instead of requiring Interactive Designers to write View code, they can use the native WPF markup language XAML and create bindings to the ViewModel, which is written and maintained by application developers. This separation of roles allows Interactive Designers to focus on UX needs rather than programming or business logic, allowing for the layers of an application to be developed in multiple work streams.

The Simple explanation of each component of MVVM (Model-View-ViewModel) is as follows:

Model refers to an object model that represents the real state content or a data access layer that represents that content
View refers to all element which is displayed on screen
View Model refers to the model of a view, which can be said that its an abstraction of the View that also serves for databinding between Model and View, there are not yet a firm description about the view model, sometimes it can be functioned also as a presenter / controller, and some other times it functions only as a an abstraction of the view with the presenter / controller exists in parallel. this is still an ongoing area of discussion regarding the standardization of the MVVM Pattern.

That’s enough with the theory, now lets get down to the codes, I`m going to use Windows Phone Project page, it does not come automatically with the installation of Visual Studio 2010, so if you want to follow the post, please install it first from http://create.msdn.com/en-us/home/getting_started

Creating Your First MVVM Light Toolkit Project

Basically it’s the same as creating a Windows Phone Project, when you already Installed MVVM Light Toolkit, there will be an additional Project Template in Silverlight for Windows Phone Template, choose the MVVM Light for WP71

The project will generate some files which you can see in Solution Explorer, for MVVM Light toolkit there will be an additional folders and files compared with a general Windows Phone Application Template. The MVVM Toolkit contains these 3 key elements:

View, as you can see that there is not much difference between the view of an MVVM Light Toolkit and View from Standard Phone Application, the only difference is that the DataContext properties of the page is set to bind to a Main Properties from a Static Resource named Locator (line 18)

        1: <phone:PhoneApplicationPage 

       2:    x:Class="Post2_MvvmLight1.MainPage"

       3:    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       4:    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

       5:    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

       6:    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

       7:    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

       8:    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       9:    FontFamily="{StaticResource PhoneFontFamilyNormal}"

      10:    FontSize="{StaticResource PhoneFontSizeNormal}"

      11:    Foreground="{StaticResource PhoneForegroundBrush}"

      12:    SupportedOrientations="Portrait"

      13:    Orientation="Portrait"

      14:    mc:Ignorable="d"

      15:    d:DesignWidth="480"

      16:    d:DesignHeight="768"

      17:    shell:SystemTray.IsVisible="True"

      18:    DataContext="{Binding Main, Source={StaticResource Locator}}">

the Static Resource called locator is defined on App.xaml as an Application Resources

       1: <Application.Resources>

       2:    <!--Global View Model Locator-->

       3:    <vm:ViewModelLocator x:Key="Locator"

       4:                         d:IsDataSource="True" />

       5: </Application.Resources>

View Model, the view model for a view usually resides in a ViewModel directory, on a new project, MVVM Toolkit Template by default create MainViewModel.cs as a View Model for MainPage.xaml. In short, view model can act as a data context for the View. each data which can be accessed from a View, is created in the form of properties in view Model, these properties will later on be bind to a certain properties of a Control on a View, here are a sample of view model which has a read only properties named ApplicationTitle, PageName and Welcome

       1: public class MainViewModel : ViewModelBase

       2:    {

       3:       public string ApplicationTitle

       4:       {

       5:          get

       6:          {

       7:             return "MVVM LIGHT";

       8:          }

       9:       }

      10:  

      11:       public string PageName

      12:       {

      13:          get

      14:          {

      15:             return "My page:";

      16:          }

      17:       }

      18:  

      19:       public string Welcome

      20:       {

      21:          get

      22:          {

      23:             return "Welcome to MVVM Light";

      24:          }

      25:       }

      26:    }

these properties will later be bound to a properties of a control, ini this sample, the properties is bound to a Text Property of a TextBlock

       1: <StackPanel x:Name="TitlePanel"

       2:                     Grid.Row="0"

       3:                     Margin="24,24,0,12">

       4:     <TextBlock x:Name="ApplicationTitle"

       5:                Text="{Binding ApplicationTitle}"

       6:                Style="{StaticResource PhoneTextNormalStyle}" />

       7:     <TextBlock x:Name="PageTitle"

       8:                Text="{Binding PageName}"

       9:                Margin="-3,-8,0,0"

      10:                Style="{StaticResource PhoneTextTitle1Style}" />

      11: </StackPanel>

ViewModelLocator, in MVVM Light toolkit, this is the glue that binds a model into a view model, the view model locator must be defined in App.xaml’s Application.Resources. an application can have more that 1 ViewModelLocator, but usually you only need one in a Windows Phone Application.

The First method that will be called by a View is the properties, which in this sample called Main, which in turn will call MainStatic, which will give a static MainViewModel variable called _main, in MainStatic properties, if _main is still null, then it will automaticly called CreateMain method to create a new MainViewModel Object. The Static variable is created so that when the application is running, there can be only one MainViewModel.

       1: public class ViewModelLocator

       2:    {

       3:       private static MainViewModel _main;

       4:  

       5:       public ViewModelLocator()

       6:       {

       7:          CreateMain();

       8:       }

       9:       public static MainViewModel MainStatic

      {

         get

         {

            if (_main == null)

            {

               CreateMain();

            }

  

            return _main;

         }

      }

      [System.Diagnostics.CodeAnalysis.SuppressMessage("Microsoft.Performance",

          "CA1822:MarkMembersAsStatic",

          Justification = "This non-static member is needed for data binding purposes.")]

      public MainViewModel Main

      {

         get

         {

            return MainStatic;

         }

      }

      public static void ClearMain()

      {

         _main.Cleanup();

         _main = null;

      }

      public static void CreateMain()

      {

         if (_main == null)

         {

            _main = new MainViewModel();

         }

      }

      public static void Cleanup()

      {

         ClearMain();

      }

   }

What was described above is only a variation of MVVM pattern used by MVVM Light Toolkit, different toolkit / framework will have a different pattern, such as for PRISM, instead of creating a ViewModelLocator, it leverages the IoC and DependencyInjection Pattern, other framework/toolkit may also have a different style.

Share this post: | | | |

MVVM Light Toolkit - 1 Introducing MVVM Light Toolkit

De_Joker — Thu, 02 Feb 2012 03:06:02 GMT

Hi, in this series of post I would like to share about MVVM Light Toolkit which is hosted at http://mvvmlight.codeplex.com, its has been released for quite some times, and now as of january 2012 the toolkit is on its V4 beta version, which its latest feature is to include support for Windows 8 Development using WinRT. I usually use PRISM when building a WPF desktop application since it already serves all my needs with many features such as modularization, IoC, and Messaging between module, so I rarely seek for other toolkit or framework, but MVVM Light toolkit recently caught my attention when I`m trying to develop a Windows Phone application, since PRISM is quite heavy when running even on desktop application, I found MVVM Light Toolkit is very light compared to PRISM so its quite suitable for window phone 7 apps development.

Other things that make this framework interesting, is because other than Visual Studio you can also utilize MVVM Light Toolkit to work with Microsoft Expression Blend, Blend is a tool for designer to design user interface for an application, as well as to create animation and effects. the goal of why I use this is so that designer and developer can work alongside without disturbing each others work much.

MVVM Light toolkit supports many style of application including WPF, Windows Phone, Silverlight, and WinRT. if you want to take a quick look on MVVM Light Toolkit, or MVVM itself, the developer of this toolkit provides a few video links in his website, you can watch it to gain insight about MVVM as well about the MVVM Light toolkit itself

http://www.galasoft.ch/mvvm/ –> several videos about MVVM
http://mvvmlight.codeplex.com/ –> videos about MVVM Light

Below is a useful link to get you started on MVVM Toolkit

Using Installer http://mvvmlight.codeplex.com/releases/view/71278 (if you want to use an Installer, I personally recommend this to get started), otherwise you can
1. Building the Code http://www.galasoft.ch/mvvm/building/ (if you want to build the library yourself)
2. Installing the Binaries using Nu Get http://blog.galasoft.ch/archive/2011/05/07/mvvm-light-v3-on-nuget-now-with-wp7-support.aspx (if you want to install MVVM Toolkit using NuGet)
Then to get started you can start creating an MVVM Project using
1. Visual Studio http://www.galasoft.ch/mvvm/creating/
2. microsoft Blend http://www.galasoft.ch/mvvm/creatingblend/

In the next post, I will try to deep dive into the creation of a Windows Phone 7 Application, and try to highlight about the style and the benefit of using MVVM Light Toolkit

Share this post: | | | |

TSQL Tuning again

cipto — Tue, 31 Jan 2012 07:15:18 GMT

Today I face another tsql tuning.

basic but simple any column that are in join clause and that column is not foreign key . it has no index on it.

So create index on it. and you could use Include Index. which means that column is part of overall index.

the joined column , say you have 3 columns may not over 900 Bytes. int is 4 bytes, and Nvarchar (Starts with N is unicode) it’s multiple by 2.

Example:

CREATE INDEX IX_PTN_Prescription
ON dbo.PTN_Prescription (PTN_FrameHasLensesID)
INCLUDE (PTN_ContactID,PTN_MemberDetailsID)

Another thing is see how you join, and see if it resulting on a lot of logical read. Joined only to indexed column.

when you use Like , Like ‘%’+search+’%’ is heavier that starts with (Like search+’%’)

Case sensitive or not, is set in database . so you need not to use LOWER

View are not indexed by it self . several steps needed so it’s column is indexed

--Set the options to support indexed views.
SET NUMERIC_ROUNDABORT OFF;
SET ANSI_PADDING, ANSI_WARNINGS, CONCAT_NULL_YIELDS_NULL, ARITHABORT,
    QUOTED_IDENTIFIER, ANSI_NULLS ON

CREATE VIEW [dbo].[ViewName]
WITH SCHEMABINDING
AS

--Create an index on the view.
CREATE UNIQUE CLUSTERED INDEX IDX_VFRAME 
    ON VIEWNAME(COLUMNA, COLUMNB);

Lastly To test your query execution Time and IO. you could use

--Free plan cache

DBCC DROPCLEANBUFFERS
DBCC FREEPROCCACHE

SET STATISTICS TIME ON
SET STATISTICS IO ON

For statistics IO , scan , logical read, what are the meaning of the result returns

go here

Optimization Detail

Index can be Filtered

Share this post: | | | |

The Amazing Nokia Lumia Developer Day

reyza — Fri, 27 Jan 2012 12:15:21 GMT

Biar gambar yang berbicara

Share this post: | | | |

ASP.NET/IIS MVP Summit draft schedule

reyza — Thu, 26 Jan 2012 02:44:04 GMT

Ini dia jadwal kasar jika para MVP ASP.NET/IIS ngumpul di bulan February sampai Maret nanti …

Sayang disayang…Visa belum di approve

Share this post: | | | |

Building Backend Service for Mobile Application

reyza — Sun, 22 Jan 2012 12:13:39 GMT

Setelah minggu lalu mengisi materi pada Seminar Microsoft Technology Update 4.0 di auditorium Politeknik Pos Indonesia (How does Web Technology help Mobile App Development-) selanjutnya mendapat kesempatan kembali untuk mengisi acara pada acara Develop Our World with MUGI, Nokia.Ice dan Agate – “Menggenggam dan Membangun Dunia Luar dengan Imaginasi” tanggal 21 Januari 2012 di Universitas Pasundan, almamater sendiri :)

Pada kesempatan ini materi yang saya bawakan adalah Building Backend Service for Mobile Application.

Seminar ini diikuti oleh peserta dari mahasiswa Teknik Informatika Universtas Pasundan, mahasiswa lain dan SMK. Ada sekitar 100 mahasiswa yang hadir pada seminar ini.

Mirip dengan materi sebelumnya, pada kesempatan ini dibahas pembuatan layangan backend untuk support data pada aplikasi mobile. Ada beberapa demo yang diperlihatkan pada materi ini yaitu :

Pembuatan Web Service.
Pemanfaatan Web Service pada Windows Phone.
Pembuatan WCF Data Service.
Pemanfaatan WCF Data Service pada Windows Phone.

{Web Service}

Pada web site cukup tambahkan item Web Service sehingga dapat dilihat seperti berikut ini pada solution explorer.

Yaitu file :

Service.asmx
Service.cs pada folder App_Code.

Berikut adalah isi dari file Service.cs :

     using System;

    using System.Collections.Generic;

    using System.Linq;

    using System.Web;

    using System.Web.Services;

    using System.Data;

    using System.Data.SqlClient;

    [WebService(Namespace = "http://tempuri.org/")]

    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 

    // [System.Web.Script.Services.ScriptService]

    public class Service : System.Web.Services.WebService

    {

        public SqlConnection connection = new SqlConnection("Data Source=.;Initial Catalog=NORTHWND;Integrated Security=True;Pooling=False");

        public Service()

        {

            //Uncomment the following line if using designed components 

            //InitializeComponent(); 

        }

        [WebMethod]

        public string GetIPK(string NIM)

        {

            string ipk;

            // koneksi ke database

            // melakukan query untuk mendapatkan IPK 

            // dengan NIM yang dimasukkan

            ipk = "3,1";

            return ipk;

        }

        [WebMethod]

        public string GetJumlahSKSAmbil(string NIM)

        {

            string sks;

            // koneksi ke database

            // melakukan query untuk mendapatkan jumlah SKS mahasiswa 

            // dengan NIM yang dimasukkan

            sks = "111";

            return sks;

        }

        [WebMethod]

        public DataSet GetListMataKuliahAmbil(string NIM)

        {

            SqlDataAdapter adapter = new SqlDataAdapter(

              "SELECT KodeMK, NamaMK FROM MataKuliah WHERE NIM='" + NIM + "'", connection);

            DataSet mkDS = new DataSet();

            adapter.MissingSchemaAction = MissingSchemaAction.AddWithKey;

            adapter.Fill(mkDS, "MataKuliahAmbil");

            return mkDS;

        }

    }

Untuk “menjalankan” web service ini tinggal klik kanan pada Service.asmx kemudian pilih View in Browser maka akan dapat dilihat hal seperti berikut ini pada web browser.

Dan berikut adalah contoh output ketika method GetListMataKuliahAmbil dieksekusi, dapat dilihat output ini adalah format XML.

{Konsumsi Web Service pada Windows Phone}

Berikut ini adalah cara yang dapat dilakukan untuk mengkonsumsi web service pada Windows Phone. Ada beberapa langkah yang perlu dilakukan. Langkah pertama adalah dengan menambahkan Service Reference pada project Windows Phone, dengan cara klik kanan pada Reference, kemudian pilih Add Service Reference.

Kemudian pilih Service yang ada, pada kasus ini Service berada pada solution yang sama.

Maka akan dapat kita liat service dengan namespace sesuai isian.

Selanjutnya tinggal menambahkan item pada antarmuka, seperti pada gambar berikut ini.

Berikut adalah kode yang dibuat untuk membuat antarmuka seperti di atas.

    <phone:PhoneApplicationPage 

        x:Class="UnpasWP7.MainPage"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

        FontFamily="{StaticResource PhoneFontFamilyNormal}"

        FontSize="{StaticResource PhoneFontSizeNormal}"

        Foreground="{StaticResource PhoneForegroundBrush}"

        SupportedOrientations="Portrait" Orientation="Portrait"

        shell:SystemTray.IsVisible="True">

        <!--LayoutRoot is the root grid where all page content is placed-->

        <Grid x:Name="LayoutRoot" Background="Transparent">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <!--TitlePanel contains the name of the application and page title-->

            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

                <TextBlock x:Name="ApplicationTitle" Text="Universitas Pasundan" Style="{StaticResource PhoneTextNormalStyle}"/>

                <TextBlock x:Name="PageTitle" Text="Akademik" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

            </StackPanel>

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

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

                <TextBox Height="72" HorizontalAlignment="Left" Margin="12,0,0,0" Name="textBox_NIM" Text="Isi NIM" VerticalAlignment="Top" Width="277" />

                <Button Content="Get Data" Height="72" HorizontalAlignment="Left" Margin="290,0,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />

                <TextBlock Height="30" HorizontalAlignment="Left" Margin="26,116,0,0" Name="textBlock1" Text="IPK" VerticalAlignment="Top" Width="85" />

                <TextBlock Height="30" HorizontalAlignment="Left" Margin="168,116,0,0" Name="textBlock_IPK" Text="" VerticalAlignment="Top" />

                <TextBlock Height="30" HorizontalAlignment="Left" Margin="26,168,0,0" Name="textBlock3" Text="Sisa SKS" VerticalAlignment="Top" />

                <TextBlock Height="30" HorizontalAlignment="Left" Margin="168,168,0,0" Name="textBlock_SKS" Text="" VerticalAlignment="Top" />

            </Grid>

        </Grid>

    </phone:PhoneApplicationPage>

Ketika tombol “Get Data” di klik maka akan terjadi proses “konsumsi” web service. Berikut adalah isi dari file MainPage.xaml.cs yang terdapat method-method untuk melakukan pengambilan data via web service.

       1: using System;

       2: using System.Collections.Generic;

       3: using System.Linq;

       4: using System.Net;

       5: using System.Windows;

       6: using System.Windows.Controls;

       7: using System.Windows.Documents;

       8: using System.Windows.Input;

       9: using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

  

using UnpasWP7.UnpasAkademikService;

  

namespace UnpasWP7

{

    public partial class MainPage : PhoneApplicationPage

    {

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

  

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            GetIPK(textBox_NIM.Text);

            GetSKSAmbil(textBox_NIM.Text);

        }

  

        private void GetIPK(string NIM)

        {

            UnpasAkademikService.ServiceSoapClient proxy = new UnpasAkademikService.ServiceSoapClient();

            proxy.GetIPKCompleted += new EventHandler<UnpasAkademikService.GetIPKCompletedEventArgs>(proxy_GetIPKCompleted);

            proxy.GetIPKAsync(NIM);

        }

  

        void proxy_GetIPKCompleted(object sender, UnpasAkademikService.GetIPKCompletedEventArgs e)

        {

            if (e.Error == null)

            {

                textBlock_IPK.Text = e.Result;

            }

            else

            {

                textBlock_IPK.Text = e.Error.Message;

            }

        }

  

        private void GetSKSAmbil(string NIM)

        {

            UnpasAkademikService.ServiceSoapClient proxy = new UnpasAkademikService.ServiceSoapClient();

            proxy.GetJumlahSKSAmbilCompleted += new EventHandler<UnpasAkademikService.GetJumlahSKSAmbilCompletedEventArgs>(proxy_GetJumlahSKSAmbilCompleted);

            proxy.GetJumlahSKSAmbilAsync(NIM);

        }

  

        void proxy_GetJumlahSKSAmbilCompleted(object sender, UnpasAkademikService.GetJumlahSKSAmbilCompletedEventArgs e)

        {

            if (e.Error == null)

            {

                textBlock_SKS.Text = e.Result;

            }

            else

            {

                textBlock_SKS.Text = e.Error.Message;

            }

        }

    }

}

Dan berikut adalah hasilnya :

{WCF Data Service}

Berikut adalah gambaran WCF Data Service, dari database, data access layer sampai menjadi layanan yang dapat digunakan baik itu oleh Windows Phone atau yang lainnya.

Setelah database telah siap, maka kita dapat membuat Data Access Layer. Pada kasus ini akan digunakan Entiry Framework. Caranya cukup dengan menambahkan item baru seperti berikut.

Kemudian kita akan dituntun dengan wizard seperti berikut.

Pilih Generate from Database.

Pilih database yang akan digunakan.

Pilih tabel-tabel yang diinginkan kemudian klik Finish, maka pada tambahan file dg extension EDMX pada solution explorer dan presentasi tabel dengan diagram seperti di bawah ini.

Selanjutnya adalah menambahkan item baru yaitu WCF Data Service.

Maka akan dapat tambahan 2 file pada project, seperti yang dapat dilihat pada gambar berikut ini.

Dan berikut adalah isi dari file UnpasWcfDataService.cs

       1: using System;

       2: using System.Data.Services;

       3: using System.Data.Services.Common;

       4: using System.Collections.Generic;

       5: using System.Linq;

       6: using System.ServiceModel.Web;

       7:  

       8: using NORTHWNDModel;

       9:  

      10: public class UnpasWcfDataService : DataService< NORTHWNDEntities >

      11: {

      12:     // This method is called only once to initialize service-wide policies.

      13:     public static void InitializeService(IDataServiceConfiguration config)

      14:     {

      15:         // TODO: set rules to indicate which entity sets and service operations are visible, updatable, etc.

      16:         // Examples:

      17:         config.SetEntitySetAccessRule("*", EntitySetRights.AllRead);

      18:         config.SetServiceOperationAccessRule("*", ServiceOperationRights.All);

      19:         

      20:     }

      21: }

Yang perlu diperhatikan adalah pada baris 10, yang akan berisi nama entities yang telah dibuat. Sedangkan baris ke 17 dan 18 adalah bagaimana hak aksesnya. Dan berikut adalah ouput dari file SVC ketika di View in Browser.

Dengan layanan ini kita dapat melakukan “query” langsung dengan cara mengetikkan pada address bar pada web browser, seperti berikut.

       1: http://localhost:1490/UnpasWCF/UnpasWcfDataService.svc/Mahasiswas

       2: http://localhost:1490/UnpasWCF/UnpasWcfDataService.svc/Mahasiswas('957100994')

       3: http://localhost:1490/UnpasWCF/UnpasWcfDataService.svc/Mahasiswas('957100994')/Nama

Pada baris 1, adalah cara untuk menampilkan data yang terdapat pada tabel mahasiswa.

Pada baris 2, adalah cara untuk menampilkan data mahasiwa yg nilai primary key-nya adalah 957100994.

Pada baris 3, adalah cara untuk menampilkan nilai nama dari mahasiswa dengan primary key 957100994.

Berikut adalah contoh dari keluaran baris ke-3 :

{Konsumsi WCF Data Service pada Windows Phone}

Langkah awal adalah dengan menambahkan Service Reference seperti yang telah dilakukan pada bahasan web service sebelumnya. Pada contoh aplikasi berikut adalah menampilkan daftar mahasiswa dan ada fitur pencarian berasarkan NIM.

Berikut adalah kode dari file MainPage.xaml :

    <phone:PhoneApplicationPage 

        x:Class="UnpasWP7WCF.MainPage"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"

        xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"

        FontFamily="{StaticResource PhoneFontFamilyNormal}"

        FontSize="{StaticResource PhoneFontSizeNormal}"

        Foreground="{StaticResource PhoneForegroundBrush}"

        SupportedOrientations="Portrait" Orientation="Portrait"

        shell:SystemTray.IsVisible="True">

        <!--LayoutRoot is the root grid where all page content is placed-->

        <Grid x:Name="LayoutRoot" Background="Transparent">

            <Grid.RowDefinitions>

                <RowDefinition Height="Auto"/>

                <RowDefinition Height="*"/>

            </Grid.RowDefinitions>

            <!--TitlePanel contains the name of the application and page title-->

            <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

                <TextBlock x:Name="ApplicationTitle" Text="WCF Data Service App" Style="{StaticResource PhoneTextNormalStyle}"/>

                <TextBlock x:Name="PageTitle" Text="Unpas" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>

            </StackPanel>

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

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

                <TextBox Height="72" HorizontalAlignment="Left" Margin="0,6,0,0" Name="textBox_NIM" VerticalAlignment="Top" Width="284" />

                <Button Content="View" Height="72" HorizontalAlignment="Left" Margin="290,6,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />

                <ListBox Height="503" HorizontalAlignment="Left" Margin="10,84,0,0" Name="listBox1" VerticalAlignment="Top" Width="460" >

                    <ListBox.ItemTemplate>

                        <DataTemplate>

                            <StackPanel Margin="0,0,0,17" Width="432">

                                <TextBlock Text="{Binding Path=NIM}" TextWrapping="NoWrap" 

                                           Style="{StaticResource PhoneTextExtraLargeStyle}"/>

                                <TextBlock Text="{Binding Path=Nama}" TextWrapping="NoWrap" 

                                           Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}"/>

                            </StackPanel>

                        </DataTemplate>

                    </ListBox.ItemTemplate>

                </ListBox>

            </Grid>

        </Grid>

    </phone:PhoneApplicationPage>

Dan berikut adalah kode dari file MainPage.xaml.cs :

       1: using System;

       2: using System.Collections.Generic;

       3: using System.Linq;

       4: using System.Net;

       5: using System.Windows;

       6: using System.Windows.Controls;

       7: using System.Windows.Documents;

       8: using System.Windows.Input;

       9: using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

  

using System.Data.Services.Client;

using UnpasWP7WCF.UnpasWCF;

  

namespace UnpasWP7WCF

{

    public partial class MainPage : PhoneApplicationPage

    {

        private NORTHWNDEntities context;

        private readonly Uri northwindUri = new Uri("http://localhost:1490/UnpasWCF/UnpasWcfDataService.svc/");

        private DataServiceCollection<Mahasiswa> mhs;

  

  

        // Constructor

        public MainPage()

        {

            InitializeComponent();

        }

  

        private void button1_Click(object sender, RoutedEventArgs e)

        {

            context = new NORTHWNDEntities(northwindUri);

            mhs = new DataServiceCollection<Mahasiswa>(context);

  

            var query = from mahasiswa in context.Mahasiswas select mahasiswa;

            if (!string.IsNullOrEmpty(textBox_NIM.Text))

            {

                query = from mahasiswa in context.Mahasiswas where mahasiswa.NIM.Equals(textBox_NIM.Text) select mahasiswa;

            }

  

            mhs.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(mahasiswa_LoadCompleted);

            mhs.LoadAsync(query);

  

        }

  

        void mahasiswa_LoadCompleted(object sender, LoadCompletedEventArgs e)

        {

            if (e.Error == null)

            {

                listBox1.ItemsSource = mhs;

            }

            else

            {

                MessageBox.Show(string.Format("An error has occurred: {0}", e.Error.Message));

            }

        }

    }

}

Pada baris ke-22 dapat dilihat terdapat alamat dari service yang akan di akses.

Berikut ini adalah hasil dari aplikasi sederhana ini :

Semoga posting ini bermanfaat, Selamat ber akhir pekan yang panjang, dan selamat merayakan Imlek

Share this post: | | | |

How does Web Technology help Mobile App Development?

reyza — Sun, 22 Jan 2012 07:19:00 GMT

Sabtu, Tanggal 14 Januari 2012 telah diadakan Seminar Microsoft Technology Update 4.0 di auditorium Politeknik Pos Indonesia. Pada seminar ini diisi oleh pembicara sebagai berikut :

Bobby Zulkarnaen, MVP dengan materi Windows Server 2008.
Puja Pramudya, MVP dengan materi Windows Phone Silverlight.
Andri Mirandi, Windows Phone with XNA Game Studio.
M Reza Faisal, MVP dengan materi How does Web Technology help Mobile App Development.
Billy Riantono, Introduction MSDNAA dan MSP Poltekpos.
Bambang F. Indarto, MVP dengan materi Office 2010.

Pada kesempatan ini saya membawakan materi dengan title “How does Web Technology help Mobile App Development?”.

Diterangkan bagaimana teknologi web dapat membantu untuk pembuatan aplikasi mobile, yaitu dengan menyiapkan layanan-layanan pada web server yang dapat diakses oleh aplikasi mobile. Adapun skenario yang dapat dilakukan adalah sebagai berikut :

Terdapat 3 demo yang diperlihatkan pada kesempatan ini yaitu :

{Web Service}

Pembuatan web service dengan bantuan Visual Studio dengan mudah dan cepat.

{WCF Data Service}

Selanjutnya juga didemokan pembuatan service dengan memanfaatkan WCF Data Service.

{Screen Scraping with HTML Agility Pack}

Yang terakhir adalah melakukan screen scaping dengan bantuan HTML Agility Pack dengan skenario sebagai berikut.

Saat ini HTML Agility Pack tersedia untuk media mobile dan lainnya. Untuk informasi lebih lanjut tentang HTML Agility Pack dapat berkunjung ke posting berikut ini Screen Scraping - “Mencuri” Data Website dengan Elegan.

Acara ini sendiri dihadiri oleh sekitar lebih 75 mahasiswa baik dari Politeknik Pos sendiri atau dari luar.

Share this post: | | | |

Saving Changes Is Not Permitted On SQL Server 2008. How To Solve?

ikhwankrisnadi — Fri, 20 Jan 2012 03:33:00 GMT

"Saving Changes is not permitted" muncul karena melakukan perubahan pada struktur tabel :

merubah tipe data pada kolum
merubah "allow nulls" pada kolum

Agar dapat melakukan perubahan pada struktur tabel, lakukan non aktifkan "prevent changes" pada SQL Server Management Studio:

Buka Microsoft SQL Server Management Studio 2008
Klik Tools, kemudian klik Options

Klik Designers

Lakukan uncentang(tidak dicentang) untuk "prevent saving changes that require table re-creation"

Klik OK
Lakukan perubahan pada struktur tabel

Share this post: | | | |

Microsoft Technology Update: ASP.NET vNext

cahnom — Fri, 20 Jan 2012 02:29:00 GMT

Minggu, 15 Januari telah diselenggarakan acara Microsoft Technology Update oleh MUGI Semarang. Acara berlangsung di Parahita Coffe & Resto, Jl. Pandanaran 02 Semarang.

Dalam acara tersebut saya menyampaikan materi ASP.NET vNext yang membahas fitur-fitur baru ASP.NET 4.5. Dalam acara tersebut saya demokan secara langsung (coding on the fly) bagaimana caranya membuat website yang bisa dibuka di dua target browser yang berbeda. Jika website dibuka di browser desktop maka akan tampil dengan theme detosktop, jika dibuka dari browser mobile (smartphone / tablet) maka akan tampil dengan theme mobile.

Berikut adalah foto-foto selama berlangsungnya acara.

Terima kasih buat teman-teman MUGI Semarang yang telah bekerja keras demi terselenggaranya acara ini. Tanpa kerja keras tim MUGI Semarang, acara tersebut tidak akan berjalan dengan baik.

Share this post: | | | |

Infografik Windows Phone selama 2011

poedja_p — Thu, 12 Jan 2012 08:25:56 GMT

Bagi para developer yang sudah mulai berpikir untuk membuat aplikasi tentunya punya pertanyaan,aplikasi apa ya yang sebaiknya saya buat. Infografik yang dirilis oleh Microsoft ini mungkin bisa jadi panduan teman-teman untuk melahirkan aplikasi yang diinginkan oleh user.

Bagaimana dengan 2012 ? Saya rasa dari sisi kategori tidak akan banyak berubah. Justru kita harus embrace itu. Games,entertainment dan productivity app. Dengan akan segera hadirnya Nokia Lumia di Indonesia, jangan sampai kita developer lokal tertinggal dan malah membiarkan developer asing masuk ke pasar Indonesia. Ide bisa datang dari mana saja,support terhadap developer sangat baik dan market akan segera terbuka.

Tunggu apalagi ?

Share this post: | | | |

Silverlight–XNA Framework

De_Joker — Thu, 12 Jan 2012 06:29:12 GMT

Baru-baru ini Microsoft meluncurkan update framework terbaru untuk Windows Phone 7.1 (Mango), dengan nama Silverlight – XNA (SLXNA), bagi rekan-rekan yang sudah pernah bereksperimen dengan Silverlight untuk WIndows Phone dan XNA untuk windows phone, pasti bertanya2, apa bedanya dengan sebelumnya ? Berikut adalah tabel guidance dari microsoft yang dapat membantu rekan2 untuk memilih framework yang sesuai

from : http://msdn.microsoft.com/en-us/library/ff402528%28v=vs.92%29.aspx

Singkatnya, SLXNA merupakan platform baru yang dapat menggabungkan keunggulan yang ada di Silverlight dengan berbagai keunggulan yang ada di XNA, kekurangannya hanyalah SLXNA tidak memiliki native support untuk memutar Video pada saat ini. bagi rekan2 yang sudah pernah mendevelop menggunakan silverlight dan XNA, framework baru ini bukanlah sesuatu yang benar-benar baru, flow program untuk XNA dan XAML programming silverlight masih tetap sama untuk SLXNA, Penambahan baru yang dilakukan oleh Microsoft adalah menambahkan ElementRenderer dan SharedGraphicsDeviceManager, yang dapat secara langsung mengambil proses rendering dari Silverlight component dan mengubahnya menjadi 2D Texture untuk ditampilkan pada XNA Framework, untuk menampilkan control silverlight bersama dengan XNA kita hanya perlu melakukan 2 hal berikut:

Mengimplement event LayoutUpdated untuk mengupdate informasi ke sharedGraphicsDeviceManager setiap kali ada perubahan Width dan Height dari layar, misal ada perubahan dari potrait ke landscape, dan menciptakan object elementRenderer jika masih null
Dan pada DrawMethod, mengaktifkan fungsi Render pada element Renderer, dan membuat spriteBatch melakukan rendering untuk texture element rendererya

Berikut adalah contoh tutorial dari Microsoft untuk aplikasi SLXNA sederhana

http://msdn.microsoft.com/en-us/library/hh202938%28v=vs.92%29.aspx

Selamat Mencoba :)

Share this post: | | | |

Phone Toolkit For Windows Phone 7.1 (Mango)–Part 2

De_Joker — Thu, 12 Jan 2012 00:19:42 GMT

Ini lanjutan dari post sebelumnya, dipisah menjadi 2 karena jumlah gambarnya telalu banyak sehingga live writer tidak bisa publish ke blog

List Picker

Toolkit ini beberapa list picker lain yang cukup mudah untuk digunakan, dan cukup indah juga

Lockable Pivot

Fitur ini digunakan untuk melakukan lock untuk page tertentu pada pivot page application sebelum user menekan tombol unlock, mungkin bisa digunakan untuk jenis aplikasi quiz atau untuk mengharuskan user membaca license agreement sebelum ke page berikutnya

Long List Selector

Digunakan untuk menampilkan list seperti layaknya address book, bisa berdasarkan alfabet atau berdasarkan dari kategori tertentu

Multi Select List

Multi select list membuat user dapat memilih lebih dari satu item, dengan mengaktifkan mode multi select, lalu memilih item yang diinginkan, dan mengapply action yang ingin dilakukan

Performance Progress Bar

Progress Bar sebenarnya sudah disediakan pada toolkit versi release sebelumnya, namun ini adalah perbaikannya, pada standard progress bar terdahulu, saat thread utama sibuk, maka animasi progress bar ikut berhenti, namun performance progress bar ini bekerja di thread berbeda, sehingga saat thread utama sibuk, animasi pada performance progress bar tidak terganggu

(Animasi pada performance progress bar adalah titik-titik merah yang bergerak di bagian atas)

Phone Text Box

Phone textbox, adalah sejumlah control tambahan untuk Silverlight untuk windows phone, untuk mempercantik tampilan textbox, textbox dapat dipercantik dengan

Menambahkan Empty Text Field
Menambahkan Limit berapa jumlah karakter maksimal
Menambahkan icon pada textbox

Toggle Switch

Alternatif dari Checkbox adalah toggle switch control, memberikan look and feel lain untuk boolean property

Tilt Effect

Tilt Effect jika diterapkan pada button atau checkbox dan akan memberikan effect tilt pada saat ditekan

Transitions

phone toolkit juga menyediakan berbagai page animation, saat terjadi pergantian page, page transitions yang tersedia antara lain Roll, Rotate, Slide, Swivel, TurnStyle

Wrap Panel

Dan terakhir adalah wrap panel, sebenarnya control wrap panel ini telah disediakan pada WPF, namun pada Windows Phone Control ini tidak tersedia hingga saat toolkit ini direlease

Share this post: | | | |

Phone Toolkit For Windows Phone 7.1 (Mango)–Part 1

De_Joker — Thu, 12 Jan 2012 00:17:42 GMT

Hi Guys, aku baru2 ini browsing2 di Codeplex, dan menemukan Silverlight for Windows Phone Toolkit ini untuk kalian yang develop aplikasi di Windows Phone, sebelumnya Mas puja pernah nulis soal ini di blognya Rilis Terbaru Silverlight Toolkit telah mendukung WindowsPhone “ Mango “ namun pada tanggal 15 November 2011 sudah ada update baru lagi dari koleksi toolkit yang ada, pretty exciting too, karena mereka menyediakan beberapa fitur yang dapat membuat aplikasi menjadi cantik sekali sekaligus mempermudah development.

Don’t worry, control yang disediakan sangat mudah sekali digunakan, bahkan mereka menyediakan demo apps yang disertakan bersamaan dengan librarynya.

Auto Complete Box

Sekarang auto complete box datang dalam 2 rasa baru, yaitu standard single line items, dan juga double line items

Context Menu

Context menu, yang akan muncul jika sebuah control ditap untuk waktu yang cukup lama 1 – 2 detik, saat ditekan control yang lain akan mendapatkan animasi zoom out dan fade, walau nanti ada option juga jika ingin di disable

Date + Time Converters

Mengubah DateTime ke dalam format tertentu yang lebih user friendly untuk ditampilkan pada aplikasi, adapun beberapa format build in yang tersedia adalah:

hourly : format date time untuk hourly feeds
daily : format date time untuk daily feeds
relative : format date time terhadap tanggal hari ini, menggenerate hasil seperti pada screenshot dibawah ini
list view : format date time untuk tanggal seperti pada email di outlook
full view : format date time untuk tanggal dan jam

Date Time Picker

Menyediakan Datetime Picker, yang cukup apik, enak dilihat, dan enak untuk digunakan

Expander View

Menampilkan dan menghide Sub item, seperti pada Email Apps untuk Conversation

Gestures

Gesture Service, untuk Tap, Pinch, dan Flick, menangkap event

Tap (Menyentuh layar dengan jari),
Tap and Hold (Menyentuh layar dengan jari lalu menggerakkan jari tersebut tanpa meninggalkan layar),
Pinch sama seperti tap, tapi dengan menggunakan 2 jari
Flick, menyentuh dan menggerakkan object di layar,namun dengan cepat menggeser lalu melepaskannya

Hub Tile

Hub tile, menyediakan animasi gerakan random untuk sebuah tile, yang dapat berisi judul, message, dan gambar, menarik sekali jika digunakan untuk menampilkan informasi

Share this post: | | | |

PHP Manager for IIS

reyza — Wed, 11 Jan 2012 16:36:08 GMT

Q : Kenapa harus bahas IIS?

A : Ini karena perkembangan status MVP yang awalnya ASP.NET / ASP –> ASP.NET (tanpa ASP, karena ASP classing mungkin dianggap sudah wafat) –> ASP.NET / IIS (ada tambahan kewajiban baru untuk “bisi” IIS juga).

Pertanyaan lain…

Q : Kenapa PHP ?

A : Karena memang platform ini banyak digunakan untuk mengembangkan aplikasi web saat ini. Dan platform ini terdapat pada platform berbasis UNIX maupun Windows.

Saat ini PHP dapat kita dampingkan dengan web server Apache, sering kita dengar XAMPP sebagai salah satu paket komplit dengan item Apache sebagai web server, MySQL sebagai database server, FileZilla sebagai ftp server dan Mercury sebagai mail server dengan control panel yang telah disiapkan XAMPP untuk melakukan kontrol item-item tersebut. Selain itu XAMPP memungkinkan pengguna memilih versi PHP yang diinginkan dengan mudah.

Pada posting ini akan kita coba PHP Manager for IIS yang diharapkan dapat membantu pengguna platform berbasis Windows untuk mengkonfigurasi PHP pada web server IIS dengan mudah. Untuk mendapatkan PHP Manager for IIS dapat dikunjungi http://phpmanager.codeplex.com/, sampai saat ini PHP Manager for IIS telah mencapai versi 1.2 dengan update terakhir pada tanggal 27 Juni 2011. Silakan pilih ingin menggunakan versi 32bit atau 64bit.

{PHP Setup}

Setelah file PHPManagerForIIS-1.2.0-x64.msi (64bit) diunduh dan diinstall maka silakan buka IIS Manager dari Administrative Tools dan diharapkan akan menemui fitur PHP Manager seperti pada gambar di bawah ini.

Dan berikut adalah antarmuka dari PHP Manager ini.

Pastikan IIS telah support CGI sebelum melakukan Langkah pertama yaitu melakukan register PHP. Klik Register new PHP version untuk menentukan lokasi dari file php-cgi.exe.

Kita dapat melakukan Register new PHP version lebih dari satu kali dengan versi PHP yang berbeda tentunya. Setelah proses register berhasil dilakukan maka secara otomatis link button pada antarmuka ini menjadi “hidup” dan dapat diklik. Begitu juga informasi mengenai versi PHP yang aktif juga ditampilkan, seperti pada gambar berikut ini.

Bila versi PHP yang diregister lebih dari satu maka dengan mudah kita dapat memilih versi mana yang ingin di aktifkan dengan memilih tombol Change PHP version.

Setelah PHP berhasil diregister maka untuk memastikan PHP telah “berjalan” dengan baik maka biasanya developer akan membuat file *.php dan menuliskan fungsi <? phpinfo(); ?> didalamnya. Dengan PHP Manager for IIS hal tersebut sudah difasilitasi dengan mengklik tombol Check phpinfo() dan hasilnya dapat dilihat langsung seperti berikut.

{PHP Settings}

Pada bagian ini terdapat setting yang berhubungan dengan php.ini dan setting pengelolaan log. Untuk mengelola atribut dan value pada php.ini dipermudah dengan bantuan fitur dengan mengklik tombol Manage all settings.

Atribut dan value yang kita dilihat di atas adalah berdasarkan file php.ini. Dengan fitur ini maka pengguna akan dengan mudah mengganti nilai atribut dengan mudah tanpa perlu mengedit file php.ini secara langsung.

Fitur lain adalah melakukan konfigurasi error reporting dengan cara yang dapat dilihat pada gambar di bawah ini.

{PHP Extensions}

Untuk mengelola extension pun sangat mudah. Pada fitur PHP Extensions ini pengguna akan dapat mudah melihat mana saja extension yang enabled dan mana yang disabled. Dan dengan mudah pula mengubah status extension yang diinginkan menjadi enabled atau sebaliknya dengan cara klik kanan pada extension yang diinginkan kemudian pilih status yang diinginkan.

Untuk menambah extension pun sangat mudah cukup dengan memilih tombol Add an extension, kemudian pilih lokasi fil e*.dll yang merupakan extension yang akan ditambahkan.

Mudah bukan? Selamat mencoba dan selamat berakhir pekan.

Share this post: | | | |

[ASP.NET] The latest Release of AJAX Control Toolkit is November 2011!

reyza — Wed, 11 Jan 2012 16:33:05 GMT

Setelah sekian lama akhirnya AJAX Control Toolkit kembali hadir dengan update terbaru dengan beberapa fitur baru dan perbaikan fitur yang telah ada. Sebelum membahas fitur-fitur tersebut, berikut adalah beberapa informasi yang mungkin diperlukan pagi rekan yang baru saja memulai menggunakan AJAX Control Toolkit yang biasa disingkat dengan ACT.

{Dimana…dimana…dimana…}

Q : Dimana mendapat ACT?

A : Silakan berkunjung ke alamat berikut : http://ajaxcontroltoolkit.codeplex.com

Jangan khawatir terdapat ACT untuk .NET 4.0 dan .NET 3.5.

{Bagaimana…bagaimana…bagaimana}

Bagaimana cara menggunakannya? Satu hal yang harus diingat, tempat projectnya adalah bertipe website atau webapplication. Jangan gunakan library ini untuk template project Silverlight, WP7 atau WPF. Pada contoh di bawah ini saya akan menggunakan template project Web Site. Setelah sebuah Web Site dibuat jangan lupa juga untuk menambahkan ASP.NET Folder –> Bin sebagai rumah dari AjaxControlToolkit.dll yang didapat dari link download di atas.

Setelah itu tinggal tambahkan “sesuatu” pada web.config agar pada halaman ASPX control-control ACT dapat langsung dinikmati tanpa perlu pendaftaran prefix pada setiap halaman. Berikut adalah baris-baris yang dapat ditambahkan :

   1:  <pages>

   2:    <controls>

   3:      <add tagPrefix="ajaxToolkit" namespace="AjaxControlToolkit" assembly="AjaxControlToolkit"/>

   4:    </controls>

   5:  </pages>

Contoh di atas adalah untuk web.config pada ASP.NET 4.0, sedangkan pada ASP.NET 3.5 biasanya cukup menambahkan baris ke-3 saja.

{Hello World dengan ACT}

Sekarang kita akan membuktikan bawah ACT sudah dapat digunakan dengan lancar pada halaman ASPX. Pembutikan pertama adalah sudah terlihat intelisense seperti ini pada editor ASPX.

Selanjutkan kita gunakan satu control dan kita lihat apakah bisa terlihat saat page ASPX di publish pada web browser, berikut contoh dari control ACT yang digunakan, mudah dan menyenangkan, yaitu Twitter Control :)

   1:  <body>

   2:      <form id="form1" runat="server">

   3:      <div>

   4:          <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

   5:          </ajaxToolkit:ToolkitScriptManager>

   6:          <ajaxtoolkit:twitter ScreenName="mrezafaisal" Mode="Profile" runat="server"></ajaxtoolkit:twitter>

   7:      </div>

   8:      </form>

   9:  </body>

Gampang bukan?

{Fitur baru dan belum pernah dibahas}

Control Twitter di atas adalah control yang baru saya penulis lihat setelah melihat sample dari ACT (maklum sudah lama cek fitur terbaru ACT). Fitur-fitur baru dan baru dilihat lainnya adalah :

Gravatar (baru liat).
Baloon Popup (update November 2011).
Penambahan kemampuan pada control Tabs (update November 2011).

Gravatar

Gravatar adalah “Globally Recognized Avatar” dari gravatar.com yang fungsinya untuk menampilkan icon avatar pada halaman website. Penggunaannya sederhana dan mudah cukup seperti berikut.

   1:  <body>

   2:      <form id="form1" runat="server">

   3:      <div>

   4:          <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

   5:          </ajaxToolkit:ToolkitScriptManager>

   6:          <ajaxToolkit:Gravatar ID="Gravatar1" Email="reza.faisal@gmail.com" Size="100" Rating="R" runat="server" />

   7:      </div>

   8:      </form>

   9:  </body>

Bila email kita sudah terdaftar dan sudah memiliki icon avatar maka secara otomatis akan dapat dilihat icon avatar tersebut.

Baloon Popup

Berikut adalah control baru yang bisa ditemui pada ACT update bulan November 2011 ini. Control ini berfungsi untuk memberikan keterangan pada control input ASP.NET saat mouse berada pada control tersebut seperti pada gambar berikut ini.

Untuk membuat hal ini terjadi kita perlu 2 kontrol pendahuluan, yaitu control Textbox sebagai control yang akan diberika keterangan dengan Baloon Popup, dan control Panel sebagai control yang untuk menulis pesan. Berikut adalah contohnya :

   1:  <body>

   2:      <form id="form1" runat="server">

   3:      <div>

   4:          <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">

   5:          </ajaxToolkit:ToolkitScriptManager>

6:

   7:          <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

8:

   9:          <asp:Panel ID="Panel1" runat="server">

  10:              Ini text box.

  11:          </asp:Panel>

12:

  13:      </div>

  14:      </form>

  15:  </body>

Setelah kedua control tersebut ada, maka kita tinggal tambahkan control Baloon Popup seperti berikut ini :

   1:  <ajaxToolkit:BalloonPopupExtender ID="BalloonPopupExtender1"

   2:  TargetControlID="TextBox1"

   3:  BalloonPopupControlID="Panel1"

   4:  Position="BottomRight"

   5:  BalloonStyle="Rectangle"

   6:  BalloonSize="Small"

   7:  UseShadow="true"

   8:  DisplayOnMouseOver="true"

   9:  DisplayOnClick="true"

  10:  runat="server" />

.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }

Yang perlu diperhatikan adalah pada baris ke-2 yang menunjuk ID dari control Textbox yang akan diberi keterangan, dan pada baris ke-3 yaitu panel yang akan ditampilkan sebagai pesan dalam bentuk balon. Kemudian ada 3 style balon yang dapat digunakan yaitu Rectangle, Cloud dan Custom jika ingin bentuk yang lain. Sedangkan pada baris ke-8 dan ke-9 adalah prilaku yang ditentukan untuk membuat pesan dimunculkan.

Tabs

Ada 3 hal baru yang akan kita temui pada control Tabs, yaitu :

Tab Vertikal.
Loading content tab ketika tab diaktifkan.
Mengaktifkan tab dengan menggunakan navigasi dari keyboard.

Untuk menggunakan fitur tambahan pertama cukup dengan menggunakan atribut UserVerticalStripPlacement seperti contoh berikut :

   1:  <ajaxToolkit:TabContainer ID="TabContainer1"

   2:      Height="100"

   3:      UseVerticalStripPlacement="true"

   4:      runat="server">

   5:      <ajaxToolkit:TabPanel runat="server">

   6:          <HeaderTemplate>Tab 1</HeaderTemplate>

   7:          <ContentTemplate>Isi tab 1</ContentTemplate>

   8:      </ajaxToolkit:TabPanel>

   9:      <ajaxToolkit:TabPanel runat="server">

  10:          <HeaderTemplate>Tab 2</HeaderTemplate>

  11:          <ContentTemplate>Isi tab 2</ContentTemplate>

  12:      </ajaxToolkit:TabPanel>

  13:  </ajaxToolkit:TabContainer>

Untuk fitur load content on demand atau ketika tab diaktifkan dapat dilihat pada contoh di bawah ini.

   1:  <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="128px"

   2:      Width="332px" OnDemand="true">

   3:      <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Tab 1" OnDemandMode="None">

   4:          <ContentTemplate>

   5:              <%= DateTime.Now.ToString("T") %>

   6:          </ContentTemplate>

   7:      </ajaxToolkit:TabPanel>

   8:      <ajaxToolkit:TabPanel runat="server" HeaderText="Tab 2" ID="TabPanel2" OnDemandMode="Once">

   9:          <ContentTemplate>

  10:              <%= DateTime.Now.ToString("T") %>

  11:          </ContentTemplate>

  12:      </ajaxToolkit:TabPanel>

  13:      <ajaxToolkit:TabPanel ID="TabPanel3" runat="server" HeaderText="Tab 3" OnDemandMode="Always">

  14:          <ContentTemplate>

  15:              <%= DateTime.Now.ToString("T") %>

  16:          </ContentTemplate>

  17:      </ajaxToolkit:TabPanel>

  18:  </ajaxToolkit:TabContainer>.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Untuk menggunakan fitur ini maka cukup gunakan atribut OnDemand=”true” seperti pada baris ke-2. Pada contoh di atas terdapat 3 tab seperti berikut :

Pada masing-masing tab terdapat penggunaan atribut OnDemandMode, dengan nilai berikut :

None, mode ini digunakan apabila kita ingin content tidak mengikutin “aturan OnDemand” artinya content dari tab ini akan dirender saat halaman pertama kali diload.
Once, pada tab kedua digunakan nilai OnDemandMode=”Once” artinya content dari tab ini hanya sekali saja dirender saat tab diaktifkan (content belum dirender saat halaman pertama kali diload).
Always, tab ketiga ini memungkinkan content selalu dirender bila tab diaktifkan.

Agar semakin jelas bisa dilihat hasilnya di bawah ini.

Ini adalah nilai pada content tab 1 ketika halaman pertama kali di load. Kemudian kita mengaktifkan tab ke-2, dipastikan nilai jam pada content tab ini akan berbeda dan lebih baru dari tab ke-1.

Begitu juga tab ke-3 akan lebih baru lagi jika dibanding dengan tab ke-1 dan ke-2. Bedanya tab ke-1 dan ke-2 contentnya tidak akan berubah lagi, sedangkan tab ke-3 akan terus berubah saat tab tersebut diaktifkan.

Selanjutnya adalah fitur navigasi tab dengan keyboard, dengan menggunakan tombol panah kiri kanan atau HOME dan END.

Sekian dahulu bahasan tentang ACT, semoga ada manfaatnya.

Share this post: | | | |

Geeks Portal

How to Debug CRM 2011 Plugin

How to Capture WCF/HTTP Post using Fiddler on IIS server

iTextSharp

MVVM Light Toolkit - 6 Creating SL-XNA project with MVVM Toolkit

Creating a New SL-XNA Project then add MVVM Toolkit

CRM 2011 SDK explanation Part 1

Google map is so god damn easy

Ninject and customMembership asp.net mvc 3

MVVM Light Toolkit - 5 Integrating Model to View Model using DispatcherHelper

MVVM Light Toolkit - 4 Sending Message from ViewModel to View

Preparing the Project

Sending and Receiving Message

Conclusion

MVVM Light Toolkit - 3 Creating New Page and Navigation

How To Do It in a Windows Phone Application Project

How to do it in a MVVM Toolkit Project

Reviewing the two Development Style

MVVM Light Toolkit - 2 Understanding MVVM

Creating Your First MVVM Light Toolkit Project

MVVM Light Toolkit - 1 Introducing MVVM Light Toolkit

TSQL Tuning again

The Amazing Nokia Lumia Developer Day

ASP.NET/IIS *MVP Summit* draft schedule

Building Backend Service for Mobile Application

How does Web Technology help Mobile App Development?

Saving Changes Is Not Permitted On SQL Server 2008. How To Solve?

Microsoft Technology Update: ASP.NET vNext

Infografik Windows Phone selama 2011

Silverlight–XNA Framework

Phone Toolkit For Windows Phone 7.1 (Mango)–Part 2

List Picker

Lockable Pivot

Long List Selector

Multi Select List

Performance Progress Bar

(Animasi pada performance progress bar adalah titik-titik merah yang bergerak di bagian atas)

Phone Text Box

Toggle Switch

Tilt Effect

Transitions

Wrap Panel

Phone Toolkit For Windows Phone 7.1 (Mango)–Part 1

Auto Complete Box

Context Menu

Date + Time Converters

Date Time Picker

Expander View

Gestures

Hub Tile

PHP Manager for IIS

[ASP.NET] The latest Release of AJAX Control Toolkit is November 2011!

ASP.NET/IIS MVP Summit draft schedule