December 2010 - Posts

Hiding Iphone UrlBar/Address Bar

Finally i found out what went wrong.

so in order for this thing to run, you need a page which have minimum height, mine is around 415px to get it right, to hide completely the urlbar.

   1: .minimal
   2: {
   3:     min-height:415px;
   4: }

the JS is similar like any where you  find on other pages. put it on head

   1: addEventListener("load", function (event) {
   2:           setTimeout(function () { window.scrollTo(0, 1); }, 1000);
   3: }, false);

This is Tricky on sencha touch

I’ve got a Top toolbar docked top and bottom, this works fine, but when on landscape because of the min-height the dock bottom toolbar is not visible.

it make sense. i even try setting the panel height according to the viewport height but none works. it’s like it has to be direct css , i also move the code to onReady it’s the same effect

   1: Ext.setup({onReady:function(){
   2:     window.scrollTo(0,1);
   3: }})
   1: var orientation = Ext.getOrientation();
   2:        var navigation;
   3:        if (orientation != 'landscape') {
   4:            navigation = new Ext.Panel({ id: 'mainpanel', cls: 'htmlcontent,fullscreen:true,...}
   5:        else {
   7:            navigation = new Ext.Panel({ id: 'mainpanel', cls: 'htmlcontent2', fullscreen: true,...}
   8:        }
Share this post: | | | |
Posted by cipto with 1 comment(s) Sprite and Image optimization Framework Review

it’s still on preview 2.

What so great about this is, you can combine all images into 1, with out picture editing and the Framework will make the sprite image for you .

it’s during the application_Startup i think based on documentation.

so it will add a bit over head when you first load the application. this framework will See what ever folder under the Defaut Directory (App_Sprites) or what you set as root.

and generate the Sprite image for the image under that control.

For example you make App_Sprites\Menu than on Menu there are: btnlogin.png, btnHome.png,btnProduct.png, it will generate App_Sprites\Menu\Sprite0.png . which combine all of that images, Plus it will generate HighCompact.css (The Base 64 images)  and LowCompact.css.

this framework was designed to include highcompact(inline images) when it’s supported,or sprite when not supported.

Now i have try the Server control on webform, but it generates the Wrong class .

it add the _AppSprites_[subfolder1]_[subfolder2] while if you see on the CSS generated it’s directly .[subfolder1]_[subfolder2].

anyway so just do it manually:

copy paste to src the HighCompact.css Base 64 generated.

so the right Tag is: for example img tag.( ah perhaps set it on the makecssClassName), anyway: here is how to do it manually:

   1: //include only low impact
   2: <link href="App_Sprites/Menu/lowCompat.css" rel="stylesheet" type="text/css" />
   4: //the Image
   5: <img alt="" class="Menu_button_home-png" height="160" src="data:image/png;base64,..."/>

Now the Most important thing to remember is, When to use Sprite?, yes it reduce http downloads back and forth. But it has some notes:

  • Sprite Becomes more important when it is used on multiple pages, so if only just 1 page and not so much what for?
  • it will be ignored by Crawlers of search Engine, meaning not searchable
  • if on browser accessibility mode , the imaget won’t appear
  • No alt text a.k.a no tooltip for that image
  • Don’t sprite image which is :”Content Images” , for example your Product Image, so just sprite decorative images type, like button,grid header image etc.

Updated 2011/01/04

I’ve found a problem on IE7 only. because the IE7 would never know what type of image it is when you set the src=base64”.

the image would display but with a Box border and a Red Cross. like if the browser doesn’t know what type is that

So in order to workaround this i do checking on server if it’s IE7 than use Regular URL on the src

Share this post: | | | |
Posted by cipto with 1 comment(s)

New Books For reading

Here are the list of interesting books currently and i will read. I’ll open 2011 with more knowledge Smile,

“read the manual” to get the features out and can be applied on your app.

  • The Developer’s Guide to Social Programming: Building Social Context Using Facebook, Google Friend Connect, and the Twitter API, by mark.d.hwaker
  • Programming Windows Identity Foundation, MsPress
  • Windows Azure Platform, Apress
  • Developing Applications for the Cloud on the Microsoft® Windows Azure™ Platform,MsPress
  • Programming Windows Azure, O'Reilly
  • Inside Microsoft® SQL Server® 2008: T-SQL Querying, MsPress
  • Programming Sql server 2008, MsPress
  • Microsoft SQL 2008 internals, MsPress
Nice Choice or not? Smile
Share this post: | | | |
Posted by cipto with 1 comment(s)

Upgrading to 4.0 and Vs2010

actually the 4.0 has been there for quite long time, since now everything is shifted up to the vs2010 . it’s about time i take a look and review what is new.

and enhance where it should to take advantage of the new features.

Beside All the “Expandable Feature”,

What i really find useful are:

  • EnableCDN on the scriptManager. there is also already a property for telerik .
  • Enhanced Browser Capability, at last now it gets attention, this is very useful especially for mobile version.
  • We Can Control clientID generated, as auto, predictable,or static. even on the Grid, now support RowPrefix
  • Refactor on caching code , and the autocache thing
  • Compressed using Gzip for Session State Server and SQL Server session state

When we upgrade to 4.0 from 3.5

it preserve our clientid to auto and renderingCompability to 3.5 automatically when using vs upgrade tool, by adding it to web.config .

so no need to afraid it will break your control generatedID and functional

<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID">

I also encounter the Error : “Could not load type 'System.Data.Entity.Design.AspNet.EntityDesignerBuildProvider'”

to workaround this , just add on assemblies tag:

<add assembly="System.Data.Entity.Design, Version=, Culture=neutral, PublicKeyToken=b77a5c561934e089" />

the 4.0 has more strict validateRequest, to support our previous validaterequest=false

add to the httpruntime tag

<httpRuntime requestValidationMode="2.0"/>

I’ve Upgrade my Publish.bat for my Cruise control.Net,to use the new Msbuild 4.0

on the Microsoft/Framework/4.0/Msbuild.exe folder

What i can’t still find is , I’ve read that Webresource.axd now can combined on 4.0, but i think we still can’t.. any solution guys?


Next :

I am gonna review the VS 2010 Test Manager thing, and the Scott Gu New links Css Sprite HttpModule

how to build only what changes


Share this post: | | | |
Posted by cipto with 1 comment(s)

Atomiq Code Similarity Finder

I follow the NimblePros article on devproconnection and found their other product, the Atomic Code similarity finder. it can find the same pattern on your code and show you the same result, Plus it you can click the wheel and you can see the whole picture of your Code and How it relates to each other.



Now each of that string mean it relates one and another , the one that refer to itself means it’s duplicated inside the same class.

Gee aint it a mess…

Now, I also do a search how Assembly Size Affect performance, some argue yes , some not. follow Discussion here

but it yields another Question like : multiple Assemblies Vs Single Large assembly.

which single is better than multiple.

this is used perhaps more on refactoring, if performance does not affect that much.

Share this post: | | | |
Posted by cipto with no comments on google Chrome

Ok this is also old one, it’s here for documentation only.

Do you ever encounter that your direct line ‘‘url’,parameters’ just won’t open on Chrome?

perhaps for more secure reason?

if you see the site that is already working, it first open a blank window than automatically redirect to the url.

the answer is on the Google Chrome Faq.

   1: var w =;
   2:     w.opener = null;
   3:     w.document.location = "";
Share this post: | | | |
Posted by cipto with 1 comment(s)

Print on Next Page with PrintDocument when it’s exceeded the paper height

This is a bit old one, it’s here for log only. So you have a POS printer and the application , Now with the only choice you’ve got to print with built in is PrintDocument. there is a library of but i haven’t test it yet.

but by default , i use the built in printDocument, when it do print, when the page reach it’s height, it just stop. what the? so after looking around there is no solution, here is what i did.

   1: private bool PrintMore = false;
   2: private int pagecounter=2;
   3: private int PrintUntilIndex = 0;
   4: float pageheight = 0;
   5: private void PrintSales(List<Sale> Sales)
   6: {
   7:     PrintDocument recordDoc;
   8:     // Create the document and name it
   9:     recordDoc = new PrintDocument();
  10:     recordDoc.DocumentName = "Receipt";
  11:     // Set Printer By Name
  12:     recordDoc.PrinterSettings.PrinterName = "Epson 220 POS";
  13:     recordDoc.PrintPage += new PrintPageEventHandler(this.PrintReceiptPage);
  14:     recordDoc.Print();
  16:     recordDoc.PrintPage -= new PrintPageEventHandler(this.PrintReceiptPage);
  18:     // Dispose of document when done printing
  19:     recordDoc.Dispose();
  21:     while (PrintMore == true)
  22:     {
  23:         // Create the document and name it
  24:         recordDoc = new PrintDocument();
  25:         recordDoc.DocumentName = "Receipt" + pagecounter;
  26:         pagecounter++;
  27:         recordDoc.PrintPage += new PrintPageEventHandler(this.PrintReceiptPage);
  28:         // Preview document
  29:         //PrintPreviewDialog dlgPreview = new PrintPreviewDialog();
  30:         //dlgPreview.Document = recordDoc;
  31:         //dlgPreview.ShowDialog();
  33:         recordDoc.Print();
  35:        recordDoc.PrintPage -= new PrintPageEventHandler(this.PrintReceiptPage);
  37:         // Dispose of document when done printing
  38:         recordDoc.Dispose();
  39:     }
  40:     //reset value
  41:     pagecounter = 1;
  42:     PrintUntilIndex = 0;
  43: }
  45: private void PrintReceiptPage(object sender, PrintPageEventArgs ev){
  46:      //Get Paper Height 
  47:      pageheight = ev.PageSettings.PaperSize.Height;
  49:      float linesPerPage = 0;
  50:      float yPosition = 0;
  51:      int RowMargin = 15;
  52:      int marginRight = 220;
  53:      int RightAfterProductName = 80;
  54:      float leftMargin = 0;
  55:      float topMargin = ev.MarginBounds.Top;
  56:      string line = null;
  57:      Font printFont = new Font("Arial",
  58:        10, System.Drawing.GraphicsUnit.Point);
  60:      Font GrandTotalFont = new Font("Arial",
  61:        12, System.Drawing.GraphicsUnit.Point);
  62:      int RightMostMargin = 120;
  63:      SolidBrush myBrush = new SolidBrush(Color.Black);
  64:      // Work out the number of lines per page, using the MarginBounds.
  65:      linesPerPage = ev.MarginBounds.Height / printFont.GetHeight(ev.Graphics);
  67:      //Header
  68:      if (PrintMore == false)
  69:      {
  70:          //Print your First Page Header Title 
  71:          ev.Graphics.DrawString("Header", printFont, myBrush, leftMargin, yPosition, new StringFormat());
  72:          yPosition += RowMargin;
  73:      }
  74:          //Loop Through List
  75:          foreach (var item in Sales.Skip(PrintUntilIndex).Take(Sales.Count - PrintUntilIndex))
  76:          {
  77:               if (pageheight < yPosition)
  78:                 {
  79:                     break;
  80:                 }
  81:               //More Printing
  82:               if (pageheight < yPosition)
  83:              {
  84:                  break;
  85:              }
  87:          PrintUntilIndex++;
  88:          } 
  89:       if (pageheight < yPosition)
  90:     {
  92:         PrintMore = true;
  93:     }
  94:     else
  95:         PrintMore = false;
  96:      }
  98:  }
Share this post: | | | |
Posted by cipto with no comments

IE Leak

Just now I’ve just enhance my product Gallery, which has group panel on left, and when you browse expand collapse, it loads quite number of images.

and if you see on task manager,the process IE consume more and more memory even when you Refresh.

now this is what happened when you don’t properly remove the dom that are being created.

How to remove DOM being created?: Read here , take the removechildSafe and discardElement function.

If we want to remove and element, first remove the ChildElement using the removechildSafe and than set this parent Element InnerHTML=’’;

Now i also spotted some circular reference, which the property inside our function/object is referencing the object outside of it.

now i make a function to dispose it all. set to Null than remove the object it self finally

i also make some variables set to null, also all variable that is element :

   1: var div = document.createElement("div");
   2: //do some logic here
   3: //use the div variable above
   6: //dispose, free up the reference
   7: div=null

I also unbind all the event for that object first before set to null.

Now after refresh, the memory regain what it should, it’s lower and lower, and improve the Speed of animation on IE.

when appendChild we also need to be structured, so the parent first than the child or else will create leaks


For Circular Leaks:

“As described in detail in Understanding and Solving Internet Explorer Leak Patterns, the JScript garbage collector in previous versions of Internet Explorer manages the lifetime of JScript objects but not of DOM objects. As a result, the JScript garbage collector cannot break circular references between DOM objects and JScript objects, and memory leaks occur. In Microsoft Internet Explorer 6, these circular references are broken when the Internet Explorer process terminates. In Internet Explorer 7, these circular references are broken when users navigate away from the page that contains the leaks.

In Internet Explorer 8, the JScript garbage collector treats DOM objects referenced by JScript objects as JScript objects. Rather than wait until page navigation as in Internet Explorer 7 or process termination as in Internet Explorer 6, the garbage collector manages the lifetime of these DOM objects and breaks circular references whenever possible throughout the lifetime of the site.”

Share this post: | | | |
Posted by cipto with 2 comment(s)

Asp.Net MVC mocking ConfigurationManager

Here is the common scenario that you might encountered, your Repository use ConfigurationManager. great how the hell do i mock it? it’s static and reading the file. it actually violate the rule of testing to make saving to db. what the heck Open-mouthed smile, in this case i just want the test to run my tests scenario.

Make new Interface IConfigurationManager

Make new ConfigurationManagerWrapper inherit IConfigurationManager

Make the Controller constructor accept IConfigurationManager

Make the Repository constructor accept IConfigurationManager

Passed in Controller IConfigurationmanager to Repository

now you can mock it

   1: public interface IConfigurationManager
   2:    {
   3:        NameValueCollection AppSettings
   4:        {
   5:            get;
   6:            set;
   7:        }
   8:        ConnectionStringSettingsCollection ConnectionStrings
   9:        {
  10:            get;
  11:            set;
  12:        }
  13:        ConnectionStringSettings this[int index] { get; }
  14:        ConnectionStringSettings this[string connectionStringName] { get; }
  15:        T GetSection<T>(string sectionName);
  16:    }

   1: using System.Collections.Specialized;
   2:  using System.Configuration;
   4:  public class ConfigurationManagerWrapper : IConfigurationManager
   5:  {
   6:      public NameValueCollection AppSettings
   7:      {
   8:          get;
   9:          set;
  10:      }
  11:      public ConnectionStringSettingsCollection ConnectionStrings
  12:      {

13: get;

  14:          set;
  15:      }
  17:      public T GetSection<T>(string sectionName)
  18:      {
  19:          return (T)ConfigurationManager.GetSection(sectionName);
  20:      }
  23:      public ConnectionStringSettings this[int index]
  24:      {
  25:          get
  26:          {
  27:              return ConfigurationManager.ConnectionStrings[index];
  28:          }
  30:      }
  32:      public ConnectionStringSettings this[string connectionStringName]
  33:      {
  34:          get
  35:          {
  36:              return ConfigurationManager.ConnectionStrings[connectionStringName];
  37:          }     
  38:      }
  41:  }
   1: private OrderRepository orderRepository = new OrderRepository(new ConfigurationManagerWrapper() { ConnectionStrings=ConfigurationManager.ConnectionStrings,AppSettings=ConfigurationManager.AppSettings});
   2:       /// <summary>
   3:       /// Make Entry here for this depedency
   4:       /// </summary>
   5:       /// <param name="configurationManager"></param>
   6:       public OrderController(IConfigurationManager configurationManager)
   7:       {
   8:           orderRepository = new OrderRepository(configurationManager);
   9:       }
  10:       /// <summary>
  11:       /// MVC needs empty constructor
  12:       /// </summary>
  13:       public OrderController()
  14:       { 
  16:       }
   1: private MyDataContext context;
   2: private IConfigurationManager _configurationmanager;
   3: public OrderRepository(IConfigurationManager configurationManager)
   4: {
   5:     _configurationmanager = configurationManager;
   6: }
   7: public void MyTestMethod(int x, int y, int z, int a, int b)
   8: {
   9:  using (context = new MyDataContext (_configurationmanager.ConnectionStrings["myconnection"].ConnectionString))
  10:   { 
  11:   }
  12: }    

Here comes the good part Smile:

   1: [TestMethod]
   2:        public void TestSomething()
   3:        {
   4:            //Mock Configuration Manager:
   5:            var configurationmanager = new ConfigurationManagerWrapper();
   6:            configurationmanager.ConnectionStrings = new ConnectionStringSettingsCollection();
   7:            configurationmanager.ConnectionStrings.Add(new ConnectionStringSettings() { ConnectionString = @"Data Source=.\SQL2008R2;Initial Catalog=MyDBName;Integrated Security=True", Name = "myconnection", ProviderName = "System.Data.SqlClient" });
   8:            //Passed In ConfigurationManager
   9:            var ordercontroller = new OrderController(configurationmanager);
  10:            var formcollection = new MyTestMethodModel();
  11:            //set some property
  12:            formcollection.a=0;
  13:            var request = new Mock<HttpRequestBase>();
  15:            request.Setup(r => r.HttpMethod).Returns("POST");
  16:            //mock the httpcontext
  17:            var mockHttpContext = new Mock<HttpContextBase>();
  18:            var application = new Mock<HttpApplicationStateBase>();
  21:            mockHttpContext.Setup(c => c.Request).Returns(request.Object);
  22:            mockHttpContext.Setup(c => c.Application).Returns(application.Object);
  23:            //fake controllercontext
  24:            var controllerContext = new ControllerContext(mockHttpContext.Object
  25:            , new RouteData(), new Mock<ControllerBase>().Object);
  28:            ordercontroller.ControllerContext = controllerContext;
  29:            //fake one, just so that it doesn't failed
  30:            ordercontroller.ValueProvider = new NameValueCollectionValueProvider(new System.Collections.Specialized.NameValueCollection(), new System.Globalization.CultureInfo("en-US"));
  31:            //MVC will use the DefaultModelBinder to bind each form keys collection to mapped to the mvc model
  32:            //if not found that model property will result null, so let's just assume it's already Converted to the strong typed object
  33:            //just pass it through
  34:            var returnresult = ordercontroller.MyTestMethod("xml", formcollection);
  35:            Assert.AreEqual(returnresult.GetType(), new MyResult<int>(0).GetType());
  36: }
Share this post: | | | |
Posted by cipto with 1 comment(s)
Filed under: