Latest posts

• Piping in git bash

  November 15 2013

  Recently I had the need to save everything from git log for future reference. I knew it was possible to do using piping and this little simple thing is what I ended up with:

  git log | tee somefile.txt
  

  The example above will output everything from standard output to a file named “somefile.txt”. It is also possible to pipe it to the clipboad. This is what worked for me (on windows):

  git log | cat >> /dev/clipboard
  

  Maybe not something you need everyday but still useful I’d say.

• Tab authoring in Glimpse CTP1 - Styling rows and columns - Part 3

  September 22 2012

  In this the third post in the “Tab authoring in Glimpse” series, it will be all about styling and formatting your data.

  Styling columns

  Glimpse supports formatting column data in 5 different ways.

  • Strong
  • Emphasis
  • Underline
  • Sub
  • Raw

  Using the fluent helpers these styles are applied using extension methods chained onto a column.

  tabRow.Column("My data").Strong();
  

  At this point in time Glimpse does not support combined formatting. So applying Strong and Underlined to the same column won’t work. Now lets take a look at each one of them.

  Strong

  tabRow.Column("My data").Strong();
  

  Applies strong formatting to “My data”. Currently strong formatted data is displayed in bold.

  Emphasis

  tabRow.Column("My data").Strong();
  

  Applies emphasis to “My data”. Currently emphasis formatted data is displayed italicised.

  Underline

  tabRow.Column("My data").Underline();
  

  No surprises here. Underline formatted data will be displayed underlined.

  Sub

  tabRow.Column("My data").Sub();
  

  The data formatted with sub should be displayed slightly greyed out and with a smaller font size. Currently there seems to be a bug in Glimpse ignoring this formatting.

  Raw

  tabRow.Column("My data").Raw();
  

  Raw formatting doesn’t really make sense to apply to a string like “My data”. But if you want to display a link (anchor element) or have any other html in a column, this is what you need. Raw will basically skip html encoding the data on the client.

  Conditional column styles

  All the styles above can be conditionally applied in a very elegant way.

  tabRow.Column("My data").StrongIf( conditionIsTrue );
  

  If the condition is true, strong formatting will be applied. The same goes for all the conditional styles.

  • StrongIf( condition )
  • EmphasisIf( condition )
  • UnderlineIf( condition )
  • SubIf( condition )
  • RawIf( condition )

  An example

  Taking a look at how all this can be used we extend the example tab from part 1.

  We’ve added a column for links to documentation and a column displaying the time it took for the module to load. At this point the actual data for those columns are fake but it get’s the point across I think.

  

  And here’s the codez.

  public override object GetData(ITabContext context)
  {
      var plugin = Plugin.Create("Order", "Name", "Type", "Documentation", "Load time");
      var count = 0;
      var random = new Random();
  
      var requestContext = context.GetRequestContext<HttpContextBase>();
      foreach (var moduleKey in requestContext.ApplicationInstance.Modules.AllKeys)
      {
          var httpModule = requestContext.ApplicationInstance.Modules[moduleKey];
  
          var linkHtml = "<a href='http://readthedocs.com/module?={0}'>Read the docs</a>"
              .FormatWith(moduleKey);
  
          var loadTime = "{0} ms".FormatWith(random.Next(1000));
  
          plugin.AddRow()
              .Column(count++).Emphasis()
              .Column(moduleKey).Strong()
              .Column(httpModule.GetType().FullName).Underline()
              .Column(linkHtml).Raw()
              .Column(loadTime).Sub();
      }
  
      return plugin;
  }
  

  First we apply emphasis to the order column. Next we make the module name strong. In the third column we underline the module type name. In the forth column we want to display a link to the module documentation so we create an html anchor element and apply raw formatting to it. We finsish it off with displaying the load time slightly less “in your face” using sub formatting.

  Looks kind of good doesn’t it!?

  Styling rows

  Row styles are a bit special. Obviously they apply to rows but the key thing here is that although you can chain any of these onto a column, you must apply row styles last.

  tabRow
      .Column("Col 1").Column("Col 2").Column("Col 3")
      .Error();
  

  There’s no good “real world” example here but you should be aware of the options you have.

  • Error
  • Fail
  • Info
  • Loading
  • Ms
  • Quiet
  • Selected
  • Warn

  Below is an image displaying the different row styles in the same order as above.

  

  Conditional row styles

  As with column styles there’s an option for applying these styles based on a condition.

  If the condition returns true, the formatting will be applied. Here’s the method names of all the conditional row styles.

  • ErrorIf( condition )
  • FailIf( condition )
  • InfoIf( condition )
  • LoadingIf( condition )
  • MsIf( condition )
  • QuietIf( condition )
  • SelectedIf( condition )
  • WarnIf( condition )

  What’s next

  So we’ve covered how Glimpse allows you to style your data. In the next post we’ll look at another feature called TabLayout that allows you to control how your plugin looks and is structured.

  Your feedback is important so please share your thoughts in the Glimpse google group.

  Hope you feel inspired and will spend the next few hours creating your own plugins.

  Posts in this series

  • Tab authoring in Glimpse CTP1 - Introduction - Part 1
  • Tab authoring in Glimpse CTP1 - Sections, Rows and Columns - Part 2
  • Tab authoring in Glimpse CTP1 - Styling rows and columns - Part 3