Thread: mobile xmlpackages

I am working on designing a mobile site but am noticing that when I call an xml package, it pulls from skin_1/XmlPackages and not mobileskin_1/XmlPackages. Is this a bug or is there something I need to change?

I have done a complete custom mobile site- i built on the base foundation that was included in ml9. However there was quite a bit to fix up and you need to get your hands dirty -you need to have source to make it work.

The part you need is in the XMLPackage2.cs file in the ASPDotNetStorefrontCore project. Look for the following method:

FullPackageUrl

you will need to branch in that method to point to whatever mobile/skin folder structure you are using. this will require a IsMobile property to be added to the class and a new overload of one or two of the class constructors to bass the ismobile value into the class.

the whole mobile rewrite was not insignificant but the basic plumbing was't that difficult. If you don't have source I would advise forgetting it and going for the vortx package.


ben

Thank you very much for this info fooster. I really appreciate it. Thankfully I have the source for v9. I'll give it a try in the morning!

I thought it would be much easier to put all the mobile xml package files in the mobile folder than create duplicate files and switch what the page pulls somehow.

I have taken the approach that all the urls must remain the same regardless of whether its a mobile formatted site or a desktop site. Creates less potential seo confusion, makes it transparent for the end user.

I defined a mobile xmlpackage string in showcategory.aspx/showproduct.aspx etc pages and then for the Account.aspx/Checkout.aspx type of pages i load a mobile specific user control in the appropriate place.

I also added IsMobile properties to assorted aspdnsf controls: search, account, shoppingcart and some others i can't think of so that i could really pare down and control the html that these produce. It worked so well I have ended up using the ismobile controls for the desktop site as well.

There were several overrides also added throughout source (GetAddToCartForm was rewritten)

I removed all ASP Ajax stuff and went down an HTML5 CSS3 Jquery route for the mobile site. Ended doing the same for the desktop site- its amazing how quicker it is without the MS Ajax stuff.

For Mobile detection i used the 51Degrees mobile module but commented out the mobile redirect section in the web.config.

Sounds a lot- and was quite but its worth it to get what you want.

Ben

When you are using the 51Degrees mobile module, how are you setting the m_ismobile value?

In the skinbase method GetTemplateName() i do the following:

Code:

 m_ismobile = CheckUserAgentForMobile();

that function just does some basic checking:

Code:

//let tablets have the full experience 51 degrees adds in lots of extra hooks into the request.browser stuff
if (HttpContext.Current.Request.Browser["is_tablet"] == "true")
                {
                    return false;
                }
                if (HttpContext.Current.Request.Browser["is_mobile"] == "true")
                {
                    return true;
                }

I also have a mobile override check in case someone wants to view the desktop site
even though they are on a mobile (cookie/qs based check).

Then i have ismobile available to all pages/controls that use SkinBase.

Thanks for this info! I am just running into one problem of getting the ismobile result within xmlpackage2. Am I missing a reference or something?

In the xmlpackage2 class find the master constructor which all of the overloads call and add a bool isMobile parameter to the end of the constructor sig. Then create a new overload of the constructor which you will be calling from your web project code with the isMobile param along with the other xmlpackage2 required params. Make sure that you adjust the other overloads so that they pass false as the isMobile parameter. This will allow all of the default xmlpackage calls to work as normal. when you want to use a mobile xmlpackage just use the overload that accepts the isMobile bool.

Hope that makes sense!

Can you provide an example line of code? I lost you. Here is what I have so far in xmlpackage2

Code:

private bool m_ismobile = false;

        public bool IsMobile
        {
            get { return m_ismobile; }
            set { m_ismobile = value; }
        }

I refer to the CheckUserAgentForMobile() in SkinBase won't I?

I'm away from my laptop at the mo so can't pull out any code.

The basic issue is that you need to set the isMobile property that you have put into xmlpackage2. In order to do this you need to pass a bool value in when ever you call the main method(s). So having decided in skinbase whether a request should be treated as isMobile, you need to create a new overload of the method that you want to call with a bool parameter.

Ben

I found the part where it needs changed to look in the MobileSkin_{0} folder for the xmlpackages. Is there no way to call in the value from skinbase?

Nope- you need to pass the value in when you are calling xmlpackage2. So edit the xmlpackage2.cs file so that you have acouple of extra overloads of the constructor and edit the main constructor like so:

Code:

   public XmlPackage2(string PackageName, Customer cust, int SkinID, String UserQuery, String AdditionalRuntimeParms, String OnlyRunNamedQuery)
            : this(PackageName, cust, SkinID, UserQuery, AdditionalRuntimeParms, OnlyRunNamedQuery, true, false) { } //this is edited so that any existing calls to this constructore will work as expected

        //Change to support passing IsMobile in
         public XmlPackage2(string PackageName, Customer cust, int SkinID, String UserQuery, String AdditionalRuntimeParms, String OnlyRunNamedQuery, bool UseExtensions)
            : this(PackageName, cust, SkinID, UserQuery, AdditionalRuntimeParms, OnlyRunNamedQuery, true, false) { } // CHANGE ismobile

        //END

        // remember, AdditionalQueryStringParms values must be properly urlencoded, they are added as runtime parms to the Xsl doc
        public XmlPackage2(string PackageName, Customer cust, int SkinID, String UserQuery, String AdditionalRuntimeParms, String OnlyRunNamedQuery, bool UseExtensions, bool isMobile) //BW CHANGE ismobile
{
...
//make your changes here to support MobileSkin_SkinId

Now you should be able to speifically let the class know that the package you are requesting si a mobile one.

Ben

When you say "Now you should be able to speifically let the class know that the package you are requesting si a mobile one.", do you mean pass the value somehow? Is that from skinbase?

Every time you want to call a mobile specific xmlpackage you would call one of the xmlpackage2 overloads that accepts a isMobile bool. The xmlpackage2 stuff gets called from a method in AppLogic (you will need an overload of the RunXmlPackage method that takes a isMobile bool which calls the appropriate modified method in xmlpackage2).

So for example in my search.aspx.cs page in the RunSearch method handler I have the following:

Code:

 if (this.IsMobile)
            {
                searchHTML = AppLogic.RunXmlPackage("mobile.pagesearch.xml.config",
                                                    null,
                                                    ThisCustomer,
                                                    ThisCustomer.SkinID,
                                                    string.Empty,
                                                    string.Format("SearchTerm={0}", searchTerm),
                                                    true,
                                                    false,
                                                    this.IsMobile); //last bool is to pass in the isMobile param

                ctrlPageSearch.Visible = false;
            }
            else
            {
                ctrlPageSearch.IsMobile = false;
                ctrlPageSearch.CssClass = "searchPage";
                ctrlPageSearch.SearchButtonCaption = "Search";
                ctrlPageSearch.SearchCaption = "What are you looking for?";
                searchHTML = AppLogic.RunXmlPackage("page.search.xml.config",
                                    null,
                                    ThisCustomer,
                                    ThisCustomer.SkinID,
                                    string.Empty,
                                    string.Format("SearchTerm={0}", searchTerm),
                                    true,
                                    false);//calling the overload that does not accept isMobile at all as a param

            }

So the first AppLogic.RunXmlPackage call calls an overload of that method that takes a isMobile bool parameter. This overload then calls the XmlPackage2 class constructor that accepts isMobile. Think of it like a chain.

The else bit changes some stuff to do with the modified SearchControl and just calls the default unmodified AppLogic.RunXmlPackage method.

I have this working for the most part. The only problem I see now is that when I call the topic (!XmlPackage Name="mobilehomepage"!), it is looking in Skin_1 instead of MobileSkin_1. Do you know where this process is at to I can change it to look at if the site is mobile?